Index: lams_central/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r68f0d8c20848cfdce8fe3d16b7631d48dfa8c4a0 -r82e63c120af396a3867d44c90461e5ab4edf1a3e
--- lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 68f0d8c20848cfdce8fe3d16b7631d48dfa8c4a0)
+++ lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 82e63c120af396a3867d44c90461e5ab4edf1a3e)
@@ -126,9 +126,9 @@
 	            </a>
 	
 				<c:if test="${showHeader}">
-		            <header id="header" class="d-flex justify-content-between" role="banner">
-		                <div class="d-flex">
-							<button class="no-decoration" id="hamb" type="button" accesskey="p" 
+		            <header id="header" class="d-flex justify-content-between align-items-center" role="banner">
+		                <div class="d-flex align-items-center">
+							<button class="btn btn-light 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"
@@ -140,12 +140,12 @@
 		                </div>
 		                
 		                <div class="top-menu">
-		                    <button id="profile-picture" class="no-decoration px-3" type="button"
+		                    <button id="profile-picture" class="btn btn-light no-decoration px-3" type="button"
 		                            onclick="javascript:showMyPortraitDialog()" title="<fmt:message key='label.your.portrait'/>" >
 		                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" alt="<fmt:message key='label.your.portrait'/>">
 		                    </button>
 		                    
-		                    <button type="button" id="progress-bar-widget" class="no-decoration d-none d-sm-none d-md-block"
+		                    <button type="button" id="progress-bar-widget" class="btn btn-light no-decoration d-none d-sm-none d-md-block"
 		                    		data-bs-toggle="offcanvas" 
 		                    		data-bs-target="#component-offcanvas"
 									aria-controls="component-offcanvas"
@@ -165,7 +165,7 @@
 		                    </button>
 		                    
 		                    <c:if test="${not isIntegrationLogin}">
-		                    	<a href="/" id="return-to-index" class="btn-close btn-sm float-end ms-3" 
+		                    	<a href="/" id="return-to-index" class="btn btn-light btn-close btn-sm" 
 		                    			title="<fmt:message key='label.close.and.return'/>"></a>
 		                    </c:if>
 		                </div>
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r0748e294672cacb5881d7f3f1d7254f0be9005a0 -r82e63c120af396a3867d44c90461e5ab4edf1a3e
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 0748e294672cacb5881d7f3f1d7254f0be9005a0)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 82e63c120af396a3867d44c90461e5ab4edf1a3e)
@@ -29,70 +29,73 @@
     font-size: 1rem;
 }
 
-.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;
-	text-align: -moz-center;
-	overflow-x: hidden;
-}
-
 .component-page-wrapper .component-page-content #header {
-    box-shadow: 0px 1px 0px var(--bs-gray-400);
+	padding: 2.8rem 2rem 0.2rem;
+    margin: -2rem -2rem 0.5rem;
+    box-shadow: 0px 1px 0px var(--bs-gray-300);
+    
+    >div:first-child {
+		margin-top: -0.35rem;
+	    margin-bottom: 0.35rem;
+	}
+	
+	#lesson-name {
+	    margin-left: 3rem;
+	    margin-top: .2rem;
+	}
+	
+	.btn {
+		background-color: var(--bs-gray-100);
+		border-radius: 1.25rem;
+		box-shadow: 0px 3px 6px var(--bs-gray-200);
+	}
+	.btn:hover {
+		background-color: var(--bs-gray-200) !important;
+	}
+	.btn:focus {
+		box-shadow: var(--bs-btn-focus-box-shadow);
+		/*border: var(--bs-btn-border-width) solid var(--bs-btn-hover-border-color);*/
+	}
+	
+	#hamb {
+	    font-size: 1.8rem;
+		margin: -0.2rem 0 0.3rem -0.5rem;
+    	padding: 0.25rem 0.75rem;
+        color: var(--bs-gray-700);
+	}
+	
+	.top-menu {
+		margin: -0.6rem -0.5rem 0.6rem 0;
+		min-height: 3.5em;
+		
+		.btn {
+			margin-left: 0.75rem;
+		}
+		
+		#progress-bar-widget {
+		    min-width: 11rem;
+		    padding: 0rem 0.85rem;
+		    
+			.progress {
+			    height: .5rem;
+			    background-color: var(--bs-gray-400);
+			}
+			
+			.progress .progress-bar {
+			    background-color: var(--bs-blue);
+			}		    
+		}
+		
+		#return-to-index {
+			padding: 1.275rem 1.3rem;
+		    opacity: 1;
+		}	
+	} 
 }
 
-.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: 0rem 1.5rem;
-    padding: 0;
-}
-
-.component-page-wrapper .top-menu #progress-bar-widget .progress {
-    height: .5rem;
-    background-color: var(--bs-gray-400);
-}
-
-.component-page-wrapper .top-menu #progress-bar-widget .progress .progress-bar {
-    background-color: var(--bs-blue);
-}
-
-.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: 20rem;
     max-width: 70rem;
@@ -101,6 +104,18 @@
     box-shadow: 0px 3px 6px var(--bs-gray-400);
 }
 
+.component-page-wrapper .offcanvas-body {
+	text-align: -webkit-center;
+	text-align: -moz-center;
+	overflow-x: hidden;
+}
+
+.component-page-wrapper .offcanvas .lams-logo {
+	display: block;
+	width: 3.6rem;
+	margin-bottom: 2rem;
+}
+
 .component-page-wrapper .offcanvas .offcanvas-title {
 	font-weight: 500;
     color: rgb(5, 112, 213);