Index: lams_central/web/css/components.scss
===================================================================
diff -u -r72c670b3c269630c001ea36ede280dc45e20aab8 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 72c670b3c269630c001ea36ede280dc45e20aab8)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -5,6 +5,15 @@
     @extend .container-lg;
 }
 
+@media (width <= 768px) {
+	#container-main {
+		--bs-gutter-x: 0.1rem;
+		--bs-gutter-y: 0.1rem;
+		padding-right: calc(var(--bs-gutter-x) * -5.5);
+		padding-left: calc(var(--bs-gutter-x) * 0.5);
+	}
+}
+
 .btn-secondary-darker {
 	@extend .btn-secondary;
 	background-color: shade-color($secondary, 20%);
@@ -84,6 +93,14 @@
   background-color: var(--lams-background-gray);
 }
 
+@media (width <= 768px) {
+    body.component {
+      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";
+      font-size: 12px;
+      background-color: unset;
+    }
+}
+
 body.component .btn-success,
 body.component .btn-success:hover {
   color: #fff;
Index: lams_central/web/images/css/check.png
===================================================================
diff -u
Binary files differ
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r25cc39218cacb76e3370604abfb8ab0b2d5c2479 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 25cc39218cacb76e3370604abfb8ab0b2d5c2479)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -1,6 +1,22 @@
 @import "../../../lams_central/web/css/components.scss";
 @import "_lams_variables.scss"; 
 
+
+@media (width <= 768px) {
+    .p-3 {
+        padding: 0rem !important;
+    }
+	.mb-3 {
+		margin-bottom: 0.3rem !important;
+	}
+}
+
+@media (width <= 768px) {
+  .component-page-wrapper .component-page-content {
+     padding: 0.5rem 1rem 1rem 1rem;
+  }
+}
+
 .component-page-wrapper h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
     color: var(--bs-gray-dark);
 }
@@ -178,19 +194,27 @@
     box-shadow: 0px 3px 6px var(--bs-gray-400);
 }
 
+@media (width <= 768px) {
+	.component-page-wrapper .btn {
+		font-size: 12px;
+	}
+}
+
 .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 +225,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 +238,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 +251,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 +264,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 +277,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 +299,14 @@
     @extend .text-bg-secondary;
 }
 
+@media (width <= 768px) {
+
+    .lcard > .card-header {
+        font-size: 14px;
+    }
+
+}
+
 .font-size-init {
 	font-size: initial;
 }
@@ -327,6 +369,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);
 }
Index: lams_learning/web/grouping/show.jsp
===================================================================
diff -u -ra377aa467afa7fb965921c85d6d9e144730e41f8 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_learning/web/grouping/show.jsp	(.../show.jsp)	(revision a377aa467afa7fb965921c85d6d9e144730e41f8)
+++ lams_learning/web/grouping/show.jsp	(.../show.jsp)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -58,10 +58,10 @@
 					<div class="ltable table-striped mb-0">
 						<c:forEach var="group" items="${groups}">
 							<div class="row">
-								<div class="col-2">
+								<div class="col-md-2">
 									<strong><c:out value="${group.groupName}" /></strong>
 								</div>
-								<div class="col-10">
+								<div class="col-md-10">
 									<c:choose>
 										<c:when test="${RestrictedGroupUserNames && !group.userBelongsToGroup}">
 											<fmt:message key="label.learners">
Index: lams_tool_assessment/web/includes/css/assessment.scss
===================================================================
diff -u -r512ab2f1a68272092735b1e135c7e8466e5fa930 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision 512ab2f1a68272092735b1e135c7e8466e5fa930)
+++ lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -124,6 +124,19 @@
     padding: 12px 0 !important;
 }
 
