diff --git a/components/header-bar/i18n/en.pot b/components/header-bar/i18n/en.pot
index 6e4fd34bb2..c15ea2634e 100644
--- a/components/header-bar/i18n/en.pot
+++ b/components/header-bar/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-02-17T10:58:14.678Z\n"
-"PO-Revision-Date: 2025-02-17T10:58:14.680Z\n"
+"POT-Creation-Date: 2025-02-26T14:39:24.393Z\n"
+"PO-Revision-Date: 2025-02-26T14:39:24.393Z\n"
 
 msgid "Browse apps"
 msgstr "Browse apps"
@@ -23,6 +23,18 @@ msgstr "Logout"
 msgid "Back"
 msgstr "Back"
 
+msgid "to navigate"
+msgstr "to navigate"
+
+msgid "to select"
+msgstr "to select"
+
+msgid "to close"
+msgstr "to close"
+
+msgid "to go back one level"
+msgstr "to go back one level"
+
 msgid "Search apps"
 msgstr "Search apps"
 
@@ -77,29 +89,29 @@ msgstr "Online"
 msgid "Offline"
 msgstr "Offline"
 
-msgid "Edit profile"
-msgstr "Edit profile"
-
 msgid "Settings"
 msgstr "Settings"
 
-msgid "Account"
-msgstr "Account"
+msgid "Account security"
+msgstr "Account security"
+
+msgid "My profile"
+msgstr "My profile"
 
 msgid "Help"
 msgstr "Help"
 
-msgid "About DHIS2"
-msgstr "About DHIS2"
+msgid "System info"
+msgstr "System info"
 
-msgid "New {{appName}} version available"
-msgstr "New {{appName}} version available"
+msgid "Log out"
+msgstr "Log out"
 
-msgid "New app version available"
-msgstr "New app version available"
+msgid "New {{appName}} version available — Reload to update"
+msgstr "New {{appName}} version available — Reload to update"
 
-msgid "Click to reload"
-msgstr "Click to reload"
+msgid "New app version available — Reload to update"
+msgstr "New app version available — Reload to update"
 
 msgid "header bar profile"
 msgstr "header bar profile"
