Index: lams_learning/web/css/components-learner.css
===================================================================
diff -u -r722eca5a525f8ec6f93a1f8c740473a68876f1c1 -ra98851d446506c2f9e7e7bac54569cc912a84e44
--- lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision 722eca5a525f8ec6f93a1f8c740473a68876f1c1)
+++ lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision a98851d446506c2f9e7e7bac54569cc912a84e44)
@@ -3,11 +3,8 @@
     margin-top: .2rem;
 }
 
-.component-page-wrapper .top-menu  {
-    width: 10%;
-}
 .component-page-wrapper .top-menu #progress-bar-widget {
-    width: 100%;
+    min-width: 10rem;
     margin-top: .6rem;
 }
 
Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u -r722eca5a525f8ec6f93a1f8c740473a68876f1c1 -ra98851d446506c2f9e7e7bac54569cc912a84e44
--- lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 722eca5a525f8ec6f93a1f8c740473a68876f1c1)
+++ lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision a98851d446506c2f9e7e7bac54569cc912a84e44)
@@ -87,4 +87,31 @@
             $('#progress-bar-widget-value').text(progressBarWidgetValue + '%');
         }
     });
+}
+
+function showMyProfileDialog() {
+    let dialog = showDialog("dialogMyProfile", {
+        'title' : "My profile",
+        'modal' : true,
+        'width' : Math.max(380, Math.min(1000, $(window).width() - 60)),
+        'height' : 430,
+        'open' : function() {
+            var dialog = $(this);
+            // load contents after opening the dialog
+            $('iframe', dialog).attr({'src': LAMS_URL + 'index.do?redirect=profile',
+                'id' : 'myProfileModal'});
+
+            // in case of mobile devices allow iframe scrolling
+            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+                setTimeout(function() {
+                    dialog.css({
+                        'overflow-y' : 'scroll',
+                        '-webkit-overflow-scrolling' : 'touch'
+                    });
+                },500);
+            }
+        }
+    });
+
+    dialog.children('.modal-dialog').addClass('modal-lg');
 }
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r722eca5a525f8ec6f93a1f8c740473a68876f1c1 -ra98851d446506c2f9e7e7bac54569cc912a84e44
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 722eca5a525f8ec6f93a1f8c740473a68876f1c1)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a98851d446506c2f9e7e7bac54569cc912a84e44)
@@ -6,9 +6,18 @@
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
-<c:set var="lams">
-    <lams:LAMSURL />
-</c:set>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
+<c:choose>
+    <c:when test="${not empty pageLearnerPortraitUuid}">
+        <c:set var="pageLearnerPortraitSrc">${lams}download/?uuid=${pageLearnerPortraitUuid}&preferDownload=false&version=4</c:set>
+    </c:when>
+    <c:otherwise>
+        <c:set var="pageLearnerPortraitSrc">${lams}images/css/john-doe-portrait.jpg</c:set>
+    </c:otherwise>
+</c:choose>
+<c:set var="pageLearnerFirstName"><lams:user property="firstName" /></c:set>
+<c:set var="pageLearnerLastName"><lams:user property="lastName" /></c:set>
 
 <lams:html>
     <lams:head>
@@ -71,6 +80,13 @@
                                  aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
                     </div>
+                    <button id="profile-picture" class="no-decoration pt-1 ps-4" type="button"
+                            onclick="javascript:showMyProfileDialog()">
+                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" aria-label="User profile picture" alt="User profile picture">
+                        <span class="xs-hidden d-block" aria-label="User first and last name">
+						    <c:out value="${pageLearnerFirstName}" escapeXml="true"/>&nbsp;<c:out value="${pageLearnerLastName}" escapeXml="true"/>
+					    </span>
+                    </button>
                 </div>
             </header>
 
Index: lams_tool_nb/web/learnerContent.jsp
===================================================================
diff -u -re820169ce662888b003dbe47ef24a48cf19d124c -ra98851d446506c2f9e7e7bac54569cc912a84e44
--- lams_tool_nb/web/learnerContent.jsp	(.../learnerContent.jsp)	(revision e820169ce662888b003dbe47ef24a48cf19d124c)
+++ lams_tool_nb/web/learnerContent.jsp	(.../learnerContent.jsp)	(revision a98851d446506c2f9e7e7bac54569cc912a84e44)
@@ -3,6 +3,9 @@
 <%@ include file="/includes/taglibs.jsp"%>
 
 <lams:PageLearner toolSessionID="${nbLearnerForm.toolSessionID}" title="${nbLearnerForm.title}">
+    <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
+    <lams:JSImport src="includes/javascript/dialog5.js" />
+
     <script>
         checkNextGateActivity('finishButton', '${nbLearnerForm.toolSessionID}', '', function(){
             submitForm('finish');