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 ea954c55be..949c6619ec 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
@@ -83,100 +83,98 @@
   </ng-template>
 
   <ng-template #abpBody>
-    <perfect-scrollbar class="ps-show-always" style="max-height: 70vh;">
-      <form [formGroup]="form" (ngSubmit)="save()">
-        <ngb-tabset>
-          <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
-            <ng-template ngbTabContent>
-              <div class="mt-2 fade-in-top">
-                <div class="form-group">
-                  <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
-                  ><span> * </span>
-                  <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus />
-                </div>
+    <form [formGroup]="form" (ngSubmit)="save()">
+      <ngb-tabset>
+        <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
+          <ng-template ngbTabContent>
+            <div class="mt-2 fade-in-top">
+              <div class="form-group">
+                <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
+                ><span> * </span>
+                <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus />
+              </div>
 
-                <div class="form-group">
-                  <label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label>
-                  <input type="text" id="name" class="form-control" formControlName="name" />
-                </div>
+              <div class="form-group">
+                <label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label>
+                <input type="text" id="name" class="form-control" formControlName="name" />
+              </div>
 
-                <div class="form-group">
-                  <label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label>
-                  <input type="text" id="surname" class="form-control" formControlName="surname" />
-                </div>
+              <div class="form-group">
+                <label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label>
+                <input type="text" id="surname" class="form-control" formControlName="surname" />
+              </div>
 
-                <div *ngIf="!selected.userName" class="form-group">
-                  <label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
-                  ><span> * </span>
-                  <input
-                    type="password"
-                    id="password"
-                    autocomplete="new-password"
-                    class="form-control"
-                    formControlName="password"
-                  />
-                </div>
+              <div *ngIf="!selected.userName" class="form-group">
+                <label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
+                ><span> * </span>
+                <input
+                  type="password"
+                  id="password"
+                  autocomplete="new-password"
+                  class="form-control"
+                  formControlName="password"
+                />
+              </div>
 
-                <div class="form-group">
-                  <label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label
-                  ><span> * </span>
-                  <input type="text" id="email" class="form-control" formControlName="email" />
-                </div>
+              <div class="form-group">
+                <label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label
+                ><span> * </span>
+                <input type="text" id="email" class="form-control" formControlName="email" />
+              </div>
 
-                <div class="form-group">
-                  <label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
-                  <input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
-                </div>
+              <div class="form-group">
+                <label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
+                <input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
+              </div>
 
-                <div class="custom-checkbox custom-control mb-2">
-                  <input
-                    type="checkbox"
-                    id="lockout-checkbox"
-                    class="custom-control-input"
-                    formControlName="lockoutEnabled"
-                  />
-                  <label class="custom-control-label" for="lockout-checkbox">{{
-                    'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
-                  }}</label>
-                </div>
+              <div class="custom-checkbox custom-control mb-2">
+                <input
+                  type="checkbox"
+                  id="lockout-checkbox"
+                  class="custom-control-input"
+                  formControlName="lockoutEnabled"
+                />
+                <label class="custom-control-label" for="lockout-checkbox">{{
+                  'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
+                }}</label>
+              </div>
 
-                <div class="custom-checkbox custom-control mb-2">
-                  <input
-                    type="checkbox"
-                    id="two-factor-checkbox"
-                    class="custom-control-input"
-                    formControlName="twoFactorEnabled"
-                  />
-                  <label class="custom-control-label" for="two-factor-checkbox">{{
-                    'AbpIdentity::DisplayName:TwoFactorEnabled' | abpLocalization
-                  }}</label>
-                </div>
+              <div class="custom-checkbox custom-control mb-2">
+                <input
+                  type="checkbox"
+                  id="two-factor-checkbox"
+                  class="custom-control-input"
+                  formControlName="twoFactorEnabled"
+                />
+                <label class="custom-control-label" for="two-factor-checkbox">{{
+                  'AbpIdentity::DisplayName:TwoFactorEnabled' | abpLocalization
+                }}</label>
               </div>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization">
