diff --git a/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
index da684fd157..cdad3fc4c1 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
@@ -2,9 +2,11 @@
 const workspaceStore = useWorkspace()
 const projectStore = useProject()
 
+const { isUIAllowed } = useRoles()
+
 const { appInfo } = useGlobal()
 
-const { isWorkspaceLoading, isWorkspaceOwnerOrCreator, isWorkspaceSettingsPageOpened } = storeToRefs(workspaceStore)
+const { isWorkspaceLoading, isWorkspaceSettingsPageOpened } = storeToRefs(workspaceStore)
 
 const { navigateToWorkspaceSettings } = workspaceStore
 
@@ -45,7 +47,7 @@ const navigateToSettings = () => {
       <DashboardSidebarTopSectionHeader />
 
       <NcButton
-        v-if="isWorkspaceOwnerOrCreator"
+        v-if="isUIAllowed('workspaceSettings')"
         type="text"
         size="small"
         class="nc-sidebar-top-button"
diff --git a/packages/nc-gui/components/nc/Badge.vue b/packages/nc-gui/components/nc/Badge.vue
index 53d55c040e..e22f94dc14 100644
--- a/packages/nc-gui/components/nc/Badge.vue
+++ b/packages/nc-gui/components/nc/Badge.vue
@@ -1,19 +1,27 @@
 <script lang="ts" setup>
-const props = defineProps<{
-  color: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    color: string
+    border?: boolean
+  }>(),
+  {
+    border: true,
+  },
+)
 </script>
 
 <template>
   <div
-    class="border-1 h-6 rounded-md px-1"
+    class="h-6 rounded-md px-1"
     :class="{
       'border-purple-500 bg-purple-100': props.color === 'purple',
       'border-blue-500 bg-blue-100': props.color === 'blue',
       'border-green-500 bg-green-100': props.color === 'green',
       'border-orange-500 bg-orange-100': props.color === 'orange',
       'border-yellow-500 bg-yellow-100': props.color === 'yellow',
+      'border-red-500 bg-red-100': props.color === 'red',
       'border-gray-300': !props.color,
+      'border-1': props.border,
     }"
   >
     <slot />
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index d9dd0c43f2..8094e1f309 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -1,15 +1,25 @@
 <script lang="ts" setup>
-import type { WorkspaceUserType } from 'nocodb-sdk'
-import { OrderedProjectRoles, ProjectRoles, RoleColors, RoleLabels } from 'nocodb-sdk'
+import type { OrgUserRoles, WorkspaceUserRoles } from 'nocodb-sdk'
+import { OrderedProjectRoles, ProjectRoles, WorkspaceRolesToProjectRoles } from 'nocodb-sdk'
 import InfiniteLoading from 'v3-infinite-loading'
-import { isEeUI, storeToRefs, stringToColour, timeAgo, useGlobal } from '#imports'
+import { isEeUI, storeToRefs, stringToColour, timeAgo } from '#imports'
 
-const { user } = useGlobal()
 const projectsStore = useProjects()
 const { getProjectUsers, createProjectUser, updateProjectUser, removeProjectUser } = projectsStore
 const { activeProjectId } = storeToRefs(projectsStore)
 
-const collaborators = ref<WorkspaceUserType[]>([])
+const { projectRoles } = useRoles()
+
+const collaborators = ref<
+  {
+    id: string
+    email: string
+    main_roles: OrgUserRoles
+    roles: ProjectRoles
+    workspace_roles: WorkspaceUserRoles
+    created_at: string
+  }[]
+>([])
 const totalCollaborators = ref(0)
 const userSearchText = ref('')
 const currentPage = ref(0)
