Index: lams_learning/web/loadToolActivity.jsp
===================================================================
diff -u -ra42a15586af970a2e843cd667f7c908238f775b9 -r1c914aba313ca9ecb5e7da623d7d97483cbac9b1
--- lams_learning/web/loadToolActivity.jsp	(.../loadToolActivity.jsp)	(revision a42a15586af970a2e843cd667f7c908238f775b9)
+++ lams_learning/web/loadToolActivity.jsp	(.../loadToolActivity.jsp)	(revision 1c914aba313ca9ecb5e7da623d7d97483cbac9b1)
@@ -25,10 +25,25 @@
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="learnerAppUrl"><lams:WebAppURL /></c:set>
 <c:set var="title"><fmt:message key="learner.title" /></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>
 
 <lams:PageLearner title="${title}" toolSessionID="" hideHeader="true" hideTitle="true">
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/lottie/lottie-player.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/nprogress.js"></script>		
+	<style>
+		main#component-main-content.p-3 {
+			padding: 1rem !important;
+		} 
+	</style>
+
+	<script type="text/javascript" src="${lams}includes/javascript/lottie/lottie-player.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/nprogress.js"></script>		
 	<c:if test="${!empty activityForm.activityURLs}">
 		<script type="text/javascript">
 			function redirectPage() {
@@ -84,21 +99,21 @@
 
 				<h1 id="lesson-name" class="placeholder-wave flex-grow-2 col-md-6 col-9">
 					<span class="placeholder placeholder-sm bg-secondary bg-opacity-50 col-5"></span>
-					<span class="placeholder placeholder-sm bg-secondary bg-opacity-50 col-4"></span>
+					<span class="placeholder placeholder-sm bg-secondary bg-opacity-50 col-md-4"></span>
 				</h1>
 			</div>
 
 			<div class="top-menu">
-				<button id="profile-picture" class="btn btn-light no-decoration px-3 disabled" type="button" disabled>
-					<img class="portrait-sm portrait-round" src="http://localhost:8080/lams/images/css/john-doe-portrait.jpg" alt="Your profile portrait">
+				<button id="profile-picture" class="btn btn-light no-decoration d-none d-sm-block px-md-3 disabled" type="button" disabled>
+					<img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" alt="<fmt:message key='label.your.portrait'/>">
 				</button>
 		                    
 				<button type="button" id="progress-bar-widget" class="btn btn-light no-decoration d-none d-sm-none d-md-block disabled" disabled>
 					<div class="row m-0">
 						<div class="col-6 text-start p-0">
 							<fmt:message key='label.progress'/>
 						</div>
-						<div class="col-6 text-end p-0" id="progress-bar-widget-value">0%</div>
+						<div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 					</div>
 					<div class="progress mt-1 mb-2">
 						<div class="progress-bar bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width: 0%;"></div>
@@ -117,7 +132,7 @@
 				  autoplay
 				  loop
 				  mode="normal"
-				  src="<lams:LAMSURL/>includes/javascript/lottie/loading_sphere.json"
+				  src="${lams}includes/javascript/lottie/loading_sphere.json"
 				  style="width: 320px; height: 200px; margin-top: 5rem;"
 				  class="mx-auto"
 				>