-            <ng-template ngbTabContent>
-              <div class="mt-2 fade-in-top">
-                <div
-                  *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-                  class="custom-checkbox custom-control mb-2"
-                >
-                  <input
-                    type="checkbox"
-                    name="Roles[0].IsAssigned"
-                    value="true"
-                    class="custom-control-input"
-                    [attr.id]="'roles-' + i"
-                    [formControl]="roleGroup.controls[roles[i].name]"
-                  />
-                  <label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
-                </div>
+            </div>
+          </ng-template>
+        </ngb-tab>
+        <ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization">
+          <ng-template ngbTabContent>
+            <div class="mt-2 fade-in-top">
+              <div
+                *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
+                class="custom-checkbox custom-control mb-2"
+              >
+                <input
+                  type="checkbox"
+                  name="Roles[0].IsAssigned"
+                  value="true"
+                  class="custom-control-input"
+                  [attr.id]="'roles-' + i"
+                  [formControl]="roleGroup.controls[roles[i].name]"
+                />
+                <label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
               </div>
-            </ng-template>
-          </ngb-tab>
-        </ngb-tabset>
-      </form>
-    </perfect-scrollbar>
+            </div>
+          </ng-template>
+        </ngb-tab>
+      </ngb-tabset>
+    </form>
   </ng-template>
 
   <ng-template #abpFooter>
diff --git a/npm/ng-packs/packages/identity/src/lib/identity.module.ts b/npm/ng-packs/packages/identity/src/lib/identity.module.ts
index baac608c6e..7ae218a5f3 100644
--- a/npm/ng-packs/packages/identity/src/lib/identity.module.ts
+++ b/npm/ng-packs/packages/identity/src/lib/identity.module.ts
@@ -10,7 +10,6 @@ import { UsersComponent } from './components/users/users.component';
 import { PermissionManagementModule } from '@abp/ng.permission-management';
 import { TableModule } from 'primeng/table';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [RolesComponent, UsersComponent],
@@ -24,7 +23,6 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
     NgbDropdownModule,
     PermissionManagementModule,
     NgxValidateCoreModule,
-    PerfectScrollbarModule,
   ],
 })
 export class IdentityModule {}
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 3f6a47eabd..fbac3ae354 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
@@ -22,16 +22,14 @@
       <div class="row">
         <div class="col-4">
           <ul class="nav nav-pills flex-column">
-            <perfect-scrollbar class="ps-show-always" style="max-height: 70vh;">
-              <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
-                <a
-                  class="nav-link pointer"
-                  [class.active]="selectedGroup?.name === group?.name"
-                  (click)="onChangeGroup(group)"
-                  >{{ group?.displayName }}</a
-                >
-              </li>
-            </perfect-scrollbar>
+            <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
+              <a
+                class="nav-link pointer"
+                [class.active]="selectedGroup?.name === group?.name"
+                (click)="onChangeGroup(group)"
+                >{{ group?.displayName }}</a
+              >
+            </li>
           </ul>
         </div>
         <div class="col-8">
@@ -52,32 +50,30 @@
               }}</label>
             </div>
             <hr class="mb-3" />