+@media (width <= 768px) {
+  #countdown {
+     font-size: 14px;
+	 width: 120px;
+   }
+   .blockPage {
+     width: 130px;
+   }
+}
+.is-countdown {
+  border-radius: 5px;
+}
+
 /*----------countdown growl----------------*/
 .jGrowl {
   	font-size: 22px;
@@ -133,9 +146,8 @@
 .jGrowl-notification {
 	opacity: .8;
 	border-radius: 10px;
-	width: 400px;
 	margin: 10px 20px;
-	background: #eedc94 url(#{$url_css_directory}/check48.png) no-repeat 10px 10px;
+	background: #eedc94 url(#{$url_css_directory}/check.png) no-repeat 10px 10px;
 	padding-bottom: 20px;
 }
 .jGrowl-message {
Index: lams_tool_assessment/web/pages/learning/learning.jsp
===================================================================
diff -u -r6cd828445d4549e4d114c5333628d812233f0f7a -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_tool_assessment/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 6cd828445d4549e4d114c5333628d812233f0f7a)
+++ lams_tool_assessment/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -207,7 +207,6 @@
                     left: '',
                     right: '0%',
                     opacity: '.8',
-                    width: '230px',
                     cursor: 'default',
                     border: 'none'
                 }
@@ -232,11 +231,11 @@
                     var hours = $("#countdown").countdown('getTimes')[4];
                     var minutes = $("#countdown").countdown('getTimes')[5];
                     if (screenCountdown.data("hours") != hours || screenCountdown.data("minutes") != minutes) {
-                        var timeLeftText = "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.countdown.time.left' /></spring:escapeBody> ";
+                        var timeLeftText = "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.learning.countdown.time.left' /></spring:escapeBody> ";
                         if (hours > 0) {
-                            timeLeftText += hours + " <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.hours' /></spring:escapeBody> ";
+                            timeLeftText += hours + " <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.learning.summary.hours' /></spring:escapeBody> ";
                         }
-                        timeLeftText += minutes + " <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.minutes' /></spring:escapeBody> ";
+                        timeLeftText += minutes + " <spring:escapeBody javaScriptEscape='true'><fmt:message key='label.learning.summary.minutes' /></spring:escapeBody> ";
                         screenCountdown.html(timeLeftText);
 
                         screenCountdown.data("hours", hours);
@@ -616,10 +615,13 @@
 
         <lams:errors5/>
 
-        <div id="instructions" class="instructions">
-            <c:out value="${assessment.instructions}" escapeXml="false"/>
-        </div>
+        <c:if test="${not empty assessment.instructions}">
+            <div id="instructions" class="instructions">
+              <c:out value="${assessment.instructions}" escapeXml="false"/>
+            </div>
+        </c:if>        
 
+
         <%@ include file="parts/paging.jsp"%>
 
         <div id="all-questions">
@@ -636,4 +638,4 @@
             </c:if>
         </div>
     </div>
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_assessment/web/pages/learning/results.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_tool_assessment/web/pages/learning/results.jsp	(.../results.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_assessment/web/pages/learning/results.jsp	(.../results.jsp)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -108,9 +108,11 @@
 		</c:if>
 		
 		<c:if test="${assessment.displaySummary}">
-			<div id="instructions" class="instructions">
-				<c:out value="${assessment.instructions}" escapeXml="false"/>
-			</div>
+			<c:if test="${not empty assessment.instructions}">
+				<div id="instructions" class="instructions">
+					<c:out value="${assessment.instructions}" escapeXml="false"/>
+				</div>
+			</c:if>
 
 			<div id="all-questions">
 				<%@ include file="results/allquestions.jsp"%>
Index: lams_tool_scratchie/web/includes/css/scratchie-learning.scss
===================================================================
diff -u -rb311244c55b221fc9f910cf4de25874d13d2296d -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision b311244c55b221fc9f910cf4de25874d13d2296d)
+++ lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -9,6 +9,25 @@
 	margin-left: -1rem;
 }
 
