diff --git a/src/modules/02_users/views/permissionDetail.vue b/src/modules/02_users/views/permissionDetail.vue
index 10327662..eb9a4d96 100644
--- a/src/modules/02_users/views/permissionDetail.vue
+++ b/src/modules/02_users/views/permissionDetail.vue
@@ -259,6 +259,8 @@ onMounted(() => {
 
       <div class="col-12">
         <q-table
+          class="my-sticky-dynamic"
+          virtual-scroll
           flat
           bordered
           :rows="systemLists"
@@ -701,4 +703,40 @@ onMounted(() => {
   top: -2px;
   right: -2px;
 }
+
+.my-sticky-dynamic {
+  /* Large screens and up */
+
+  height: 65vh;
+
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th {
+    /* bg color is important for th; just specify one */
+    background-color: #fff; /* Replace with your desired color */
+  }
+
+  thead tr th {
+    position: sticky;
+    z-index: 1;
+    top: 0; /* Default top position for all th elements */
+    background-color: #fff; /* Replace with your desired color */
+  }
+
+  /* this will be the loading indicator */
+  thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px; /* Adjust this value based on the cumulative height of previous header rows */
+  }
+
+  thead tr:first-child th {
+    top: 0;
+  }
+
+  /* prevent scrolling behind sticky top row on focus */
+  tbody {
+    /* height of all previous header rows */
+    scroll-margin-top: 48px; /* Adjust this value based on the cumulative height of previous header rows */
+  }
+}
 </style>