-            <perfect-scrollbar class="ps-show-always" style="max-height: 60vh;">
-              <div
-                *ngFor="let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn"
-                [style.margin-left]="permission.margin + 'px'"
-                class="custom-checkbox custom-control mb-2"
+            <div
+              *ngFor="let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn"
+              [style.margin-left]="permission.margin + 'px'"
+              class="custom-checkbox custom-control mb-2"
+            >
+              <input
+                #permissionCheckbox
+                type="checkbox"
+                [checked]="getChecked(permission.name)"
+                [value]="getChecked(permission.name)"
+                [attr.id]="permission.name"
+                class="custom-control-input"
+                [disabled]="isGrantedByRole(permission.grantedProviders)"
+              />
+              <label
+                class="custom-control-label"
+                [attr.for]="permission.name"
+                (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                >{{ permission.displayName }}
+                <span *ngFor="let provider of permission.grantedProviders" class="badge badge-light"
+                  >{{ provider.providerName }}: {{ provider.providerKey }}</span
+                ></label
               >
-                <input
-                  #permissionCheckbox
-                  type="checkbox"
-                  [checked]="getChecked(permission.name)"
-                  [value]="getChecked(permission.name)"
-                  [attr.id]="permission.name"
-                  class="custom-control-input"
-                  [disabled]="isGrantedByRole(permission.grantedProviders)"
-                />
-                <label
-                  class="custom-control-label"
-                  [attr.for]="permission.name"
-                  (click)="onClickCheckbox(permission, permissionCheckbox.value)"
-                  >{{ permission.displayName }}
-                  <span *ngFor="let provider of permission.grantedProviders" class="badge badge-light"
-                    >{{ provider.providerName }}: {{ provider.providerKey }}</span
-                  ></label
-                >
-              </div>
-            </perfect-scrollbar>
+            </div>
           </div>
         </div>
       </div>
diff --git a/npm/ng-packs/packages/permission-management/src/lib/permission-management.module.ts b/npm/ng-packs/packages/permission-management/src/lib/permission-management.module.ts
index 3986689c41..73c3455828 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/permission-management.module.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/permission-management.module.ts
@@ -4,11 +4,10 @@ import { NgModule } from '@angular/core';
 import { NgxsModule } from '@ngxs/store';
 import { PermissionManagementComponent } from './components/permission-management.component';
 import { PermissionManagementState } from './states/permission-management.state';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [PermissionManagementComponent],
-  imports: [CoreModule, ThemeSharedModule, NgxsModule.forFeature([PermissionManagementState]), PerfectScrollbarModule],
+  imports: [CoreModule, ThemeSharedModule, NgxsModule.forFeature([PermissionManagementState])],
   exports: [PermissionManagementComponent],
 })
 export class PermissionManagementModule {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
index 5f57360aa8..75c48d2d15 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@@ -27,10 +27,9 @@
         [style.minHeight]="minHeight || undefined"
       >
         <ng-container *ngTemplateOutlet="abpBody"></ng-container>
-
-        <div id="abp-modal-footer" class="modal-footer">
-          <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
-        </div>
+      </div>
+      <div id="abp-modal-footer" class="modal-footer">
+        <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
       </div>
     </div>
   </div>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
index dd66eec05c..e2646b5128 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
@@ -119,11 +119,16 @@ export class ModalComponent implements OnDestroy {
     this.visibleChange.emit(value);
     this.showModal = value;
 
-    value
-      ? timer(ANIMATION_TIMEOUT + 100)
-          .pipe(take(1))
-          .subscribe(_ => (this.closable = true))
-      : (this.closable = false);
+    if (value) {
+      timer(ANIMATION_TIMEOUT + 100)
+        .pipe(take(1))
+        .subscribe(_ => (this.closable = true));
+
+      this.renderer.addClass(document.body, 'modal-open');
+    } else {
+      this.closable = false;
+      this.renderer.removeClass(document.body, 'modal-open');
+    }
   }
 
   listen() {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
index 7291eb0ab9..16c6433362 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
@@ -32,6 +32,11 @@ export default `
  background-color: rgba(0, 0, 0, .6);
 }
 
+.modal.show {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+}
+
 .abp-ellipsis-inline {
   display: inline-block;
   overflow: hidden;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index 6d31540305..49269b59d9 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -18,22 +18,26 @@ import { ChangePasswordComponent } from './components/change-password/change-pas
 import { ProfileComponent } from './components/profile/profile.component';
 import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
 
-export function appendScript(injector: Injector) {
-  const fn = function() {
-    const lazyLoadService: LazyLoadService = injector.get(LazyLoadService);
+export function appendScript(styles) {
+  const higher = (injector: Injector) => {
+    const fn = function() {
+      const lazyLoadService: LazyLoadService = injector.get(LazyLoadService);
 
-    return forkJoin(
-      lazyLoadService.load(
-        null,
-        'style',
-        styles,
-        'head',
-        'afterbegin',
-      ) /* lazyLoadService.load(null, 'script', scripts) */,
-    ).pipe(take(1));
+      return forkJoin(
+        lazyLoadService.load(
+          null,
+          'style',
+          styles,
+          'head',
+          'afterbegin',
+        ) /* lazyLoadService.load(null, 'script', scripts) */,
+      ).pipe(take(1));
+    };
+
+    return fn;
   };
 
-  return fn;
+  return higher;
 }
 
 @NgModule({
@@ -87,7 +91,7 @@ export class ThemeSharedModule {
           provide: APP_INITIALIZER,
           multi: true,
           deps: [Injector, ErrorHandler],
-          useFactory: appendScript,
+          useFactory: appendScript(styles),
         },
         { provide: MessageService, useClass: MessageService },
       ],