diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index dcb1f5de..2233b690 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -25,27 +25,25 @@
   class="search-result"
   style="overflow: auto;"
 >
-  <perfect-scrollbar>
-    <ucap-group-expansion-panel
-      #groupExpansionPanel
-      [groupBuddyList]="groupBuddyList$ | async"
-      [favoritBuddyList]="favoritBuddyList$ | async"
-      [myProfileInfo]="loginRes.userInfo"
-      (more)="onMoreGroup($event)"
+  <ucap-group-expansion-panel
+    #groupExpansionPanel
+    [groupBuddyList]="groupBuddyList$ | async"
+    [favoritBuddyList]="favoritBuddyList$ | async"
+    [myProfileInfo]="loginRes.userInfo"
+    (more)="onMoreGroup($event)"
+  >
+    <ucap-profile-user-list-item
+      *ucapGroupExpansionPanelItem="let userInfo"
+      [userInfo]="userInfo"
+      [presence]="getStatusBulkInfo(userInfo) | async"
+      [sessionVerinfo]="sessionVerinfo"
+      (click)="onSelectBuddy(userInfo)"
+      (openProfile)="onClickOpenProfile($event)"
+      (contextmenu)="onContextMenuProfile($event, userInfo)"
+      class="list-item-frame"
     >
-      <ucap-profile-user-list-item
-        *ucapGroupExpansionPanelItem="let userInfo"
-        [userInfo]="userInfo"
-        [presence]="getStatusBulkInfo(userInfo) | async"
-        [sessionVerinfo]="sessionVerinfo"
-        (click)="onSelectBuddy(userInfo)"
-        (openProfile)="onClickOpenProfile($event)"
-        (contextmenu)="onContextMenuProfile($event, userInfo)"
-        class="list-item-frame"
-      >
-      </ucap-profile-user-list-item>
-    </ucap-group-expansion-panel>
-  </perfect-scrollbar>
+    </ucap-profile-user-list-item>
+  </ucap-group-expansion-panel>
 </div>
 <div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
   <div *ngIf="searchProcessing">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 4f81684f..c781d565 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -12,14 +12,12 @@
 </div>
 <div class="oraganization-tab">
   <div class="oraganization-tab-tree">
-    <perfect-scrollbar>
-      <ucap-organization-tree
-        [oraganizationList]="departmentInfoList$ | async"
-        [loginRes]="loginRes"
-        (selected)="onSelectedOrganization($event)"
-        class="tab-tree-frame"
-      ></ucap-organization-tree>
-    </perfect-scrollbar>
+    <ucap-organization-tree
+      [oraganizationList]="departmentInfoList$ | async"
+      [loginRes]="loginRes"
+      (selected)="onSelectedOrganization($event)"
+      class="tab-tree-frame"
+    ></ucap-organization-tree>
   </div>
   <div class="select-list">
     <dl class="select-dept text-accent-color">
@@ -47,21 +45,19 @@
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
     <div *ngIf="!isShowSearch" class="search-list">
-      <perfect-scrollbar>
-        <cdk-virtual-scroll-viewport itemSize="20" fxFlexFill>
-          <ucap-profile-user-list-item
-            *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
-            [userInfo]="userInfo"
-            [checkable]="true"
-            [sessionVerinfo]="sessionVerinfo"
-            [selectedUserList]="selectedUserList"
-            [isChecked]="getCheckedUser(userInfo)"
-            (checkUser)="onCheckUser($event)"
-          >
-            Loading...
-          </ucap-profile-user-list-item>
-        </cdk-virtual-scroll-viewport>
-      </perfect-scrollbar>
+      <cdk-virtual-scroll-viewport itemSize="20" perfectScrollbar fxFlexFill>
+        <ucap-profile-user-list-item
+          *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
+          [userInfo]="userInfo"
+          [checkable]="true"
+          [sessionVerinfo]="sessionVerinfo"
+          [selectedUserList]="selectedUserList"
+          [isChecked]="getCheckedUser(userInfo)"
+          (checkUser)="onCheckUser($event)"
+        >
+          Loading...
+        </ucap-profile-user-list-item>
+      </cdk-virtual-scroll-viewport>
       <!-- <ucap-profile-user-list-item
         *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
         [userInfo]="userInfo"
@@ -74,7 +70,11 @@
       </ucap-profile-user-list-item> -->
     </div>
     <div *ngIf="isShowSearch" class="search-result">
-      <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%;">
+      <cdk-virtual-scroll-viewport
+        itemSize="20"
+        perfectScrollbar
+        style="height: 100%;"
+      >
         <ucap-profile-user-list-item
           *cdkVirtualFor="let userInfo of searchUserInfos"
           [userInfo]="userInfo"
diff --git a/projects/ucap-webmessenger-app/src/styles.scss b/projects/ucap-webmessenger-app/src/styles.scss
index 9f86bf62..5992f1e3 100644
--- a/projects/ucap-webmessenger-app/src/styles.scss
+++ b/projects/ucap-webmessenger-app/src/styles.scss
@@ -1,3 +1,5 @@
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+
 @import '~@ucap-webmessenger-scss/ui/ucap-ui';
 
 @import 'assets/scss/ucap';
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index 5a4038fd..17441145 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -1,4 +1,9 @@
-<cdk-virtual-scroll-viewport #cvsvGroup itemSize="80" fxFlexFill>
+<cdk-virtual-scroll-viewport
+  #cvsvGroup
+  itemSize="80"
+  perfectScrollbar
+  fxFlexFill
+>
   <ng-container
     *cdkVirtualFor="let node of dataSource.expandedData$"
   ></ng-container>
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts b/projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts
index 91aa7580..c3b3a80f 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts
+++ b/projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts
@@ -12,6 +12,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTreeModule } from '@angular/material/tree';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { ExpansionPanelComponent } from './components/expansion-panel.component';
 import { ExpansionPanelItemDirective } from './directives/expansion-panel-item.directive';
@@ -34,7 +35,9 @@ const SERVICES = [];
     MatIconModule,
     MatTreeModule,
     MatCheckboxModule,
-    MatRippleModule
+    MatRippleModule,
+
+    PerfectScrollbarModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES],
   declarations: [...COMPONENTS, ...DIRECTIVES],
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
index fa016a7d..61bed2c7 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
@@ -1,4 +1,9 @@
-<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="40" fxFlexFill>
+<cdk-virtual-scroll-viewport
+  #cvsvOrganization
+  itemSize="40"
+  perfectScrollbar
+  fxFlexFill
+>
   <ng-container
     *cdkVirtualFor="let node of dataSource.expandedData$"
   ></ng-container>
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts b/projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts
index b763f548..e51a5a06 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts
@@ -14,6 +14,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTreeModule } from '@angular/material/tree';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { TenantSearchComponent } from './components/tenant-search.component';
 import { TreeComponent } from './components/tree.component';
 
@@ -33,7 +35,9 @@ const SERVICES = [];
     MatIconModule,
     MatInputModule,
     MatSelectModule,
-    MatTreeModule
+    MatTreeModule,
+
+    PerfectScrollbarModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]