diff --git a/src/@layouts/components/VerticalNav.vue b/src/@layouts/components/VerticalNav.vue
index 833018ac..d32e056c 100644
--- a/src/@layouts/components/VerticalNav.vue
+++ b/src/@layouts/components/VerticalNav.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { Component } from 'vue'
-import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
 import { useDisplay } from 'vuetify'
 import logo from '@images/logo.svg?raw'
 
@@ -85,6 +84,7 @@ function handleNavScroll(evt: Event) {
 .visible {
   visibility: visible !important;
 }
+
 // 👉 Vertical Nav
 .layout-vertical-nav {
   position: fixed;
@@ -96,8 +96,8 @@ function handleNavScroll(evt: Event) {
   inset-block-start: 0;
   inset-inline-start: 0;
   transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
-  will-change: transform, inline-size;
   visibility: hidden;
+  will-change: transform, inline-size;
 
   &:not(.overlay-nav) {
     visibility: visible;
diff --git a/src/main.ts b/src/main.ts
index 5dd0d6d8..d7707e19 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,6 +15,8 @@ import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
 import 'vue-toast-notification/dist/theme-bootstrap.css'
+import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar';
+import 'vue3-perfect-scrollbar/style.css';
 
 loadFonts()
 
@@ -34,5 +36,6 @@ app
     position: 'bottom-right',
   })
   .use(VuetifyUseDialog)
+  .use(PerfectScrollbarPlugin)
   .mount('#app')
   .$nextTick(() => removeEl('#loading-bg'))