diff --git a/components/header-bar/src/__e2e__/stories/common.js b/components/header-bar/src/__e2e__/stories/common.js
index ee553a1355..33e91a7a2b 100644
--- a/components/header-bar/src/__e2e__/stories/common.js
+++ b/components/header-bar/src/__e2e__/stories/common.js
@@ -93,7 +93,7 @@ export const dataProviderData = {
     },
     me: {
         name: 'John Doe',
-        email: 'john_doe@dhis2.org',
+        username: 'john_doe',
         settings: {
             keyUiLocale: 'en',
         },
diff --git a/components/header-bar/src/__e2e__/stories/me-with-avatar.js b/components/header-bar/src/__e2e__/stories/me-with-avatar.js
index 0c41c255c3..869cfd4e47 100644
--- a/components/header-bar/src/__e2e__/stories/me-with-avatar.js
+++ b/components/header-bar/src/__e2e__/stories/me-with-avatar.js
@@ -13,7 +13,7 @@ MeWithAvatar.decorators = [
         ...dataProviderData,
         me: {
             name: 'John Doe',
-            email: 'john_doe@dhis2.org',
+            username: 'john_doe',
             settings: {
                 keyUiLocale: 'en',
             },
diff --git a/components/header-bar/src/debug-info/debug-info-menu-item.js b/components/header-bar/src/debug-info/debug-info-menu-item.js
index 89e7cd759a..380b33a59d 100644
--- a/components/header-bar/src/debug-info/debug-info-menu-item.js
+++ b/components/header-bar/src/debug-info/debug-info-menu-item.js
@@ -1,5 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
-import { MenuItem } from '@dhis2-ui/menu'
+import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../locales/index.js'
@@ -42,27 +41,45 @@ export const DebugInfoMenuItem = ({ hideProfileMenu, showDebugInfoModal }) => {
             <style jsx>{`
                 .root {
                     color: ${colors.grey700};
-                    font-style: italic;
-                    font-size: 14px;
-                    line-height: 17px;
+                    font-size: 12px;
+                    line-height: 15px;
                 }
                 .instance-info {
-                    margin-bottom: 4px;
+                    margin-block-end: ${spacers.dp4};
+                    word-break: break-all;
                 }
                 .version {
-                    white-space: no-wrap;
+                    word-break: break-all;
+                }
+                .debug-info-menu-item {
+                    padding: 0;
                 }
             `}</style>
         </div>
     )
 
     return (
-        <MenuItem
-            dense
+        <button
             onClick={openDebugModal}
-            label={debugInfoLabel}
-            dataTest="dhis2-ui-headerbar-debuginfo"
-        />
+            data-test="dhis2-ui-headerbar-debuginfo"
+        >
+            {debugInfoLabel}
+            <style jsx>{`
+                button {
+                    width: 100%;
+                    margin-block-start: ${spacers.dp4};
+                    padding: ${spacers.dp8} ${spacers.dp12};
+                    background-color: ${colors.grey050};
+                    border: none;
+                    border-block-start: 1px solid ${colors.grey300};
+                    cursor: pointer;
+                    text-align: left;
+                }
+                button:hover {
+                    background-color: ${colors.grey200};
+                }
+            `}</style>
+        </button>
     )
 }
 
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
index 56d423a8ac..5daf074d30 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu.feature
@@ -4,13 +4,13 @@ Feature: The HeaderBar contains a profile menu
         Given the HeaderBar loads without an error and the user does not have an avatar
         Then the headerbar contains a text icon of size 36px
         When the user clicks on the text icon
-        Then the profile menu contains a text icon of size 48px
+        Then the profile menu contains a text icon of size 36px
 
     Scenario: The HeaderBar shows an image icon if the user has an avatar
         Given the HeaderBar loads without an error and the user has an avatar
         Then the headerbar contains an image icon of size 36px
         When the user clicks on the image icon
-        Then the profile menu contains an image icon of size 48px
+        Then the profile menu contains an image icon of size 36px
 
     Scenario: The menu is closed by default
         Given the HeaderBar loads without an error
@@ -21,11 +21,11 @@ Feature: The HeaderBar contains a profile menu
         When the user clicks on the profile icons
         Then the menu opens
 
-    Scenario: The user name and email are displayed
+    Scenario: The user name and username are displayed
         Given the HeaderBar loads without an error
         When the user opens the menu
         And contains the user name
-        And contains the user email
+        And contains the user username
 
     Scenario: The user can edit his profile
         Given the HeaderBar loads without an error
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
index 9d6f4c6a90..d2db26d32c 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js
@@ -20,11 +20,11 @@ When('the user clicks on the text icon', () => {
     cy.get('[data-test="headerbar-profile-icon-text"]').click()
 })
 
-Then(`the profile menu contains a text icon of size 48px`, () => {
+Then(`the profile menu contains a text icon of size 36px`, () => {
     cy.fixture('HeaderBar/me').then(() => {
         cy.get('[data-test="headerbar-profile-menu-icon-text"]')
             .should('be.visible')
-            .and('have.css', 'height', '48px')
-            .and('have.css', 'width', '48px')
+            .and('have.css', 'height', '36px')
+            .and('have.css', 'width', '36px')
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
index 02012b8525..38afba7c4a 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js
@@ -15,9 +15,9 @@ When('the user clicks on the image icon', () => {
     cy.get('[data-test="headerbar-profile-icon-image"]').click()
 })
 
-Then('the profile menu contains an image icon of size 48px', () => {
+Then('the profile menu contains an image icon of size 36px', () => {
     cy.get('[data-test="headerbar-profile-menu-icon-image"]')
         .should('be.visible')
-        .and('have.css', 'height', '48px')
-        .and('have.css', 'width', '48px')
+        .and('have.css', 'height', '36px')
+        .and('have.css', 'width', '36px')
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js
index e3a3a867c9..e72978bc5b 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js
@@ -1,7 +1,7 @@
 import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to edit the profile', () => {
-    cy.get('[data-test="headerbar-profile-edit-profile-link"]').should(
-        'be.visible'
-    )
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        expect(lis.eq(3)).to.be.visible
+    })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js
index 496904bd08..80df88f688 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js
@@ -2,6 +2,6 @@ import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to the About DHIS2 page', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        expect(lis.eq(3)).to.be.visible
+        expect(lis.eq(5)).to.be.visible
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js
index 26e3d0d87d..dd38a654a0 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js
@@ -2,6 +2,6 @@ import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('contains a link to the help page', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        expect(lis.eq(2)).to.be.visible
+        expect(lis.eq(4)).to.be.visible
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js
index 777a9b9a4b..11e8aa9b80 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js
@@ -5,7 +5,7 @@ const logoutUrl = `${baseUrl}dhis-web-commons-security/logout.action`
 
 Then('contains a link to log out the user', () => {
     cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
-        const menuItem = lis.eq(4)
+        const menuItem = lis.eq(7)
         expect(menuItem).to.be.visible
         expect(menuItem.find('a')).to.have.attr('href', logoutUrl)
     })
diff --git a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_username_are_displayed.js
similarity index 58%
rename from components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js
rename to components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_username_are_displayed.js
index e1701d8358..e662b63ee6 100644
--- a/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js
+++ b/components/header-bar/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_username_are_displayed.js
@@ -7,16 +7,16 @@ Then('contains the user name', () => {
     ).then(([win, $name]) => {
         console.log('win.dataProviderData', win.dataProviderData)
         const { name } = win.dataProviderData.me
-        expect($name.text()).to.equal(name)
+        expect($name.text()).to.contain(name)
     })
 })
 
-Then('contains the user email', () => {
+Then('contains the user username', () => {
     cy.all(
         () => cy.window(),
-        () => cy.get('[data-test="headerbar-profile-user-email"]')
-    ).then(([win, $email]) => {
-        const { email } = win.dataProviderData.me
-        expect($email.text()).to.equal(email)
+        () => cy.get('[data-test="headerbar-profile-user-subtitle"]')
+    ).then(([win, $username]) => {
+        const { username } = win.dataProviderData.me
+        expect($username.text()).to.equal(username)
     })
 })
diff --git a/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js b/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js
index 5ab56b45dd..ea8bb0e6ca 100644
--- a/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js
+++ b/components/header-bar/src/features/the_headerbar_should_display_app_update_notification/index.js
@@ -31,13 +31,13 @@ Then('the update notification should not be displayed', () => {
 Then('the update notification should be displayed', () => {
     cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
         .should('contain', 'New Data Visualizer version available')
-        .should('contain', 'Click to reload')
+        .should('contain', 'Reload to update')
 })
 
 Then('the update notification should be displayed without app name', () => {
     cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
         .should('contain', 'New app version available')
-        .should('contain', 'Click to reload')
+        .should('contain', 'Reload to update')
 })
 
 When('the user clicks the update notification', () => {
diff --git a/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js b/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js
index 0a82d6b7ad..929f69c8f6 100644
--- a/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js
+++ b/components/header-bar/src/features/the_headerbar_should_display_debug_version_infos/index.js
@@ -79,7 +79,7 @@ Then('the instance version should show as unknown', () => {
 })
 
 When('the user clicks the debug info menu item', () => {
-    cy.get('[data-test="dhis2-ui-headerbar-debuginfo"] > a').click()
+    cy.get('[data-test="dhis2-ui-headerbar-debuginfo"]').click()
 })
 
 Then('the debug info modal should be shown', () => {
diff --git a/components/header-bar/src/header-bar.js b/components/header-bar/src/header-bar.js
index 40e4ec5901..2d5619d8bf 100755
--- a/components/header-bar/src/header-bar.js
+++ b/components/header-bar/src/header-bar.js
@@ -24,7 +24,7 @@ const query = {
     user: {
         resource: 'me',
         params: {
-            fields: ['authorities', 'avatar', 'email', 'name', 'settings'],
+            fields: ['authorities', 'avatar', 'name', 'settings', 'username'],
         },
     },
     apps: {
@@ -114,7 +114,7 @@ export const HeaderBar = ({
                             </CommandPaletteContextProvider>
                             <Profile
                                 name={data.user.name}
-                                email={data.user.email}
+                                username={data.user.username}
                                 avatarId={data.user.avatar?.id}
                                 helpUrl={data.help.helpPageLink}
                             />
diff --git a/components/header-bar/src/header-bar.prod.stories.js b/components/header-bar/src/header-bar.prod.stories.js
index 5f142bd6d4..ba1d986be0 100644
--- a/components/header-bar/src/header-bar.prod.stories.js
+++ b/components/header-bar/src/header-bar.prod.stories.js
@@ -33,7 +33,7 @@ const customData = {
     },
     me: {
         name: 'John Doe',
-        email: 'john_doe@dhis2.org',
+        username: 'john_doe',
         settings: {
             keyUiLocale: 'en',
         },
diff --git a/components/header-bar/src/profile-menu/profile-header.js b/components/header-bar/src/profile-menu/profile-header.js
index 1ffc063612..1ae6582ca1 100755
--- a/components/header-bar/src/profile-menu/profile-header.js
+++ b/components/header-bar/src/profile-menu/profile-header.js
@@ -1,19 +1,18 @@
-import { useConfig } from '@dhis2/app-runtime'
+import { colors, spacers } from '@dhis2/ui-constants'
 import { UserAvatar } from '@dhis2-ui/user-avatar'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { joinPath } from '../join-path.js'
-import i18n from '../locales/index.js'
 
 const ProfileName = ({ children }) => (
     <div data-test="headerbar-profile-username">
         {children}
-
         <style jsx>{`
             div {
-                margin-bottom: 3px;
-                font-size: 16px;
-                line-height: 19px;
+                font-size: 13px;
+                line-height: 15px;
+                font-weight: 500;
+                color: ${colors.grey900};
+                word-break: break-all;
             }
         `}</style>
     </div>
@@ -22,63 +21,36 @@ ProfileName.propTypes = {
     children: PropTypes.string,
 }
 
-const ProfileEmail = ({ children }) => (
-    <div data-test="headerbar-profile-user-email">
+const ProfileSubtitle = ({ children }) => (
+    <div data-test="headerbar-profile-user-subtitle">
         {children}
 
         <style jsx>{`
             div {
-                margin-bottom: 6px;
-                font-size: 14px;
-                line-height: 16px;
+                font-size: 13px;
+                line-height: 15px;
+                color: ${colors.grey600};
+                word-break: break-all;
             }
         `}</style>
     </div>
 )
-ProfileEmail.propTypes = {
+ProfileSubtitle.propTypes = {
     children: PropTypes.string,
 }
 
-const ProfileEdit = ({ children }) => {
-    const { baseUrl } = useConfig()
-
-    return (
-        <a
-            href={joinPath(baseUrl, 'dhis-web-user-profile/#/profile')}
-            data-test="headerbar-profile-edit-profile-link"
-        >
-            {children}
-
-            <style jsx>{`
-                a {
-                    color: rgba(0, 0, 0, 0.87);
-                    font-size: 12px;
-                    line-height: 14px;
-                    text-decoration: underline;
-                    cursor: pointer;
-                }
-            `}</style>
-        </a>
-    )
-}
-
-ProfileEdit.propTypes = {
-    children: PropTypes.string,
-}
-
-const ProfileDetails = ({ name, email }) => (
+const ProfileDetails = ({ name, username }) => (
     <div>
         <ProfileName>{name}</ProfileName>
-        <ProfileEmail>{email}</ProfileEmail>
-        <ProfileEdit>{i18n.t('Edit profile')}</ProfileEdit>
+        <ProfileSubtitle>{username}</ProfileSubtitle>
 
         <style jsx>{`
             div {
                 display: flex;
                 flex-direction: column;
-                margin-inline-start: 20px;
-                color: #000;
-                font-size: 14px;
+                gap: ${spacers.dp4};
+                padding-block-start: 1px;
+                font-size: 13px;
                 font-weight: 400;
             }
         `}</style>
@@ -86,26 +58,36 @@ const ProfileDetails = ({ name, email }) => (
 )
 
 ProfileDetails.propTypes = {
-    email: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
 
-export const ProfileHeader = ({ name, email, avatarId }) => (
+export const ProfileHeader = ({ name, avatarId, username }) => (
     <div>
-        <UserAvatar
-            avatarId={avatarId}
-            name={name}
-            dataTest="headerbar-profile-menu-icon"
-            large
-        />
-        <ProfileDetails name={name} email={email} />
+        <span className="user-avatar">
+            <UserAvatar
+                avatarId={avatarId}
+                name={name}
+                dataTest="headerbar-profile-menu-icon"
+                medium
+            />
+        </span>
+        <ProfileDetails name={name} username={username} />
 
         <style jsx>{`
             div {
                 display: flex;
                 flex-direction: row;
-                margin-inline-start: 24px;
-                padding-top: 20px;
+                overflow: hidden;
+                align-items: flex-start;
+                gap: ${spacers.dp8};
+                padding: ${spacers.dp12} ${spacers.dp8};
+                margin-block-end: ${spacers.dp4};
+                background: ${colors.grey100};
+                border-block-end: 1px solid ${colors.grey300};
+            }
+            span.user-avatar {
+                flex-shrink: 0;
             }
         `}</style>
     </div>
@@ -113,6 +95,6 @@ export const ProfileHeader = ({ name, email, avatarId }) => (
 
 ProfileHeader.propTypes = {
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
diff --git a/components/header-bar/src/profile-menu/profile-menu.js b/components/header-bar/src/profile-menu/profile-menu.js
index f292d0c9d6..bffbace630 100755
--- a/components/header-bar/src/profile-menu/profile-menu.js
+++ b/components/header-bar/src/profile-menu/profile-menu.js
@@ -1,15 +1,14 @@
 import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime'
-import { colors } from '@dhis2/ui-constants'
+import { colors, elevations } from '@dhis2/ui-constants'
 import {
-    IconSettings24,
-    IconInfo24,
-    IconLogOut24,
-    IconUser24,
-    IconQuestion24,
+    IconSettings16,
+    IconMore16,
+    IconLogOut16,
+    IconUser16,
+    IconQuestion16,
+    IconLock16,
 } from '@dhis2/ui-icons'
-import { Card } from '@dhis2-ui/card'
 import { Center } from '@dhis2-ui/center'
-import { Divider } from '@dhis2-ui/divider'
 import { Layer } from '@dhis2-ui/layer'
 import { CircularLoader } from '@dhis2-ui/loader'
 import { MenuDivider, MenuItem } from '@dhis2-ui/menu'
@@ -35,87 +34,95 @@ const LoadingMask = () => (
 
 const ProfileContents = ({
     name,
-    email,
     avatarId,
     helpUrl,
     hideProfileMenu,
     showDebugInfoModal,
+    username,
 }) => {
     const { baseUrl } = useConfig()
     const [loading, setLoading] = useState(false)
 
     return (
-        <Card>
-            <div>
-                <ProfileHeader name={name} email={email} avatarId={avatarId} />
-                <Divider margin="13px 0 7px 0" />
-                <ul data-test="headerbar-profile-menu">
+        <div>
+            <ProfileHeader
+                name={name}
+                username={username}
+                avatarId={avatarId}
+            />
+            <ul data-test="headerbar-profile-menu">
+                <MenuItem
+                    dense
+                    href={joinPath(baseUrl, 'dhis-web-user-profile/#/settings')}
+                    label={i18n.t('Settings')}
+                    value="settings"
+                    icon={<IconSettings16 color={colors.grey600} />}
+                />
+                <MenuItem
+                    dense
+                    href={joinPath(baseUrl, 'dhis-web-user-profile/#/account')}
+                    label={i18n.t('Account security')}
+                    value="account"
+                    icon={<IconLock16 color={colors.grey600} />}
+                />
+                <MenuItem
+                    dense
+                    href={joinPath(baseUrl, 'dhis-web-user-profile/#/profile')}
+                    label={i18n.t('My profile')}
+                    value="account"
+                    icon={<IconUser16 color={colors.grey600} />}
+                />
+                <MenuDivider dense />
+                {helpUrl && (
                     <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-user-profile/#/settings'
-                        )}
-                        label={i18n.t('Settings')}
-                        value="settings"
-                        icon={<IconSettings24 color={colors.grey700} />}
+                        dense
+                        href={helpUrl}
+                        label={i18n.t('Help')}
+                        value="help"
+                        icon={<IconQuestion16 color={colors.grey600} />}
                     />
-                    <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-user-profile/#/account'
-                        )}
-                        label={i18n.t('Account')}
-                        value="account"
-                        icon={<IconUser24 color={colors.grey700} />}
-                    />
-                    {helpUrl && (
-                        <MenuItem
-                            href={helpUrl}
-                            label={i18n.t('Help')}
-                            value="help"
-                            icon={<IconQuestion24 color={colors.grey700} />}
-                        />
+                )}
+                <MenuItem
+                    dense
+                    href={joinPath(
+                        baseUrl,
+                        'dhis-web-user-profile/#/aboutPage'
                     )}
-                    <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-user-profile/#/aboutPage'
-                        )}
-                        label={i18n.t('About DHIS2')}
-                        value="about"
-                        icon={<IconInfo24 color={colors.grey700} />}
-                    />
-                    <MenuItem
-                        href={joinPath(
-                            baseUrl,
-                            'dhis-web-commons-security/logout.action'
-                        )}
-                        // NB: By MenuItem implementation, this callback
-                        // overwrites default navigation behavior but maintains
-                        // the href attribute
-                        onClick={async () => {
-                            setLoading(true)
-                            await clearSensitiveCaches()
-                            setLoading(false)
-                            window.location.assign(
-                                joinPath(
-                                    baseUrl,
-                                    'dhis-web-commons-security/logout.action'
-                                )
+                    label={i18n.t('System info')}
+                    value="about"
+                    icon={<IconMore16 color={colors.grey600} />}
+                />
+                <MenuDivider dense />
+                <MenuItem
+                    dense
+                    href={joinPath(
+                        baseUrl,
+                        'dhis-web-commons-security/logout.action'
+                    )}
+                    // NB: By MenuItem implementation, this callback
+                    // overwrites default navigation behavior but maintains
+                    // the href attribute
+                    onClick={async () => {
+                        setLoading(true)
+                        await clearSensitiveCaches()
+                        setLoading(false)
+                        window.location.assign(
+                            joinPath(
+                                baseUrl,
+                                'dhis-web-commons-security/logout.action'
                             )
-                        }}
-                        label={i18n.t('Logout')}
-                        value="logout"
-                        icon={<IconLogOut24 color={colors.grey700} />}
-                    />
-                    <MenuDivider dense />
-                    <DebugInfoMenuItem
-                        hideProfileMenu={hideProfileMenu}
-                        showDebugInfoModal={showDebugInfoModal}
-                    />
-                    <UpdateNotification hideProfileMenu={hideProfileMenu} />
-                </ul>
-            </div>
+                        )
+                    }}
+                    label={i18n.t('Log out')}
+                    value="logout"
+                    icon={<IconLogOut16 color={colors.grey600} />}
+                />
+                <DebugInfoMenuItem
+                    hideProfileMenu={hideProfileMenu}
+                    showDebugInfoModal={showDebugInfoModal}
+                />
+                <UpdateNotification hideProfileMenu={hideProfileMenu} />
+            </ul>
 
             {loading && <LoadingMask />}
 
@@ -123,6 +130,10 @@ const ProfileContents = ({
                 div {
                     width: 100%;
                     padding: 0;
+                    box-shadow: ${elevations.e300};
+                    border-radius: 3px;
+                    border: 1px solid ${colors.grey300};
+                    overflow: auto;
                 }
 
                 ul {
@@ -139,7 +150,7 @@ const ProfileContents = ({
                     display: block;
                 }
             `}</style>
-        </Card>
+        </div>
     )
 }
 
@@ -147,9 +158,9 @@ ProfileContents.propTypes = {
     hideProfileMenu: PropTypes.func.isRequired,
     showDebugInfoModal: PropTypes.func.isRequired,
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     helpUrl: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
 
 export const ProfileMenu = ({ ...props }) => (
@@ -170,7 +181,7 @@ ProfileMenu.propTypes = {
     hideProfileMenu: PropTypes.func.isRequired,
     showDebugInfoModal: PropTypes.func.isRequired,
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     helpUrl: PropTypes.string,
     name: PropTypes.string,
+    username: PropTypes.string,
 }
diff --git a/components/header-bar/src/profile-menu/update-notification.js b/components/header-bar/src/profile-menu/update-notification.js
index ec342b16e6..11ddd7fdf6 100644
--- a/components/header-bar/src/profile-menu/update-notification.js
+++ b/components/header-bar/src/profile-menu/update-notification.js
@@ -1,6 +1,5 @@
 import { useConfig } from '@dhis2/app-runtime'
-import { colors } from '@dhis2/ui-constants'
-import { MenuItem } from '@dhis2-ui/menu'
+import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useHeaderBarContext } from '../header-bar-context.js'
@@ -20,45 +19,68 @@ export function UpdateNotification({ hideProfileMenu }) {
             <div className="spacer" />
             <div className="message">
                 {appName
-                    ? i18n.t('New {{appName}} version available', { appName })
-                    : i18n.t('New app version available')}
-                <br />
-                {i18n.t('Click to reload')}
+                    ? i18n.t(
+                          'New {{appName}} version available — Reload to update',
+                          { appName }
+                      )
+                    : i18n.t('New app version available — Reload to update')}
             </div>
             <style jsx>{`
                 .root {
                     display: flex;
                     flex-direction: row;
-                    align-items: center;
-                    font-size: 14px;
-                    line-height: 17px;
+                    align-items: flex-start;
+                    font-size: 12px;
+                    line-height: 15px;
+                    color: ${colors.grey700};
                 }
                 .badge {
                     display: inline-block;
-                    width: 12px;
-                    height: 12px;
-                    margin: 0 8px;
+                    width: 8px;
+                    height: 8px;
+                    margin: 0;
+                    margin-block-start: 3px;
                     border-radius: 6px;
                     background-color: ${colors.blue600};
+                    flex-shrink: 0;
                 }
                 .spacer {
                     display: inline-block;
-                    width: 8px;
+                    width: 6px;
+                    flex-shrink: 0;
                 }
                 .message {
                     display: inline-block;
+                    text-align: start;
                 }
             `}</style>
         </div>
     )
 
     return updateAvailable ? (
-        <MenuItem
-            dense
+        <button
             onClick={onClick}
-            label={updateNotificationLabel}
-            dataTest="dhis2-ui-headerbar-updatenotification"
-        />
+            aria-label={i18n.t('New app version available — Reload to update')}
+            data-test="dhis2-ui-headerbar-updatenotification"
+        >
+            {updateNotificationLabel}
+            <style jsx>{`
+                button {
+                    display: flex;
+                    align-items: center;
+                    background: ${colors.grey050};
+                    border: none;
+                    padding: ${spacers.dp8} ${spacers.dp12};
+                    width: 100%;
+                    cursor: pointer;
+                    font-size: 12px;
+                    line-height: 15px;
+                    color: ${colors.grey700};
+                }
+                    button:hover {
+                        background: ${colors.grey200};
+            `}</style>
+        </button>
     ) : null
 }
 
diff --git a/components/header-bar/src/profile.js b/components/header-bar/src/profile.js
index b610a814c6..5eeff392fe 100755
--- a/components/header-bar/src/profile.js
+++ b/components/header-bar/src/profile.js
@@ -6,7 +6,7 @@ import i18n from './locales/index.js'
 import { useOnDocClick } from './profile/use-on-doc-click.js'
 import { ProfileMenu } from './profile-menu/index.js'
 
-const Profile = ({ name, email, avatarId, helpUrl }) => {
+const Profile = ({ name, avatarId, helpUrl, username }) => {
     const [showProfileMenu, setShowProfileMenu] = useState(false)
     const [showDebugInfoModal, setShowDebugInfoModal] = useState(false)
     const hideProfileMenu = useCallback(
@@ -45,7 +45,7 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
                 <ProfileMenu
                     avatarId={avatarId}
                     name={name}
-                    email={email}
+                    username={username}
                     helpUrl={helpUrl}
                     hideProfileMenu={hideProfileMenu}
                     showDebugInfoModal={() => {
@@ -94,8 +94,8 @@ const Profile = ({ name, email, avatarId, helpUrl }) => {
 Profile.propTypes = {
     name: PropTypes.string.isRequired,
     avatarId: PropTypes.string,
-    email: PropTypes.string,
     helpUrl: PropTypes.string,
+    username: PropTypes.string,
 }
 
 export default Profile