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);