diff --git a/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue b/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue
index 99d6ff56f..9c1aee884 100644
--- a/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue
@@ -42,7 +42,7 @@
             rounded
             color-classes="bg-highlight-3 text-foreground-2 capitalize"
           >
-            {{ item.role }}
+            {{ getRoleLabel(item.role) }}
           </CommonBadge>
         </div>
       </template>
@@ -184,4 +184,7 @@ const onActionChosen = async (
 const toggleMenu = (itemId: string) => {
   showActionsMenu.value[itemId] = !showActionsMenu.value[itemId]
 }
+
+// Not using shared getRoleLabel as it requires strict workspace role types, but GraphQL currently returns string
+const getRoleLabel = (role: string) => role.split(':')[1]
 </script>