diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
index 6cf406ed..f3a5f55a 100644
--- a/forms-flow-admin/src/components/roles/roles.tsx
+++ b/forms-flow-admin/src/components/roles/roles.tsx
@@ -64,9 +64,13 @@ const Roles = React.memo((props: any) => {
   const [permission, setPermission] = React.useState([]);
 
   const filterList = (filterTerm, List) => {
-    let roleList = removingTenantId(List,tenantId);
+    let roleList = removingTenantId(List, tenantId);
+  
+    // Escape backslashes and square brackets in filterTerm for safe regex use
+    const escapedFilterTerm = filterTerm.replace(/([\\[])/g, '\\$1');
+  
     let newRoleList = roleList.filter((role) => {
-      return role.name.toLowerCase().search(filterTerm.toLowerCase()) !== -1;
+      return role.name.toLowerCase().search(escapedFilterTerm.toLowerCase()) !== -1;
     });
     return newRoleList;
   };
diff --git a/forms-flow-admin/src/index.scss b/forms-flow-admin/src/index.scss
index 9a9c83a8..381a9402 100644
--- a/forms-flow-admin/src/index.scss
+++ b/forms-flow-admin/src/index.scss
@@ -11,10 +11,6 @@ bottom: 0;
     color: #0072ed !important;
 }
 
-.react-bootstrap-table table {
-    min-height: 60vh;
-  }
-  
-  .react-bootstrap-table{
-    min-height: 65vh;
-  }
+
+
+
diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss
index a7748fcf..050664c0 100644
--- a/forms-flow-theme/scss/_table.scss
+++ b/forms-flow-theme/scss/_table.scss
@@ -95,6 +95,12 @@ $status-radius: 50%;
   }
 }
 
+.custom-table th,
+.custom-table td {
+  vertical-align: middle;
+}
+
+
 .width-40 {
   width: 25rem !important;
   max-width: 40% !important;