diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
index 9c8f536e..c11cfe14 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
@@ -50,7 +50,7 @@
         <ng-template mat-tab-label>
           {{ 'message.type.messageTypeReceiving' | translate }}
         </ng-template>
-        <perfect-scrollbar
+        <!-- <perfect-scrollbar
           fxFlex="1 1 auto"
           *ngIf="!!(messageRetrieveList$ | async)"
         >
@@ -60,7 +60,20 @@
             (click)="onClickDetail(message)"
             class="message-item"
           ></ucap-message-list-item>
-        </perfect-scrollbar>
+        </perfect-scrollbar> -->
+        <virtual-scroller
+          #vsMessageRetrieve
+          [items]="messageRetrieveList$ | async"
+          perfectScrollbar
+          fxFlexFill
+        >
+          <ucap-message-list-item
+            *ngFor="let message of vsMessageRetrieve.viewPortItems"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </virtual-scroller>
         <div
           class="no-search-result"
           fxFlexFill
@@ -76,7 +89,7 @@
         <ng-template mat-tab-label>
           {{ 'message.type.messageTypeOutgoing' | translate }}
         </ng-template>
-        <perfect-scrollbar
+        <!-- <perfect-scrollbar
           fxFlex="1 1 auto"
           *ngIf="!!(messageSendList$ | async)"
         >
@@ -86,7 +99,20 @@
             (click)="onClickDetail(message)"
             class="message-item"
           ></ucap-message-list-item>
-        </perfect-scrollbar>
+        </perfect-scrollbar> -->
+        <virtual-scroller
+          #vsMessageSend
+          [items]="messageSendList$ | async"
+          perfectScrollbar
+          fxFlexFill
+        >
+          <ucap-message-list-item
+            *ngFor="let message of vsMessageSend.viewPortItems"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </virtual-scroller>
         <div
           class="no-search-result"
           fxFlexFill
@@ -102,7 +128,7 @@
         <ng-template mat-tab-label>
           {{ 'message.type.messageTypeReservation' | translate }}
         </ng-template>
-        <perfect-scrollbar
+        <!-- <perfect-scrollbar
           fxFlex="1 1 auto"
           *ngIf="!!(messageReservationList$ | async)"
         >
@@ -112,7 +138,20 @@
             (click)="onClickDetail(message)"
             class="message-item"
           ></ucap-message-list-item>
-        </perfect-scrollbar>
+        </perfect-scrollbar> -->
+        <virtual-scroller
+          #vsMessageReservation
+          [items]="messageReservationList$ | async"
+          perfectScrollbar
+          fxFlexFill
+        >
+          <ucap-message-list-item
+            *ngFor="let message of vsMessageReservation.viewPortItems"
+            [message]="message"
+            (click)="onClickDetail(message)"
+            class="message-item"
+          ></ucap-message-list-item>
+        </virtual-scroller>
         <div
           class="no-search-result"
           fxFlexFill
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
index 696370db..60af8145 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
@@ -18,6 +18,9 @@
 .message-item {
   cursor: pointer;
 }
+::ng-deep .ps__rail-y {
+  left: auto !important;
+}
 .message-box {
   position: relative;
   height: 100%;