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 129d5fc0be..5b76e94dbe 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
@@ -7,8 +7,20 @@
       </h4>
     </ng-template>
     <ng-template #abpBody>
-      <div class="row">
-        <div class="col-md-4 scroll-in-modal">
+      <div class="row d-flex align-items-center mb-2">
+        <div class="col">
+          <div class="input-group mb-2">
+            <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
+            <input
+              type="text"
+              class="form-control"
+              id="permission-search"
+              placeholder="Filter"
+              [(ngModel)]="filter"
+            />
+          </div>
+        </div>
+        <div class="col-auto">
           <div class="form-check mb-2">
             <input
               #selectAllInAllTabsRef
@@ -24,78 +36,83 @@
               'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
             }}</label>
           </div>
-
-          <hr class="mt-2 mb-2" />
-          <div class="overflow-auto">
-            <ul class="nav nav-pills flex-column">
-              @for (group of data.groups; track $index) {
-                <li class="nav-item">
-                  @if ({ assignedCount: getAssignedCount(group.name) }; as count) {
-                    <a
-                      class="nav-link pointer"
-                      [class.active]="selectedGroup?.name === group?.name"
-                      (click)="onChangeGroup(group)"
-                      (select)="setDisabled(group.permissions)"
-                    >
-                      <div [class.font-weight-bold]="count.assignedCount">
-                        {{ group?.displayName }}
-                        @if (count.assignedCount > 0) {
-                          <span>({{ count.assignedCount }})</span>
-                        }
-                      </div>
-                    </a>
-                  }
-                </li>
-              }
-            </ul>
-          </div>
         </div>
-
-        <div class="col-md-8 scroll-in-modal">
-          <div class="ps-1">
-            <div class="form-check mb-2">
-              <input
-                #selectAllInThisTabsRef
-                type="checkbox"
-                id="select-all-in-this-tabs"
-                name="select-all-in-this-tabs"
-                class="form-check-input"
-                [(ngModel)]="selectThisTab"
-                [disabled]="disableSelectAllTab"
-                (click)="onClickSelectThisTab()"
-              />
-              <label class="form-check-label" for="select-all-in-this-tabs">{{
-                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
-              }}</label>
+      </div>
+      <fieldset class="border rounded-4 p-3">
+        <legend class="px-1 h5 mb-0">{{ 'Permission Group' }}</legend>
+        <div class="row">
+          <div class="col-md-4">
+            <div class="overflow-auto lpx-scroll-pills-container scroll-in-modal">
+              <ul class="nav nav-pills flex-column">
+                @for (group of permissionGroups; track $index) {
+                  <li class="border nav-item">
+                    @if ({ assignedCount: getAssignedCount(group.name) }; as count) {
+                      <a
+                        class="nav-link pointer"
+                        [class.active]="selectedGroup?.name === group?.name"
+                        (click)="onChangeGroup(group)"
+                        (select)="setDisabled(group.permissions)"
+                      >
+                        <div [class.font-weight-bold]="count.assignedCount">
+                          {{ group?.displayName }}
+                          @if (count.assignedCount > 0) {
+                            <span>({{ count.assignedCount }})</span>
+                          }
+                        </div>
+                      </a>
+                    }
+                  </li>
+                }
+              </ul>
             </div>
