Index: lams_central/web/css/components.scss
===================================================================
diff -u -rc27659274965610a7fba1206a679ba04e6adc9a2 -r9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc
--- lams_central/web/css/components.scss	(.../components.scss)	(revision c27659274965610a7fba1206a679ba04e6adc9a2)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc)
@@ -491,11 +491,6 @@
 	border: thin solid var(--bs-gray-700);
 }
 
-.component-page-wrapper .component-page-content > header .sidebar-toggle-button {
-	font-size: 2rem;
-	color: var(--bs-blue);
-}
-
 .component-page-wrapper .component-page-content {
 	min-height: 100%;
 	padding: 1rem 2rem 2rem 2rem;
@@ -517,8 +512,10 @@
 }
 
 .component-page-wrapper .component-sidebar .lams-logo {
-	width: 3.6rem;
+	display: block;
+ 	width: 3.6rem;
 	margin-bottom: 1.2rem;
+	margin-bottom: 2rem;
 }
 
 .component-page-wrapper .component-sidebar .component-menu {
@@ -536,7 +533,6 @@
 	margin-bottom: 10px;
 }
 
-
 .component-page-wrapper .component-menu-btn a {
 	width: 3.1rem;
 	height: 3.1rem;
@@ -551,7 +547,6 @@
 	font-size: 15px;
 }
 
-
 .component-page-wrapper .top-menu,
 .component-page-wrapper .top-menu-btn {
 	display: flex;
Index: lams_central/web/includes/javascript/dialog5.js
===================================================================
diff -u -ra69390a3d4a6fdfe442a3a6e8b6e3c306b49b612 -r9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc
--- lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision a69390a3d4a6fdfe442a3a6e8b6e3c306b49b612)
+++ lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision 9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc)
@@ -110,7 +110,7 @@
 	dialog.on('hidden.bs.modal', initParams.close);
 
 	dialog.modal({
-		'keyboard' : false,
+		'keyboard' : initParams.hasOwnProperty('keyboard') && initParams.keyboard,
 		'backdrop' : 'static'
 	});
 
@@ -346,6 +346,7 @@
 	showDialog("dialogMyProfile", {
 		'title' : "Portrait",
 		'modal' : true,
+		'keyboard' : true,
 		'width' : Math.max(380, Math.min(770, $(window).width() - 60)),
 		'open' : function() {
 			var dialog = $(this);
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r3282e8325662ca873b88ceb07e627315d415a2c6 -r9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 3282e8325662ca873b88ceb07e627315d415a2c6)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc)
@@ -29,9 +29,16 @@
 }
 
 .component-page-wrapper #hamb {
+	font-size: 2rem;
+	color: var(--bs-blue);
     font-size: 1.8rem;
+	margin-bottom: -0.5rem;
 }
 
+.component-page-wrapper .offcanvas-body {
+	text-align: -webkit-center;
+}
+
 .component-page-wrapper .component-page-content {
     min-height: 100vh;
 }
@@ -40,15 +47,20 @@
     box-shadow: 0px 1px 0px var(--bs-gray-400);
 }
 
+.component-page-wrapper .component-page-content #header>div:first-child {
+	margin-top: -0.35rem;
+    margin-bottom: 0.35rem;
+}
+
 .component-page-wrapper .component-page-content #lesson-name {
     margin-left: 1rem;
     margin-top: .6rem;
 }
 
 .component-page-wrapper .top-menu #progress-bar-widget {
     min-width: 10rem;
-    margin-top: .6rem;
-    margin-right: 3rem !important;
+    margin: 0rem 1.5rem;
+    padding: 0;
 }
 
 .component-page-wrapper .top-menu #progress-bar-widget .progress {
@@ -60,73 +72,72 @@
     background-color: var(--bs-blue);
 }
 
-.component-page-wrapper .component-sidebar {
-    top: 6rem;
-    left: -72rem;
+.component-page-wrapper .top-menu #return-to-index {
+	margin-top: 0.8rem;
+}
+
+
+
+
+.component-page-wrapper .offcanvas {
+	text-align: center;
+	transition: all .3s ease;
+}
+
+.component-page-wrapper .offcanvas .lams-logo {
+	display: block;
+	width: 3.6rem;
+	margin-bottom: 2rem;
+}
+
+
+
+
+.component-page-wrapper .offcanvas {
+    top: 4.5rem;
+	width: 18rem;
     max-width: 70rem;
-    border-radius: 1.2rem;
+    border-radius: 0 1.2rem 0 0;
     border: thin solid var(--bs-gray-400);
     box-shadow: 0px 3px 6px var(--bs-gray-400);
 }
 
