diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.spec.ts b/packages/design-system/src/components/OcRecipient/OcRecipient.spec.ts
index 49dffeb6ab..9cfb67ba02 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.spec.ts
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.spec.ts
@@ -3,8 +3,18 @@ import Recipient from './OcRecipient.vue'
 import { Recipient as RecipientType } from '../../helpers'
 
 describe('OcRecipient', () => {
-  function getWrapper(props: Partial<RecipientType> = undefined, slot: string = undefined) {
-    const slots = slot ? { append: slot } : {}
+  function getWrapper(
+    props: Partial<RecipientType> = undefined,
+    avatarSlot: string = undefined,
+    appendSlot: string = undefined
+  ) {
+    const slots: { append?: string; avatar?: string } = {}
+    if (appendSlot) {
+      slots.append = appendSlot
+    }
+    if (avatarSlot) {
+      slots.avatar = avatarSlot
+    }
 
     return shallowMount(Recipient, {
       props: {
@@ -12,7 +22,7 @@ describe('OcRecipient', () => {
           name: 'alice',
           avatar: 'avatar.jpg',
           hasAvatar: true,
-          isLoadingAvatar: false,
+          icon: { name: 'user', label: 'User' },
           ...props
         }
       },
@@ -30,35 +40,18 @@ describe('OcRecipient', () => {
   it('displays avatar', () => {
     const wrapper = getWrapper()
 
-    expect(wrapper.find('[data-testid="recipient-avatar"]').attributes('src')).toEqual('avatar.jpg')
+    expect(wrapper.find('oc-avatar-item-stub').attributes('icon')).toEqual('user')
   })
 
-  it('displays a spinner if avatar has not been loaded yet', () => {
-    const wrapper = getWrapper({
-      isLoadingAvatar: true
-    })
-
-    expect(wrapper.find('[data-testid="recipient-avatar-spinner"]').exists()).toBeTruthy()
-  })
-
-  it('displays an icon if avatar is not enabled', () => {
-    const wrapper = getWrapper({
-      icon: {
-        name: 'person',
-        label: 'User'
-      },
-      hasAvatar: false
-    })
-
-    const icon = wrapper.find('[data-testid="recipient-icon"]')
+  it('display content in the avatar slot', () => {
+    const wrapper = getWrapper({}, '<span id="avatar-slot">Hello world</span>')
 
-    expect(icon.exists()).toBeTruthy()
-    expect(icon.attributes().accessiblelabel).toEqual('User')
+    expect(wrapper.find('#avatar-slot').exists()).toBeTruthy()
   })
 
   it('display content in the append slot', () => {
-    const wrapper = getWrapper({}, '<span id="test-slot">Hello world</span>')
+    const wrapper = getWrapper({}, '', '<span id="append-slot"> Hello world </span>')
 
-    expect(wrapper.find('#test-slot').exists()).toBeTruthy()
+    expect(wrapper.find('#append-slot').exists()).toBeTruthy()
   })
 })
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index 1e7d65f80b..829047d12c 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -1,31 +1,14 @@
 <template>
   <span class="oc-recipient">
-    <template v-if="recipient.hasAvatar">
-      <oc-spinner
-        v-if="recipient.isLoadingAvatar"
-        key="recipient-avatar-spinner"
-        size="small"
-        :aria-label="$gettext('Loading avatar')"
-        data-testid="recipient-avatar-spinner"
-      />
-      <oc-avatar
-        v-else
-        :key="recipient.avatar || recipient.name"
-        data-testid="recipient-avatar"
-        class="oc-recipient-avatar"
-        :src="recipient.avatar"
-        :user-name="recipient.name"
+    <slot name="avatar">
+      <oc-avatar-item
         :width="16.8"
+        :icon="recipient.icon.name"
+        :name="recipient.icon.label"
+        :accessible-label="recipient.icon.label"
+        data-testid="recipient-icon"
       />
-    </template>
-    <oc-icon
-      v-else-if="recipient.icon && recipient.icon.name"
-      class="oc-recipient-icon"
-      size="small"
-      :name="recipient.icon.name"
-      :accessible-label="recipient.icon.label"
-      data-testid="recipient-icon"
-    />
+    </slot>
     <p class="oc-recipient-name" data-testid="recipient-name" v-text="recipient.name" />
     <!-- @slot Append content (actions, additional info, etc.)  -->
     <slot name="append" />
@@ -33,10 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import OcAvatar from '../OcAvatar/OcAvatar.vue'
-import OcIcon from '../OcIcon/OcIcon.vue'
-import OcSpinner from '../OcSpinner/OcSpinner.vue'
 import { Recipient } from '../../helpers'
+import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
 export interface Props {
   /**
@@ -50,6 +31,7 @@ export interface Slots {
    * @docs Append content for additional info.
    */
   append?: () => unknown
+  avatar?: () => unknown
 }
 
 const { recipient } = defineProps<Props>()
diff --git a/packages/design-system/src/helpers/types.ts b/packages/design-system/src/helpers/types.ts
index 41d8792c9d..3f1211ea8e 100644
--- a/packages/design-system/src/helpers/types.ts
+++ b/packages/design-system/src/helpers/types.ts
@@ -64,9 +64,6 @@ export type Recipient = {
     name: string
     label: string
   }
-  isLoadingAvatar?: boolean
-  hasAvatar?: boolean
-  avatar?: string
 }
 
 export interface BreadcrumbItem {
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue
index 2727e10402..3694666e31 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue
@@ -6,7 +6,7 @@
       class="oc-flex oc-flex-middle oc-mb-s"
       data-testid="group-members-list"
     >
-      <oc-avatar :user-name="member.displayName" :width="36" class="oc-mr-s" />
+      <user-avatar :user-id="member.id" :user-name="member.displayName" class="oc-mr-s" />
       <span class="oc-text-truncate" :title="member.displayName">
         {{ member.displayName }}
       </span>
@@ -16,9 +16,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { User } from '@opencloud-eu/web-client/graph/generated'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
   name: 'MembersRoleSection',
+  components: { UserAvatar },
   props: {
     groupMembers: {
       type: Array as PropType<User[]>,
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue
index 92d6e117c0..5eb7c670e8 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue
@@ -6,12 +6,13 @@
       class="oc-flex oc-flex-middle oc-mb-s"
       data-testid="space-members-list"
     >
-      <oc-avatar
+      <user-avatar
         v-if="m.grantedTo.user"
+        :user-id="m.grantedTo.user.id"
         :user-name="m.grantedTo.user.displayName"
-        :width="36"
         class="oc-mr-s"
-      /><oc-avatar-item
+      />
+      <oc-avatar-item
         v-else
         :width="36"
         icon-size="medium"
@@ -26,9 +27,11 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
 import { ShareTypes, SpaceMember } from '@opencloud-eu/web-client'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
   name: 'MembersRoleSection',
+  components: { UserAvatar },
   props: {
     members: {
       type: Array as PropType<SpaceMember[]>,
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
index 0882fee01b..7db4a8c3c0 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="oc-flex user-info oc-mb-l">
-    <avatar-image class="oc-mb-m" :width="80" :userid="user.id" :user-name="user.displayName" />
+    <user-avatar class="oc-mb-m" :width="80" :user-id="user.id" :user-name="user.displayName" />
     <span v-text="user.onPremisesSamAccountName"></span>
     <span class="oc-text-muted user-info-display-name" v-text="user.displayName"></span>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
+
 export default defineComponent({
   name: 'UserInfoBox',
+  components: { UserAvatar },
   props: {
     user: {
       type: Object,
@@ -22,6 +25,7 @@ export default defineComponent({
   align-items: center;
   flex-direction: column;
 }
+
 .user-info-display-name {
   font-size: 1.5rem;
 }
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 f342911d6f..38d0e2a4fc 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -46,7 +46,7 @@
           />
         </template>
         <template #avatar="{ item }">
-          <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
+          <user-avatar :user-id="item.id" :user-name="item.displayName" />
         </template>
         <template #role="{ item }">
           <template v-if="item.appRoleAssignments">{{ getRoleDisplayNameByUser(item) }}</template>
@@ -108,11 +108,11 @@
 import { useGettext } from 'vue3-gettext'
 import {
   ComponentPublicInstance,
-  PropType,
   computed,
   defineComponent,
   nextTick,
   onMounted,
+  PropType,
   ref,
   unref,
   useTemplateRef,
@@ -121,19 +121,21 @@ import {
 import {
   AppLoadingSpinner,
   ContextMenuBtnClickEventData,
+  ContextMenuQuickAction,
   displayPositionedDropdown,
   eventBus,
+  Pagination,
   queryItemAsString,
+  SideBarEventTopics,
   SortDir,
+  useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
-  useRouteQuery
+  usePagination,
+  useRouteQuery,
+  UserAvatar
 } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { AppRole, User } from '@opencloud-eu/web-client/graph/generated'
-import { ContextMenuQuickAction } from '@opencloud-eu/web-pkg'
-import { useFileListHeaderPosition, usePagination } from '@opencloud-eu/web-pkg'
-import { Pagination } from '@opencloud-eu/web-pkg'
 import { perPageDefault, perPageStoragePrefix } from '../../defaults'
 import { storeToRefs } from 'pinia'
 import { useUserSettingsStore } from '../../composables/stores/userSettings'
@@ -148,7 +150,7 @@ import { FieldType } from '@opencloud-eu/design-system/helpers'
 
 export default defineComponent({
   name: 'UsersList',
-  components: { AppLoadingSpinner, ContextMenuQuickAction, Pagination },
+  components: { UserAvatar, AppLoadingSpinner, ContextMenuQuickAction, Pagination },
   props: {
     roles: {
       type: Array as PropType<AppRole[]>,
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap
index 5621c07072..c78ac92c57 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`MembersRoleSection > should render all members accordingly 1`] = `
 "<ul class="oc-list">
   <li class="oc-flex oc-flex-middle oc-mb-s" data-testid="space-members-list">
-    <oc-avatar-stub accessiblelabel="" color="white" src="" username="einstein" width="36" class="oc-mr-s"></oc-avatar-stub> einstein
+    <user-avatar-stub userid="[Function]" username="einstein" class="oc-mr-s"></user-avatar-stub> einstein
   </li>
   <li class="oc-flex oc-flex-middle oc-mb-s" data-testid="space-members-list">
     <oc-avatar-item-stub icon="group" name="group" accessiblelabel="" background="var(--oc-role-secondary)" iconcolor="var(--oc-role-on-secondary)" iconfilltype="fill" iconsize="medium" width="36" class="oc-mr-s"></oc-avatar-item-stub> physic-lovers
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index a8035dfb0d..83a964f028 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -126,9 +126,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               <tbody class="has-item-context-menu">
                 <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-m"><span><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar">
-                    <avatar-image width="32" userid="1" user-name="Admin"></avatar-image>
-                  </td>
+                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mail">admin@example.org</td>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
index 6931aec694..9d9d255b3e 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
@@ -4,11 +4,10 @@
     class="oc-flex oc-flex-middle oc-py-xs"
     :class="collaboratorClass"
   >
-    <avatar-image
+    <user-avatar
       v-if="isAnyUserShareType"
       class="oc-mr-s"
-      :width="36"
-      :userid="item.id"
+      :user-id="item.id"
       :user-name="item.displayName"
     />
     <oc-avatar-item
@@ -16,9 +15,7 @@
       :width="36"
       :name="shareTypeKey"
       :icon="shareTypeIcon"
-      icon-size="large"
-      icon-color="var(--oc-role-on-surface)"
-      background="transparent"
+      icon-size="medium"
       class="oc-mr-s"
     />
     <div class="files-collaborators-autocomplete-user-text oc-text-truncate">
@@ -46,9 +43,11 @@
 <script lang="ts">
 import { computed, PropType } from 'vue'
 import { CollaboratorAutoCompleteItem, ShareTypes } from '@opencloud-eu/web-client'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
 
 export default {
   name: 'AutocompleteItem',
+  components: { UserAvatar },
 
   props: {
     item: {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue
index afdd62aed9..ee00555716 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue
@@ -4,6 +4,14 @@
     class="files-share-invite-recipient"
     :recipient="formattedRecipient"
   >
+    <template #avatar>
+      <user-avatar
+        v-if="recipient.shareType === ShareTypes.user.value"
+        :user-id="recipient.id"
+        :user-name="recipient.displayName"
+        width="16.8"
+      />
+    </template>
     <template #append>
       <oc-button
         class="files-share-invite-recipient-btn-remove raw-hover-surface"
@@ -18,14 +26,13 @@
 </template>
 
 <script lang="ts">
-import { avatarUrl } from '../../../../../helpers/user'
 import { CollaboratorAutoCompleteItem, ShareTypes } from '@opencloud-eu/web-client'
 import { computed, defineComponent, PropType } from 'vue'
 import { Recipient } from '@opencloud-eu/design-system/helpers'
-import { useCapabilityStore, useConfigStore } from '@opencloud-eu/web-pkg'
-import { storeToRefs } from 'pinia'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
+  components: { UserAvatar },
   props: {
     recipient: {
       type: Object as PropType<CollaboratorAutoCompleteItem>,
@@ -38,12 +45,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const capabilityStore = useCapabilityStore()
-    const capabilityRefs = storeToRefs(capabilityStore)
-
-    const configStore = useConfigStore()
-    const { serverUrl } = storeToRefs(configStore)
-
     const externalIssuer = computed(() => {
       if (props.recipient.shareType === ShareTypes.remote.value) {
         return props.recipient.identities?.[0]?.issuer
@@ -52,9 +53,8 @@ export default defineComponent({
     })
 
     return {
-      serverUrl,
-      userProfilePicture: capabilityRefs.sharingUserProfilePicture,
-      externalIssuer
+      externalIssuer,
+      ShareTypes
     }
   },
   data(): { formattedRecipient: Recipient } {
@@ -66,9 +66,7 @@ export default defineComponent({
     return {
       formattedRecipient: {
         name,
-        icon: this.getRecipientIcon(),
-        hasAvatar: this.recipient.shareType === ShareTypes.user.value,
-        isLoadingAvatar: true
+        icon: this.getRecipientIcon()
       }
     }
   },
@@ -79,22 +77,6 @@ export default defineComponent({
     }
   },
 
-  async created() {
-    if (this.userProfilePicture && this.formattedRecipient.hasAvatar) {
-      try {
-        this.formattedRecipient.avatar = await avatarUrl({
-          clientService: this.$clientService,
-          server: this.serverUrl,
-          username: this.recipient.displayName
-        })
-      } catch (error) {
-        console.error(error)
-      }
-    }
-
-    this.formattedRecipient.isLoadingAvatar = false
-  },
-
   methods: {
     getRecipientIcon() {
       switch (this.recipient.shareType) {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index 4c97aa28e7..7cf45c471c 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -18,11 +18,10 @@
             />
           </template>
           <template v-else>
-            <avatar-image
+            <user-avatar
               v-if="isAnyUserShareType"
-              :userid="share.sharedWith.id"
+              :user-id="share.sharedWith.id"
               :user-name="share.sharedWith.displayName"
-              :width="36"
               class="files-collaborators-collaborator-indicator"
             />
             <oc-avatar-item
@@ -137,18 +136,17 @@ import {
 } from '@opencloud-eu/web-pkg'
 import { Resource, extractDomSelector } from '@opencloud-eu/web-client'
 import { computed, defineComponent, inject, PropType, Ref, unref } from 'vue'
-import { formatDateFromDateTime } from '@opencloud-eu/web-pkg'
-import { useClientService } from '@opencloud-eu/web-pkg'
+import { formatDateFromDateTime, useClientService, UserAvatar } from '@opencloud-eu/web-pkg'
 import { RouteLocationNamedRaw } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
-import { SpaceResource } from '@opencloud-eu/web-client'
-import { isProjectSpaceResource } from '@opencloud-eu/web-client'
+import { SpaceResource, isProjectSpaceResource } from '@opencloud-eu/web-client'
 import { ContextualHelperDataListItem } from '@opencloud-eu/design-system/helpers'
 import ExpirationDateIndicator from '../ExpirationDateIndicator.vue'
 
 export default defineComponent({
   name: 'ListItem',
   components: {
+    UserAvatar,
     ExpirationDateIndicator,
     EditDropdown,
     RoleDropdown
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
index f28d03bd41..c40e59df31 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
@@ -15,10 +15,10 @@ describe('AutocompleteItem component', () => {
       const { wrapper } = createWrapper({ shareType: shareType.value })
       const isUserShareType = shareType.key === ShareTypes.user.key
       if (isUserShareType) {
-        expect(wrapper.find('avatar-image-stub').exists()).toBeTruthy()
-        expect(wrapper.find('oc-avatar-item-stub').exists()).toBeFalsy()
-      } else {
+        expect(wrapper.find('user-avatar-stub').exists()).toBeTruthy()
         expect(wrapper.find('avatar-image-stub').exists()).toBeFalsy()
+      } else {
+        expect(wrapper.find('user-avatar-stub').exists()).toBeFalsy()
         expect(wrapper.find('oc-avatar-item-stub').exists()).toBeTruthy()
         expect(wrapper.find('oc-avatar-item-stub').attributes().icon).toEqual(shareType.icon)
       }
@@ -30,14 +30,14 @@ describe('AutocompleteItem component', () => {
         shareType: ShareTypes.user.value,
         id: 'the-user-id'
       })
-      expect(wrapper.find('avatar-image-stub').attributes('userid')).toEqual('the-user-id')
+      expect(wrapper.find('user-avatar-stub').attributes('userid')).toEqual('the-user-id')
     })
     it('sets the user-name', () => {
       const { wrapper } = createWrapper({
         shareType: ShareTypes.user.value,
         displayName: 'the-user-name'
       })
-      expect(wrapper.find('avatar-image-stub').attributes('user-name')).toEqual('the-user-name')
+      expect(wrapper.find('user-avatar-stub').attributes('username')).toEqual('the-user-name')
     })
   })
   describe('autocomplete text', () => {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 8192bfd4fa..6010361fae 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
-"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar oc-recipient-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" data-testid="recipient-avatar"><img src="avatarUrl" alt="" aria-hidden="true" loading="lazy" class="avatarImg"></span>
+"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
 <p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -10,7 +10,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
-"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar oc-recipient-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" data-testid="recipient-avatar"><span class="avatar-initials" style="color: white;">AE</span></span>
+"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
 <p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -18,8 +18,29 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 </button></span>"
 `;
 
-exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><oc-icon-stub accessiblelabel="Group" color="" filltype="fill" name="group" size="small" type="span" class="oc-recipient-icon" data-testid="recipient-icon"></oc-icon-stub> <p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub></button></span>"`;
+exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
+"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="small" type="span"></oc-icon-stub></span></div>
+<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+  <!--v-if-->
+  <!-- @slot Content of the button -->
+  <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
+</button></span>"
+`;
 
-exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><oc-icon-stub accessiblelabel="Guest user" color="" filltype="fill" name="global" size="small" type="span" class="oc-recipient-icon" data-testid="recipient-icon"></oc-icon-stub> <p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub></button></span>"`;
+exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
+"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="small" type="span"></oc-icon-stub></span></div>
+<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+  <!--v-if-->
+  <!-- @slot Content of the button -->
+  <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
+</button></span>"
+`;
 
-exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><oc-icon-stub accessiblelabel="External user" color="" filltype="fill" name="earth" size="small" type="span" class="oc-recipient-icon" data-testid="recipient-icon"></oc-icon-stub> <p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub></button></span>"`;
+exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
+"<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="small" type="span"></oc-icon-stub></span></div>
+<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+  <!--v-if-->
+  <!-- @slot Content of the button -->
+  <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
+</button></span>"
+`;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.ts
index bf4825fec3..c3af24e8f2 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.ts
@@ -20,7 +20,7 @@ import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { RouteLocationNamedRaw } from 'vue-router'
 
 const selectors = {
-  userAvatarImage: 'avatar-image-stub.files-collaborators-collaborator-indicator',
+  userAvatarImage: 'user-avatar-stub.files-collaborators-collaborator-indicator',
   notUserAvatar: 'oc-avatar-item-stub.files-collaborators-collaborator-indicator',
   collaboratorName: '.files-collaborators-collaborator-name',
   collaboratorRole: '.files-collaborators-collaborator-role',
@@ -62,7 +62,7 @@ describe('Collaborator ListItem component', () => {
         expect(wrapper.find(selectors.userAvatarImage).attributes('userid')).toEqual(
           share.sharedWith.id
         )
-        expect(wrapper.find(selectors.userAvatarImage).attributes('user-name')).toEqual(
+        expect(wrapper.find(selectors.userAvatarImage).attributes('username')).toEqual(
           share.sharedWith.displayName
         )
       })
@@ -241,6 +241,7 @@ function createWrapper({
           'oc-avatar-item': true,
           'role-dropdown': true,
           'edit-dropdown': true,
+          'user-avatar': true,
           translate: false
         }
       }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
index fa1bd542f5..fe9e92d99f 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Collaborator ListItem component > share inheritance indicators > show w
   <div data-v-ccf14be2="" class="oc-width-1-1 oc-flex oc-flex-middle files-collaborators-collaborator-details">
     <div data-v-ccf14be2="" class="oc-width-2-3 oc-flex oc-flex-middle">
       <div data-v-ccf14be2="">
-        <avatar-image-stub data-v-ccf14be2="" userid="3" user-name="einstein" width="36" class="files-collaborators-collaborator-indicator"></avatar-image-stub>
+        <user-avatar-stub data-v-ccf14be2="" userid="3" username="einstein" class="files-collaborators-collaborator-indicator"></user-avatar-stub>
       </div>
       <div data-v-ccf14be2="" class="files-collaborators-collaborator-name-wrapper oc-pl-s">
         <div data-v-ccf14be2="" class="oc-text-truncate"><span data-v-ccf14be2="" aria-hidden="true" class="files-collaborators-collaborator-name">einstein</span> <span data-v-ccf14be2="" class="oc-invisible-sr">Share receiver name: einstein</span>
diff --git a/packages/web-client/src/graph/photos/photo.ts b/packages/web-client/src/graph/photos/photo.ts
index 9af74e3467..5870015e5f 100644
--- a/packages/web-client/src/graph/photos/photo.ts
+++ b/packages/web-client/src/graph/photos/photo.ts
@@ -1,9 +1,10 @@
-import { MePhotoApiFactory } from './../generated'
+import { MePhotoApiFactory, UserPhotoApiFactory } from './../generated'
 import type { GraphFactoryOptions } from './../types'
 import type { GraphPhotos } from './types'
 
 export const PhotoFactory = ({ axiosClient, config }: GraphFactoryOptions): GraphPhotos => {
   const mePhotoApiFactory = MePhotoApiFactory(config, config.basePath, axiosClient)
+  const userPhotoApiFactory = UserPhotoApiFactory(config, config.basePath, axiosClient)
   return {
     async getOwnUserPhoto(requestOptions) {
       const { data } = await mePhotoApiFactory.getOwnUserPhoto(requestOptions)
@@ -16,6 +17,10 @@ export const PhotoFactory = ({ axiosClient, config }: GraphFactoryOptions): Grap
     async updateOwnUserPhotoPatch(body, requestOptions) {
       const { data } = await mePhotoApiFactory.updateOwnUserPhotoPatch(body, requestOptions)
       return data
+    },
+    async getUserPhoto(userId, requestOptions) {
+      const { data } = await userPhotoApiFactory.getUserPhoto(userId, requestOptions)
+      return data
     }
   }
 }
diff --git a/packages/web-client/src/graph/photos/types.ts b/packages/web-client/src/graph/photos/types.ts
index e54b36ab69..498f4c277f 100644
--- a/packages/web-client/src/graph/photos/types.ts
+++ b/packages/web-client/src/graph/photos/types.ts
@@ -4,4 +4,5 @@ export interface GraphPhotos {
   getOwnUserPhoto: (requestOptions?: GraphRequestOptions) => Promise<File>
   deleteOwnUserPhoto: (requestOptions?: GraphRequestOptions) => Promise<void>
   updateOwnUserPhotoPatch: (body: File, requestOptions?: GraphRequestOptions) => Promise<void>
+  getUserPhoto: (userId: string, requestOptions?: GraphRequestOptions) => Promise<File>
 }
diff --git a/packages/web-pkg/src/components/AvatarUpload.vue b/packages/web-pkg/src/components/Avatars/AvatarUpload.vue
similarity index 90%
rename from packages/web-pkg/src/components/AvatarUpload.vue
rename to packages/web-pkg/src/components/Avatars/AvatarUpload.vue
index 3702c83afa..1501425f04 100644
--- a/packages/web-pkg/src/components/AvatarUpload.vue
+++ b/packages/web-pkg/src/components/Avatars/AvatarUpload.vue
@@ -8,20 +8,14 @@
       @change="onFileChange"
     />
     <div class="oc-flex oc-flex-column oc-flex-middle">
-      <oc-avatar
-        class="oc-mb-m"
-        :width="128"
-        :userid="user.onPremisesSamAccountName"
-        :user-name="user.displayName"
-        :src="userAvatar"
-      />
+      <user-avatar class="oc-mb-m" :width="128" :user-id="user.id" :user-name="user.displayName" />
       <div>
         <div class="oc-button-group">
           <oc-button class="avatar-upload-button" size="small" @click="triggerFileInput">
             {{ $gettext('Upload') }}
           </oc-button>
           <oc-button
-            v-if="userAvatar"
+            v-if="hasAvatar"
             class="avatar-upload-remove-button"
             size="small"
             @click="showRemoveModal = true"
@@ -59,18 +53,19 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, unref, watch } from 'vue'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
-import { useAvatarsStore, useClientService, useMessages, useUserStore } from '../composables'
+import { useAvatarsStore, useClientService, useMessages, useUserStore } from '../../composables'
 import { storeToRefs } from 'pinia'
 import { useGettext } from 'vue3-gettext'
-import { AVATAR_UPLOAD_MAX_FILE_SIZE_MB } from '../constants'
+import { AVATAR_UPLOAD_MAX_FILE_SIZE_MB } from '../../constants'
+import UserAvatar from './UserAvatar.vue'
 
 const userStore = useUserStore()
 const avatarsStore = useAvatarsStore()
+const { avatarMap } = storeToRefs(avatarsStore)
 const { user } = storeToRefs(userStore)
-const { userAvatar } = storeToRefs(avatarsStore)
 
 const { $gettext } = useGettext()
 const { showErrorMessage, showMessage } = useMessages()
@@ -86,6 +81,10 @@ const fileInputRef = ref<HTMLInputElement | null>(null)
 
 const maxFileSize = AVATAR_UPLOAD_MAX_FILE_SIZE_MB * 1024 * 1024
 
+const hasAvatar = computed(() => {
+  return !!unref(avatarMap)[unref(user).id]
+})
+
 const onFileChange = (event: Event) => {
   const target = event.target as HTMLInputElement
   const file = target.files?.[0]
@@ -162,7 +161,7 @@ const onCropModalConfirm = async () => {
 
   try {
     await graphAuthenticated.photos.updateOwnUserPhotoPatch(file)
-    avatarsStore.setUserAvatar(objectUrl)
+    avatarsStore.addAvatar(unref(user).id, objectUrl)
     showMessage({ title: $gettext('Profile picture was set successfully') })
   } catch (error) {
     showErrorMessage({
@@ -178,7 +177,7 @@ const onCropModalConfirm = async () => {
 const onRemoveModalConfirm = async () => {
   try {
     await graphAuthenticated.photos.deleteOwnUserPhoto()
-    avatarsStore.removeUserAvatar()
+    avatarsStore.removeAvatar(unref(user).id)
     showMessage({ title: $gettext('Profile picture was removed successfully') })
   } catch (error) {
     showErrorMessage({
diff --git a/packages/web-pkg/src/components/Avatars/UserAvatar.vue b/packages/web-pkg/src/components/Avatars/UserAvatar.vue
new file mode 100644
index 0000000000..0b37baa7bd
--- /dev/null
+++ b/packages/web-pkg/src/components/Avatars/UserAvatar.vue
@@ -0,0 +1,47 @@
+<template>
+  <oc-avatar :user-name="userName" :src="avatarSrc" :width="36" />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, unref } from 'vue'
+import { useAvatarsStore, useClientService } from '../../composables'
+import { storeToRefs } from 'pinia'
+
+const { userId } = defineProps<{
+  userId: string
+  userName: string
+}>()
+
+const avatarsStore = useAvatarsStore()
+const { avatarMap } = storeToRefs(avatarsStore)
+const clientService = useClientService()
+
+const controller = new AbortController()
+
+const avatarSrc = computed(() => {
+  return unref(avatarMap)[userId]
+})
+
+const loadAvatar = async () => {
+  if (unref(avatarMap).hasOwnProperty(userId)) {
+    return false
+  }
+  try {
+    const avatar = await clientService.graphAuthenticated.photos.getUserPhoto(userId, {
+      responseType: 'blob',
+      signal: controller.signal
+    })
+    avatarsStore.addAvatar(userId, URL.createObjectURL(avatar))
+  } catch {
+    avatarsStore.addAvatar(userId, null)
+  }
+}
+
+onMounted(() => {
+  loadAvatar()
+})
+
+onBeforeUnmount(() => {
+  controller.abort()
+})
+</script>
diff --git a/packages/web-pkg/src/components/Avatars/index.ts b/packages/web-pkg/src/components/Avatars/index.ts
new file mode 100644
index 0000000000..325a4c05f5
--- /dev/null
+++ b/packages/web-pkg/src/components/Avatars/index.ts
@@ -0,0 +1,2 @@
+export { default as UserAvatar } from './UserAvatar.vue'
+export { default as AvatarUpload } from './AvatarUpload.vue'
diff --git a/packages/web-pkg/src/components/index.ts b/packages/web-pkg/src/components/index.ts
index 59cf904ff0..2132389b9a 100644
--- a/packages/web-pkg/src/components/index.ts
+++ b/packages/web-pkg/src/components/index.ts
@@ -8,6 +8,7 @@ export * from './SideBar'
 export * from './Search'
 export * from './Spaces'
 export * from './TextEditor'
+export * from './Avatars'
 
 export { default as AppLoadingSpinner } from './AppLoadingSpinner.vue'
 export { default as AppTopBar } from './AppTopBar.vue'
@@ -26,4 +27,3 @@ export { default as ViewOptions } from './ViewOptions.vue'
 export { default as PortalTarget } from './PortalTarget.vue'
 export { default as CreateShortcutModal } from './CreateShortcutModal.vue'
 export { default as CreateLinkModal } from './CreateLinkModal.vue'
-export { default as AvatarUpload } from './AvatarUpload.vue'
diff --git a/packages/web-pkg/src/composables/piniaStores/avatars.ts b/packages/web-pkg/src/composables/piniaStores/avatars.ts
index 823edea86f..d269c191b0 100644
--- a/packages/web-pkg/src/composables/piniaStores/avatars.ts
+++ b/packages/web-pkg/src/composables/piniaStores/avatars.ts
@@ -1,16 +1,11 @@
-import { defineStore, storeToRefs } from 'pinia'
+import { defineStore } from 'pinia'
 import { ref, unref } from 'vue'
-import { useUserStore } from './user'
 
 export const useAvatarsStore = defineStore('avatars', () => {
   const avatarMap = ref<Record<string, string>>({})
-  const userAvatar = ref<string>()
-
-  const userStore = useUserStore()
-  const { user } = storeToRefs(userStore)
 
   const addAvatar = (userId: string, avatar: string) => {
-    avatar[userId] = avatar
+    avatarMap.value[userId] = avatar
   }
 
   const getAvatar = (userId: string) => {
@@ -18,32 +13,18 @@ export const useAvatarsStore = defineStore('avatars', () => {
   }
 
   const removeAvatar = (userId: string) => {
-    unref(avatarMap)[userId] = null
-  }
-
-  const setUserAvatar = (avatar: string) => {
-    userAvatar.value = avatar
-    avatarMap[unref(user).id] = avatar
-  }
-
-  const removeUserAvatar = () => {
-    userAvatar.value = null
-    avatarMap.value[unref(user).id] = null
+    avatarMap.value[userId] = null
   }
 
   const reset = () => {
     avatarMap.value = {}
-    userAvatar.value = null
   }
 
   return {
-    userAvatar,
     avatarMap,
     getAvatar,
     addAvatar,
     removeAvatar,
-    setUserAvatar,
-    removeUserAvatar,
     reset
   }
 })
diff --git a/packages/web-pkg/tests/unit/components/AvatarUpload.spec.ts b/packages/web-pkg/tests/unit/components/Avatars/AvatarUpload.spec.ts
similarity index 95%
rename from packages/web-pkg/tests/unit/components/AvatarUpload.spec.ts
rename to packages/web-pkg/tests/unit/components/Avatars/AvatarUpload.spec.ts
index 4ea924d95b..ca2ed5efc4 100644
--- a/packages/web-pkg/tests/unit/components/AvatarUpload.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Avatars/AvatarUpload.spec.ts
@@ -1,4 +1,4 @@
-import AvatarUpload from '../../../src/components/AvatarUpload.vue'
+import AvatarUpload from '../../../../src/components/Avatars/AvatarUpload.vue'
 import {
   createMockFile,
   defaultComponentMocks,
@@ -6,7 +6,7 @@ import {
   mount,
   nextTicks
 } from '@opencloud-eu/web-test-helpers'
-import { useMessages } from '../../../src'
+import { useMessages } from '../../../../src'
 import { describe } from 'vitest'
 
 vi.mock('cropperjs', () => {
@@ -163,7 +163,7 @@ const getWrapper = ({ userHasAvatar = true } = {}) => {
           ...defaultPlugins({
             piniaOptions: {
               avatarsStore: {
-                userAvatar: userHasAvatar ? 'https://localhost:9201/some-object-url' : null
+                avatarMap: userHasAvatar ? { '1': 'https://localhost:9201/some-object-url' } : {}
               }
             }
           })
diff --git a/packages/web-pkg/tests/unit/components/Avatars/UserAvatar.spec.ts b/packages/web-pkg/tests/unit/components/Avatars/UserAvatar.spec.ts
new file mode 100644
index 0000000000..925d183158
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/Avatars/UserAvatar.spec.ts
@@ -0,0 +1,59 @@
+import UserAvatar from '../../../../src/components/Avatars/UserAvatar.vue'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  mount,
+  nextTicks
+} from '@opencloud-eu/web-test-helpers'
+import { ClientService } from '../../../../src'
+import { mock, mockDeep } from 'vitest-mock-extended'
+
+const blobUrl = 'blob:http://localhost:9200/12345678-1234-1234-1234-123456789012'
+
+describe('UserAvatar', () => {
+  window.URL.createObjectURL = vi.fn(() => blobUrl)
+
+  it('should show an image when set', async () => {
+    const clientService = mockDeep<ClientService>()
+    clientService.graphAuthenticated.photos.getUserPhoto.mockResolvedValueOnce(mock<File>())
+    const { wrapper } = getWrapper({ clientService })
+
+    await nextTicks(2)
+
+    expect(wrapper.find('img').attributes().src).toEqual(blobUrl)
+    expect(wrapper.find('.avatar-initials').exists()).toBe(false)
+  })
+
+  it('should show initials when image not set', async () => {
+    const clientService = mockDeep<ClientService>()
+    clientService.graphAuthenticated.photos.getUserPhoto.mockRejectedValueOnce(new Error(''))
+    const { wrapper } = getWrapper({ clientService })
+
+    await nextTicks(2)
+
+    expect(wrapper.find('.avatar-initials').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+})
+
+const getWrapper = ({ clientService }: { clientService?: ClientService } = {}) => {
+  const mocks = {
+    ...defaultComponentMocks(),
+    $clientService: clientService
+  }
+
+  return {
+    mocks,
+    wrapper: mount(UserAvatar, {
+      props: {
+        userId: '1',
+        userName: 'bär houdini'
+      },
+      global: {
+        plugins: [...defaultPlugins({ piniaOptions: { stubActions: false } })],
+        mocks,
+        provide: mocks
+      }
+    })
+  }
+}
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 55a8ac3202..88548049aa 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -39,10 +39,9 @@
               class="oc-flex oc-flex-middle oc-my-xs"
               :to="el.computedLink"
             >
-              <avatar-image
+              <user-avatar
                 class="oc-mr-m"
-                :width="32"
-                :userid="el.messageRichParameters?.user?.name || el.user"
+                :user-id="el.messageRichParameters?.user?.id || el.user"
                 :user-name="el.messageRichParameters?.user?.displayname || el.user"
               />
               <div>
@@ -84,7 +83,8 @@ import {
   createFileRouteOptions,
   formatDateFromISO,
   formatRelativeDateFromISO,
-  useClientService
+  useClientService,
+  UserAvatar
 } from '@opencloud-eu/web-pkg'
 import NotificationBell from './NotificationBell.vue'
 import { Notification } from '../../helpers/notifications'
@@ -98,6 +98,7 @@ const POLLING_INTERVAL = 30000
 
 export default {
   components: {
+    UserAvatar,
     NotificationBell
   },
   setup() {
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 3e11ef78cb..dcd40f9f7d 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -9,15 +9,13 @@
       no-hover
       :aria-label="$gettext('My Account')"
     >
-      <oc-avatar
+      <user-avatar
         v-if="onPremisesSamAccountName"
         class="oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"
-        :width="32"
-        :userid="onPremisesSamAccountName"
+        :user-id="user.id"
         :user-name="user.displayName"
         background-color="var(--oc-role-on-chrome)"
         color="var(--oc-role-chrome)"
-        :src="userAvatar"
       />
       <oc-avatar-item
         v-else
@@ -66,13 +64,11 @@
         </template>
         <template v-else>
           <li class="profile-info-wrapper oc-pl-s">
-            <oc-avatar
-              :width="32"
-              :userid="onPremisesSamAccountName"
+            <user-avatar
+              :user-id="user.id"
               :user-name="user.displayName"
               color="var(--oc-role-on-chrome)"
               background-color="var(--oc-role-chrome)"
-              :src="userAvatar"
             />
             <span class="profile-info-wrapper" :class="{ 'oc-py-xs': !user.mail }">
               <span class="oc-display-block" v-text="user.displayName" />
@@ -132,31 +128,29 @@
 
 <script lang="ts">
 import { storeToRefs } from 'pinia'
-import { defineComponent, ComponentPublicInstance, computed, unref } from 'vue'
+import { ComponentPublicInstance, computed, defineComponent, unref } from 'vue'
 import {
+  routeToContextQuery,
+  useAuthService,
   useRoute,
   useSpacesStore,
   useThemeStore,
   useUserStore,
-  routeToContextQuery,
-  useAuthService,
-  useAvatarsStore
+  UserAvatar
 } from '@opencloud-eu/web-pkg'
 import { OcDrop } from '@opencloud-eu/design-system/components'
 import QuotaInformation from '../Account/QuotaInformation.vue'
 
 export default defineComponent({
-  components: { QuotaInformation },
+  components: { UserAvatar, QuotaInformation },
   setup() {
     const route = useRoute()
-    const avatarsStore = useAvatarsStore()
     const userStore = useUserStore()
     const themeStore = useThemeStore()
     const spacesStore = useSpacesStore()
     const authService = useAuthService()
 
     const { user } = storeToRefs(userStore)
-    const { userAvatar } = storeToRefs(avatarsStore)
 
     const accountPageRoute = computed(() => ({
       name: 'account',
@@ -187,8 +181,7 @@ export default defineComponent({
       imprintUrl,
       privacyUrl,
       quota,
-      logout,
-      userAvatar
+      logout
     }
   },
   computed: {
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 28ae074869..92440b8815 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -11,7 +11,6 @@ import {
   useUserStore,
   UserStore,
   useAvatarsStore,
-  AvatarsStore,
   useMessages,
   useSpacesStore,
   useAuthStore,
@@ -532,7 +531,6 @@ export const announceAuthService = ({
   configStore,
   router,
   userStore,
-  avatarsStore,
   authStore,
   capabilityStore,
   webWorkersStore
@@ -541,7 +539,6 @@ export const announceAuthService = ({
   configStore: ConfigStore
   router: Router
   userStore: UserStore
-  avatarsStore: AvatarsStore
   authStore: AuthStore
   capabilityStore: CapabilityStore
   webWorkersStore: WebWorkersStore
@@ -556,7 +553,6 @@ export const announceAuthService = ({
     ability,
     language,
     userStore,
-    avatarsStore,
     authStore,
     capabilityStore,
     webWorkersStore
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index bad1d0829a..b6512da618 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -85,7 +85,6 @@ export const bootstrapApp = async (configurationPath: string, appsReadyCallback:
     configStore,
     router,
     userStore,
-    avatarsStore,
     authStore,
     capabilityStore,
     webWorkersStore
diff --git a/packages/web-runtime/src/services/auth/authService.ts b/packages/web-runtime/src/services/auth/authService.ts
index 30f1d6cf15..0afbca631f 100644
--- a/packages/web-runtime/src/services/auth/authService.ts
+++ b/packages/web-runtime/src/services/auth/authService.ts
@@ -54,7 +54,6 @@ export class AuthService implements AuthServiceInterface {
     ability: Ability,
     language: Language,
     userStore: UserStore,
-    avatarsStore: AvatarsStore,
     authStore: AuthStore,
     capabilityStore: CapabilityStore,
     webWorkersStore: WebWorkersStore
@@ -66,7 +65,6 @@ export class AuthService implements AuthServiceInterface {
     this.ability = ability
     this.language = language
     this.userStore = userStore
-    this.avatarsStore = avatarsStore
     this.authStore = authStore
     this.capabilityStore = capabilityStore
     this.webWorkersStore = webWorkersStore
@@ -109,7 +107,6 @@ export class AuthService implements AuthServiceInterface {
         ability: this.ability,
         language: this.language,
         userStore: this.userStore,
-        avatarsStore: this.avatarsStore,
         authStore: this.authStore,
         capabilityStore: this.capabilityStore,
         webWorkersStore: this.webWorkersStore,
diff --git a/packages/web-runtime/src/services/auth/userManager.ts b/packages/web-runtime/src/services/auth/userManager.ts
index e0e472ad78..8ab15f3add 100644
--- a/packages/web-runtime/src/services/auth/userManager.ts
+++ b/packages/web-runtime/src/services/auth/userManager.ts
@@ -8,13 +8,7 @@ import {
 } from 'oidc-client-ts'
 import { buildUrl, useAppsStore } from '@opencloud-eu/web-pkg'
 import { getAbilities } from './abilities'
-import {
-  AuthStore,
-  UserStore,
-  CapabilityStore,
-  ConfigStore,
-  AvatarsStore
-} from '@opencloud-eu/web-pkg'
+import { AuthStore, UserStore, CapabilityStore, ConfigStore } from '@opencloud-eu/web-pkg'
 import { ClientService } from '@opencloud-eu/web-pkg'
 import { Ability } from '@opencloud-eu/web-client'
 import { Language } from 'vue3-gettext'
@@ -34,7 +28,6 @@ export interface UserManagerOptions {
   ability: Ability
   language: Language
   userStore: UserStore
-  avatarsStore: AvatarsStore
   authStore: AuthStore
   router: Router
   capabilityStore: CapabilityStore
@@ -48,7 +41,6 @@ export class UserManager extends OidcUserManager {
   private clientService: ClientService
   private configStore: ConfigStore
   private userStore: UserStore
-  private avatarsStore: AvatarsStore
   private authStore: AuthStore
   private webWorkersStore: WebWorkersStore
   private capabilityStore: CapabilityStore
@@ -125,7 +117,6 @@ export class UserManager extends OidcUserManager {
     this.ability = options.ability
     this.language = options.language
     this.userStore = options.userStore
-    this.avatarsStore = options.avatarsStore
     this.authStore = options.authStore
     this.capabilityStore = options.capabilityStore
     this.webWorkersStore = options.webWorkersStore
@@ -211,15 +202,6 @@ export class UserManager extends OidcUserManager {
       preferredLanguage: graphUser.preferredLanguage || ''
     })
 
-    try {
-      const userPhoto = await this.clientService.graphAuthenticated.photos.getOwnUserPhoto({
-        responseType: 'blob'
-      })
-      this.avatarsStore.setUserAvatar(URL.createObjectURL(userPhoto))
-    } catch {
-      console.info('Failed to fetch user photo')
-    }
-
     if (graphUser.preferredLanguage) {
       const appsStore = useAppsStore()
 
diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index 205a8d2bde..3fdddcca15 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -9,7 +9,7 @@ import Avatar from '../../../../src/components/Avatar.vue'
 
 const selectors = {
   notificationBellStub: 'notification-bell-stub',
-  avatarImageStub: 'avatar-image-stub',
+  userAvatarStub: 'user-avatar-stub',
   noNewNotifications: '.oc-notifications-no-new',
   markAll: '.oc-notifications-mark-all',
   notificationsLoading: '.oc-notifications-loading',
@@ -68,22 +68,23 @@ describe('Notification component', () => {
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
       await wrapper.vm.fetchNotificationsTask.last
-      const avatarImageStub = wrapper.findComponent<typeof Avatar>(selectors.avatarImageStub)
+      const avatarImageStub = wrapper.findComponent<typeof Avatar>(selectors.userAvatarStub)
       expect(avatarImageStub.attributes('userid')).toEqual(notification.user)
-      expect(avatarImageStub.attributes('user-name')).toEqual(notification.user)
+      expect(avatarImageStub.attributes('username')).toEqual(notification.user)
     })
     it('loads based on the rich parameters', async () => {
       const displayname = 'Albert Einstein'
       const name = 'einstein'
+      const id = '12345'
       const notification = mock<Notification>({
         messageRich: undefined,
-        messageRichParameters: { user: { displayname, name } }
+        messageRichParameters: { user: { displayname, name, id } }
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
       await wrapper.vm.fetchNotificationsTask.last
-      const avatarImageStub = wrapper.findComponent<typeof Avatar>(selectors.avatarImageStub)
-      expect(avatarImageStub.attributes('userid')).toEqual(name)
-      expect(avatarImageStub.attributes('user-name')).toEqual(displayname)
+      const avatarImageStub = wrapper.findComponent<typeof Avatar>(selectors.userAvatarStub)
+      expect(avatarImageStub.attributes('userid')).toEqual(id)
+      expect(avatarImageStub.attributes('username')).toEqual(displayname)
     })
   })
   describe('subject', () => {
@@ -221,7 +222,7 @@ function getWrapper({
         plugins: [...defaultPlugins({ piniaOptions: { spacesState: { spaces } } })],
         mocks: localMocks,
         provide: localMocks,
-        stubs: { 'avatar-image': true, OcButton: false }
+        stubs: { 'user-avatar': true, OcButton: false }
       }
     })
   }
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
index d382325ddc..5cf0701203 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`User Menu component > when no quota and email is set > the user menu does not contain a quota 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
         <!--v-if--></span>
       </li>
       <li data-v-08f1b1e7="">
@@ -26,10 +26,10 @@ exports[`User Menu component > when no quota and email is set > the user menu do
 
 exports[`User Menu component > when no quota and no email is set > the user menu does not contain a quota 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper oc-py-xs"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper oc-py-xs"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
         <!--v-if-->
         <!--v-if--></span>
       </li>
@@ -51,10 +51,10 @@ exports[`User Menu component > when no quota and no email is set > the user menu
 
 exports[`User Menu component > when quota and no email is set > renders a navigation without email 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper oc-py-xs"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper oc-py-xs"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
         <!--v-if-->
         <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
@@ -82,10 +82,10 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
 
 exports[`User Menu component > when quota is above 80% and below 90% > renders a warning quota progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
@@ -112,10 +112,10 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
 
 exports[`User Menu component > when quota is above 90% > renders a danger quota progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
@@ -142,10 +142,10 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
 
 exports[`User Menu component > when quota is below 80% > renders a primary quota progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
@@ -172,10 +172,10 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
 
 exports[`User Menu component > when quota is not defined > renders no percentag of total and no progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
@@ -202,10 +202,10 @@ exports[`User Menu component > when quota is not defined > renders no percentag
 
 exports[`User Menu component > when quota is unlimited > renders no percentag of total and no progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-on-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar oc-topbar-avatar oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 32px; height: 32px; line-height: 32px; background-color: var(--oc-role-chrome); font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" userid="einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index dff2bd0acc..14fb3cd8dd 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -24,7 +24,7 @@ exports[`account page > account information section > displays basic user inform
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Max. 10MB, JPG, PNG</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">
           <div class="avatar-upload oc-mb-s"><input class="oc-invisible avatar-file-input" type="file" accept="image/jpeg, image/png">
-            <div class="oc-flex oc-flex-column oc-flex-middle"><span class="vue-avatar--wrapper oc-avatar oc-mb-m" style="width: 128px; height: 128px; line-height: 128px; background-color: #9C27B0; font-size: 51px; font-family: Helvetica, Arial, sans-serif; color: white;" width="128" aria-hidden="true" focusable="false" data-test-user-name="some-displayname" userid="some-username"><span class="avatar-initials" style="color: white;">SD</span></span>
+            <div class="oc-flex oc-flex-column oc-flex-middle"><span class="vue-avatar--wrapper oc-avatar oc-mb-m" style="width: 128px; height: 128px; line-height: 128px; background-color: #9C27B0; font-size: 51px; font-family: Helvetica, Arial, sans-serif; color: white;" width="128" aria-hidden="true" focusable="false" data-test-user-name="some-displayname"><span class="avatar-initials" style="color: white;">SD</span></span>
               <div>
                 <div class="oc-button-group"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline avatar-upload-button">
                     <!--v-if-->
diff --git a/packages/web-runtime/tests/unit/services/auth/authService.spec.ts b/packages/web-runtime/tests/unit/services/auth/authService.spec.ts
index 015a76ce6d..6d24ea5afe 100644
--- a/packages/web-runtime/tests/unit/services/auth/authService.spec.ts
+++ b/packages/web-runtime/tests/unit/services/auth/authService.spec.ts
@@ -23,7 +23,7 @@ const initAuthService = ({
   const authStore = useAuthStore()
   configStore = configStore || useConfigStore()
 
-  authService.initialize(configStore, null, router, null, null, null, null, authStore, null, null)
+  authService.initialize(configStore, null, router, null, null, null, authStore, null, null)
 }
 
 describe('AuthService', () => {