diff --git a/webapp/components/Avatar/Avatar.vue b/webapp/components/Avatar/Avatar.vue
index 6b10d1715..2c5cf1ddc 100644
--- a/webapp/components/Avatar/Avatar.vue
+++ b/webapp/components/Avatar/Avatar.vue
@@ -2,8 +2,8 @@
   <ds-avatar
     :image="avatarUrl"
     :name="userName"
-    style="display: inline-block; vertical-align: middle;"
-    size="small"
+    class="avatar"
+    :size="size"
   />
 </template>
 
@@ -12,6 +12,7 @@ export default {
   name: 'HcAvatar',
   props: {
     user: { type: Object, default: null },
+    size: { type: String, default: 'small' },
   },
   computed: {
     avatarUrl() {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index b38458a16..6ffaba63e 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -18,10 +18,9 @@
             v-if="myProfile"
             :user="user"
           />
-          <ds-avatar
+          <hc-avatar
             v-else
-            :image="user.avatar"
-            :name="userName"
+            :user="user"
             class="profile-avatar"
             size="x-large"
           />
@@ -333,6 +332,7 @@ import HcLoadMore from '~/components/LoadMore.vue'
 import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
 import HcUpload from '~/components/Upload'
+import HcAvatar from '~/components/Avatar/Avatar.vue'
 
 export default {
   components: {
@@ -343,6 +343,7 @@ export default {
     HcBadges,
     HcLoadMore,
     HcEmpty,
+    HcAvatar,
     ContentMenu,
     HcUpload,
   },
@@ -456,7 +457,7 @@ export default {
 </script>
 
 <style lang="scss">
-.profile-avatar {
+.profile-avatar.ds-avatar {
   display: block;
   margin: auto;
   margin-top: -60px;