diff --git a/changelog/unreleased/enhancement-admin-settings-users-role-graph-api-usage b/changelog/unreleased/enhancement-admin-settings-users-role-graph-api-usage
new file mode 100644
index 00000000000..7bbbce2d5e7
--- /dev/null
+++ b/changelog/unreleased/enhancement-admin-settings-users-role-graph-api-usage
@@ -0,0 +1,6 @@
+Enhancement: Admin settings users section uses graph api for role assignments
+
+We've switched over to utilizing user role assignments data from the graph api instead of the custom settings api.
+Especially for the list view this leads to improved performance.
+
+https://github.com/owncloud/web/pull/8261
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
index fae247a054c..1730f9fe3a8 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
@@ -31,7 +31,7 @@
         <tr>
           <th scope="col" class="oc-pr-s" v-text="$gettext('Role')" />
           <td>
-            <span v-if="user.role" v-text="user.role.displayName" />
+            <span v-if="user.appRoleAssignments" v-text="roleDisplayName" />
           </td>
         </tr>
       </table>
@@ -57,6 +57,10 @@ export default defineComponent({
     users: {
       type: Array,
       required: true
+    },
+    roles: {
+      type: Array,
+      required: true
     }
   },
   computed: {
@@ -70,6 +74,13 @@ export default defineComponent({
       return this.$gettextInterpolate('%{count} users selected', {
         count: this.users.length
       })
+    },
+    roleDisplayName() {
+      const assignedRole = this.user.appRoleAssignments[0]
+
+      return this.$gettext(
+        this.roles.find((role) => role.id === assignedRole.appRoleId)?.displayName || ''
+      )
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
index f3a629c5780..d2b48c63845 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
@@ -21,21 +21,27 @@
           @change="validateEmail"
         />
         <oc-text-input
-          v-model="editUser.passwordProfile.password"
+          :model-value="editUser"
           class="oc-mb-s"
           :label="$gettext('Password')"
           type="password"
           :fix-message-line="true"
           default-value="●●●●●●●●"
+          @update:modelValue="onUpdatePassword"
         />
         <div class="oc-mb-s">
           <oc-select
-            v-model="editUser.role"
+            :model-value="editUser"
             :label="$gettext('Role')"
             option-label="displayName"
-            :options="roles"
+            :options="translatedRoleOptions"
             :clearable="false"
-          />
+            @update:modelValue="onUpdateRole"
+          >
+            <template #selected-option>
+              {{ selectedRoleName }}
+            </template>
+          </oc-select>
           <div class="oc-text-input-message"></div>
         </div>
         <quota-select
@@ -64,7 +70,7 @@
         :compare-object="editUser"
         :confirm-button-disabled="invalidFormData"
         @revert="revertChanges"
-        @confirm="$emit('confirm', editUser)"
+        @confirm="$emit('confirm', { user, editUser })"
       ></compare-save-dialog>
     </form>
   </div>
@@ -124,6 +130,11 @@ export default defineComponent({
     return { editUser, formData, groupOptions }
   },
   computed: {
+    translatedRoleOptions() {
+      return this.roles.map((role) => {
+        return { ...role, displayName: this.$gettext(role.displayName) }
+      })
+    },
     invalidFormData() {
       return Object.values(this.formData)
         .map((v) => !!v.valid)
@@ -134,12 +145,18 @@ export default defineComponent({
     },
     compareSaveDialogOriginalObject() {
       return cloneDeep({ ...this.user, passwordProfile: { password: '' } })
+    },
+    selectedRoleName() {
+      return this.$gettext(
+        this.roles.find((role) => role.id === this.editUser.appRoleAssignments[0].appRoleId)
+          .displayName
+      )
     }
   },
   watch: {
     user: {
       handler: function () {
-        this.editUser = cloneDeep({ ...this.user, passwordProfile: { password: '' } })
+        this.editUser = cloneDeep(this.user)
       },
       deep: true,
       immediate: true
@@ -182,6 +199,14 @@ export default defineComponent({
         formDataValue.valid = true
         formDataValue.errorMessage = ''
       })
+    },
+    onUpdateRole(role) {
+      this.editUser.appRoleAssignments[0].appRoleId = role.id
+    },
+    onUpdatePassword(password) {
+      this.editUser.passwordProfile = {
+        password
+      }
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index e17a835f109..4f8cd4a93ef 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -44,7 +44,7 @@
         <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
       </template>
       <template #role="{ item }">
-        <template v-if="item.role">{{ item.role.displayName }}</template>
+        <template v-if="item.appRoleAssignments">{{ getRoleDisplayNameByUser(item) }}</template>
       </template>
       <template #actions="{ item }">
         <oc-button
@@ -88,6 +88,10 @@ export default defineComponent({
       type: Array,
       required: true
     },
+    roles: {
+      type: Array,
+      required: true
+    },
     selectedUsers: {
       type: Array,
       required: true
@@ -227,8 +231,8 @@ export default defineComponent({
         let a, b
 
         if (prop === 'role') {
-          a = user1.role?.displayName || ''
-          b = user2.role?.displayName || ''
+          a = this.getRoleDisplayNameByUser(user1)
+          b = this.getRoleDisplayNameByUser(user2)
         } else {
           a = user1[prop] || ''
           b = user2[prop] || ''
@@ -243,6 +247,13 @@ export default defineComponent({
     },
     getSelectUserLabel(user) {
       return this.$gettext('Select %{ user }', { user: user.displayName }, true)
+    },
+    getRoleDisplayNameByUser(user) {
+      const assignedRole = user.appRoleAssignments[0]
+
+      return this.$gettext(
+        this.roles.find((role) => role.id === assignedRole.appRoleId)?.displayName || ''
+      )
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/composables/loadTasks/index.ts b/packages/web-app-admin-settings/src/composables/loadTasks/index.ts
deleted file mode 100644
index 3cfdd16aebd..00000000000
--- a/packages/web-app-admin-settings/src/composables/loadTasks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useLoadTasks'
diff --git a/packages/web-app-admin-settings/src/composables/loadTasks/useLoadTasks.ts b/packages/web-app-admin-settings/src/composables/loadTasks/useLoadTasks.ts
deleted file mode 100644
index b425afc7d90..00000000000
--- a/packages/web-app-admin-settings/src/composables/loadTasks/useLoadTasks.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useTask } from 'vue-concurrency'
-import axios from 'axios'
-import { unref, Ref } from 'vue'
-import { v4 as uuidV4 } from 'uuid'
-
-export const useLoadTasks = ({
-  accessToken,
-  roles,
-  userAssignments
-}: {
-  accessToken: Ref<string>
-  roles: Ref<any[]>
-  userAssignments: Ref<any>
-}) => {
-  return {
-    /**
-     * Setting api calls are just temporary and will be replaced with the graph api,
-     * as the backend supports it.
-     */
-    loadRolesTask: useTask(function* () {
-      const rolesResponse = yield axios.post(
-        '/api/v0/settings/roles-list',
-        {},
-        {
-          headers: {
-            authorization: `Bearer ${unref(accessToken)}`,
-            'X-Request-ID': uuidV4()
-          }
-        }
-      )
-      roles.value = rolesResponse.data.bundles
-    }),
-
-    /**
-     * Setting api calls are just temporary and will be replaced with the graph api,
-     * as the backend supports it.
-     */
-    loadUserRoleTask: useTask(function* (signal, ref) {
-      const userAssignmentResponse = yield axios.post(
-        '/api/v0/settings/assignments-list',
-        {
-          account_uuid: ref.user?.id
-        },
-        {
-          headers: {
-            authorization: `Bearer ${unref(accessToken)}`,
-            'X-Request-ID': uuidV4()
-          }
-        }
-      )
-      const assignments = userAssignmentResponse.data?.assignments
-      ref.user.role = {}
-      const roleAssignment = assignments.find((assignment) => 'roleId' in assignment)
-
-      if (roleAssignment) {
-        const role = roles.value.find((role) => role.id === roleAssignment.roleId)
-        if (role) {
-          ref.user.role = role
-        }
-      }
-
-      userAssignments.value[ref.user?.id] = userAssignmentResponse.data?.assignments
-    }),
-
-    addRoleAssignment(editUser: any) {
-      return axios.post(
-        '/api/v0/settings/assignments-add',
-        {
-          account_uuid: editUser.id,
-          role_id: editUser.role.id
-        },
-        {
-          headers: {
-            authorization: `Bearer ${this.accessToken}`,
-            'X-Request-ID': uuidV4()
-          }
-        }
-      )
-    }
-  }
-}
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 0d6c2007b3b..a4b8274514c 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -50,6 +50,7 @@
         <div v-else>
           <UsersList
             :users="users"
+            :roles="roles"
             :class="{ 'users-table-squashed': sideBarOpen }"
             :selected-users="selectedUsers"
             :header-position="listHeaderPosition"
@@ -91,7 +92,6 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
-import { useLoadTasks } from '../composables/loadTasks/useLoadTasks'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
@@ -111,54 +111,40 @@ export default defineComponent({
     const users = ref([])
     const groups = ref([])
     const roles = ref([])
-    const userAssignments = ref({})
     const selectedUsers = ref([])
     const loadedUser = ref(null)
     const sideBarLoading = ref(false)
     const listHeaderPosition = ref(0)
     const template = ref()
     let loadResourcesEventToken
-
-    const { loadRolesTask, loadUserRoleTask, addRoleAssignment } = useLoadTasks({
-      accessToken,
-      roles,
-      userAssignments
-    })
+    let userUpdatedEventToken
 
     const loadGroupsTask = useTask(function* (signal) {
       const groupsResponse = yield unref(graphClient).groups.listGroups()
       groups.value = groupsResponse.data.value
     })
 
+    const loadAppRolesTask = useTask(function* (signal) {
+      const applicationsResponse = yield unref(graphClient).applications.listApplications()
+      roles.value = applicationsResponse.data.value[0].appRoles
+    })
+
     const loadResourcesTask = useTask(function* (signal) {
       const usersResponse = yield unref(graphClient).users.listUsers('displayName')
       users.value = usersResponse.data.value || []
 
-      users.value.forEach((user) => {
-        user.memberOf = user.memberOf || []
-      })
-
       yield loadGroupsTask.perform()
-      yield loadRolesTask.perform()
-
-      for (const user of users.value) {
-        try {
-          yield loadUserRoleTask.perform({ user })
-        } catch (e) {
-          console.error(`Failed to load role for user '${user.displayName}'`)
-        }
-      }
+      yield loadAppRolesTask.perform()
     })
 
+    /**
+     * This function reloads the user with expanded attributes,
+     * this is necessary as we don't load all the data while listing the users
+     * for performance reasons
+     */
     const loadAdditionalUserDataTask = useTask(function* (signal, user) {
       const { data } = yield unref(graphClient).users.getUser(user.id)
-      if (!data.drive) {
-        return { ...user }
-      }
-      if (!data.drive.quota) {
-        data.drive.quota = { total: 0 }
-      }
-      return { ...user, ...data }
+      return data
     })
 
     watch(
@@ -191,18 +177,24 @@ export default defineComponent({
       loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
         loadResourcesTask.perform()
       })
+      userUpdatedEventToken = eventBus.subscribe(
+        'app.admin-settings.users.user.updated',
+        (updatedUser) => {
+          selectedUsers.value = [updatedUser]
+        }
+      )
       calculateListHeaderPosition()
       window.addEventListener('resize', calculateListHeaderPosition)
     })
 
     onBeforeUnmount(() => {
       eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
+      eventBus.unsubscribe('app.admin-settings.users.user.updated', userUpdatedEventToken)
     })
 
     return {
       ...useSideBar(),
       template,
-      addRoleAssignment,
       selectedUsers,
       loadedUser,
       sideBarLoading,
@@ -254,7 +246,7 @@ export default defineComponent({
           component: DetailsPanel,
           default: true,
           enabled: true,
-          componentAttrs: { user: this.loadedUser, users: this.selectedUsers }
+          componentAttrs: { user: this.loadedUser, users: this.selectedUsers, roles: this.roles }
         },
         {
           app: 'EditPanel',
@@ -359,15 +351,14 @@ export default defineComponent({
     },
     async createUser(user) {
       try {
-        const response = await this.graphClient.users.createUser(user)
+        const { id: createdUserId } = (await this.graphClient.users.createUser(user))?.data
+        const { data: createdUser } = await this.graphClient.users.getUser(createdUserId)
+        this.users.push(createdUser)
+
         this.toggleCreateUserModal()
         this.showMessage({
           title: this.$gettext('User was created successfully')
         })
-        this.users.push({
-          ...response?.data,
-          ...{ memberOf: [], role: this.roles.find((role) => role.name === 'user') }
-        })
       } catch (error) {
         console.error(error)
         this.showMessage({
@@ -376,23 +367,14 @@ export default defineComponent({
         })
       }
     },
-    async editUser(editUser) {
+    async editUser({ user, editUser }) {
       try {
-        const user = this.users.find((user) => user.id === editUser.id)
-        const actualUser = {
-          ...(user && user),
-          passwordProfile: { password: '' }
-        }
-
         const graphEditUserRawObjectExtractor = (user) => {
-          return omit(user, ['drive', 'role'])
+          return omit(user, ['drive', 'appRoleAssignments', 'memberOf'])
         }
 
         if (
-          !isEqual(
-            graphEditUserRawObjectExtractor(actualUser),
-            graphEditUserRawObjectExtractor(editUser)
-          )
+          !isEqual(graphEditUserRawObjectExtractor(user), graphEditUserRawObjectExtractor(editUser))
         ) {
           await this.graphClient.users.editUser(
             editUser.id,
@@ -400,42 +382,29 @@ export default defineComponent({
           )
         }
 
-        if (!isEqual(actualUser.drive, editUser.drive)) {
-          const updateDriveResponse = await this.graphClient.drives.updateDrive(
-            editUser.drive.id,
-            { quota: { total: editUser.drive.quota.total } },
-            {}
-          )
-          if (editUser.id === this.currentUser.uuid) {
-            // Load current user quota
-            this.UPDATE_SPACE_FIELD({
-              id: editUser.drive.id,
-              field: 'spaceQuota',
-              value: updateDriveResponse.data.quota
-            })
-          }
+        if (!isEqual(user.drive?.quota?.total, editUser.drive?.quota?.total)) {
+          await this.updateUserDrive(editUser)
         }
 
-        if (!isEqual(actualUser.memberOf, editUser.memberOf)) {
-          await this.editUserGroupAssignments(editUser)
+        if (!isEqual(user.memberOf, editUser.memberOf)) {
+          await this.updateUserGroupAssignments(user, editUser)
         }
 
-        if (!isEqual(actualUser.role, editUser.role)) {
-          /**
-           * Setting api calls are just temporary and will be replaced with the graph api,
-           * as the backend supports it.
-           */
-          await this.addRoleAssignment(editUser)
+        if (
+          !isEqual(user.appRoleAssignments[0].appRoleId, editUser.appRoleAssignments[0].appRoleId)
+        ) {
+          await this.updateUserAppRoleAssignments(user, editUser)
         }
 
-        const userIndex = this.users.findIndex((user) => user.id === editUser.id)
-        this.users[userIndex] = editUser
-        /**
-         * The user object gets actually exchanged, therefore we update the selected users
-         */
-        this.selectedUsers = [editUser]
+        const { data: updatedUser } = await this.graphClient.users.getUser(user.id)
+
+        const userIndex = this.users.findIndex((user) => user.id === updatedUser.id)
+        this.users[userIndex] = updatedUser
 
         eventBus.publish('sidebar.entity.saved')
+        eventBus.publish('app.admin-settings.users.user.updated', updatedUser)
+
+        return updatedUser
       } catch (error) {
         console.error(error)
         this.showMessage({
@@ -444,40 +413,44 @@ export default defineComponent({
         })
       }
     },
-    async editUserGroupAssignments(editUser) {
-      try {
-        const user = this.users.find((user) => user.id === editUser.id)
-
-        const groupsToAdd = editUser.memberOf.filter((editUserGroup) => {
-          return !user.memberOf.some((g) => g.id === editUserGroup.id)
-        })
-
-        const groupsToDelete = user.memberOf.filter((editUserGroup) => {
-          return !editUser.memberOf.some((g) => g.id === editUserGroup.id)
+    async updateUserAppRoleAssignments(user, editUser) {
+      await this.graphClient.users.createUserAppRoleAssignment(user.id, {
+        appRoleId: editUser.appRoleAssignments[0].appRoleId,
+        resourceId: editUser.appRoleAssignments[0].resourceId,
+        principalId: editUser.id
+      })
+    },
+    async updateUserDrive(editUser) {
+      const updateDriveResponse = await this.graphClient.drives.updateDrive(
+        editUser.drive.id,
+        { quota: { total: editUser.drive.quota.total } },
+        {}
+      )
+
+      if (editUser.id === this.currentUser.uuid) {
+        // Load current user quota
+        this.UPDATE_SPACE_FIELD({
+          id: editUser.drive.id,
+          field: 'spaceQuota',
+          value: updateDriveResponse.data.quota
         })
+      }
+    },
+    async updateUserGroupAssignments(user, editUser) {
+      const groupsToAdd = editUser.memberOf.filter((editUserGroup) => {
+        return !user.memberOf.some((g) => g.id === editUserGroup.id)
+      })
 
-        for (const groupToAdd of groupsToAdd) {
-          await this.graphClient.groups.addMember(groupToAdd.id, user.id, this.configuration.server)
-        }
-
-        for (const groupToDelete of groupsToDelete) {
-          await this.graphClient.groups.deleteMember(groupToDelete.id, user.id)
-        }
+      const groupsToDelete = user.memberOf.filter((editUserGroup) => {
+        return !editUser.memberOf.some((g) => g.id === editUserGroup.id)
+      })
 
-        const userIndex = this.users.findIndex((user) => user.id === editUser.id)
-        this.users[userIndex] = editUser
-        /**
-         * The user object gets actually exchanged, therefore we update the selected users
-         */
-        this.selectedUsers = [editUser]
+      for (const groupToAdd of groupsToAdd) {
+        await this.graphClient.groups.addMember(groupToAdd.id, user.id, this.configuration.server)
+      }
 
-        eventBus.publish('sidebar.entity.saved')
-      } catch (error) {
-        console.error(error)
-        this.showMessage({
-          title: this.$gettext('Failed to edit group assignments'),
-          status: 'danger'
-        })
+      for (const groupToDelete of groupsToDelete) {
+        await this.graphClient.groups.deleteMember(groupToDelete.id, user.id)
       }
     }
   }
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
index 8094bbf98d8..3d562ae0d01 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -7,9 +7,9 @@ exports[`EditPanel renders all available inputs 1`] = `
     <div>
       <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="oc-textinput-1" label="First and last name" modelvalue="jan" type="text"></oc-text-input-stub>
       <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="oc-textinput-2" label="Email" modelvalue="jan@owncloud.com" type="email"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" defaultvalue="●●●●●●●●" disabled="false" fixmessageline="true" id="oc-textinput-3" label="Password" modelvalue="" type="password"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" defaultvalue="●●●●●●●●" disabled="false" fixmessageline="true" id="oc-textinput-3" label="Password" modelvalue="[object Object]" type="password"></oc-text-input-stub>
       <div class="oc-mb-s">
-        <oc-select-stub clearable="false" disabled="false" filter="[Function]" id="oc-select-4" label="Role" loading="false" optionlabel="displayName" options="[object Object]" searchable="true"></oc-select-stub>
+        <oc-select-stub clearable="false" disabled="false" filter="[Function]" id="oc-select-4" label="Role" loading="false" model-value="[object Object]" optionlabel="displayName" options="[object Object]" searchable="true"></oc-select-stub>
         <div class="oc-text-input-message"></div>
       </div>
       <quota-select-stub class="oc-mb-s" maxquota="0" title="Personal quota" totalquota="0"></quota-select-stub>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
index 77d255d7c8c..26ac6fb0561 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
@@ -48,22 +48,34 @@ describe('UsersList', () => {
 
       expect(
         wrapper.vm.orderBy(
-          [{ role: { displayName: 'user' } }, { role: { displayName: 'admin' } }],
+          [
+            { appRoleAssignments: [{ appRoleId: '1' }] },
+            { appRoleAssignments: [{ appRoleId: '2' }] }
+          ],
           'role',
           false
         )
-      ).toEqual([{ role: { displayName: 'admin' } }, { role: { displayName: 'user' } }])
+      ).toEqual([
+        { appRoleAssignments: [{ appRoleId: '1' }] },
+        { appRoleAssignments: [{ appRoleId: '2' }] }
+      ])
     })
     it('should return an role based descending ordered list while desc is set to true', () => {
       const { wrapper } = getWrapper()
 
       expect(
         wrapper.vm.orderBy(
-          [{ role: { displayName: 'admin' } }, { role: { displayName: 'user' } }],
+          [
+            { appRoleAssignments: [{ appRoleId: '1' }] },
+            { appRoleAssignments: [{ appRoleId: '2' }] }
+          ],
           'role',
           true
         )
-      ).toEqual([{ role: { displayName: 'user' } }, { role: { displayName: 'admin' } }])
+      ).toEqual([
+        { appRoleAssignments: [{ appRoleId: '2' }] },
+        { appRoleAssignments: [{ appRoleId: '1' }] }
+      ])
     })
   })
 
@@ -91,6 +103,24 @@ function getWrapper({ propsData = {} } = {}) {
       props: {
         users: [],
         selectedUsers: [],
+        roles: [
+          {
+            displayName: 'Admin',
+            id: '1'
+          },
+          {
+            displayName: 'Guest',
+            id: '2'
+          },
+          {
+            displayName: 'Space Admin',
+            id: '3'
+          },
+          {
+            displayName: 'User',
+            id: '4'
+          }
+        ],
         headerPosition: 0,
         ...propsData
       },
diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
index c76b20f847f..1876eb38629 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -2,8 +2,6 @@ import Users from '../../../src/views/Users.vue'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mock, mockDeep } from 'jest-mock-extended'
 import { Graph } from 'web-client/src'
-import { useLoadTasks } from '../../../src/composables/loadTasks/useLoadTasks'
-import { Task } from 'vue-concurrency'
 import { mockAxiosResolve, mockAxiosReject } from 'web-test-helpers/src/mocks'
 import {
   createStore,
@@ -14,39 +12,109 @@ import {
 } from 'web-test-helpers'
 import { AxiosResponse } from 'axios'
 
-const defaultGraphMock = () => {
-  const defaultUser = {
+const getDefaultUser = () => {
+  return {
     id: '1',
+    displayName: 'Admin',
+    givenName: 'Admin',
+    surname: 'Admin',
     memberOf: [],
+    mail: 'admin@example.org',
     drive: {
-      name: 'any'
-    }
+      id: '1',
+      name: 'admin',
+      quota: { remaining: 5000000000, state: 'normal', total: 5000000000, used: 0 }
+    },
+    appRoleAssignments: [
+      {
+        appRoleId: '1',
+        id: '1',
+        principalId: '1',
+        principalType: 'User',
+        resourceDisplayName: 'ownCloud Infinite Scale',
+        resourceId: 'some-graph-app-id'
+      }
+    ]
   }
+}
+
+const getDefaultApplications = () => {
+  return [
+    {
+      appRoles: [
+        {
+          displayName: 'Admin',
+          id: '1'
+        },
+        {
+          displayName: 'Guest',
+          id: '2'
+        },
+        {
+          displayName: 'Space Admin',
+          id: '3'
+        },
+        {
+          displayName: 'User',
+          id: '4'
+        }
+      ],
+      displayName: 'ownCloud Infinite Scale',
+      id: 'some-graph-app-id'
+    }
+  ]
+}
 
+const getDefaultGraphMock = () => {
   const graph = mockDeep<Graph>()
-  graph.users.listUsers.mockResolvedValue(mock<AxiosResponse>({ data: { value: [defaultUser] } }))
-  graph.users.getUser.mockResolvedValue(mock<AxiosResponse>({ data: defaultUser }))
+  graph.users.listUsers.mockResolvedValue(
+    mock<AxiosResponse>({ data: { value: [getDefaultUser()] } })
+  )
+  graph.users.getUser.mockResolvedValue(mock<AxiosResponse>({ data: getDefaultUser() }))
   graph.groups.listGroups.mockResolvedValue(mock<AxiosResponse>({ data: { value: [] } }))
+  graph.applications.listApplications.mockResolvedValue(
+    mock<AxiosResponse>({ data: { value: getDefaultApplications() } })
+  )
 
   return graph
 }
 
-jest.mock('../../../src/composables/loadTasks/useLoadTasks')
-jest.mocked(useLoadTasks).mockImplementation(({ roles, userAssignments }) => {
-  roles.value = []
-  userAssignments.value = []
-
-  return {
-    loadRolesTask: mockDeep<Task<void, []>>(),
-    loadUserRoleTask: mockDeep<Task<void, []>>(),
-    addRoleAssignment: jest.fn()
-  }
-})
-
 describe('Users view', () => {
   describe('method "createUser"', () => {
     it('should hide the modal and show message on success', async () => {
-      const { wrapper } = getMountedWrapper()
+      const graph = getDefaultGraphMock()
+      graph.users.createUser.mockImplementation(() =>
+        mockAxiosResolve({
+          displayName: 'benedikt coolman',
+          givenName: '',
+          id: '2',
+          mail: 'benedikt@example.org',
+          onPremisesSamAccountName: 'bene',
+          surname: 'bene'
+        })
+      )
+      graph.users.getUser.mockImplementation(() =>
+        mockAxiosResolve({
+          appRoleAssignments: [
+            {
+              appRoleId: '1',
+              id: '1',
+              principalId: '2',
+              principalType: 'User',
+              resourceDisplayName: 'ownCloud Infinite Scale',
+              resourceId: 'some-graph-app-id'
+            }
+          ],
+          displayName: 'benedikt coolman',
+          givenName: '',
+          id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5',
+          mail: 'benedikt@example.org',
+          memberOf: [],
+          onPremisesSamAccountName: 'bene',
+          surname: 'bene'
+        })
+      )
+      const { wrapper } = getMountedWrapper({ graph })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       const toggleCreateUserModalStub = jest.spyOn(wrapper.vm, 'toggleCreateUserModal')
       await wrapper.vm.createUser({ displayName: 'jan' })
@@ -57,7 +125,7 @@ describe('Users view', () => {
 
     it('should show message on error', async () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const graph = defaultGraphMock()
+      const graph = getDefaultGraphMock()
       graph.users.createUser.mockImplementation(() => mockAxiosReject())
       const { wrapper } = getMountedWrapper({ graph })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
@@ -72,37 +140,111 @@ describe('Users view', () => {
   describe('method "editUser"', () => {
     it('should emit event on success', async () => {
       const editUser = {
+        appRoleAssignments: [
+          {
+            appRoleId: '2',
+            resourceId: 'some-graph-app-id',
+            principalId: '1'
+          }
+        ],
+        displayName: 'administrator',
         id: '1',
-        displayName: 'jan',
-        role: { id: '1', displayName: 'admin' },
-        drive: { id: '1', quota: { total: 10000 } },
-        passwordProfile: { password: 'newpassword' }
+        mail: 'administrator@example.org',
+        memberOf: [
+          {
+            displayName: 'admins',
+            id: '1'
+          }
+        ],
+        drive: {
+          id: '1',
+          name: 'admin',
+          quota: {
+            total: 1000000000
+          }
+        },
+        passwordProfile: {
+          password: 'administrator'
+        }
       }
 
-      const graph = defaultGraphMock()
-      graph.users.editUser.mockImplementation(() =>
+      const graph = getDefaultGraphMock()
+      graph.users.editUser.mockImplementation(() => mockAxiosResolve())
+      graph.users.createUserAppRoleAssignment.mockImplementation(() => mockAxiosResolve())
+      graph.groups.addMember.mockImplementation(() => mockAxiosResolve())
+      graph.drives.updateDrive.mockImplementation(() =>
         mockAxiosResolve({
-          accountUuid: '1',
           id: '1',
-          roleId: '1'
+          name: 'admin',
+          quota: { remaining: 1000000000, state: 'normal', total: 1000000000, used: 0 }
         })
       )
-      graph.drives.updateDrive.mockImplementation(() => mockAxiosResolve({ name: 'any' }))
-      const { wrapper } = getMountedWrapper({ graph })
+      graph.users.getUser.mockImplementation(() =>
+        mockAxiosResolve({
+          appRoleAssignments: [
+            {
+              appRoleId: '2',
+              id: '1',
+              principalId: '1',
+              principalType: 'User',
+              resourceDisplayName: 'ownCloud Infinite Scale',
+              resourceId: 'some-graph-app-id'
+            }
+          ],
+          displayName: 'administrator',
+          drive: {
+            id: '1',
+            name: 'admin',
+            quota: { remaining: 1000000000, state: 'normal', total: 1000000000, used: 0 }
+          },
+          id: '1',
+          mail: 'administrator@example.org',
+          memberOf: [
+            {
+              displayName: 'admins',
+              id: '1'
+            }
+          ],
+          onPremisesSamAccountName: 'admin',
+          surname: 'Admin'
+        })
+      )
+
+      const { wrapper } = getMountedWrapper({
+        graph
+      })
+
       const busStub = jest.spyOn(eventBus, 'publish')
       const updateSpaceFieldStub = jest.spyOn(wrapper.vm, 'UPDATE_SPACE_FIELD')
+      const updateUserDriveStub = jest.spyOn(wrapper.vm, 'updateUserDrive')
+      const updateUserGroupAssignmentsStub = jest.spyOn(wrapper.vm, 'updateUserGroupAssignments')
+      const updateUserAppRoleAssignmentsStub = jest.spyOn(
+        wrapper.vm,
+        'updateUserAppRoleAssignments'
+      )
 
       await wrapper.vm.loadResourcesTask.last
-      await wrapper.vm.editUser(editUser)
 
-      expect(wrapper.vm.selectedUsers[0]).toEqual(editUser)
-      expect(busStub).toHaveBeenCalledWith('sidebar.entity.saved')
+      const userToUpDate = wrapper.vm.users.find((user) => user.id === '1')
+      const updatedUser = await wrapper.vm.editUser({ user: userToUpDate, editUser })
+
+      expect(updatedUser.id).toEqual('1')
+      expect(updatedUser.displayName).toEqual('administrator')
+      expect(updatedUser.mail).toEqual('administrator@example.org')
+      expect(updatedUser.appRoleAssignments[0].appRoleId).toEqual('2')
+      expect(updatedUser.drive.quota.total).toEqual(1000000000)
+      expect(updatedUser.memberOf[0].id).toEqual('1')
+
+      expect(busStub).toHaveBeenCalledTimes(2)
+      expect(updateUserDriveStub).toHaveBeenCalled()
       expect(updateSpaceFieldStub).toHaveBeenCalled()
+      expect(updateUserGroupAssignmentsStub).toHaveBeenCalled()
+      expect(updateUserAppRoleAssignmentsStub).toHaveBeenCalled()
     })
 
     it('should show message on error', async () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const graph = defaultGraphMock()
+      const graph = getDefaultGraphMock()
       graph.users.editUser.mockImplementation(() => mockAxiosReject())
       const { wrapper } = getMountedWrapper({ graph })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
@@ -116,43 +258,6 @@ describe('Users view', () => {
     })
   })
 
-  describe('method "editUserGroupAssignments"', () => {
-    const editUser = {
-      id: '1',
-      memberOf: [
-        {
-          displayName: 'group',
-          id: '04114ac6-f050-41d2-98db-6f016abccf2c'
-        }
-      ]
-    }
-    it('should emit event on success2', async () => {
-      const { wrapper } = getMountedWrapper()
-      const busStub = jest.spyOn(eventBus, 'publish')
-      await wrapper.vm.loadResourcesTask.last
-      await wrapper.vm.editUserGroupAssignments(editUser)
-
-      expect(wrapper.vm.selectedUsers[0]).toEqual(editUser)
-      expect(busStub).toHaveBeenCalledWith('sidebar.entity.saved')
-    })
-
-    it('should show message on error', async () => {
-      jest.spyOn(console, 'error').mockImplementation(() => undefined)
-
-      const graph = defaultGraphMock()
-      graph.groups.addMember.mockImplementation(() => mockAxiosReject())
-      const { wrapper } = getMountedWrapper({ graph })
-      const showMessageStub = jest
-        .spyOn(wrapper.vm, 'showMessage')
-        .mockImplementation(() => undefined)
-
-      await wrapper.vm.loadResourcesTask.last
-      await wrapper.vm.editUserGroupAssignments(editUser)
-
-      expect(showMessageStub).toHaveBeenCalled()
-    })
-  })
-
   describe('method "deleteUsers"', () => {
     it('should hide the modal and show message on success', async () => {
       const { wrapper } = getMountedWrapper()
@@ -165,7 +270,7 @@ describe('Users view', () => {
     })
     it('should show message on error', async () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const graph = defaultGraphMock()
+      const graph = getDefaultGraphMock()
       graph.users.deleteUser.mockImplementation(() => mockAxiosReject())
       const { wrapper } = getMountedWrapper({ graph })
       const graphDeleteUserStub = jest.spyOn(graph.users, 'deleteUser')
@@ -179,7 +284,7 @@ describe('Users view', () => {
     })
     it('should show message while user tries to delete own account', async () => {
       const { wrapper } = getMountedWrapper()
-      const graph = defaultGraphMock()
+      const graph = getDefaultGraphMock()
       const graphDeleteUserStub = jest.spyOn(graph.users, 'deleteUser')
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       const toggleDeleteUserModalStub = jest.spyOn(wrapper.vm, 'toggleDeleteUserModal')
@@ -223,7 +328,7 @@ describe('Users view', () => {
       expect(wrapper.vm.allUsersSelected).toBeTruthy()
     })
     it('should be false if not every user is selected', async () => {
-      const graph = defaultGraphMock()
+      const graph = getDefaultGraphMock()
       graph.users.listUsers.mockImplementation(() =>
         mockAxiosResolve({ value: [{ id: '1' }, { id: '2' }] })
       )
@@ -235,7 +340,7 @@ describe('Users view', () => {
   })
 })
 
-function getMountedWrapper({ graph = defaultGraphMock() } = {}) {
+function getMountedWrapper({ data = {}, graph = getDefaultGraphMock() } = {}) {
   const mocks = {
     ...defaultComponentMocks()
   }
@@ -253,6 +358,9 @@ function getMountedWrapper({ graph = defaultGraphMock() } = {}) {
   return {
     mocks,
     wrapper: shallowMount(Users, {
+      data: () => {
+        return { ...data }
+      },
       global: {
         plugins: [...defaultPlugins(), store],
         mocks
diff --git a/packages/web-client/src/graph.ts b/packages/web-client/src/graph.ts
index 59deb09623a..7e187a1ac46 100644
--- a/packages/web-client/src/graph.ts
+++ b/packages/web-client/src/graph.ts
@@ -21,7 +21,9 @@ import {
   TagUnassignment,
   DrivesGetDrivesApi,
   CollectionOfApplications,
-  ApplicationsApiFactory
+  ApplicationsApiFactory,
+  UserAppRoleAssignmentApiFactory,
+  AppRoleAssignment
 } from './generated'
 
 export interface Graph {
@@ -49,6 +51,10 @@ export interface Graph {
     editUser: (userId: string, user: User) => AxiosPromise<User>
     deleteUser: (userId: string) => AxiosPromise<void>
     listUsers: (orderBy?: string) => AxiosPromise<CollectionOfUser>
+    createUserAppRoleAssignment: (
+      userId: string,
+      appRoleAssignment: AppRoleAssignment
+    ) => AxiosPromise<AppRoleAssignment>
   }
   groups: {
     listGroups: (orderBy?: string) => AxiosPromise<CollectionOfGroup>
@@ -79,6 +85,11 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
   const applicationsApiFactory = ApplicationsApiFactory(config, config.basePath, axiosClient)
   const userApiFactory = UserApiFactory(config, config.basePath, axiosClient)
   const usersApiFactory = UsersApiFactory(config, config.basePath, axiosClient)
+  const userAppRoleAssignmentApiFactory = UserAppRoleAssignmentApiFactory(
+    config,
+    config.basePath,
+    axiosClient
+  )
   const groupApiFactory = GroupApiFactory(config, config.basePath, axiosClient)
   const groupsApiFactory = GroupsApiFactory(config, config.basePath, axiosClient)
   const drivesApiFactory = DrivesApiFactory(config, config.basePath, axiosClient)
@@ -109,7 +120,11 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
     },
     users: {
       getUser: (userId: string) =>
-        userApiFactory.getUser(userId, new Set<any>([]), new Set<any>(['drive'])),
+        userApiFactory.getUser(
+          userId,
+          new Set<any>([]),
+          new Set<any>(['drive', 'memberOf', 'appRoleAssignments'])
+        ),
       createUser: (user: User) => usersApiFactory.createUser(user),
       getMe: () => meUserApiFactory.getOwnUser(new Set<any>(['memberOf'])),
       changeOwnPassword: (currentPassword, newPassword) =>
@@ -125,8 +140,10 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
           false,
           new Set<any>([orderBy]),
           new Set<any>([]),
-          new Set<any>(['memberOf'])
-        )
+          new Set<any>(['memberOf', 'appRoleAssignments'])
+        ),
+      createUserAppRoleAssignment: (userId: string, appRoleAssignment: AppRoleAssignment) =>
+        userAppRoleAssignmentApiFactory.userCreateAppRoleAssignments(userId, appRoleAssignment)
     },
     groups: {
       createGroup: (group: Group) => groupsApiFactory.createGroup(group),
diff --git a/packages/web-runtime/src/helpers/additionalTranslations.ts b/packages/web-runtime/src/helpers/additionalTranslations.ts
index b1d9e4444ad..f7d444eadcd 100644
--- a/packages/web-runtime/src/helpers/additionalTranslations.ts
+++ b/packages/web-runtime/src/helpers/additionalTranslations.ts
@@ -4,6 +4,10 @@ function $gettext(msg: string): string {
 }
 
 export const additionalTranslations = {
+  admin: $gettext('Admin'),
+  spaceAdmin: $gettext('Space Admin'),
+  user: $gettext('User'),
+  guest: $gettext('Guest'),
   activities: $gettext('Activities'),
   noActivities: $gettext('No activities'),
   virusDetectedActivity: $gettext(