-            <hr class="my-2" />
-            @for (permission of selectedGroupPermissions; track $index; let i = $index) {
-              <div [ngStyle]="permission.style" class="form-check mb-2">
+          </div>
+
+          <div class="col-md-8 scroll-in-modal">
+            <div class="ps-1">
+              <div class="form-check mb-2">
                 <input
-                  #permissionCheckbox
+                  #selectAllInThisTabsRef
                   type="checkbox"
-                  [checked]="getChecked(permission.name)"
-                  [value]="getChecked(permission.name)"
-                  [attr.id]="permission.name"
+                  id="select-all-in-this-tabs"
+                  name="select-all-in-this-tabs"
                   class="form-check-input"
-                  [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
-                  (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                  [(ngModel)]="selectThisTab"
+                  [disabled]="disableSelectAllTab"
+                  (click)="onClickSelectThisTab()"
                 />
-                <label class="form-check-label" [attr.for]="permission.name"
-                  >{{ permission.displayName }}
-                  @if (!hideBadges) {
-                    @for (provider of permission.grantedProviders; track $index) {
-                      <span class="badge bg-primary text-dark"
-                        >{{ provider.providerName }}: {{ provider.providerKey }}</span
-                      >
-                    }
-                  }
-                </label>
+                <label class="form-check-label" for="select-all-in-this-tabs">{{
+                  'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
+                }}</label>
               </div>
-            }
+              <hr class="my-2" />
+              @for (permission of selectedGroupPermissions; track $index; let i = $index) {
+                <div [ngStyle]="permission.style" class="form-check mb-2">
+                  <input
+                    #permissionCheckbox
+                    type="checkbox"
+                    [checked]="getChecked(permission.name)"
+                    [value]="getChecked(permission.name)"
+                    [attr.id]="permission.name"
+                    class="form-check-input"
+                    [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
+                    (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                  />
+                  <label class="form-check-label" [attr.for]="permission.name"
+                    >{{ permission.displayName }}
+                    @if (!hideBadges) {
+                      @for (provider of permission.grantedProviders; track $index) {
+                        <span class="badge bg-primary text-dark"
+                          >{{ provider.providerName }}: {{ provider.providerKey }}</span
+                        >
+                      }
+                    }
+                  </label>
+                </div>
+              }
+            </div>
           </div>
         </div>
-      </div>
+      </fieldset>
     </ng-template>
     <ng-template #abpFooter>
       <button type="button" class="btn btn-outline-primary" abpClose>
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 8ad2fd2320..ae33e0e872 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
@@ -19,7 +19,7 @@ import {
   TrackByFunction,
   ViewChildren,
 } from '@angular/core';
-import { concat, of } from 'rxjs';
+import { BehaviorSubject, concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
 import { PermissionManagement } from '../models/permission-management';
 
@@ -41,10 +41,38 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
         max-height: 70vh;
         overflow-y: scroll;
       }
+
       .scroll-in-modal {
         overflow: auto;
         max-height: calc(100vh - 15rem);
       }
+
+      fieldset legend {
+        float: none;
+        width: auto;
+      }
+
+      .lpx-scroll-pills-container ul {
+        display: block;
+        max-height: 500px;
+        overflow-y: auto;
+      }
+
+      .lpx-scroll-pills-container .tab-content {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+      }
+
+      .lpx-scroll-pills-container ul li {
+        margin-bottom: 10px;
+        border-radius: 10px;
+      }
+
+      .lpx-scroll-pills-container ul li a.active {
+        color: #fff !important;
+        border-color: #6c5dd3 !important;
+        background-color: #6c5dd3 !important;
+      }
     `,
   ],
 })
@@ -121,6 +149,10 @@ export class PermissionManagementComponent
 
   selectedGroupPermissions: PermissionWithStyle[] = [];
 
+  filter = '';
+
+  permissionGroupSubject = new BehaviorSubject<PermissionGroupDto[]>(null);
+
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
   getChecked(name: string) {
@@ -364,9 +396,11 @@ export class PermissionManagementComponent
 
     return this.service.get(this.providerName, this.providerKey).pipe(
       tap((permissionRes: GetPermissionListResultDto) => {
+        const { groups } = permissionRes;
         this.data = permissionRes;
-        this.permissions = getPermissions(permissionRes.groups);
-        this.setSelectedGroup(permissionRes.groups[0]);
+        this.permissionGroupSubject.next(groups);
+        this.permissions = getPermissions(groups);
+        this.setSelectedGroup(groups[0]);
         this.disabledSelectAllInAllTabs = this.permissions.every(
           per =>
             per.isGranted &&
@@ -401,6 +435,17 @@ export class PermissionManagementComponent
 
     return false;
   }
+
+  get permissionGroups(): PermissionGroupDto[] {
+    const permissionGroups = this.permissionGroupSubject.getValue();
+    if (!permissionGroups) {
+      return;
+    }
+    const search = this.filter.toLowerCase();
+    return permissionGroups.filter(group =>
+      group.permissions.some(permission => permission.displayName.toLowerCase().includes(search)),
+    );
+  }
 }
 
 function findParentPermissions(