+@media (width <= 768px) {
+	.scratches .scartchie-image-col {
+		width: 85px;
+	}
+}
+
+@media (width <= 768px) {
+	#countdown {
+	   font-size: 14px;
+	   width: 120px;
+	 }
+	 .blockPage {
+	   width: 130px;
+	 }
+  }
+  .is-countdown {
+	border-radius: 5px;
+  }
+
 /*----------countdown growl----------------*/
 .jGrowl {
   	font-size: 22px;
@@ -18,9 +37,9 @@
 .jGrowl-notification {
 	opacity: .8;
 	border-radius: 10px;
-	width: 400px;
+	width: 350px;
 	margin: 10px 20px;
-	background: #eedc94 url(#{$url_css_directory}/check48.png) no-repeat 10px 10px;
+	background: #eedc94 url(#{$url_css_directory}/check.png) no-repeat 10px 10px;
 	padding-bottom: 20px;
 }
 .jGrowl-message {
@@ -88,7 +107,6 @@
 }		
 
 #countdown {
-	width: 150px; 
 	font-size: 110%; 
 	font-style: italic; 
 	color:#47bc23;
Index: lams_tool_scratchie/web/pages/learning/learning.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -387,7 +387,6 @@
                     left: '',
                     right: '0%',
                     opacity: '.8',
-                    width: '230px',
                     cursor: 'default',
                     border: 'none'
                 }
@@ -542,9 +541,11 @@
 
         <lams:errors5/>
 
-        <div id="instructions" class="instructions">
-            <c:out value="${scratchie.instructions}" escapeXml="false" />
-        </div>
+        <c:if test="${not empty scratchie.instructions}">
+            <div id="instructions" class="instructions">
+                <c:out value="${scratchie.instructions}" escapeXml="false" />
+            </div>
+        </c:if>
 
         <div id="questionListArea">
             <%@ include file="questionlist.jsp"%>
Index: lams_tool_scratchie/web/pages/learning/results.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_tool_scratchie/web/pages/learning/results.jsp	(.../results.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_scratchie/web/pages/learning/results.jsp	(.../results.jsp)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -37,6 +37,16 @@
 			.ui-jqgrid-title {
 				font-size: 1.2rem !important;
 			}
+
+			@media (width <= 758px) {
+				.ui-jqgrid-title {
+					font-size: 14px !important;
+				}
+				.ui-jqgrid-hdiv, .ui-jqgrid-htable, .ui-jqgrid-btable {
+					font-size: 12px !important;
+				}
+			}
+
 			.ui-jqgrid .ui-jqgrid-labels th.ui-th-column, .ui-jqgrid .ui-jqgrid-legacy-subgrid .ui-th-subgrid, .ui-jqgrid-labels .ui-th-column-header {
 				text-align: left;
 			}
Index: lams_tool_scratchie/web/pages/learning/scratchies.jsp
===================================================================
diff -u -r82515cf9931affc48154dc4d42737e25cf3ee51b -r21aea119939539ce08a947354f84cb7dc6980d38
--- lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision 82515cf9931affc48154dc4d42737e25cf3ee51b)
+++ lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision 21aea119939539ce08a947354f84cb7dc6980d38)
@@ -13,7 +13,7 @@
 </c:if>
 
 <c:forEach var="item" items="${sessionMap.itemList}" varStatus="questionNumber">
-	<div class="card lcard mt-4" id="question${questionNumber.count}">
+	<div class="card lcard mt-md-4" id="question${questionNumber.count}">
 		<div class="card-header" id="questionTitle${questionNumber.count}">
 	        ${questionNumber.count})&nbsp;
 	        <c:if test="${not sessionMap.hideTitles}">
@@ -35,7 +35,7 @@
 			<c:choose>
 			<%-- 1:TYPE_MULTIPLE_CHOICE, 8:TYPE_MARK_HEDGING --%>
 			<c:when test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
-				<div class="table div-hover scratches mt-4">
+				<div class="table div-hover scratches mt-md-4">
 					<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
 						<c:set var="svgId" value="${item.uid}-${optionDto.qbOptionUid}"/>
 						
@@ -228,7 +228,7 @@
 			
 			<%-- show burning questions --%>
 			<c:if test="${!showResults && scratchie.burningQuestionsEnabled && (isUserLeader || (mode == 'teacher'))}">
-				<div class="burning-question-container mb-2 mt-4">
+				<div class="burning-question-container mb-2 mt-md-4">
 					<button type="button" id="bq${item.uid}" data-bs-toggle="collapse" data-bs-target="#burning-question-item${item.uid}"
 							class="btn btn-light card-subheader <c:if test="${empty item.burningQuestion}">collapsed</c:if>">
 						<span class="if-collapsed"><i class="fa fa-xs fa-regular fa-square-plus" aria-hidden="true"></i></span>