diff --git a/packages/nc-gui/components/auth/shareOrInviteModal.vue b/packages/nc-gui/components/auth/shareOrInviteModal.vue
index 573c0cbf6e..65e1277854 100644
--- a/packages/nc-gui/components/auth/shareOrInviteModal.vue
+++ b/packages/nc-gui/components/auth/shareOrInviteModal.vue
@@ -206,7 +206,7 @@ export default {
       const colors = this.$store.state.windows.darkTheme
         ? enumColor.dark
         : enumColor.light;
-      return this.roles.reduce((o, r, i) => {
+      return ['owner'].concat(this.roles).reduce((o, r, i) => {
         o[r] = colors[i % colors.length];
         return o;
       }, {});
diff --git a/packages/nc-gui/components/auth/userManagement.vue b/packages/nc-gui/components/auth/userManagement.vue
index f7e123bc48..4a7b861ad3 100644
--- a/packages/nc-gui/components/auth/userManagement.vue
+++ b/packages/nc-gui/components/auth/userManagement.vue
@@ -494,7 +494,7 @@ export default {
       const colors = this.$store.state.windows.darkTheme
         ? enumColor.dark
         : enumColor.light;
-      return this.roles.reduce((o, r, i) => {
+      return ['owner'].concat(this.roles).reduce((o, r, i) => {
         o[r] = colors[i % colors.length];
         return o;
       }, {});