Index: lams_central/web/css/bootstrap5.custom.scss
===================================================================
diff -u -r8a007bdcbaa0e268f96d56013b6f27e24d261749 -r321539d60d608c3bf1c9badb9b50c57eb578fe40
--- lams_central/web/css/bootstrap5.custom.scss	(.../bootstrap5.custom.scss)	(revision 8a007bdcbaa0e268f96d56013b6f27e24d261749)
+++ lams_central/web/css/bootstrap5.custom.scss	(.../bootstrap5.custom.scss)	(revision 321539d60d608c3bf1c9badb9b50c57eb578fe40)
@@ -10,5 +10,5 @@
 @import "bootstrap/bootstrap.scss";
 
 :root {
-	--lams-background-gray: #F8F8F8; /* rgb(248, 248, 248) */
+	--lams-background-gray: #e0e0e0; /* rgb(224, 224, 224) */
 }
Index: lams_central/web/css/components.css
===================================================================
diff -u -re820169ce662888b003dbe47ef24a48cf19d124c -r321539d60d608c3bf1c9badb9b50c57eb578fe40
--- lams_central/web/css/components.css	(.../components.css)	(revision e820169ce662888b003dbe47ef24a48cf19d124c)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 321539d60d608c3bf1c9badb9b50c57eb578fe40)
@@ -5,7 +5,7 @@
 }
 
 body.component {
-	font-family: Arial, sans-serif;
+	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 	background-color: var(--lams-background-gray);
 }
 
@@ -425,8 +425,9 @@
 
 .component-page-wrapper {
 	min-height: 100vh;
-	border-radius: 2rem;
+	border-radius: 2.8rem;
 	overflow: hidden;
+	background-color: #fff;
 }
 
 .component-page-wrapper button.no-decoration {
@@ -1565,4 +1566,4 @@
 .gate-opened-icon {
 	cursor: pointer;
 }
-*/
\ No newline at end of file
+*/
Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u -reca245b29c0b224b3f2dca596ceff6ca42621441 -r321539d60d608c3bf1c9badb9b50c57eb578fe40
--- lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision eca245b29c0b224b3f2dca596ceff6ca42621441)
+++ lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 321539d60d608c3bf1c9badb9b50c57eb578fe40)
@@ -49,7 +49,7 @@
                     if (activityData.type === 'g') {
                         activityIcon.addClass('fa-hourglass-half');
                     } else {
-                        activityIcon.addClass('fa-circle');
+                        activityIcon.addClass('fa-pen-to-square');
                     }
                 } else if (activityData.status === 1) {
                     completedActivityCount++;
@@ -58,7 +58,7 @@
                     if (activityData.type === 'g') {
                         activityIcon.addClass('fa-hourglass-full');
                     } else {
-                        activityIcon.addClass('fa-check');
+                        activityIcon.addClass('fa-square-check');
                     }
                     if (activityData.url) {
                         let activityLink = $('<a>').text(activityName).attr({
@@ -74,7 +74,7 @@
                     if (activityData.type === 'g') {
                         activityIcon.addClass('fa-hourglass-start');
                     } else {
-                        activityIcon.addClass('fa-circle');
+                        activityIcon.addClass('fa-square');
                     }
                 }
             });
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r5318c3eff69a14b36370c17ce6afadc9e936915b -r321539d60d608c3bf1c9badb9b50c57eb578fe40
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 5318c3eff69a14b36370c17ce6afadc9e936915b)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 321539d60d608c3bf1c9badb9b50c57eb578fe40)
@@ -57,7 +57,7 @@
         <div class="component-page-content">
             <a href="#component-main-content" class="visually-hidden-focusable p-2">Skip to main content</a>
 
-            <header class="d-flex justify-content-between" role="banner">
+            <header id="header" class="d-flex justify-content-between" role="banner">
                 <div class="d-flex">
                     <button class="sidebar-toggle-button no-decoration"
                             data-closed-class="fa-bars" data-opened-class="fa-bars-staggered"
@@ -75,24 +75,21 @@
                             <div class="col-6 text-end" id="progress-bar-widget-value">
                             </div>
                         </div>
-                        <div class="progress mt-2 mb-2">
+                        <div class="progress mt-1 mb-2">
                             <div class="progress-bar bg-success" role="progressbar" aria-label="Progress bar widget"
                                  aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
                     </div>
-                    <button id="profile-picture" class="no-decoration pt-1" type="button"
+                    <button id="profile-picture" class="no-decoration px-3 py-1" 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>
+                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" aria-label="<c:out value="${pageLearnerFirstName} ${pageLearnerLastName}" escapeXml="true"/> profile picture" alt="User profile picture">
                     </button>
                 </div>
             </header>
 
             <main class="m-3" id="component-main-content">
                 <c:if test="${not empty title}">
-                    <h3 class="mb-3"><c:out value="${title}" escapeXml="true" /></h3>
+                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
                 </c:if>
 
                 <jsp:doBody/>
@@ -110,12 +107,12 @@
             </a>
 
             <div id="support-bar" class="d-none pb-4 w-100">
-                <h6 class="sidebar-title"><i class="fa-solid fa-snowplow"></i>&nbsp;<span id="support-bar-title">Support activities</span></h6>
+                <span class="sidebar-title"><i class="fa-solid fa-snowplow"></i>&nbsp;<span id="support-bar-title">Support activities</span></span>
                 <ul id="support-bar-items" class="progress-bar-items" role="menu">
                 </ul>
             </div>
 
-            <h6 class="sidebar-title"><i class="fa-solid fa-bars-progress"></i>&nbsp;<span id="progress-bar-title">Progress bar</span></h6>
+            <span class="sidebar-title"><i class="fa-solid fa-fw fa-bars-progress sidebar-title-icon"></i>&nbsp;<span id="progress-bar-title">Progress bar</span></span>
             <ul id="progress-bar-items" class="progress-bar-items w-100" role="menu">
             </ul>
         </nav>