-.component-page-wrapper .component-sidebar.active {
-    left: 1rem;
+.component-page-wrapper .offcanvas .offcanvas-title {
+	font-weight: 500;
+    color: rgb(5, 112, 213);
 }
 
-.component-page-wrapper .component-sidebar .sidebar-toggle-button {
-    font-size: 1.5rem;
-    align-self: end;
-    color: var(--bs-primary);
+.component-page-wrapper .offcanvas .offcanvas-bar {
+	background-color: var(--bs-gray-200);
+    border-radius: 1.2rem;
 }
 
-.component-page-wrapper .component-sidebar .progress-bar-items {
-    background-color: var(--bs-gray-200);
-    padding: .5rem;
-    margin-bottom: 0;
-    border-radius: 1.2rem;
-    list-style: none;
-    text-align: left;
-    max-width: 60vh;
+.component-page-wrapper .offcanvas.active {
+    left: 1rem;
 }
 
-.component-page-wrapper .component-sidebar .progress-bar-items > li {
-    padding: .5rem 2rem;
-    border-radius: 1.2rem;
-    color: var(--bs-secondary);
+.component-page-wrapper .offcanvas .progress-bar-items > li {
+    padding: .5rem;
 }
 
-.component-page-wrapper .component-sidebar .progress-bar-items > li a {
+.component-page-wrapper .offcanvas .progress-bar-items > li a {
     color: var(--bs-gray-dark);
 }
 
-.component-page-wrapper .component-sidebar .progress-bar-items > li > .progress-bar-icon {
+.component-page-wrapper .offcanvas .progress-bar-items > li > .progress-bar-icon {
     margin-right: .5rem;
 }
 
-.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-incomplete,
-.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-incomplete > .progress-bar-icon {
+.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-incomplete,
+.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-incomplete > .progress-bar-icon {
     color: var(--bs-gray-700);
 }
 
-.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-complete,
-.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-complete > .progress-bar-icon {
+.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-complete,
+.component-page-wrapper .offcanvas .progress-bar-items > li.progress-bar-item-complete > .progress-bar-icon {
     color: var(--bs-green);
 }
 
-.component-page-wrapper .component-sidebar .progress-bar-items > li.support-bar-item,
-.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-current,
-.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-current > .progress-bar-icon {
-    color: var(--bs-black);
-}
-
-.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-current > .progress-bar-activity-name {
-    font-weight: bold;
-}
-
-.component-page-wrapper .component-sidebar .progress-bar-items > li:hover {
-    background-color: var(--bs-white);
-}
-
 .component-page-wrapper .activity-bottom-buttons {
     margin-top: 1rem;
     display: flex;
@@ -146,21 +157,6 @@
     font-size: 0.90rem;
 }
 
-.component-page-wrapper .sidebar-title {
-    font-size: 1.2rem;
-    margin-bottom: 0.5rem
-}
-
-.component-page-wrapper .sidebar-title {
-    font-size: 1.2rem;
-    margin-bottom: 0.5rem
-}
-
-.component-page-wrapper .sidebar-title-icon {
-    font-size: 1rem;
-}
-
-
 .wave-orange {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2Q1NmExMSIgd2lkdGg9IjEyNDAiIGhlaWdodD0iMzA0IiAgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBvcGFjaXR5PSIuMTUiIGQ9Ik0wIDBoMTIzOC4wOTV2Mjk2LjQ3N2MtMzQzLjQ0OCAyNi4xNjEtMzA1LjgxNi0yNC44NjEtNjE5LjA0OC0xNy45MDdTMjkxLjk5IDMxNS43ODggMCAyNzguNTdWMHoiLz48cGF0aCBkPSJNMTI0MCAwSC45NTN2MjY0LjgwNGM3Ni41NjYtNy4zNjUgMTQ2Ljg0NC0xOC4xMiAzMjcuMzUxLTcuMzY1czI0NC4yNDUgNTMuNzcxIDUwNi42MjggMTIuOTkxYzE3NC45MjItMjcuMTg3IDMwOS45NDUtMjUuMTg2IDQwNS4wNjggNi4wMDF6IiBmaWxsPSIjZjkzIi8+PC9zdmc+");
     text-align: center;
Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u -r3e5f23228af144f86f91a0dd45d342702d22c22d -r9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc
--- lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 3e5f23228af144f86f91a0dd45d342702d22c22d)
+++ lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc)
@@ -1,10 +1,5 @@
 // refresh progress bar on first/next activity load
 function initLearnerPage(toolSessionId, userId) {
-    $('.component-page-wrapper .sidebar-toggle-button').click(function (event) {
-        event.stopPropagation();
-        toggleProgressBar();
-    });
-
     $.ajax({
         url: LAMS_URL + 'learning/learner/getLearnerProgress.do',
         data: {
@@ -18,11 +13,11 @@
 
             // draw support activities if they exist
             if (result.support) {
-                let supportBarItems = $('.component-page-wrapper .component-sidebar #support-bar').removeClass('d-none')
+                let supportBarItems = $('.component-page-wrapper .offcanvas #offcanvas-support-bar').removeClass('d-none')
                     .find('#support-bar-items').empty();
                 $.each(result.support, function (activityIndex, activityData) {
-                    let activityItem = $('<li>').attr('role', 'presentation')
-                        .addClass('support-bar-item progress-bar-item-openable')
+                    let activityItem = $('<li>')
+                        .addClass('list-group-item list-group-item-action progress-bar-item-openable')
                         .prepend('<i class="fa-solid fa-fw fa-up-right-from-square progress-bar-icon">').appendTo(supportBarItems);
                     let activityLink = $('<a>').text(activityData.name).attr({
                         'target': '_blank',
@@ -34,15 +29,17 @@
                 });
             }
 
-            let progressBarItems = $('.component-page-wrapper .component-sidebar #progress-bar-items').empty(),
+            let progressBarItems = $('.component-page-wrapper .offcanvas #progress-bar-items').empty(),
                 completedActivityCount = 0;
             $.each(result.activities, function (activityIndex, activityData) {
-                let activityItem = $('<li>').attr('role', 'presentation').appendTo(progressBarItems),
+                let activityItem = $('<li>')
+                		.addClass('list-group-item list-group-item-action')
+                		.appendTo(progressBarItems),
                     activityName = !activityData.name && activityData.type === 'g' ? 'Gate' : activityData.name,
-                    activityIcon = $('<i class="fa-solid fa-fw progress-bar-icon"></i>');
+                    activityIcon = $('<i class="fa-solid fa-fw fa-lg progress-bar-icon"></i>');
 
                 if (activityData.status === 0) {
-                    activityItem.addClass('progress-bar-item-current').text(activityName).prepend(activityIcon);
+                    activityItem.addClass('active').text(activityName).prepend(activityIcon);
                     if (activityData.type === 'g') {
                         activityIcon.addClass('fa-hourglass-half');
                     } else {
@@ -186,9 +183,10 @@
 
 function toggleProgressBar(forceClose) {
     let pageContent = $('.component-page-wrapper .component-page-content'),
-        progressBar = $('.component-page-wrapper .component-sidebar'),
-        topToggleButton = $('header .sidebar-toggle-button', pageContent),
+        progressBar = $('.component-page-wrapper .offcanvas'),
+        topToggleButton = $('header #hamb', pageContent),
         isExpanded = forceClose || topToggleButton.attr('aria-expanded') == 'true';
+        
     topToggleButton.attr('aria-expanded', !isExpanded)
         .children('i').toggleClass(topToggleButton.data('closed-class')).toggleClass(topToggleButton.data('opened-class'));
     progressBar.toggleClass('active').attr('aria-expanded', !isExpanded);
@@ -201,7 +199,7 @@
     } else {
         pageContent.attr('inert', '');
         progressBar.removeAttr('inert');
-        $('.sidebar-toggle-button', progressBar).focus();
+        $('.btn-close', progressBar).focus();
 
         $('body').on('keyup', function (event) {
             if (event.key === "Escape") {
Index: lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r955865d255f86a5447f729ec1ce573b2b6f94b27 -r9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc
--- lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
+++ lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc)
@@ -75,56 +75,73 @@
 
     <body class="component">
     <div class="component-page-wrapper">
-        <nav inert class="component-sidebar" role="navigation dialog"
-             aria-label="Side menu" aria-expanded="false"  aria-modal="true">
-            <button class="sidebar-toggle-button no-decoration" aria-labelledby="progress-bar-title">
-                <i class="fa-solid fa-xmark"></i>
-            </button>
-            <a href="/" title="Return to course page" class="lams-logo">
-                <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="false"/>
-            </a>
+		<div class="offcanvas offcanvas-start" tabindex="-1" id="component-offcanvas" aria-label="Side menu">
+			<div class="offcanvas-body">
+				<button type="button" class="btn-close float-end" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+				
+	            <span class="lams-logo mt-3">
+	                <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="false"/>
+	            </span>
+			
+	            <div id="offcanvas-support-bar" class="offcanvas-bar lcard d-none pb-3">
+	                <div class="offcanvas-title py-3">
+	                	Support activities
+	                </div>
+	                <ul id="support-bar-items" class="progress-bar-items list-group text-start">
+	                </ul>
+	            </div>
+	
+				<div class="offcanvas-bar lcard pb-3">
+		            <div class="offcanvas-title py-3" id="offcanvas-progress-bar-title">
+		            	My progress
+		            </div>
+		            <ul id="progress-bar-items" class="progress-bar-items list-group text-start">
+		            </ul>
+	            </div>
+			</div>
+		</div>
 
-            <div id="support-bar" class="d-none pb-4 w-100">
-                <span class="sidebar-title"><i class="fa-solid fa-toolbox sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="support-bar-title">Support activities</span></span>
-                <ul id="support-bar-items" class="progress-bar-items" role="menu">
-                </ul>
-            </div>
-
-            <span class="sidebar-title"><i class="fa-solid fa-fw fa-bars-progress sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="progress-bar-title">Progress bar</span></span>
-            <ul id="progress-bar-items" class="progress-bar-items w-100" role="menu">
-            </ul>
-        </nav>
-
-        <div class="component-page-content">
+		<div class="component-page-content">
             <a href="#component-main-content" class="visually-hidden-focusable p-2">Skip to main content</a>
 
             <header id="header" class="d-flex justify-content-between" role="banner">
                 <div class="d-flex">
-                    <button class="sidebar-toggle-button no-decoration" accesskey="p" id="hamb"
-                            data-closed-class="fa-bars" data-opened-class="fa-bars-staggered"
-                            aria-labelledby="progress-bar-title" aria-expanded="false">
-                        <i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
-                    </button>
+					<button class="no-decoration" id="hamb" type="button" accesskey="p" 
+							data-bs-toggle="offcanvas" data-bs-target="#component-offcanvas"
+							aria-controls="component-offcanvas"
+							aria-labelledby="offcanvas-progress-bar-title">
+						<i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
+					</button>
+
                     <h1 id="lesson-name"></h1>
                 </div>
+                
                 <div class="top-menu">
-                    <div id="progress-bar-widget" title="Your lesson completion" class="d-none d-sm-none d-md-block">
-                        <div class="row">
-                            <div class="col-6">
+                    <button id="profile-picture" class="no-decoration px-3" type="button"
+                            onclick="javascript:showMyPortraitDialog()">
+                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" aria-label="<c:out value="${pageLearnerFirstName} ${pageLearnerLastName}" escapeXml="true"/> profile picture" alt="User profile picture">
+                    </button>
+                    
+                    <button type="button" id="progress-bar-widget" title="Your lesson completion" class="no-decoration d-none d-sm-none d-md-block"
+                    		data-bs-toggle="offcanvas" data-bs-target="#component-offcanvas"
+							aria-controls="component-offcanvas"
+							aria-labelledby="offcanvas-progress-bar-title">
+                        <div class="row m-0">
+                            <div class="col-6 text-start p-0">
                                 Progress
                             </div>
-                            <div class="col-6 text-end" id="progress-bar-widget-value">
+                            <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-label="Progress bar widget"
                                  aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
-                    </div>
-                    <button id="profile-picture" class="no-decoration px-3 py-1" type="button"
-                            onclick="javascript:showMyPortraitDialog()">
-                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" aria-label="<c:out value="${pageLearnerFirstName} ${pageLearnerLastName}" escapeXml="true"/> profile picture" alt="User profile picture">
                     </button>
+                    
+                    <c:if test="${not isIntegrationLogin}">
+                    	<a href="/" id="return-to-index" class="btn-close btn-sm float-end ms-3" title="Return to course page"></a>
+                    </c:if>
                 </div>
             </header>