diff --git a/example/index.js b/example/index.js
index 2559c03d4..a6bdb6779 100644
--- a/example/index.js
+++ b/example/index.js
@@ -26,6 +26,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: {
           userId: '123abc',
           username: 'testuser',
+          username: 'Test user',
           roles: [],
           administrator: false,
         },
@@ -38,6 +39,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: {
           userId: '123abc',
           username: 'testuser',
+          username: 'Test user',
           roles: [],
           administrator: false,
         },
diff --git a/src/Header.jsx b/src/Header.jsx
index bff801fe0..f9e50f19d 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -112,7 +112,7 @@ const Header = ({
     logoAltText: config.SITE_NAME,
     logoDestination: `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
-    username: authenticatedUser !== null ? authenticatedUser.username : null,
+    username: authenticatedUser !== null ? authenticatedUser.name || authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
     mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
     secondaryMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : secondaryMenu,
diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
index 9caadb412..978676c5c 100644
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -9,7 +9,7 @@ import { Dropdown } from '@openedx/paragon';
 
 import messages from './messages';
 
-const AuthenticatedUserDropdown = ({ intl, username }) => {
+const AuthenticatedUserDropdown = ({ intl, username, name }) => {
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
@@ -23,7 +23,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
           <span data-hj-suppress className="d-none d-md-inline">
-            {username}
+            {name || username}
           </span>
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
@@ -51,6 +51,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 AuthenticatedUserDropdown.propTypes = {
   intl: intlShape.isRequired,
   username: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
 };
 
 export default injectIntl(AuthenticatedUserDropdown);
diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index 373001d19..88dce7d7c 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -51,6 +51,7 @@ const LearningHeader = ({
         {showUserDropdown && authenticatedUser && (
         <AuthenticatedUserDropdown
           username={authenticatedUser.username}
+          name={authenticatedUser.name}
         />
         )}
         {showUserDropdown && !authenticatedUser && (