diff --git a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index 8e7e643cac..43f2be4e98 100644
--- a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -211,7 +211,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
           {{ user.email }}
         </div>
         <div class="flex w-1/6 justify-center flex-wrap ml-4">
-          <div class="rounded-full px-2 py-1" :style="{ backgroundColor: projectRoleTagColors[role] }">
+          <div class="rounded-full px-2 py-1" :style="{ backgroundColor: projectRoleTagColors[user.roles as String] }">
             {{ user.roles }}
           </div>
         </div>
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
index 8b3551bfe5..7a49c18f9b 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
@@ -9,7 +9,7 @@ import MidAccountIcon from '~icons/mdi/account-outline'
 import ContentCopyIcon from '~icons/mdi/content-copy'
 import type { User } from '~/lib/types'
 import { ProjectRole } from '~/lib/enums'
-import { projectRoleTagColors } from '~/utils/userUtils'
+import { projectRoleTagColors, projectRoles } from '~/utils/userUtils'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { isEmail } from '~/utils/validation'
 
@@ -203,7 +203,7 @@ const clickInviteMore = () => {
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
                     <a-select v-model:value="usersData.role">
-                      <a-select-option v-for="(role, index) in Object.keys(projectRoleTagColors)" :key="index" :value="role">
+                      <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role">
                         <div class="flex flex-row h-full justify-start items-center">
                           <div
                             class="px-2 py-1 flex rounded-full text-xs"
diff --git a/packages/nc-gui-v2/lib/enums.ts b/packages/nc-gui-v2/lib/enums.ts
index 8415616bb1..bbe6239fe2 100644
--- a/packages/nc-gui-v2/lib/enums.ts
+++ b/packages/nc-gui-v2/lib/enums.ts
@@ -5,6 +5,7 @@ export enum Role {
 }
 
 export enum ProjectRole {
+  Owner = 'owner',
   Creator = 'creator',
   Editor = 'editor',
   Commenter = 'commenter',
diff --git a/packages/nc-gui-v2/utils/userUtils.ts b/packages/nc-gui-v2/utils/userUtils.ts
index b847523f22..886557520a 100644
--- a/packages/nc-gui-v2/utils/userUtils.ts
+++ b/packages/nc-gui-v2/utils/userUtils.ts
@@ -1,8 +1,11 @@
 import { ProjectRole } from '~/lib/enums'
 
 export const projectRoleTagColors = {
+  [ProjectRole.Owner]: '#cfdffe',
   [ProjectRole.Creator]: '#d0f1fd',
   [ProjectRole.Editor]: '#c2f5e8',
   [ProjectRole.Commenter]: '#ffdaf6',
   [ProjectRole.Viewer]: '#ffdce5',
 }
+
+export const projectRoles = [ProjectRole.Creator, ProjectRole.Editor, ProjectRole.Commenter, ProjectRole.Viewer]