diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index a34d674970..148b4ab1b5 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -63,7 +63,7 @@
                 let i = index;
                 trackBy: trackByFn
               "
-              [style.margin-left]="permission.margin + 'px'"
+              [ngStyle]="permission.style"
               class="custom-checkbox custom-control mb-2"
             >
               <input
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index c2220a30d2..8d034de1d5 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -1,4 +1,5 @@
 import { ApplicationConfiguration, ConfigState, GetAppConfiguration } from '@abp/ng.core';
+import { LocaleDirection } from '@abp/ng.theme.shared';
 import { Component, EventEmitter, Input, Output, Renderer2, TrackByFunction } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { Observable, of } from 'rxjs';
@@ -7,8 +8,8 @@ import { GetPermissions, UpdatePermissions } from '../actions/permission-managem
 import { PermissionManagement } from '../models/permission-management';
 import { PermissionManagementState } from '../states/permission-management.state';
 
-type PermissionWithMargin = PermissionManagement.Permission & {
-  margin: number;
+type PermissionWithStyle = PermissionManagement.Permission & {
+  style: string;
 };
 
 @Component({
@@ -79,21 +80,25 @@ export class PermissionManagementComponent
 
   trackByFn: TrackByFunction<PermissionManagement.Group> = (_, item) => item.name;
 
-  get selectedGroupPermissions$(): Observable<PermissionWithMargin[]> {
+  get selectedGroupPermissions$(): Observable<PermissionWithStyle[]> {
+    const margin = `margin-${
+      (document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
+    }.px`;
+
     return this.groups$.pipe(
       map(groups =>
         this.selectedGroup
           ? groups.find(group => group.name === this.selectedGroup.name).permissions
           : [],
       ),
-      map<PermissionManagement.Permission[], PermissionWithMargin[]>(permissions =>
+      map<PermissionManagement.Permission[], PermissionWithStyle[]>(permissions =>
         permissions.map(
           permission =>
             (({
               ...permission,
-              margin: findMargin(permissions, permission),
+              style: { [margin]: findMargin(permissions, permission) },
               isGranted: this.permissions.find(per => per.name === permission.name).isGranted,
-            } as any) as PermissionWithMargin),
+            } as any) as PermissionWithStyle),
         ),
       ),
     );
diff --git a/npm/ng-packs/packages/schematics/src/collection.json b/npm/ng-packs/packages/schematics/src/collection.json
index 5c2df8ea36..0b1b738e08 100644
--- a/npm/ng-packs/packages/schematics/src/collection.json
+++ b/npm/ng-packs/packages/schematics/src/collection.json
@@ -5,6 +5,11 @@
       "factory": "./commands/proxy-add",
       "schema": "./commands/proxy-add/schema.json"
     },
+    "proxy-index": {
+      "description": "ABP Proxy Generator Index Schematics",
+      "factory": "./commands/proxy-index",
+      "schema": "./commands/proxy-index/schema.json"
+    },
     "proxy-refresh": {
       "description": "ABP Proxy Generator Refresh Schematics",
       "factory": "./commands/proxy-refresh",
diff --git a/npm/ng-packs/packages/schematics/src/commands/proxy-index/index.ts b/npm/ng-packs/packages/schematics/src/commands/proxy-index/index.ts
new file mode 100644
index 0000000000..85c4707daa
--- /dev/null
+++ b/npm/ng-packs/packages/schematics/src/commands/proxy-index/index.ts
@@ -0,0 +1,20 @@
+import { SchematicContext, Tree } from '@angular-devkit/schematics';
+import {
+  buildDefaultPath,
+  createProxyIndexGenerator,
+  removeDefaultPlaceholders,
+  resolveProject,
+} from '../../utils';
+
+export default function(schema: { target?: string }) {
+  const params = removeDefaultPlaceholders(schema);
+
+  return async (host: Tree, _context: SchematicContext) => {
+    const target = await resolveProject(host, params.target!);
+    const targetPath = buildDefaultPath(target.definition);
+
+    const generateIndex = createProxyIndexGenerator(targetPath);
+
+    return generateIndex(host);
+  };
+}
diff --git a/npm/ng-packs/packages/schematics/src/commands/proxy-index/schema.json b/npm/ng-packs/packages/schematics/src/commands/proxy-index/schema.json
new file mode 100644
index 0000000000..632c6d7e51
--- /dev/null
+++ b/npm/ng-packs/packages/schematics/src/commands/proxy-index/schema.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "SchematicsAbpIndexProxy",
+  "title": "ABP Index Proxy Schema",
+  "type": "object",
+  "properties": {
+    "target": {
+      "description": "Target Angular project to place the generated code",
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Plese enter target Angular project to place the generated code. (default: workspace \"defaultProject\")"
+    }
+  },
+  "required": []
+}
diff --git a/npm/ng-packs/packages/schematics/src/utils/barrel.ts b/npm/ng-packs/packages/schematics/src/utils/barrel.ts
index b21acc77fa..adf6779ebe 100644
--- a/npm/ng-packs/packages/schematics/src/utils/barrel.ts
+++ b/npm/ng-packs/packages/schematics/src/utils/barrel.ts
@@ -21,7 +21,7 @@ export function generateBarrelFromPath(tree: Tree, indexPath: string) {
   const _exports: string[] = [];
 
   dir.subfiles.forEach(fragment => {
-    if (!fragment.endsWith('.ts')) return;
+    if (!fragment.endsWith('.ts') || fragment === 'index.ts') return;
 
     _exports.push(`export * from './${fragment.replace(/\.ts$/, '')}';`);
   });
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
index 03fae58229..b98bed6790 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
@@ -72,7 +72,7 @@ export default `
     border: 1px solid #c8c8c8;
   }
 .abp-loading {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.05);
 }
 .modal-backdrop {
 background-color: rgba(0, 0, 0, 0.6);
diff --git a/npm/ng-packs/scripts/build-schematics.ts b/npm/ng-packs/scripts/build-schematics.ts
index 3a14d2f03c..7efca32e72 100644
--- a/npm/ng-packs/scripts/build-schematics.ts
+++ b/npm/ng-packs/scripts/build-schematics.ts
@@ -21,6 +21,7 @@ class FileCopy {
 const PACKAGE_TO_BUILD = 'schematics';
 const FILES_TO_COPY_AFTER_BUILD: (FileCopy | string)[] = [
   { src: 'src/commands/proxy-add/schema.json', dest: 'commands/proxy-add/schema.json' },
+  { src: 'src/commands/proxy-index/schema.json', dest: 'commands/proxy-index/schema.json' },
   { src: 'src/commands/proxy-refresh/schema.json', dest: 'commands/proxy-refresh/schema.json' },
   { src: 'src/commands/proxy-remove/schema.json', dest: 'commands/proxy-remove/schema.json' },
   { src: 'src/commands/api/files-enum', dest: 'commands/api/files-enum' },