diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index a516ffc5a8..57c756a348 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -28,7 +28,7 @@ const { user: loggedInUser } = useGlobal()
 
 const { copy } = useCopy()
 
-const { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortsData } = useUserSorts()
+const { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortsData } = useUserSorts('Org')
 
 const users = ref<UserType[]>([])
 
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index 3bed047889..d5f4b4c718 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -9,7 +9,7 @@ import {
 } from 'nocodb-sdk'
 import type { WorkspaceUserRoles } from 'nocodb-sdk'
 import InfiniteLoading from 'v3-infinite-loading'
-import { isEeUI, storeToRefs } from '#imports'
+import { isEeUI, storeToRefs, useUserSorts } from '#imports'
 
 const basesStore = useBases()
 const { getProjectUsers, createProjectUser, updateProjectUser, removeProjectUser } = basesStore
@@ -17,6 +17,8 @@ const { activeProjectId } = storeToRefs(basesStore)
 
 const { orgRoles, baseRoles } = useRoles()
 
+const { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortsData } = useUserSorts('Project')
+
 const isSuper = computed(() => orgRoles.value?.[OrgUserRoles.SUPER_ADMIN])
 
 interface Collaborators {
@@ -36,6 +38,11 @@ const isLoading = ref(false)
 const isSearching = ref(false)
 const accessibleRoles = ref<(typeof ProjectRoles)[keyof typeof ProjectRoles][]>([])
 
+const sortedCollaborators = computed(() => {
+  console.log('collaborator', sorts.value, collaborators.value)
+  return handleGetSortsData([...collaborators.value], sorts.value)
+})
+
 const loadCollaborators = async () => {
   try {
     currentPage.value += 1
@@ -150,6 +157,7 @@ onMounted(async () => {
     } else if (currentRoleIndex !== -1) {
       accessibleRoles.value = OrderedProjectRoles.slice(currentRoleIndex + 1)
     }
+    loadSorts()
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   } finally {
@@ -192,7 +200,7 @@ onMounted(async () => {
 
           <div class="flex flex-col nc-scrollbar-md">
             <div
-              v-for="(collab, i) of collaborators"
+              v-for="(collab, i) of sortedCollaborators"
               :key="i"
               class="user-row flex flex-row border-b-1 py-1 min-h-14 items-center"
             >
diff --git a/packages/nc-gui/composables/useUserSorts.ts b/packages/nc-gui/composables/useUserSorts.ts
index 9fe603d4ca..a7410ebe1d 100644
--- a/packages/nc-gui/composables/useUserSorts.ts
+++ b/packages/nc-gui/composables/useUserSorts.ts
@@ -1,12 +1,13 @@
 import rfdc from 'rfdc'
 import type { UsersSortType } from '~/lib'
 import { useGlobal } from '#imports'
+import { extractRolesObj, ProjectRoles, OrgUserRoles, WorkspaceUserRoles } from 'nocodb-sdk'
 
 /**
  * Hook for managing user sorts and sort configurations.
  * @returns An object containing reactive values and functions related to user sorts.
  */
-export function useUserSorts() {
+export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') {
   const clone = rfdc()
 
   const { user } = useGlobal()
@@ -68,7 +69,7 @@ export function useUserSorts() {
                 }
                 return sort
               })
-              .filter((sort) => sort.field !== newSortConfig.field), // For now it is only single level of sorting so remove another sort field
+              .filter((sort) => sort.field === newSortConfig.field), // For now it is only single level of sorting so remove another sort field
           ]
         } else {
           // Add a new sort configuration
@@ -112,16 +113,53 @@ export function useUserSorts() {
    * @template T - The type of objects in the input array.
    */
   function handleGetSortsData<T extends Record<string, any>>(data: T[], sortsConfig: UsersSortType[] = sorts.value): T[] {
-    const sortedData = clone(data).sort((a, b) => {
+    let userRoleOrder: string[] = []
+    if (roleType === 'Workspace') {
+      userRoleOrder = Object.values(WorkspaceUserRoles)
+    } else if (roleType === 'Org') {
+      userRoleOrder = Object.values(OrgUserRoles)
+    } else if (roleType === 'Project') {
+      userRoleOrder = Object.values(ProjectRoles)
+    }
+    data = clone(data)
+    // let superUserIndex = data.findIndex((user) => user?.roles?.includes('super'))
+    // let superUser = superUserIndex !== -1 ? data.splice(superUserIndex, 1) : null
+    // console.log('super', superUser)
+    const sortedData = data.sort((a, b) => {
       let sortCondition = 0
 
       for (const { field, direction } of sortsConfig) {
         if (!a[field]) continue
 
-        if (direction === 'asc') {
-          sortCondition = sortCondition || a[field]?.localeCompare(b[field])
-        } else if (direction === 'desc') {
-          sortCondition = sortCondition || b[field]?.localeCompare(a[field])
+        if (field === 'roles') {
+          for (const role of userRoleOrder) {
+            const indexA = a?.roles?.split(',')?.indexOf(role) ?? -1
+            const indexB = b?.roles?.split(',')?.indexOf(role) ?? -1
+
+            // if (indexA === -1) {
+            //   sortCondition = sortCondition || direction === 'asc' ? 1 : -1 // Role A is missing, so it should come last
+            //   break
+            // }
+
+            // if (indexB === -1) {
+            //   sortCondition = sortCondition || direction === 'asc' ? -1 : 1 // Role B is missing, so it should come last
+            //   break
+            // }
+
+            if (direction === 'asc') {
+              sortCondition = sortCondition || indexA - indexB
+              break
+            } else if (direction === 'desc') {
+              sortCondition = sortCondition || indexB - indexA
+              break
+            }
+          }
+        } else {
+          if (direction === 'asc') {
+            sortCondition = sortCondition || a[field]?.localeCompare(b[field])
+          } else if (direction === 'desc') {
+            sortCondition = sortCondition || b[field]?.localeCompare(a[field])
+          }
         }
       }