diff --git a/package-lock.json b/package-lock.json
index 060120a..82708f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@angular/animations": "~10.2.5",
+        "@angular/cdk": "^10.2.7",
         "@angular/common": "~10.2.5",
         "@angular/compiler": "^10.2.5",
         "@angular/core": "^10.2.5",
@@ -19,7 +20,7 @@
         "module-alias": "^2.2.2",
         "ng-mocks": "^10.5.4",
         "ng-zorro-antd": "^10.2.2",
-        "ngx-perfect-scrollbar": "^9.0.0",
+        "ngx-scrollbar": "7.4",
         "rxjs": "^6.5.5",
         "tslib": "^2.0.0",
         "zone.js": "^0.10.3"
@@ -2477,6 +2478,11 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "node_modules/@ngtools/webpack": {
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.2.4.tgz",
@@ -3695,6 +3701,11 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -10640,19 +10651,20 @@
         "@angular/router": "^10.0.0"
       }
     },
-    "node_modules/ngx-perfect-scrollbar": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-9.0.0.tgz",
-      "integrity": "sha512-jiFrOLONf/w2PjSKkEjQeTnMdlMVcQgjzIrYcsor1HWTmE+95J2sZAd/WF4zoutbpIqfU8VQQoAp8HOa7U1c/g==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+    "node_modules/ngx-scrollbar": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/ngx-scrollbar/-/ngx-scrollbar-7.4.2.tgz",
+      "integrity": "sha512-IQfFZRDcVZL3PGBqZDvKAlKK9cs8ikb71wiY7iKtnR7OiTeYsa3vGGz1sn7oEbPNNsQycdhK1Sd0Qxa1am4mCA==",
       "dependencies": {
-        "perfect-scrollbar": "1.5.0",
-        "resize-observer-polyfill": "^1.5.0"
+        "@juggle/resize-observer": "*",
+        "bezier-easing": "*",
+        "tslib": "^2.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "^9.0.0",
-        "@angular/core": "^9.0.0",
-        "tslib": "^1.10.0"
+        "@angular/cdk": ">=8.0.0",
+        "@angular/common": ">=8.0.0",
+        "@angular/core": ">=8.0.0",
+        "rxjs": ">=6.0.0"
       }
     },
     "node_modules/nice-try": {
@@ -11893,11 +11905,6 @@
         "node": ">=0.12"
       }
     },
-    "node_modules/perfect-scrollbar": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
-      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
-    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -19958,6 +19965,11 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "@ngtools/webpack": {
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.2.4.tgz",
@@ -20948,6 +20960,11 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -26467,13 +26484,14 @@
         "tslib": "^2.0.0"
       }
     },
-    "ngx-perfect-scrollbar": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-9.0.0.tgz",
-      "integrity": "sha512-jiFrOLONf/w2PjSKkEjQeTnMdlMVcQgjzIrYcsor1HWTmE+95J2sZAd/WF4zoutbpIqfU8VQQoAp8HOa7U1c/g==",
+    "ngx-scrollbar": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/ngx-scrollbar/-/ngx-scrollbar-7.4.2.tgz",
+      "integrity": "sha512-IQfFZRDcVZL3PGBqZDvKAlKK9cs8ikb71wiY7iKtnR7OiTeYsa3vGGz1sn7oEbPNNsQycdhK1Sd0Qxa1am4mCA==",
       "requires": {
-        "perfect-scrollbar": "1.5.0",
-        "resize-observer-polyfill": "^1.5.0"
+        "@juggle/resize-observer": "*",
+        "bezier-easing": "*",
+        "tslib": "^2.0.0"
       }
     },
     "nice-try": {
@@ -27469,11 +27487,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "perfect-scrollbar": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
-      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
diff --git a/package.json b/package.json
index 2b4a4dd..f48de5d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~10.2.5",
+    "@angular/cdk": "^10.2.7",
     "@angular/common": "~10.2.5",
     "@angular/compiler": "^10.2.5",
     "@angular/core": "^10.2.5",
@@ -24,7 +25,7 @@
     "module-alias": "^2.2.2",
     "ng-mocks": "^10.5.4",
     "ng-zorro-antd": "^10.2.2",
-    "ngx-perfect-scrollbar": "^9.0.0",
+    "ngx-scrollbar": "7.4",
     "rxjs": "^6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "^0.10.3"
diff --git a/src/app/widgets/form-container/form-container.component.ts b/src/app/widgets/form-container/form-container.component.ts
index 2524a01..a2a1e08 100644
--- a/src/app/widgets/form-container/form-container.component.ts
+++ b/src/app/widgets/form-container/form-container.component.ts
@@ -3,11 +3,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-form-container',
   template: `
-    <perfect-scrollbar>
+    <ng-scrollbar>
       <div class="form-content">
         <ng-content></ng-content>
       </div>
-    </perfect-scrollbar>`,
+    </ng-scrollbar>`,
   styleUrls: ['./form-container.component.less']
 })
 export class FormContainerComponent {
diff --git a/src/app/widgets/form-container/form-container.module.ts b/src/app/widgets/form-container/form-container.module.ts
index 9304d1d..db32f9c 100644
--- a/src/app/widgets/form-container/form-container.module.ts
+++ b/src/app/widgets/form-container/form-container.module.ts
@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { FormContainerComponent } from './form-container.component';
 
 @NgModule({
   declarations: [FormContainerComponent],
   imports: [
     CommonModule,
-    PerfectScrollbarModule,
+    NgScrollbarModule,
   ],
   exports: [FormContainerComponent]
 })