diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
index fa2bd6e0..cb283c78 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
@@ -14,14 +14,11 @@
           <PAvatar
             v-if="user"
             :label="$filters.getAvatar(user?.email, user?.username)"
+            size="xlarge"
             shape="circle"
             :pt="{
               root: {
-                class: 'text-5xl font-semibold text-color-forest',
-                style: {
-                  width: '120px',
-                  height: '120px'
-                }
+                class: 'font-semibold text-color-forest'
               }
             }"
           />
diff --git a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss
index d169b82b..e466e9e9 100644
--- a/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss
+++ b/web-app/packages/lib/src/assets/sass/theme-base/components/misc/_avatar.scss
@@ -1,24 +1,25 @@
+// widths, heights and font-sizes are updated with custom values from our Figma design
 .p-avatar {
     background-color: $avatarBg;
     border-radius: $borderRadius;
 
     &.p-avatar-lg {
-        width: 3rem;
-        height: 3rem;
-        font-size: 1.5rem;
+        width: 2.625rem;
+        height: 2.625rem;
+        font-size: 1.125rem;
 
         .p-avatar-icon {
-            font-size: 1.5rem;
+            font-size: 1.125rem;
         }
     }
 
     &.p-avatar-xl {
-        width: 4rem;
-        height: 4rem;
-        font-size: 2rem;
+        width: 7.5rem;
+        height: 7.5rem;
+        font-size: 3.214rem;
 
         .p-avatar-icon {
-            font-size: 2rem;
+            font-size: 3.214rem;
         }
     }
 }
@@ -27,4 +28,4 @@
     .p-avatar {
         border: 2px solid $panelContentBg;
     }
-}
\ No newline at end of file
+}
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 07760497..fa51ab3c 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -119,3 +119,8 @@ img {
   color: map-get($map: $colors, $key: grape);
   font-weight: 600;
 }
+
+// Font size in avatar
+.p-avatar:not(.p-avatar-lg):not(.p-avatar-xl) {
+  font-size: 0.857rem;
+}
diff --git a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
index 0a670892..86191186 100644
--- a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
@@ -61,13 +61,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <PAvatar
             :label="$filters.getAvatar(loggedUser.email, loggedUser.name)"
             shape="circle"
+            size="xlarge"
             :pt="{
               root: {
-                class: 'text-5xl font-semibold text-color-forest',
-                style: {
-                  width: '120px',
-                  height: '120px'
-                }
+                class: 'font-semibold text-color-forest'
               }
             }"
           />