diff --git a/changelog/unreleased/bugfix-fix-order-in-roles-drop-down b/changelog/unreleased/bugfix-fix-order-in-roles-drop-down
new file mode 100644
index 00000000000..cfd22976ad3
--- /dev/null
+++ b/changelog/unreleased/bugfix-fix-order-in-roles-drop-down
@@ -0,0 +1,7 @@
+Bugfix: Fix order in roles drop down
+
+We've fixed an issue where the order of roles in the roles drop down was not correct.
+Now the roles are sorted as delegated by the backend.
+
+https://github.com/owncloud/web/pull/11916
+https://github.com/owncloud/web/issues/11915
\ No newline at end of file
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index 5dc51434101..a01e6645512 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -144,10 +144,14 @@ export default defineComponent({
     const availableInternalRoles = inject<Ref<ShareRole[]>>('availableInternalShareRoles')
     const availableExternalRoles = inject<Ref<ShareRole[]>>('availableExternalShareRoles')
     const availableRoles = computed(() => {
+      let roles = availableInternalRoles
       if (props.isExternal) {
-        return unref(availableExternalRoles)
+        roles = availableExternalRoles
       }
-      return unref(availableInternalRoles)
+
+      return [...unref(roles)].sort(
+        (role1, role2) => role1['@libre.graph.weight'] - role2['@libre.graph.weight']
+      )
     })
 
     let initialSelectedRole: ShareRole
@@ -295,6 +299,7 @@ export default defineComponent({
         &:first-child {
           margin-top: 0;
         }
+
         &:last-child {
           margin-bottom: 0;
         }
@@ -312,6 +317,7 @@ export default defineComponent({
       }
     }
   }
+
   &-role-select-btn {
     max-width: 100%;
   }