diff --git a/packages/nc-gui/assets/style/style.css b/packages/nc-gui/assets/style/style.css
index cdf119f2e5..2bfc3505f3 100644
--- a/packages/nc-gui/assets/style/style.css
+++ b/packages/nc-gui/assets/style/style.css
@@ -114,23 +114,18 @@ html {
   overflow: hidden;
 }
 
-
 [v-cloak] {
   display: none !important;
 }
 
-
 .v-btn {
   margin: 0 2px;
 }
 
-
-
 html {
   overflow-y: auto !important;
 }
 
-
 /* nested expansion panel bug  */
 
 .v-expansion-panel-header {
@@ -141,7 +136,6 @@ html {
   min-height: 64px !important;
 }
 
-
 /* Table validation message */
 /*table .v-input__control {*/
 /*  position: relative;*/
@@ -152,13 +146,11 @@ html {
 /*  bottom: -4px;*/
 /*}*/
 
-
 /*table edit dialog buttons*/
 .v-small-dialog__actions button span {
   font-weight: bolder;
 }
 
-
 /*resizer*/
 
 .vertical-resizer {
@@ -219,15 +211,25 @@ html {
   background: linear-gradient(180deg, black, rgb(55, 55, 55));
 }
 
-
 .yellow-orange-gradient {
-  background: -moz-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
-  background: -webkit-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
-  background: linear-gradient(to right, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
+  background: -moz-linear-gradient(
+    left,
+    rgba(241, 231, 103, 1) 0%,
+    rgba(254, 182, 69, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    left,
+    rgba(241, 231, 103, 1) 0%,
+    rgba(254, 182, 69, 1) 100%
+  );
+  background: linear-gradient(
+    to right,
+    rgba(241, 231, 103, 1) 0%,
+    rgba(254, 182, 69, 1) 100%
+  );
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1);
 }
 
-
 .white-gradient {
   background: linear-gradient(45deg, white, lightskyblue);
 }
@@ -248,7 +250,6 @@ html {
   background: linear-gradient(70deg, #fcbb07, #fcbb07);
 }
 
-
 .img-animation {
   animation-name: vibrate;
   animation-duration: 1.5s;
@@ -262,7 +263,6 @@ html {
 
 @keyframes vibrate {
   0% {
-
     transform: translateY(10px);
   }
   100% {
@@ -270,26 +270,21 @@ html {
   }
 }
 
-
 .search-overlay .v-overlay__content {
   height: 100%;
   width: 100%;
-
 }
 
-
 /* Draggable tree hover color */
 
 .theme--dark .vtl-tree-node:hover {
   background-color: rgb(94, 94, 94) !important;
 }
 
-
 .theme--light .vtl-tree-node:hover {
   background-color: rgb(240, 240, 240) !important;
 }
 
-
 /*vue tree list icon font */
 
 /*.sql-query-treeview .vtl-icon-folder:before {*/
@@ -309,56 +304,61 @@ html {
 
 /*}*/
 
-.sql-query-treeview .vtl-tree-node .vtl-caret{
-  width:1rem;
+.sql-query-treeview .vtl-tree-node .vtl-caret {
+  width: 1rem;
 }
-.sql-query-treeview .vtl-tree-node{
+.sql-query-treeview .vtl-tree-node {
   padding-top: 5px !important;
   padding-bottom: 5px !important;
 }
-.sql-query-treeview .custom-run-icon{}
-
+.sql-query-treeview .custom-run-icon {
+}
 
 .sql-editor .v-expansion-panel-header {
   min-height: 36px !important;
-  padding:  0 0 0  10px;
+  padding: 0 0 0 10px;
 }
 .sql-editor .v-expansion-panel-header--active {
   min-height: 40px !important;
 }
 
-
 .api-client .v-expansion-panel-header {
   min-height: 36px !important;
-  padding:  0 0 0  10px;
+  padding: 0 0 0 10px;
 }
 .api-client .v-expansion-panel-header--active {
   min-height: 40px !important;
 }
-.api-treeview .vtl-node-content{
+.api-treeview .vtl-node-content {
   max-width: calc(100% - 44px);
 }
 /* for expansion panel content wrapper */
-.expansion-wrap-0 .v-expansion-panel-content__wrap{
+.expansion-wrap-0 .v-expansion-panel-content__wrap {
   padding: 0;
 }
 
-.sql-query-treeview .vtl-operation{
-  margin-left: 2px !important;;
+.sql-query-treeview .vtl-operation {
+  margin-left: 2px !important;
 }
-.sql-query-treeview .vtl-tree-node{
+.sql-query-treeview .vtl-tree-node {
   display: flex;
 }
 
-.sql-query-treeview .vtl-node-content{
+.sql-query-treeview .vtl-node-content {
   flex-grow: 1;
 }
 
-
 .ignore-height-style table .v-input__control {
   height: auto !important;
 }
 
-.cursor-pointer{
+.cursor-pointer {
   cursor: pointer;
 }
+
+
+/* sorting and filter */
+.menu-filter-dropdown {
+  max-height: 500px;
+  overflow-y: scroll;
+}
diff --git a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
index 41fea60ed3..d8e2168270 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="backgroundColor pa-2"
-    style="width:530px; max-height: 500px; overflow-y:scroll;"
+    class="backgroundColor pa-2 menu-filter-dropdown"
+    style="width:530px;"
   >
     <div class="grid" @click.stop>
       <template v-for="(filter,i) in filters" dense>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
index ba85f9cb34..1da6315b86 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
@@ -27,7 +27,7 @@
         </v-btn>
       </v-badge>
     </template>
-    <div class="backgroundColor pa-2" style="min-width: 330px; max-height: 500px; overflow-y:scroll;">
+    <div class="backgroundColor pa-2 menu-filter-dropdown" style="min-width: 330px;">
       <div class="sort-grid" @click.stop>
         <template v-for="(sort,i) in sortList" dense>
           <v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="sortList.splice(i,1)">