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 ce54d755..c779d9e2 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
@@ -19,7 +19,7 @@
               shape="circle"
               :pt="{
                 root: {
-                  class: 'font-semibold text-color-forest'
+                  class: 'font-semibold'
                 }
               }"
             />
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
index 4a975d9a..255e07cb 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
@@ -6,6 +6,7 @@
           <h1 class="headline-h3">Project details</h1>
         </template>
         <template #headerActions>
+          <slot name="action-button"></slot>
           <PButton
             severity="secondary"
             @click="downloadArchive"
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 98653e3a..10d144e3 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
@@ -155,7 +155,7 @@ img {
 
 // Font size in avatar
 .p-avatar:not(.p-avatar-lg):not(.p-avatar-xl) {
-  font-size: 0.857rem;
+  font-size: 0.75rem;
 }
 
 .tooltip {
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss
index b393c03d..7c75bdee 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_misc.scss
@@ -80,11 +80,11 @@ $progressSpinnerColorFour:$warningMessageTextColor !default;
 
 /// Background of an avatar
 /// @group misc
-$avatarBg: map-get($map: $colors, $key: medium-green);
+$avatarBg: map-get($map: $colors, $key: informative);
 
 /// Text color of an avatar
 /// @group misc
-$avatarTextColor:$textColor;
+$avatarTextColor: map-get($map: $colors, $key: deep-ocean);
 
 /// Background of a chip
 /// @group misc
diff --git a/web-app/packages/lib/src/common/components/UserSummary.vue b/web-app/packages/lib/src/common/components/UserSummary.vue
index 674265fd..d6252dec 100644
--- a/web-app/packages/lib/src/common/components/UserSummary.vue
+++ b/web-app/packages/lib/src/common/components/UserSummary.vue
@@ -6,7 +6,7 @@
       :size="avatarSize"
       :pt="{
         root: {
-          class: 'mr-1 text-color-forest font-semibold flex-shrink-0',
+          class: 'mr-1 font-semibold flex-shrink-0',
           style: { borderRadius: '50%' }
         }
       }"
diff --git a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
index 6a416a08..5469686d 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
@@ -39,30 +39,39 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <template #end>
         <div class="flex align-items-center flex-shrink-0">
           <slot name="action-button"></slot>
-          <PButton
+          <slot
             v-if="loggedUser"
-            text
-            plain
-            aria-haspopup="true"
-            aria-controls="app-header-profile"
-            data-cy="app-header-profile-btn"
-            @click="toggleMenu"
-            class="p-2 shadow-none"
+            name="profile-button"
+            :toggle-menu="toggleMenu"
+            :logged-user="loggedUser"
+            :menu-visible="menuVisible"
           >
-            <slot name="invitationsIcon"></slot>
-            <div class="mr-2 max-w-80 flex flex-column align-items-start">
-              <span class="title-t4" :style="{ whiteSpace: 'nowrap' }">{{
-                userName
-              }}</span>
-              <span
-                v-if="renderNamespace"
-                class="paragraph-p6 opacity-80 font-normal"
-              >
-                {{ currentWorkspace?.name || 'no workspace' }}
-              </span>
-            </div>
-            <i class="ti ti-chevron-down"></i
-          ></PButton>
+            <PButton
+              text
+              plain
+              aria-haspopup="true"
+              aria-controls="app-header-profile"
+              data-cy="app-header-profile-btn"
+              @click="toggleMenu"
+              class="p-2 shadow-none"
+            >
+              <slot name="invitationsIcon"></slot>
+              <div class="mr-2 max-w-80 flex flex-column align-items-end">
+                <span class="title-t4" :style="{ whiteSpace: 'nowrap' }">{{
+                  userName
+                }}</span>
+                <span
+                  v-if="renderNamespace"
+                  class="paragraph-p6 opacity-80 font-normal"
+                >
+                  {{ currentWorkspace?.name || 'no workspace' }}
+                </span>
+              </div>
+              <i
+                :class="menuVisible ? 'ti ti-chevron-up' : 'ti ti-chevron-down'"
+              ></i>
+            </PButton>
+          </slot>
           <PButton
             v-else
             text
@@ -79,6 +88,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             id="app-header-profile"
             data-cy="app-header-profile"
             ref="menu"
+            @show="menuVisible = true"
+            @hide="menuVisible = false"
             :pt="{ root: { class: 'p-3' }, content: { class: 'p-0' } }"
           >
             <div class="flex align-items-center mb-3">
@@ -88,7 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 shape="circle"
                 :pt="{
                   root: {
-                    class: 'mr-2 text-color-forest font-semibold flex-shrink-0',
+                    class: 'mr-2 font-semibold flex-shrink-0',
                     style: {
                       borderRadius: '50%'
                     }
@@ -115,7 +126,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               }"
             ></PMenu>
           </POverlayPanel>
-          <AppMenu :items="_helpMenuItems" :icon="'ti ti-help'" />
+          <PButton
+            text
+            plain
+            rounded
+            icon="ti ti-help"
+            @click="toggleMenuHelp"
+            aria-haspopup="true"
+            aria-controls="menu-help"
+            class="paragraph-p4 text-color hidden md:inline-flex"
+          />
+          <PMenu
+            ref="menuHelp"
+            id="menu-help"
+            :model="_helpMenuItems"
+            :popup="true"
+          />
         </div>
       </template>
     </PMenubar>
@@ -134,15 +160,14 @@ import { defineComponent, ref, PropType } from 'vue'
 
 import { AppBreadcrumbs } from '.'
 
-import { AppMenu, UserRouteName, useInstanceStore } from '@/main'
+import { UserRouteName, useInstanceStore } from '@/main'
 import { useLayoutStore } from '@/modules/layout/store'
 import { useUserStore } from '@/modules/user/store'
 
 export default defineComponent({
   name: 'app-header-template',
   components: {
-    AppBreadcrumbs,
-    AppMenu
+    AppBreadcrumbs
   },
   props: {
     renderNamespace: {
@@ -158,14 +183,23 @@ export default defineComponent({
   },
   setup() {
     const menu = ref()
+    const menuHelp = ref()
+    const menuVisible = ref(false)
 
     const toggleMenu = (event) => {
       menu.value.toggle(event)
     }
 
+    const toggleMenuHelp = (event) => {
+      menuHelp.value.toggle(event)
+    }
+
     return {
       menu,
-      toggleMenu
+      menuHelp,
+      menuVisible,
+      toggleMenu,
+      toggleMenuHelp
     }
   },
   computed: {
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue b/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
index 9fac8ecc..04298c28 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               shape="circle"
               :pt="{
                 root: {
-                  class: 'font-semibold text-color-forest mr-2',
+                  class: 'font-semibold mr-2',
                   style: {
                     borderRadius: '50%'
                   }
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 86191186..136ee323 100644
--- a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
@@ -64,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             size="xlarge"
             :pt="{
               root: {
-                class: 'font-semibold text-color-forest'
+                class: 'font-semibold'
               }
             }"
           />