Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r25cc39218cacb76e3370604abfb8ab0b2d5c2479 -r5ffab8c677e8baf940248b584fc47895cdf80e46
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 25cc39218cacb76e3370604abfb8ab0b2d5c2479)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 5ffab8c677e8baf940248b584fc47895cdf80e46)
@@ -1,6 +1,24 @@
 @import "../../../lams_central/web/css/components.scss";
 @import "_lams_variables.scss"; 
 
+
+@media (width <= 768px) {
+	.instructions {
+		margin-bottom: 0.5rem;
+		padding-bottom: 0.3rem;
+		padding-top: 0.5rem;
+	}
+	.form-control, body.component .cke_textarea_inline, .form-select {
+		font-size: 12px;
+	}
+    .p-3 {
+        padding: 0rem !important;
+    }
+	.mb-3 {
+		margin-bottom: 0.3rem !important;
+	}
+}
+
 .component-page-wrapper h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
     color: var(--bs-gray-dark);
 }
@@ -30,7 +48,7 @@
 }
 
 .component-page-wrapper .component-page-content #header {
-	padding: 2.8rem 2rem 0.2rem;
+	padding: 2.8rem 2rem 0;
     margin: -2rem -2rem 0.5rem;
     box-shadow: 0px 1px 0px var(--bs-gray-300);
     
@@ -40,8 +58,7 @@
 	}
 	
 	#lesson-name {
-	    margin-left: 3rem;
-	    margin-top: .2rem;
+		margin-left: 0.7rem;
 	}
 	
 	.btn {
@@ -58,9 +75,9 @@
 	}
 	
 	#hamb {
-	    font-size: 1.8rem;
+	    font-size: 1rem;
 		margin: -0.2rem 0 0.3rem -0.5rem;
-    	padding: 0.25rem 0.75rem;
+		padding: 7px 10px;
         color: var(--bs-gray-700);
 	}
 	
@@ -72,6 +89,10 @@
 			margin-left: 0.75rem;
 		}
 		
+		#profile-picture {
+			padding: 0.2rem;
+		}
+		
 		#progress-bar-widget {
 		    min-width: 11rem;
 		    padding: 0rem 0.85rem;
@@ -88,10 +109,34 @@
 		}
 		
 		#return-to-index {
-			padding: 1.275rem 1.3rem;
+			padding: 0.8rem;
 		    opacity: 1;
-		}	
-	} 
+		}
+	}
+	
+	@media (width > 768px) {
+		padding-bottom: 0.2rem;
+		
+		#lesson-name {
+		    margin-left: 3rem;
+		    margin-top: .2rem;
+		}
+		
+		#hamb {
+	    	font-size: 1.8rem;
+	    	padding: 0.25rem 0.75rem;
+		}
+		
+		.top-menu {
+			#profile-picture {
+				padding: initial;
+			}
+			
+			#return-to-index {
+				padding: 1.275rem 1.3rem;
+			}
+		}
+	}
 }
 
 .component-page-wrapper #component-offcanvas {
@@ -174,23 +219,17 @@
 	clear: both;
 }
 
-.activity-bottom-buttons button, .activity-bottom-buttons a, button.btn:not(.no-shadow) {
-    box-shadow: 0px 3px 6px var(--bs-gray-400);
-}
-
-.component-page-wrapper .btn:focus {
-    box-shadow: var(--bs-btn-focus-box-shadow);
-}
-
 .wave-orange {
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2Q1NmExMSIgd2lkdGg9IjEyNDAiIGhlaWdodD0iMzA0IiAgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBvcGFjaXR5PSIuMTUiIGQ9Ik0wIDBoMTIzOC4wOTV2Mjk2LjQ3N2MtMzQzLjQ0OCAyNi4xNjEtMzA1LjgxNi0yNC44NjEtNjE5LjA0OC0xNy45MDdTMjkxLjk5IDMxNS43ODggMCAyNzguNTdWMHoiLz48cGF0aCBkPSJNMTI0MCAwSC45NTN2MjY0LjgwNGM3Ni41NjYtNy4zNjUgMTQ2Ljg0NC0xOC4xMiAzMjcuMzUxLTcuMzY1czI0NC4yNDUgNTMuNzcxIDUwNi42MjggMTIuOTkxYzE3NC45MjItMjcuMTg3IDMwOS45NDUtMjUuMTg2IDQwNS4wNjggNi4wMDF6IiBmaWxsPSIjZjkzIi8+PC9zdmc+");
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23d56a11' width='1240' height='200'><path opacity='.15' d='M0 0h1238.095l.752 190.678c-343.448 18.646-306.568-19.271-619.8-14.315S291.99 213.078 0 186.551z'/><path d='M1240 0H.953v177.116c54.117-3.757 103.637-16.013 192.612-15.869 36.91.06 80.359 1.001 133.284 3.277 180.507 7.762 245.7 38.085 508.083 8.653 64.239-7.206 123.098-11.571 176.575-13.095 42.717-1.217 82-.622 117.85 1.787 41.477 2.786 78.358 15.999 110.643 23.639z' fill='%23f93'/></svg>");
     text-align: center;
     color: white;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: top;
     padding: 5% 0 12% 0;
-    margin: -16px
+    margin: -16px;
+    border-top-left-radius: 1.25rem;
+    border-top-right-radius: 1.25rem;
 }
 
 .wave-blue {
@@ -201,7 +240,9 @@
     background-repeat: no-repeat;
     background-position: top;
     padding: 5% 0 12% 0;
-    margin: -16px
+    margin: -16px;
+    border-top-left-radius: 1.25rem;
+    border-top-right-radius: 1.25rem;
 }
 
 .wave-purple {
@@ -212,7 +253,9 @@
     background-repeat: no-repeat;
     background-position: top;
     padding: 5% 0 12% 0;
-    margin: -16px
+    margin: -16px;
+    border-top-left-radius: 1.25rem;
+    border-top-right-radius: 1.25rem;
 }
 
 .wave-green {
@@ -223,7 +266,9 @@
     background-repeat: no-repeat;
     background-position: top;
     padding: 5% 0 12% 0;
-    margin: -16px
+    margin: -16px;
+    border-top-left-radius: 1.25rem;
+    border-top-right-radius: 1.25rem;
 }
 
 .wave-pink {
@@ -234,7 +279,9 @@
     background-repeat: no-repeat;
     background-position: top;
     padding: 5% 0 12% 0;
-    margin: -16px
+    margin: -16px;
+    border-top-left-radius: 1.25rem;
+    border-top-right-radius: 1.25rem;
 }
 
 .wave-red {
@@ -245,7 +292,9 @@
     background-repeat: no-repeat;
     background-position: top;
     padding: 5% 0 12% 0;
-    margin: -16px
+    margin: -16px;
+    border-top-left-radius: 1.25rem;
+    border-top-right-radius: 1.25rem;
 }
 
 .lcard {
@@ -265,6 +314,18 @@
     @extend .text-bg-secondary;
 }
 
+.lcard > .card-header *:not(.badge, .btn, button) {
+	@extend .text-bg-secondary;
+}
+
+@media (width <= 768px) {
+
+    .lcard > .card-header {
+        font-size: 14px;
+    }
+
+}
+
 .font-size-init {
 	font-size: initial;
 }
@@ -327,6 +388,14 @@
 	border-top: 1px solid #ddd;
 	padding: 12px;
 }
+
+@media (width <= 768px) {
+	.div-hover>div {
+		padding: 3px;
+	}
+
+}
+
 .div-hover>div:hover{
 	background-color: var(--bs-gray-200);
 }