@@ -34,9 +44,12 @@ const loadCollaborators = async () => {
       ...collaborators.value,
       ...users.map((user: any) => ({
         ...user,
-        projectRoles: user.roles,
-        // TODO: Remove this hack and make the values consistent with the backend
-        roles: user.roles ?? (RoleLabels[user.workspace_roles as string] as string)?.toLowerCase() ?? ProjectRoles.NO_ACCESS,
+        project_roles: user.roles,
+        roles:
+          user.roles ??
+          (user.workspace_roles
+            ? WorkspaceRolesToProjectRoles[user.workspace_roles as WorkspaceUserRoles] ?? ProjectRoles.NO_ACCESS
+            : ProjectRoles.NO_ACCESS),
       })),
     ]
   } catch (e: any) {
@@ -62,19 +75,40 @@ const loadListData = async ($state: any) => {
   $state.loaded()
 }
 
-const updateCollaborator = async (collab, roles) => {
+const reloadCollabs = async () => {
+  currentPage.value = 0
+  collaborators.value = []
+  await loadCollaborators()
+}
+
+const updateCollaborator = async (collab: any, roles: ProjectRoles) => {
   try {
-    if (!roles || roles === 'inherit' || (roles === ProjectRoles.NO_ACCESS && !isEeUI)) {
+    if (
+      !roles ||
+      (roles === ProjectRoles.NO_ACCESS && !isEeUI) ||
+      (collab.workspace_roles && WorkspaceRolesToProjectRoles[collab.workspace_roles as WorkspaceUserRoles] === roles && isEeUI)
+    ) {
       await removeProjectUser(activeProjectId.value!, collab)
-      collab.projectRoles = null
-    } else if (collab.projectRoles) {
+      if (
+        collab.workspace_roles &&
+        WorkspaceRolesToProjectRoles[collab.workspace_roles as WorkspaceUserRoles] === roles &&
+        isEeUI
+      ) {
+        collab.roles = WorkspaceRolesToProjectRoles[collab.workspace_roles as WorkspaceUserRoles]
+      } else {
+        collab.roles = ProjectRoles.NO_ACCESS
+      }
+    } else if (collab.project_roles) {
+      collab.roles = roles
       await updateProjectUser(activeProjectId.value!, collab)
     } else {
+      collab.roles = roles
       await createProjectUser(activeProjectId.value!, collab)
-      collab.projectRoles = roles
     }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    reloadCollabs()
   }
 }
 
@@ -101,22 +135,13 @@ watchDebounced(
   },
 )
 
-const reloadCollabs = async () => {
-  currentPage.value = 0
-  collaborators.value = []
-  await loadCollaborators()
-}
-
-const userProjectRole = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles]>(() => {
-  const projectUser = collaborators.value?.find((collab) => collab.id === user.value?.id)
-  return projectUser?.projectRoles
-})
-
 onMounted(async () => {
   isLoading.value = true
   try {
     await loadCollaborators()
-    const currentRoleIndex = OrderedProjectRoles.findIndex((role) => role === userProjectRole.value)
+    const currentRoleIndex = OrderedProjectRoles.findIndex(
+      (role) => projectRoles.value && Object.keys(projectRoles.value).includes(role),
+    )
     if (currentRoleIndex !== -1) {
       accessibleRoles.value = OrderedProjectRoles.slice(currentRoleIndex + 1)
     }
@@ -180,41 +205,23 @@ onMounted(async () => {
               {{ timeAgo(collab.created_at) }}
             </div>
             <div class="w-1/5 roles">
-              <div class="nc-collaborator-role-select">
-                <NcSelect
-                  v-model:value="collab.roles"
-                  class="w-35 !rounded px-1"
-                  :virtual="true"
-                  :placeholder="$t('labels.noAccess')"
-                  :disabled="collab.id === user?.id || (collab.roles && !accessibleRoles.includes(collab.roles))"
-                  @change="(value) => updateCollaborator(collab, value)"
-                >
-                  <template #suffixIcon>
-                    <MdiChevronDown />
-                  </template>
-                  <a-select-option v-if="collab.id === user?.id" :value="userProjectRole">
-                    <NcBadge :color="RoleColors[userProjectRole]">
-                      <p class="badge-text">{{ RoleLabels[userProjectRole] }}</p>
-                    </NcBadge>
-                  </a-select-option>
-                  <a-select-option v-if="collab.roles && !accessibleRoles.includes(collab.roles)" :value="collab.roles">
-                    <NcBadge :color="RoleColors[collab.roles]">
-                      <p class="badge-text">{{ RoleLabels[collab.roles] }}</p>
-                    </NcBadge>
-                  </a-select-option>
-                  <template v-for="role of accessibleRoles" :key="`role-option-${role}`">
-                    <a-select-option :value="role">
-                      <NcBadge :color="RoleColors[role]">
-                        <p class="badge-text">{{ RoleLabels[role] }}</p>
-                      </NcBadge>
-                    </a-select-option>
-                  </template>
-                  <a-select-option v-if="isEeUI" value="inherit">
-                    <NcBadge color="white">
-                      <p class="badge-text">Inherit</p>
-                    </NcBadge>
-                  </a-select-option>
-                </NcSelect>
+              <div class="nc-collaborator-role-select p-2">
+                <template v-if="accessibleRoles.includes(collab.roles)">
+                  <RolesSelector
+                    :role="collab.roles"
+                    :roles="accessibleRoles"
+                    :inherit="
+                      isEeUI && collab.workspace_roles && WorkspaceRolesToProjectRoles[collab.workspace_roles]
+                        ? WorkspaceRolesToProjectRoles[collab.workspace_roles]
+                        : null
+                    "
+                    :description="false"
+                    :on-role-change="(role: ProjectRoles) => updateCollaborator(collab, role)"
+                  />
+                </template>
+                <template v-else>
+                  <RolesBadge class="!bg-white" :role="collab.roles" />
+                </template>
               </div>
             </div>
             <div class="w-1/5"></div>
@@ -238,7 +245,7 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .badge-text {
-  @apply text-[14px] pt-1 text-center;
+  @apply text-[14px] flex items-center justify-center gap-1 pt-0.5;
 }
 
 .nc-collaborators-list {
diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
index fd357fccb6..e913e3e52f 100644
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ProjectRoles } from 'nocodb-sdk'
+import { OrderedProjectRoles, ProjectRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useDashboard, useManageUsers } from '#imports'
 
 const emit = defineEmits(['invited'])
@@ -15,6 +15,8 @@ const { inviteUser } = useManageUsers()
 
 const { $e } = useNuxtApp()
 
+const { projectRoles } = useRoles()
+
 const usersData = ref<{
   invite_token?: string
   email?: string
@@ -47,6 +49,22 @@ const inviteUrl = computed(() =>
   usersData.value?.invite_token ? `${dashboardUrl.value}#/signup/${usersData.value.invite_token}` : null,
 )
 
+// allow only lower roles to be assigned
+const allowedRoles = ref<ProjectRoles[]>([])
+
+onMounted(async () => {
+  try {
+    const currentRoleIndex = OrderedProjectRoles.findIndex(
+      (role) => projectRoles.value && Object.keys(projectRoles.value).includes(role),
+    )
+    if (currentRoleIndex !== -1) {
+      allowedRoles.value = OrderedProjectRoles.slice(currentRoleIndex).filter((r) => r && r !== ProjectRoles.OWNER)
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+})
+
 const { copy } = useCopy(true)
 
 const { t } = useI18n()
@@ -117,36 +135,13 @@ const copyUrl = async () => {
             class="!max-w-130 !rounded"
           />
 
-          <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
-            <template #suffixIcon>
-              <MdiChevronDown />
-            </template>
-            <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
-              <!-- <div
-                class="flex flex-row h-full justify-start items-center"
-                :data-testid="`nc-share-invite-user-role-option-${role}`"
-              >
-                <div class="px-2 py-1 flex rounded-full text-xs capitalize">
-                  {{ role }}
-                </div>
-              </div> -->
-              <NcBadge v-if="role === ProjectRoles.OWNER" color="purple">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.CREATOR" color="blue">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.EDITOR" color="green">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.COMMENTER" color="orange">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.VIEWER" color="yellow">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-            </a-select-option>
-          </NcSelect>
+          <RolesSelector
+            class="px-1"
+            :role="inviteData.roles"
+            :roles="allowedRoles"
+            :on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
+            :description="true"
+          />
 
           <a-button
             type="primary"
diff --git a/packages/nc-gui/components/roles/Badge.vue b/packages/nc-gui/components/roles/Badge.vue
new file mode 100644
index 0000000000..8962d72196
--- /dev/null
+++ b/packages/nc-gui/components/roles/Badge.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { RoleColors, RoleIcons, RoleLabels } from 'nocodb-sdk'
+import { toRef } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    role: keyof typeof RoleLabels
+    clickable?: boolean
+    inherit?: boolean
+    border?: boolean
+  }>(),
+  {
+    clickable: false,
+    inherit: false,
+    border: true,
+  },
+)
+
+const roleRef = toRef(props, 'role')
+const clickableRef = toRef(props, 'clickable')
+const inheritRef = toRef(props, 'inherit')
+const borderRef = toRef(props, 'border')
+
+const roleProperties = computed(() => {
+  const role = roleRef.value
+
+  const color = RoleColors[role]
+  const icon = RoleIcons[role]
+  const label = RoleLabels[role]
+
+  return {
+    color,
+    icon,
+    label,
+  }
+})
+</script>
+
+<template>
+  <div
+    class="flex items-center !border-0"
+    :class="{
+      'cursor-pointer': clickableRef,
+    }"
+    style="width: fit-content"
+  >
+    <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef">
+      <div
+        class="badge-text flex items-center gap-[4px]"
+        :class="{
+          'text-purple-500': roleProperties.color === 'purple',
+          'text-blue-500': roleProperties.color === 'blue',
+          'text-green-500': roleProperties.color === 'green',
+          'text-orange-500': roleProperties.color === 'orange',
+          'text-yellow-500': roleProperties.color === 'yellow',
+          'text-red-500': roleProperties.color === 'red',
+          'text-gray-300': !roleProperties.color,
+        }"
+      >
+        <GeneralIcon :icon="roleProperties.icon" />
+        {{ roleProperties.label }}
+        <GeneralIcon v-if="clickableRef" icon="arrowDown" />
+      </div>
+    </NcBadge>
+    <div class="flex-1"></div>
+    <!--
+    <a-tooltip v-if="inheritRef" placement="bottom">
+      <div class="text-gray-400 text-xs p-1 rounded-md">Workspace Role</div>
+    </a-tooltip>
+    -->
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/roles/Selector.vue b/packages/nc-gui/components/roles/Selector.vue
new file mode 100644
index 0000000000..472aea2afc
--- /dev/null
+++ b/packages/nc-gui/components/roles/Selector.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { RoleDescriptions } from 'nocodb-sdk'
+import type { RoleLabels } from 'nocodb-sdk'
+import { toRef } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    role: keyof typeof RoleLabels
+    roles: (keyof typeof RoleLabels)[]
+    description?: boolean
+    inherit?: string
+    onRoleChange: (role: keyof typeof RoleLabels) => void
+  }>(),
+  {
+    description: true,
+  },
+)
+
+const roleRef = toRef(props, 'role')
+const inheritRef = toRef(props, 'inherit')
+const descriptionRef = toRef(props, 'description')
+</script>
+
+<template>
+  <NcDropdown>
+    <RolesBadge class="border-1" data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
+    <template #overlay>
+      <div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
+        <div class="flex flex-col gap-[4px]">
+          <div v-for="rl in props.roles" :key="rl" :value="rl" :selected="rl === roleRef" @click="props.onRoleChange(rl)">
+            <div
+              class="flex flex-col py-[3px] px-[8px] gap-[4px] bg-transparent cursor-pointer"
+              :class="{
+                'w-[350px]': descriptionRef,
+                'w-[200px]': !descriptionRef,
+              }"
+            >
+              <div class="flex items-center justify-between">
+                <RolesBadge
+                  class="!bg-white hover:!bg-gray-100"
+                  :class="`nc-role-select-${rl}`"
+                  :role="rl"
+                  :inherit="inheritRef === rl"
+                  :border="false"
+                />
+                <GeneralIcon v-if="rl === roleRef" icon="check" />
+              </div>
+              <div v-if="descriptionRef" class="text-gray-500">{{ RoleDescriptions[rl] }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </NcDropdown>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 7ef1d1da25..b5e3bcc9cb 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { OrderedWorkspaceRoles, RoleColors, RoleLabels, WorkspaceUserRoles } from 'nocodb-sdk'
+import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
 import { storeToRefs, stringToColour, timeAgo, useWorkspace } from '#imports'
 
-const { user } = useGlobal()
+const { workspaceRoles, loadRoles } = useRoles()
 
 const workspaceStore = useWorkspace()
 
 const { removeCollaborator, updateCollaborator: _updateCollaborator } = workspaceStore
 
-const { collaborators, workspaceRole } = storeToRefs(workspaceStore)
+const { collaborators } = storeToRefs(workspaceStore)
 const userSearchText = ref('')
 
 const filterCollaborators = computed(() => {
@@ -19,7 +19,8 @@ const filterCollaborators = computed(() => {
   return collaborators.value.filter((collab) => collab.email!.includes(userSearchText.value))
 })
 
-const updateCollaborator = async (collab) => {
+const updateCollaborator = async (collab: any, roles: WorkspaceUserRoles) => {
+  collab.roles = roles
   try {
     await _updateCollaborator(collab.id, collab.roles)
     message.success('Successfully updated user role')
@@ -29,14 +30,21 @@ const updateCollaborator = async (collab) => {
 }
 
 const accessibleRoles = computed<WorkspaceUserRoles[]>(() => {
-  const currentRoleIndex = OrderedWorkspaceRoles.findIndex((role) => role === workspaceRole.value)
-  return OrderedWorkspaceRoles.slice(currentRoleIndex + 1)
+  const currentRoleIndex = OrderedWorkspaceRoles.findIndex(
+    (role) => workspaceRoles.value && Object.keys(workspaceRoles.value).includes(role),
+  )
+  if (currentRoleIndex === -1) return []
+  return OrderedWorkspaceRoles.slice(currentRoleIndex + 1).filter((r) => r)
+})
+
+onMounted(async () => {
+  await loadRoles()
 })
 </script>
 
 <template>
   <div class="nc-collaborator-table-container mt-4 mx-6">
-    <WorkspaceInviteSection v-if="workspaceRole !== WorkspaceUserRoles.VIEWER" />
+    <WorkspaceInviteSection v-if="workspaceRoles !== WorkspaceUserRoles.VIEWER" />
     <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div>
     <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
       <div class="text-xl">Collaborators</div>
@@ -74,47 +82,18 @@ const accessibleRoles = computed<WorkspaceUserRoles[]>(() => {
             {{ timeAgo(collab.created_at) }}
           </td>
           <td class="w-1/5 roles">
-            <div v-if="collab.roles === WorkspaceUserRoles.OWNER" class="nc-collaborator-role-select">
-              <a-select v-model:value="collab.roles" class="w-30 !rounded px-1" disabled>
-                <template #suffixIcon>
-                  <MdiChevronDown />
-                </template>
-                <a-select-option :value="WorkspaceUserRoles.OWNER">
-                  <NcBadge color="purple">
-                    <p class="badge-text">Owner</p>
-                  </NcBadge>
-                </a-select-option>
-              </a-select>
-            </div>
-
-            <div v-else class="nc-collaborator-role-select">
-              <NcSelect
-                v-model:value="collab.roles"
-                class="w-30 !rounded px-1"
-                :disabled="collab.id === user?.id || !accessibleRoles.includes(collab.roles)"
-                @change="updateCollaborator(collab)"
-              >
-                <template #suffixIcon>
-                  <MdiChevronDown />
-                </template>
-                <a-select-option v-if="collab.id === user?.id" :value="workspaceRole">
-                  <NcBadge :color="RoleColors[workspaceRole]">
-                    <p class="badge-text">{{ RoleLabels[workspaceRole] }}</p>
-                  </NcBadge>
-                </a-select-option>
-                <a-select-option v-if="!accessibleRoles.includes(collab.roles)" :value="collab.roles">
-                  <NcBadge :color="RoleColors[collab.roles]">
-                    <p class="badge-text">{{ RoleLabels[collab.roles] }}</p>
-                  </NcBadge>
-                </a-select-option>
-                <template v-for="role of accessibleRoles" :key="`role-option-${role}`">
-                  <a-select-option v-if="role" :value="role">
-                    <NcBadge :color="RoleColors[role]">
-                      <p class="badge-text">{{ RoleLabels[role] }}</p>
-                    </NcBadge>
-                  </a-select-option>
-                </template>
-              </NcSelect>
+            <div class="nc-collaborator-role-select">
+              <template v-if="accessibleRoles.includes(collab.roles)">
+                <RolesSelector
+                  :role="collab.roles"
+                  :roles="accessibleRoles"
+                  :description="false"
+                  :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
+                />
+              </template>
+              <template v-else>
+                <RolesBadge class="!bg-white" :role="collab.roles" />
+              </template>
             </div>
           </td>
           <td class="w-1/5">
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 4121663bf4..3c0e31eaba 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -10,7 +10,8 @@ const inviteData = reactive({
 const workspaceStore = useWorkspace()
 
 const { inviteCollaborator: _inviteCollaborator } = workspaceStore
-const { isInvitingCollaborators, workspaceRole } = storeToRefs(workspaceStore)
+const { isInvitingCollaborators } = storeToRefs(workspaceStore)
+const { workspaceRoles } = useRoles()
 
 const inviteCollaborator = async () => {
   try {
@@ -23,9 +24,19 @@ const inviteCollaborator = async () => {
 }
 
 // allow only lower roles to be assigned
-const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
-  const currentRoleIndex = OrderedWorkspaceRoles.findIndex((role) => role === workspaceRole.value)
-  return OrderedWorkspaceRoles.slice(currentRoleIndex + 1)
+const allowedRoles = ref<WorkspaceUserRoles[]>([])
+
+onMounted(async () => {
+  try {
+    const currentRoleIndex = OrderedWorkspaceRoles.findIndex(
+      (role) => workspaceRoles.value && Object.keys(workspaceRoles.value).includes(role),
+    )
+    if (currentRoleIndex !== -1) {
+      allowedRoles.value = OrderedWorkspaceRoles.slice(currentRoleIndex + 1).filter((r) => r)
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
 })
 </script>
 
@@ -41,18 +52,13 @@ const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
           class="!max-w-130 !rounded"
         />
 
-        <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
-          <template #suffixIcon>
-            <MdiChevronDown />
-          </template>
-          <template v-for="role of allowedRoles" :key="`role-option-${role}`">
-            <a-select-option v-if="role" :value="role">
-              <NcBadge :color="RoleColors[role]">
-                <p class="badge-text">{{ RoleLabels[role] }}</p>
-              </NcBadge>
-            </a-select-option>
-          </template>
-        </NcSelect>
+        <RolesSelector
+          class="px-1"
+          :role="inviteData.roles"
+          :roles="allowedRoles"
+          :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
+          :description="true"
+        />
 
         <a-button
           type="primary"
diff --git a/packages/nc-gui/components/workspace/View.vue b/packages/nc-gui/components/workspace/View.vue
index 63c6c59048..ef61615333 100644
--- a/packages/nc-gui/components/workspace/View.vue
+++ b/packages/nc-gui/components/workspace/View.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { useTitle } from '@vueuse/core'
 import type { WorkspaceType } from 'nocodb-sdk'
-import { isEeUI } from '#imports'
 
 const router = useRouter()
 const route = router.currentRoute
 
+const { isUIAllowed } = useRoles()
+
 const workspaceStore = useWorkspace()
-const { isWorkspaceOwnerOrCreator, isWorkspaceOwner, activeWorkspace, workspaces } = storeToRefs(workspaceStore)
+const { activeWorkspace, workspaces } = storeToRefs(workspaceStore)
 const { loadCollaborators } = workspaceStore
 
 const tab = computed({
@@ -61,7 +62,7 @@ onMounted(() => {
     </div>
 
     <NcTabs v-model:activeKey="tab">
-      <template v-if="isWorkspaceOwnerOrCreator">
+      <template v-if="isUIAllowed('workspaceSettings')">
         <a-tab-pane key="collaborators" class="w-full">
           <template #tab>
             <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
@@ -73,7 +74,7 @@ onMounted(() => {
         </a-tab-pane>
       </template>
 
-      <template v-if="isWorkspaceOwner && isEeUI">
+      <template v-if="isUIAllowed('workspaceBilling')">
         <a-tab-pane key="billing" class="w-full">
           <template #tab>
             <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
@@ -84,7 +85,7 @@ onMounted(() => {
           <WorkspaceBilling />
         </a-tab-pane>
       </template>
-      <template v-if="isWorkspaceOwner && isEeUI">
+      <template v-if="isUIAllowed('workspaceManage')">
         <a-tab-pane key="settings" class="w-full">
           <template #tab>
             <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-settings">
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index 4dd532919a..c80212a318 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -111,6 +111,14 @@ export const useRoles = createSharedComposable(() => {
     } else if (projectId) {
       const res = await api.auth.me({ project_id: projectId })
 
+      user.value = {
+        ...user.value,
+        roles: res.roles,
+        project_roles: res.project_roles,
+      } as typeof User
+    } else {
+      const res = await api.auth.me({})
+
       user.value = {
         ...user.value,
         roles: res.roles,
diff --git a/packages/nc-gui/middleware/auth.global.ts b/packages/nc-gui/middleware/auth.global.ts
index 64702addf7..a52ae0e087 100644
--- a/packages/nc-gui/middleware/auth.global.ts
+++ b/packages/nc-gui/middleware/auth.global.ts
@@ -34,7 +34,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
   const { api } = useApi({ useGlobalInstance: true })
 
-  const { allRoles } = useRoles()
+  const { allRoles, loadRoles } = useRoles()
 
   /** If baseHostname defined block home page access under subdomains, and redirect to workspace page */
   if (
@@ -92,9 +92,9 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
     /** if users are accessing the projects without having enough permissions, redirect to My Projects page */
     if (to.params.projectId && from.params.projectId !== to.params.projectId) {
-      const user = await api.auth.me({ project_id: to.params.projectId as string })
+      await loadRoles()
 
-      if (user?.roles?.guest) {
+      if (state.user.value?.roles?.guest) {
         message.error("You don't have enough permission to access the project.")
 
         return navigateTo('/')
diff --git a/packages/nc-gui/store/users.ts b/packages/nc-gui/store/users.ts
index 208d9e6ccf..d209429a41 100644
--- a/packages/nc-gui/store/users.ts
+++ b/packages/nc-gui/store/users.ts
@@ -3,6 +3,7 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 export const useUsers = defineStore('userStore', () => {
   const { api } = useApi()
   const { user } = useGlobal()
+  const { loadRoles } = useRoles()
 
   const updateUserProfile = async ({
     attrs,
@@ -21,17 +22,7 @@ export const useUsers = defineStore('userStore', () => {
     }
   }
 
-  const loadCurrentUser = async () => {
-    const res = await api.auth.me()
-
-    user.value = {
-      ...user.value,
-      ...res,
-      roles: res.roles,
-      project_roles: res.project_roles,
-      workspace_roles: res.workspace_roles,
-    }
-  }
+  const loadCurrentUser = loadRoles
 
   watch(
     () => user.value?.id,
diff --git a/packages/nc-gui/store/workspace.ts b/packages/nc-gui/store/workspace.ts
index 97a687d68f..2e616062b8 100644
--- a/packages/nc-gui/store/workspace.ts
+++ b/packages/nc-gui/store/workspace.ts
@@ -64,22 +64,6 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     }
   })
 
-  /** getters */
-  const isWorkspaceCreator = computed(() => {
-    // todo: type correction
-    return orgRoles.value?.[OrgUserRoles.CREATOR]
-  })
-
-  const isWorkspaceOwner = computed(() => {
-    // todo: type correction
-    return orgRoles.value?.[OrgUserRoles.CREATOR]
-  })
-
-  const isWorkspaceOwnerOrCreator = computed(() => {
-    // todo: type correction
-    return orgRoles.value?.[OrgUserRoles.CREATOR]
-  })
-
   /** actions */
   const loadWorkspaces = async (_ignoreError = false) => {}
 
@@ -239,8 +223,6 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     removeCollaborator,
     updateCollaborator,
     collaborators,
-    isWorkspaceCreator,
-    isWorkspaceOwner,
     isInvitingCollaborators,
     isCollaboratorsLoading,
     addToFavourite,
@@ -257,7 +239,6 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     clearWorkspaces,
     upgradeActiveWorkspace,
     navigateToWorkspace,
-    isWorkspaceOwnerOrCreator,
     setLoadingState,
     navigateToWorkspaceSettings,
     lastPopulatedWorkspaceId,
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index ea282a3501..ec6987cfee 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -76,6 +76,13 @@ import Up from '~icons/material-symbols/keyboard-arrow-up-rounded'
 import Down from '~icons/material-symbols/keyboard-arrow-down-rounded'
 import PhTriangleFill from '~icons/ph/triangle-fill'
 
+// Roles
+import MaterialSymbolsManageAccountsOutline from '~icons/material-symbols/manage-accounts-outline'
+// account
+import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
+import MaterialSymbolsPersonSearchOutline from '~icons/material-symbols/person-search-outline'
+import MaterialSymbolsBlock from '~icons/material-symbols/block'
+
 // keep it for reference
 // todo: remove it after all icons are migrated
 /* export const iconMapOld = {
@@ -400,6 +407,12 @@ export const iconMap = {
   magic1: MdiMagicStaff,
   workspace: h('span', { class: 'material-symbols' }, 'dataset'),
   notification: NcNotification,
+  role_owner: MaterialSymbolsManageAccountsOutline,
+  role_creator: MaterialSymbolsManageAccountsOutline,
+  role_editor: h('span', { class: 'material-symbols' }, 'person'),
+  role_commenter: MdiCommentAccountOutline,
+  role_viewer: MaterialSymbolsPersonSearchOutline,
+  role_no_access: MaterialSymbolsBlock,
 }
 
 export const getMdiIcon = (type: string): any => {
diff --git a/packages/nocodb-sdk/src/lib/enums.ts b/packages/nocodb-sdk/src/lib/enums.ts
index c15c3e04a8..e0f9283594 100644
--- a/packages/nocodb-sdk/src/lib/enums.ts
+++ b/packages/nocodb-sdk/src/lib/enums.ts
@@ -194,6 +194,48 @@ export const RoleColors = {
   [OrgUserRoles.VIEWER]: 'yellow',
 };
 
+export const RoleDescriptions = {
+  [WorkspaceUserRoles.OWNER]: 'Full access to workspace',
+  [WorkspaceUserRoles.CREATOR]: 'Can create projects, sync tables, views, setup web-hooks and more',
+  [WorkspaceUserRoles.EDITOR]: 'Can edit data in workspace projects',
+  [WorkspaceUserRoles.COMMENTER]: 'Can view and comment data in workspace projects',
+  [WorkspaceUserRoles.VIEWER]: 'Can view data in workspace projects',
+  [ProjectRoles.OWNER]: 'Full access to project',
+  [ProjectRoles.CREATOR]: 'Can create tables, views, setup webhook, invite collaborators and more',
+  [ProjectRoles.EDITOR]: 'Can view, add & modify records, add comments on them',
+  [ProjectRoles.COMMENTER]: 'Can view records and add comment on them',
+  [ProjectRoles.VIEWER]: 'Can only view records',
+  [ProjectRoles.NO_ACCESS]: 'Cannot access this project',
+  [OrgUserRoles.SUPER_ADMIN]: 'Full access to all',
+  [OrgUserRoles.CREATOR]: 'Can create projects, sync tables, views, setup web-hooks and more',
+  [OrgUserRoles.VIEWER]: 'Can only view projects',
+};
+
+export const RoleIcons = {
+  [WorkspaceUserRoles.OWNER]: 'role_owner',
+  [WorkspaceUserRoles.CREATOR]: 'role_creator',
+  [WorkspaceUserRoles.EDITOR]: 'role_editor',
+  [WorkspaceUserRoles.COMMENTER]: 'role_commenter',
+  [WorkspaceUserRoles.VIEWER]: 'role_viewer',
+  [ProjectRoles.OWNER]: 'role_owner',
+  [ProjectRoles.CREATOR]: 'role_creator',
+  [ProjectRoles.EDITOR]: 'role_editor',
+  [ProjectRoles.COMMENTER]: 'role_commenter',
+  [ProjectRoles.VIEWER]: 'role_viewer',
+  [ProjectRoles.NO_ACCESS]: 'role_no_access',
+  [OrgUserRoles.SUPER_ADMIN]: 'role_owner',
+  [OrgUserRoles.CREATOR]: 'role_creator',
+  [OrgUserRoles.VIEWER]: 'role_viewer',
+};
+
+export const WorkspaceRolesToProjectRoles = {
+  [WorkspaceUserRoles.OWNER]: ProjectRoles.OWNER,
+  [WorkspaceUserRoles.CREATOR]: ProjectRoles.CREATOR,
+  [WorkspaceUserRoles.EDITOR]: ProjectRoles.EDITOR,
+  [WorkspaceUserRoles.COMMENTER]: ProjectRoles.COMMENTER,
+  [WorkspaceUserRoles.VIEWER]: ProjectRoles.VIEWER,
+};
+
 export const OrderedWorkspaceRoles = [
   WorkspaceUserRoles.OWNER,
   WorkspaceUserRoles.CREATOR,
diff --git a/packages/nocodb/src/guards/global/global.guard.ts b/packages/nocodb/src/guards/global/global.guard.ts
index 0d335daae3..c0dc6e8ce2 100644
--- a/packages/nocodb/src/guards/global/global.guard.ts
+++ b/packages/nocodb/src/guards/global/global.guard.ts
@@ -51,7 +51,7 @@ export class GlobalGuard extends AuthGuard(['jwt']) {
         return this.authenticate(req, {
           ...req.user,
           isAuthorized: true,
-          roles: req.user.roles === 'owner' ? 'owner,creator' : req.user.roles,
+          roles: req.user.roles,
         });
       }
     } else if (req.headers['xc-shared-base-id']) {
diff --git a/packages/nocodb/src/models/User.ts b/packages/nocodb/src/models/User.ts
index c4f608972f..2d384ab77e 100644
--- a/packages/nocodb/src/models/User.ts
+++ b/packages/nocodb/src/models/User.ts
@@ -263,8 +263,7 @@ export default class User implements UserType {
     const projectRoles = await new Promise((resolve) => {
       if (args.projectId) {
         ProjectUser.get(args.projectId, user.id).then(async (projectUser) => {
-          let roles = projectUser?.roles;
-          roles = roles === 'owner' ? 'owner,creator' : roles;
+          const roles = projectUser?.roles;
           // + (user.roles ? `,${user.roles}` : '');
           if (roles) {
             resolve(extractRolesObj(roles));
diff --git a/packages/nocodb/src/services/project-users/project-users.service.ts b/packages/nocodb/src/services/project-users/project-users.service.ts
index bad2b32a47..e939370bb5 100644
--- a/packages/nocodb/src/services/project-users/project-users.service.ts
+++ b/packages/nocodb/src/services/project-users/project-users.service.ts
@@ -290,7 +290,7 @@ export class ProjectUsersService {
       NcError.badRequest("Admin can't delete themselves!");
     }
 
-    if (!param.req.user?.roles?.owner) {
+    if (!param.req.user?.project_roles?.owner) {
       const user = await User.get(param.userId);
       if (user.roles?.split(',').includes('super'))
         NcError.forbidden(
@@ -298,7 +298,7 @@ export class ProjectUsersService {
         );
 
       const projectUser = await ProjectUser.get(project_id, param.userId);
-      if (projectUser?.roles?.split(',').includes('super'))
+      if (projectUser?.roles?.split(',').includes('owner'))
         NcError.forbidden('Insufficient privilege to delete a owner user.');
     }
 
diff --git a/packages/nocodb/src/strategies/google.strategy/google.strategy.ts b/packages/nocodb/src/strategies/google.strategy/google.strategy.ts
index fcc35c060a..489daeb920 100644
--- a/packages/nocodb/src/strategies/google.strategy/google.strategy.ts
+++ b/packages/nocodb/src/strategies/google.strategy/google.strategy.ts
@@ -36,8 +36,6 @@ export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
           ProjectUser.get(req.ncProjectId, user.id)
             .then(async (projectUser) => {
               user.roles = projectUser?.roles || user.roles;
-              user.roles =
-                user.roles === 'owner' ? 'owner,creator' : user.roles;
               // + (user.roles ? `,${user.roles}` : '');
 
               done(null, sanitiseUserObj(user));
diff --git a/packages/nocodb/src/utils/roleHelper.ts b/packages/nocodb/src/utils/roleHelper.ts
index 84eeaffcc2..ad77223cb4 100644
--- a/packages/nocodb/src/utils/roleHelper.ts
+++ b/packages/nocodb/src/utils/roleHelper.ts
@@ -6,7 +6,7 @@ export function getProjectRolePower(user: any) {
   const reverseOrderedProjectRoles = [...OrderedProjectRoles].reverse();
 
   if (!user.project_roles) {
-    NcError.badRequest('Role not found');
+    return -1;
   }
 
   // get most powerful role of user (TODO moving forward we will confirm that user has only one role)
diff --git a/tests/playwright/pages/Dashboard/ProjectView/AccessSettingsPage.ts b/tests/playwright/pages/Dashboard/ProjectView/AccessSettingsPage.ts
index 7c66bffb6f..8f3da39ed3 100644
--- a/tests/playwright/pages/Dashboard/ProjectView/AccessSettingsPage.ts
+++ b/tests/playwright/pages/Dashboard/ProjectView/AccessSettingsPage.ts
@@ -22,11 +22,11 @@ export class AccessSettingsPage extends BasePage {
       if (userEmail === email) {
         const roleDropdown = user.locator('.nc-collaborator-role-select');
 
-        const selectedRole = await user.locator('.nc-collaborator-role-select').innerText();
+        const selectedRole = await user.locator('.nc-collaborator-role-select .badge-text').innerText();
 
         await roleDropdown.click();
-        const menu = this.rootPage.locator('.ant-select-dropdown:visible');
-        const clickClbk = () => menu.locator(`.ant-select-item:has-text("${role}"):visible`).last().click();
+        const menu = this.rootPage.locator('.nc-role-select-dropdown:visible');
+        const clickClbk = () => menu.locator(`.nc-role-select-${role.toLowerCase()}:visible`).last().click();
 
         if (networkValidation && !selectedRole.includes(role)) {
           await this.waitForResponse({
diff --git a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
index 0423becc7e..f58db52028 100644
--- a/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
+++ b/tests/playwright/pages/WorkspacePage/CollaborationPage.ts
@@ -39,8 +39,8 @@ export class CollaborationPage extends BasePage {
 
     // role
     await this.selector_role.click();
-    await this.rootPage.waitForTimeout(500);
-    await this.rootPage.locator(`.ant-select-item-option-content:has-text("${role}"):visible`).click();
+    const menu = this.rootPage.locator('.nc-role-select-dropdown:visible');
+    await menu.locator(`.nc-role-select-workspace-level-${role.toLowerCase()}:visible`).click();
 
     // submit
 
diff --git a/tests/playwright/setup/index.ts b/tests/playwright/setup/index.ts
index 6d8eb61c19..f0d28739b1 100644
--- a/tests/playwright/setup/index.ts
+++ b/tests/playwright/setup/index.ts
@@ -384,7 +384,7 @@ const setup = async ({
       email: `user@nocodb.com`,
       password: getDefaultPwd(),
     });
-    await axios.post(`http://localhost:8080/api/v1/license`, { key: '' }, { headers: { 'xc-auth': admin.data.token } });
+    if (!isEE()) await axios.post(`http://localhost:8080/api/v1/license`, { key: '' }, { headers: { 'xc-auth': admin.data.token } });
   } catch (e) {
     // ignore error: some roles will not have permission for license reset
     // console.error(`Error resetting project: ${process.env.TEST_PARALLEL_INDEX}`, e);