Index: lams_central/web/css/components.scss
===================================================================
diff -u -rdf411d8446000acfdb5937f46a7a7e8ef4b656e0 -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_central/web/css/components.scss	(.../components.scss)	(revision df411d8446000acfdb5937f46a7a7e8ef4b656e0)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -1,16 +1,14 @@
 @import "bootstrap5.custom.scss";
 @import "_lams_variables.scss";
 
-#container-main {
+#container-main, .container-main {
     @extend .container-lg;
-}
-
-@media (width <= 768px) {
-	#container-main {
+    
+    @include media-breakpoint-down(md) {
 		--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);
+		padding-left: calc(var(--bs-gutter-x) * 0.5);		
 	}
 }
 
@@ -25,6 +23,10 @@
     padding-top: 1rem;
 }
 
+.font-size-init {
+	font-size: initial;
+}
+
 /* For Boostrap 3 & 5 compability */
 .img-responsive {
   max-width: 100%;
@@ -103,6 +105,68 @@
 			font-size: var(--bs-body-font-size);
 		} 
 	}
+
+	.lcard {
+		border-top-left-radius: 1.25rem;
+		border-top-right-radius: 0rem;
+		border-bottom-right-radius: 1.25rem;
+		border: 0;
+		margin-bottom: 2rem;
+		@extend .shadow;
+	
+		>.card-header {
+			border-top-left-radius: 1.25rem;
+			border-top-right-radius: 0rem;
+			font-size: 1.3rem;
+			padding: 1rem;
+			@extend .text-bg-secondary;
+			
+			*:not(.badge, .badge *, .btn, .btn *, button, button *) {
+				@extend .text-bg-secondary;
+			}
+	
+			@include media-breakpoint-down(md) {
+				font-size: 14px;
+			}
+		}
+	}
+	
+	.activity-bottom-buttons {
+	    margin-top: 1rem;
+	    padding-top: 1rem;
+	    border-top: $border-thin-grey;	
+	    display: flex;
+	    flex-direction: row-reverse;
+		clear: both;
+	}
+	
+	h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
+	    color: var(--bs-gray-dark);
+	}
+	
+	h1, .h1 {
+	    font-size: calc(1.2rem + 1vw);
+	}
+	
+	h2, .h2 {
+	    font-size: calc(1.2rem + 0.7vw);
+	}
+	
+	h3, .h3 {
+	    font-size: calc(1.2rem + 0.5vw);
+	}
+	
+	h4, .h4 {
+	    font-size: calc(1.1rem + 0.3vw);
+	}
+	
+	h5, .h5 {
+	    font-size: 1.1rem;
+	}
+	
+	h6, .h6 {
+	    font-size: 1rem;
+	}
 }
 
 body.component .btn-success,
@@ -645,6 +709,22 @@
   background-color: var(--bs-gray-200);
 }
 
+/*----------.div-hover----------------*/
+.div-hover > div {
+  align-items: center;
+  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);
+}
+
 /* jqGrid text wrapping */
 .ui-jqgrid tr.jqgrow td, .ui-jqgrid tr.ui-subgrid td {
   white-space:normal !important;
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -rd2e5991474ab481bbdb37b36fc26546d21d7c52d -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -410,6 +410,7 @@
         },
 
         success : function(response) {
+
             // update lesson state label
             lessonStateId = +response.lessonStateID;
             var label = null,
@@ -477,17 +478,19 @@
                 lessonFinishDateSpan = $('#lessonFinishDateSpan'),
                 lessonStateChanger = $('#lessonStateChanger'),
                 stateLabel = $('#lessonStateLabel');
+
             switch (lessonStateId) {
-                //created but not started lesson
+                // created but not started lesson
                 case 1:
                     scheduleControls.css('display','inline');
                     if ( response.finishDate ) {
                         lessonFinishDateSpan.text(LABELS.LESSON_FINISH.replace("%0",response.finishDate)).css('display','inline');
                         $("#scheduleDisableLessonButton").html(LABELS.RESCHEDULE);
                         $("#disableLessonButton").css('display', 'none');
+                    } else {
+                        lessonFinishDateSpan.hide();
                     }
                     startDateField.hide();
-                    lessonFinishDateSpan.hide();
                     lessonStateChanger.hide();
                     break;
                 //scheduled lesson
@@ -977,7 +980,7 @@
         cache : false,
         type : 'POST',
         success : function() {
-            loadTab();
+             document.location.reload();
         }
     });
 }
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -r6859554ab9421fe19d47ab72fb34a5c03ea2a89a -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 6859554ab9421fe19d47ab72fb34a5c03ea2a89a)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -507,7 +507,7 @@
 				</div>
 			</header>
 
-			<div class="tab-content pt-2">
+			<div class="tab-content mt-3">
 
 			</div>
 		</div>
@@ -819,8 +819,12 @@
 				<div class="modal-body">
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">Cancel</button>
-					<button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">Confirm</button>
+					<button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">
+						<fmt:message key='label.cancel'/>
+					</button>
+					<button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">
+						<fmt:message key='label.confirm'/>
+					</button>
 				</div>
 			</div>
 		</div>
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java
===================================================================
diff -u -rcc5613c2fcc477b2ed37af8ae2cc469648b9d71a -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java	(.../LearningController.java)	(revision cc5613c2fcc477b2ed37af8ae2cc469648b9d71a)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java	(.../LearningController.java)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -74,6 +74,7 @@
 import org.springframework.beans.factory.annotation.Qualifier;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
@@ -293,7 +294,7 @@
 
 	//user is allowed to answer questions if assessment activity doesn't have leaders or he is the leader
 	boolean hasEditRight =
-		!assessment.isUseSelectLeaderToolOuput() || assessment.isUseSelectLeaderToolOuput() && isUserLeader;
+		(!assessment.isUseSelectLeaderToolOuput() || assessment.isUseSelectLeaderToolOuput() && isUserLeader) && !mode.isTeacher();
 
 	//showResults if user has finished the last result
 	boolean showResults = (lastResult != null) && (lastResult.getFinishDate() != null);
@@ -464,7 +465,7 @@
     /**
      * Shows next page. It's available only to leaders as non-leaders see all questions on one page.
      */
-    @RequestMapping("/nextPage")
+    @PostMapping("/nextPage")
     public String nextPage(HttpServletRequest request)
 	    throws ServletException, IllegalAccessException, InvocationTargetException, NoSuchMethodException {
 	return nextPage(request, false, -1);
@@ -586,7 +587,7 @@
      * @throws IllegalAccessException
      */
     @SuppressWarnings("unchecked")
-    @RequestMapping("/submitAll")
+    @PostMapping("/submitAll")
     public String submitAll(HttpServletRequest request)
 	    throws ServletException, IllegalAccessException, InvocationTargetException, NoSuchMethodException {
 	SessionMap<String, Object> sessionMap = getSessionMap(request);
@@ -689,7 +690,7 @@
     /**
      * auto saves responses
      */
-    @RequestMapping("/autoSaveAnswers")
+    @PostMapping("/autoSaveAnswers")
     @ResponseStatus(HttpStatus.OK)
     @ResponseBody
     public String autoSaveAnswers(HttpServletRequest request, HttpServletResponse response)
Index: lams_tool_assessment/web/pages/learning/results/essay.jsp
===================================================================
diff -u -ra3b76a7a959ef77d75f311cc86fa65193e429289 -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision a3b76a7a959ef77d75f311cc86fa65193e429289)
+++ lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -56,7 +56,7 @@
 					</c:otherwise>
 				</c:choose>
 				<c:set var="canRate" value="${toolSessionID != session.sessionId and (!isLeadershipEnabled or isUserLeader) && (mode != 'teacher')}" />
-				<c:set var="showRating" value="${canRate or (not empty itemRatingDto.commentDtos and (toolSessionID != session.sessionId or questionSummary.showOwnGroupRating))}" />
+				<c:set var="showRating" value="${assessment.allowAnswerRating and (canRate or (not empty itemRatingDto.commentDtos and (toolSessionID != session.sessionId or questionSummary.showOwnGroupRating)))}" />
 			</c:if>
 			
 			<%-- Show answers for all other teams, and just rating if someone has already commented on this team's answer --%>
Index: lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp
===================================================================
diff -u -rb0232d1a0ff0f3a575ab1aa27ca713673ff1e153 -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision b0232d1a0ff0f3a575ab1aa27ca713673ff1e153)
+++ lams_tool_assessment/web/pages/learning/results/multiplechoice.jsp	(.../multiplechoice.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -46,30 +46,31 @@
 							<c:choose>
 								<c:when test="${question.multipleAnswersAllowed}">
 									<input type="checkbox" name="question${questionIndex}_${option.displayOrder}" id="option-${questionIndex}-${option.uid}" 
-										class="form-check-input" 
-										value="${true}"
-										<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-										disabled="disabled"
-									/>
+											class="form-check-input" 
+											value="${true}"
+											<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+											disabled="disabled"/>
 								</c:when>
 								<c:otherwise>
 									<input type="radio" name="question${questionIndex}" id="option-${questionIndex}-${option.uid}"
-										class="form-check-input" 
-										value="${option.displayOrder}"
-				 						<c:if test="${option.answerBoolean}">checked="checked"</c:if>
-				 						disabled="disabled"
-									/>
+											class="form-check-input" 
+											value="${option.displayOrder}"
+				 							<c:if test="${option.answerBoolean}">checked="checked"</c:if>
+				 							disabled="disabled"/>
 								</c:otherwise>
 							</c:choose>
-						</c:if>
 							
-						<label class="form-check-label" for="option-${questionIndex}-${option.uid}">
-							<c:if test="${question.prefixAnswersWithLetters}">
-					 			&nbsp;${option.formatPrefixLetter(answerStatus.index)}
-			 	            </c:if>	
-			 	                
-			 	            <c:out value="${option.name}" escapeXml="false" />
-		 	            </label>
+							<label class="form-check-label" for="option-${questionIndex}-${option.uid}">
+						</c:if>
+
+						<c:if test="${question.prefixAnswersWithLetters}">
+					 		&nbsp;${option.formatPrefixLetter(answerStatus.index)}
+			 	        </c:if>
+			 	        <c:out value="${option.name}" escapeXml="false" />
+			 	        
+			 	        <c:if test="${not empty toolSessionID}">
+		 	            	</label>
+		 	            </c:if>
 	 	            </div>
 				</div>
 					
Index: lams_tool_assessment/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r57b97cb04c093e9f9d136b453711b329fb0858ed -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 57b97cb04c093e9f9d136b453711b329fb0858ed)
+++ lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -5,156 +5,7 @@
 <c:set var="sessionDtos" value="${sessionMap.sessionDtos}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 
-<lams:html>
-	<lams:head>
-		<title><c:out value="${assessment.title}" /></title>
-		
-		<%@ include file="/common/tabbedheader.jsp" %>
-		<link href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet" type="text/css">
-		<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css">
-		<link href="${lams}css/thickbox.css" rel="stylesheet" rel="stylesheet" type="text/css">
-		<link href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet" type="text/css" >
- 		<lams:css suffix="chart"/>
- 		<link href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet" type="text/css">
- 		<c:if test="${not empty codeStyles}">
-			<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
-		</c:if>
-	
- 		<style>
-	 		.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar, .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
-				background-color: #f5f5f5;
-	 		}
-	  		
-	  		#completion-charts-container > div {
-	  			padding: 5rem 2rem;
-	  		}
-	  		
-	  		pre {
-				background-color: initial;
-				border: none;
-			}
-			
-			.requires-grading {
-				background-color: rgba(255, 195, 55, .6);
-			}
- 		</style>
- 		
-		<lams:JSImport src="includes/javascript/portrait.js" />
-		<script>
-	        // avoid name clash between bootstrap and jQuery UI
-	        $.fn.bootstrapTooltip = $.fn.tooltip.noConflict();
-        
-			var LAMS_URL    = '<lams:LAMSURL />',
-				WEB_APP_URL = '<lams:WebAppURL />',
-				LABELS = {
-					ACTIVITY_COMPLETION_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion"/></spring:escapeBody>',
-					ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.possible"/></spring:escapeBody>',
-					ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.started"/></spring:escapeBody>',
-					ACTIVITY_COMPLETION_CHART_COMPLETED_LEARNERS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.completion.completed"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_TITLE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_TITLE_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.groups"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_X_AXIS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.x.axis"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_Y_AXIS_STUDENTS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.students"/></spring:escapeBody>',
-					ANSWERED_QUESTIONS_CHART_Y_AXIS_GROUPS : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.monitoring.summary.answered.questions.y.axis.groups"/></spring:escapeBody>'
-				},
-				// pass settings to monitorToolSummaryAdvanced.js
-			    submissionDeadlineSettings = {
-					lams: '<lams:LAMSURL />',
-					submissionDeadline: '${submissionDeadline}',
-					submissionDateString: '${submissionDateString}',
-					setSubmissionDeadlineUrl: '<c:url value="/monitoring/setSubmissionDeadline.do"/>?<csrf:token/>',
-					toolContentID: '<c:out value="${param.toolContentID}" />',
-					messageNotification: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.notification" /></spring:escapeBody>',
-					messageRestrictionSet: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction.set" /></spring:escapeBody>',
-					messageRestrictionRemoved: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction.removed" /></spring:escapeBody>'
-				},
-				confidenceLevelsSettings = {
-					type: "${assessment.confidenceLevelsType}",
-					LABEL_NOT_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
-					LABEL_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
-					LABEL_VERY_CONFIDENT: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
-					LABEL_NOT_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
-					LABEL_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
-					LABEL_VERY_SURE: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
-				};
-		</script>
-		<lams:JSImport src="includes/javascript/common.js" />
- 		<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
- 		<lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.plugin.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script> 
- 		<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
-		<lams:JSImport src="includes/javascript/chart.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/chartjs/chart.umd.js"></script>
- 		<lams:JSImport src="includes/javascript/chart.js" relative="true" />
- 		<script type="text/javascript" src="${lams}includes/javascript/jquery.cookie.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
- 		<script type="text/javascript" src="${lams}includes/javascript/download.js"></script>
- 		<lams:JSImport src="includes/javascript/portrait.js" />
- 		<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
- 		
-		<c:if test="${not empty codeStyles}">
-			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
-			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
-		</c:if>
-		<%-- codeStyles is a set, so each code style will be listed only once --%>
-		<c:forEach items="${codeStyles}" var="codeStyle">
-			<c:choose>
-				<c:when test="${codeStyle == 1}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
-				</c:when>
-				<c:when test="${codeStyle == 2}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
-				</c:when>
-				<c:when test="${codeStyle >= 3}">
-					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
-				</c:when>
-			</c:choose>
-		</c:forEach>
-		
-		<script>        
-		    function doSelectTab(tabId) {
-		    	if ( tabId == 3 )
-		    		doStatistic();
-			   	selectTab(tabId);
-		    }
-		    
-			function doStatistic(){
-				var url = '<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>';
-				$.ajaxSetup({ cache: true });
-				$("#statisticArea").load(
-					url,
-					{
-						toolContentID: <c:out value="${param.toolContentID}" />, 
-						reqID: (new Date()).getTime()
-					}
-				);
-			}       
-		</script>	  
-	</lams:head>
-	
-	<body class="stripes">		
-		<c:set var="title"><fmt:message key="label.author.title" /></c:set>
-	 	<lams:Page type="navbar" title="${title}"> 
-	
-			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= AssessmentConstants.TOOL_SIGNATURE %>" helpModule="monitoring" refreshOnClickAction="javascript:location.reload();">
-				<lams:Tab id="1" key="monitoring.tab.summary"/>
-				<lams:Tab id="2" key="monitoring.tab.edit.activity"/>
-				<lams:Tab id="3" key="monitoring.tab.statistics"/>
-			</lams:Tabs>
-	
-	  		<lams:TabBodyArea>
-				<lams:TabBodys>
-					<lams:TabBody id="1" page="summary.jsp" />
-					<lams:TabBody id="2" page="editactivity.jsp" />			
-					<lams:TabBody id="3" page="statistic.jsp" />
-				</lams:TabBodys> 
-			</lams:TabBodyArea> 
-	
-			<div id="footer"></div>
-		</lams:Page>
-	</body>
-</lams:html>
\ No newline at end of file
+<c:set var="title"><fmt:message key="label.author.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+		helpToolSignature="<%= AssessmentConstants.TOOL_SIGNATURE %>"
+		initialTabId="${initialTabId}"/>
Index: lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp
===================================================================
diff -u -r3d1c6963589452c441b1670c2eecf3eb85a128a5 -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
+++ lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -172,12 +172,29 @@
 					<c:otherwise>
 						<fmt:message key="label.off" />
 					</c:otherwise>
-				</c:choose>	
+				</c:choose>
 			</div>
 		</div>
 		
 		<div class="row">
 			<div class="col">
+				<fmt:message key="label.authoring.advance.rate.answers" />
+			</div>
+			
+			<div class="col">
+				<c:choose>
+					<c:when test="${assessment.allowAnswerRating}">
+						<fmt:message key="label.on" />
+					</c:when>
+					<c:otherwise>
+						<fmt:message key="label.off" />
+					</c:otherwise>
+				</c:choose>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.students.right.answers" />
 			</div>
 			
Index: lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp
===================================================================
diff -u -rc57ea16d86b357cfd35a9603c804c9eecb8079fb -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision c57ea16d86b357cfd35a9603c804c9eecb8079fb)
+++ lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -1,76 +1,76 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="assessment" value="${sessionMap.assessment}"/>
 
-<lams:html>
-    <lams:head>
-        <%@ include file="/common/header.jsp"%>
+<c:set var="title"><fmt:message key="label.monitoring.user.summary.history.responses" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+ 	<!-- ********************  CSS ********************** -->
+	<link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
+    <link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
+    <link type="text/css" href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet">
+    <link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
+    <c:if test="${not empty codeStyles}">
+    	<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+    </c:if>
+    <style>
+        [data-toggle="collapse"].collapsed .if-not-collapsed, [data-toggle="collapse"]:not(.collapsed) .if-collapsed {
+            display: none;
+        }
 
-        <link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
-        <link type="text/css" href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet">
-        <link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
-        <c:if test="${not empty codeStyles}">
-            <link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
-        </c:if>
+        pre {
+            background-color: initial;
+            border: none;
+        }
 
-        <style>
-            [data-toggle="collapse"].collapsed .if-not-collapsed, [data-toggle="collapse"]:not(.collapsed) .if-collapsed {
-                display: none;
-            }
+        .requires-grading {
+            background-color: rgba(255, 195, 55, .6);
+        }
+    </style>
 
-            pre {
-                background-color: initial;
-                border: none;
-            }
+ 	<!-- ********************  javascript ********************** -->
+	<lams:JSImport src="includes/javascript/common.js" />
+	<script>
+		// pass settings to jquery.jqGrid.confidence-level-formattter.js
+        var confidenceLevelsSettings = {
+            type: "${assessment.confidenceLevelsType}",
+            LABEL_NOT_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
+            LABEL_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
+            LABEL_VERY_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
+            LABEL_NOT_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
+            LABEL_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
+            LABEL_VERY_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
+        };
+    </script>
+    <script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
+    <script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
+    <c:if test="${not empty codeStyles}">
+        <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
+        <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
+    </c:if>
+    <%-- codeStyles is a set, so each code style will be listed only once --%>
+    <c:forEach items="${codeStyles}" var="codeStyle">
+        <c:choose>
+            <c:when test="${codeStyle == 1}">
+                <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
+            </c:when>
+            <c:when test="${codeStyle == 2}">
+                <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
+            </c:when>
+            <c:when test="${codeStyle >= 3}">
+                <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
+            </c:when>
+        </c:choose>
+    </c:forEach>
+	<script>
+		var isEdited = false;
+		var previousCellValue = "";
+		$(document).ready(function(){
+			<c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
+				<c:set var="question" value="${userSummaryItem.questionDto}"/>
 
-            .requires-grading {
-                background-color: rgba(255, 195, 55, .6);
-            }
-        </style>
-
-        <script>
-            // pass settings to jquery.jqGrid.confidence-level-formattter.js
-            var confidenceLevelsSettings = {
-                type: "${assessment.confidenceLevelsType}",
-                LABEL_NOT_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.confident" /></spring:escapeBody>',
-                LABEL_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.confident" /></spring:escapeBody>',
-                LABEL_VERY_CONFIDENT : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.confident" /></spring:escapeBody>',
-                LABEL_NOT_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.not.sure" /></spring:escapeBody>',
-                LABEL_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.sure" /></spring:escapeBody>',
-                LABEL_VERY_SURE : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.very.sure" /></spring:escapeBody>'
-            };
-        </script>
-        <script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
-        <script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
-
-        <c:if test="${not empty codeStyles}">
-            <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
-            <script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
-        </c:if>
-        <%-- codeStyles is a set, so each code style will be listed only once --%>
-        <c:forEach items="${codeStyles}" var="codeStyle">
-            <c:choose>
-                <c:when test="${codeStyle == 1}">
-                    <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
-                </c:when>
-                <c:when test="${codeStyle == 2}">
-                    <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
-                </c:when>
-                <c:when test="${codeStyle >= 3}">
-                    <script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
-                </c:when>
-            </c:choose>
-        </c:forEach>
-
-        <script>
-            var isEdited = false;
-            var previousCellValue = "";
-            $(document).ready(function(){
-                <c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
-                <c:set var="question" value="${userSummaryItem.questionDto}"/>
-
-                jQuery("#user${question.uid}").jqGrid({
+				jQuery("#user${question.uid}").jqGrid({
                     datatype: "local",
                     autoencode:false,
                     rowNum: 10000,
@@ -85,35 +85,35 @@
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.time" /></spring:escapeBody>",
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.response" /></spring:escapeBody>",
                         <c:if test="${assessment.enableConfidenceLevels and question.type != 8}">
-                        "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.confidence' /></spring:escapeBody>",
+                        	"<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.confidence' /></spring:escapeBody>",
                         </c:if>
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.grade" /></spring:escapeBody>",
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.marker" /></spring:escapeBody>",
                         "<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.user.summary.marker.comment" /></spring:escapeBody>"
                     ],
                     colModel:[
-                        {name:'id', index:'id', width:52, sorttype:"int"},
-                        {name:'questionResultUid', index:'questionResultUid', width:0, hidden: true},
-                        {name:'time', index:'time', width:150, sorttype:'date', datefmt:'Y-m-d'},
-                        {name:'response', index:'response', width:341, sortable:false},
+                        {name:'id', index:'id', width:52, labelAlign: 'left', sorttype:"int"},
+                        {name:'questionResultUid', index:'questionResultUid', width:0, labelAlign: 'left', hidden: true},
+                        {name:'time', index:'time', width:150, labelAlign: 'left', sorttype:'date', datefmt:'Y-m-d'},
+                        {name:'response', index:'response', width:341, labelAlign: 'left', sortable:false},
                         <c:if test="${sessionMap.assessment.enableConfidenceLevels and question.type != 8}">
-                        {name:'confidence', index:'confidence', width: 80, classes: 'vertical-align', formatter: gradientNumberFormatter},
+                        	{name:'confidence', index:'confidence', width: 80, labelAlign: 'left', classes: 'vertical-align', formatter: gradientNumberFormatter},
                         </c:if>
-                        {name:'grade', index:'grade', width:80, sorttype:"float", editable:true,
-                            editoptions: {size:4, maxlength: 4}, align:"right", classes: 'vertical-align', title : false },
-                        {name:'marker', index:'marker', width: 110, title: false},
-                        {name:'markerComment', index:'markerComment', width:300, editable:true, edittype: 'textarea',
-                            sortable: false, editoptions: {maxlength: 3000, rows: 6}, title : false,
-                            formatter:function(cellvalue, options, rowObject, event) {
-                                if (event == "edit") {
-                                    cellvalue = cellvalue.replace(/\n/g, '\n<br>');
-                                }
-                                return cellvalue;
-                            },
-                            unformat:function(cellvalue, options, rowObject) {
-                                return rowObject.innerText;
-                            }
-                        }
+                        {name:'grade', index:'grade', width:80, labelAlign: 'center', align:"center", sorttype:"float", editable:true,
+                            	editoptions: {size:4, maxlength: 4}, classes: 'vertical-align', title : false },
+						{name:'marker', index:'marker', width: 110, labelAlign: 'left', title: false},
+						{name:'markerComment', index:'markerComment', width:300, labelAlign: 'left', editable:true, edittype: 'textarea',
+								sortable: false, editoptions: {maxlength: 3000, rows: 6}, title : false,
+								formatter:function(cellvalue, options, rowObject, event) {
+									if (event == "edit") {
+										cellvalue = cellvalue.replace(/\n/g, '\n<br>');
+									}
+									return cellvalue;
+								},
+								unformat:function(cellvalue, options, rowObject) {
+									return rowObject.innerText;
+								}
+						}
                     ],
                     multiselect: false,
                     cellurl: '<c:url value="/monitoring/saveUserGrade.do?sessionMapID=${sessionMapID}"/>&<csrf:token/>',
@@ -182,8 +182,7 @@
 
                 <c:forEach var="questionResult" items="${userSummaryItem.questionResults}" varStatus="i">
                 <c:set var="learnerInteraction" value="${learnerInteractions[questionResult.qbToolQuestion.uid]}" />
-                <c:set var="requiresMarking"
-                       value="${empty questionResult.markedBy and questionResult.questionDto.type eq 6 and questionResult.mark eq 0}" />
+                <c:set var="requiresMarking" value="${empty questionResult.markedBy and questionResult.questionDto.type eq 6 and questionResult.mark eq 0}" />
 
                 var responseStr = "";
                 <%@ include file="userresponse.jsp"%>
@@ -194,203 +193,179 @@
                     time:"${empty learnerInteraction ? questionResult.finishDate : learnerInteraction.formattedDate}",
                     response:responseStr,
                     <c:if test="${assessment.enableConfidenceLevels}">
-                    confidence:"${questionResult.confidenceLevel}",
+                    	confidence:"${questionResult.confidenceLevel}",
                     </c:if>
                     grade:
                         <c:choose>
-                        <c:when test="${requiresMarking}">
-                        "-"
-                    </c:when>
-                    <c:otherwise>
-                    "<fmt:formatNumber value='${questionResult.mark}' maxFractionDigits='3'/>"
-                    </c:otherwise>
-                    </c:choose>,
+	                        <c:when test="${requiresMarking}">
+	                       		"-"
+		                    </c:when>
+		                    <c:otherwise>
+		                    	"<fmt:formatNumber value='${questionResult.mark}' maxFractionDigits='3'/>"
+		                    </c:otherwise>
+	                    </c:choose>,
                     marker :
                         <c:choose>
-                        <c:when test="${requiresMarking}">
-                        "<b>(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.required' /></spring:escapeBody>)</b>"
-                    </c:when>
-                    <c:when test="${not empty questionResult.markedBy}">
-                    "<c:out value='${questionResult.markedBy.fullName}' />"
-                    </c:when>
-                    <c:otherwise>
-                    "(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.auto' /></spring:escapeBody>)"
-                    </c:otherwise>
-                    </c:choose>,
-                    markerComment: "${questionResult.markerCommentEscaped}"
+                       		<c:when test="${requiresMarking}">
+								"<b class='text-bg-warning'>(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.required' /></spring:escapeBody>)</b>"
+                   			</c:when>
+                   			<c:when test="${not empty questionResult.markedBy}">
+								"<c:out value='${questionResult.markedBy.fullName}' />"
+                    		</c:when>
+                   			<c:otherwise>
+								"(<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.monitoring.user.summary.grade.auto' /></spring:escapeBody>)"
+                    		</c:otherwise>
+                    	</c:choose>,
+					markerComment: "${questionResult.markerCommentEscaped}"
                 });
                 // set maxGrade attribute to cell DOM element
                 table.setCell(${i.index + 1}, "grade", "", null, {
                     "title":
                         <c:choose>
-                        <c:when test="${empty questionResult.maxMark}">
-                        ""
-                    </c:when>
-                    <c:otherwise>
-                    "<spring:escapeBody javaScriptEscape='true'>
-                    <fmt:message key='label.learning.max.mark'>
-                    <fmt:param value='${questionResult.maxMark}'/>
-                    </fmt:message>
-                    </spring:escapeBody>"
-                    </c:otherwise>
-                    </c:choose>
+                            <c:when test="${empty questionResult.maxMark}">
+                             ""
+                            </c:when>
+	                        <c:otherwise>
+	                             "<spring:escapeBody javaScriptEscape='true'>
+	                                <fmt:message key='label.learning.max.mark'>
+	                                    <fmt:param value='${questionResult.maxMark}'/>
+	                                </fmt:message>
+	                            </spring:escapeBody>"
+	                        </c:otherwise>
+                        </c:choose>
                 });
                 </c:forEach>
+			</c:forEach>
 
-                </c:forEach>
-
-                //jqgrid autowidth (http://stackoverflow.com/a/1610197)
-                $(window).bind('resize', function() {
-                    var grid;
-                    if (grid = jQuery(".ui-jqgrid-btable:visible")) {
-                        grid.each(function(index) {
-                            var gridId = $(this).attr('id');
-                            var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
-                            jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
-                        });
-                    }
-                });
-                setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
-
-                // show etherpads only on Discussion expand
-                $('.question-etherpad-collapse').on('show.bs.collapse', function(){
-                    var etherpad = $('.etherpad-container', this);
-                    if (!etherpad.hasClass('initialised')) {
-                        var id = etherpad.attr('id'),
-                            groupId = id.substring('etherpad-container-'.length);
-                        etherpadInitMethods[groupId]();
-                    }
-                });
-
-                if (typeof CodeMirror != 'undefined') {
-                    CodeMirror.colorize($('.code-style'));
+            //jqgrid autowidth (http://stackoverflow.com/a/1610197)
+            $(window).bind('resize', function() {
+                var grid;
+                if (grid = jQuery(".ui-jqgrid-btable:visible")) {
+                    grid.each(function(index) {
+            	        var gridId = $(this).attr('id');
+                        var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
+                        jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
+                    });
                 }
             });
+            setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
 
-            function refreshSummaryPage()  {
-                if (isEdited) {
-                    self.parent.window.parent.location.href = "<c:url value="/monitoring/summary.do"/>?toolContentID=${sessionMap.toolContentID}&contentFolderID=${sessionMap.contentFolderID}";
-                } else {
-                    self.parent.tb_remove();
+            // show etherpads only on Discussion expand
+            $('.question-etherpad-collapse').on('show.bs.collapse', function(){
+                var etherpad = $('.etherpad-container', this);
+                if (!etherpad.hasClass('initialised')) {
+                    var id = etherpad.attr('id'),
+                        groupId = id.substring('etherpad-container-'.length);
+                    etherpadInitMethods[groupId]();
                 }
+            });
+
+            if (typeof CodeMirror != 'undefined') {
+                CodeMirror.colorize($('.code-style'));
             }
-        </script>
-    </lams:head>
+        });
 
-    <body class="stripes">
+        function refreshSummaryPage()  {
+            if (isEdited) {
+                self.parent.window.parent.location.href = "<c:url value="/monitoring/summary.do"/>?toolContentID=${sessionMap.toolContentID}&contentFolderID=${sessionMap.contentFolderID}";
+            } else {
+                self.parent.tb_remove();
+            }
+        }
+	</script>
 
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <div class="panel-title">
-                <fmt:message key="label.monitoring.user.summary.history.responses" />
-            </div>
-        </div>
+	<h1 class="fs-3">
+		${title}
+	</h1>
 
-        <div class="panel-body">
-            <lams:errors/>
+	<lams:errors5/>
 
-            <table class="table table-condensed">
-                <tr>
-                    <th style="width: 180px;" >
-                        <fmt:message key="label.monitoring.user.summary.user.name" />
-                    </th>
-                    <td >
-                        <c:out value="${userSummary.user.lastName}, ${userSummary.user.firstName}" />
-                    </td>
-                </tr>
+	<div class="ltable table-hover no-header alert alert-secondary shadow col-sm-8 mx-auto my-4 p-1">
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.user.name" />
+			</div>
+			<div class="col-7">
+				<c:out value="${userSummary.user.lastName}, ${userSummary.user.firstName}" />
+			</div>
+		</div>
 
-                <tr>
-                    <th>
-                        <fmt:message key="label.monitoring.user.summary.number.attempts" />
-                    </th>
-                    <td>
-                            ${userSummary.numberOfAttempts}
-                    </td>
-                </tr>
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.number.attempts" />
+			</div>
+			<div class="col-7">
+				${userSummary.numberOfAttempts}
+			</div>
+		</div>
 
-                <tr>
-                    <th>
-                        <fmt:message key="label.monitoring.user.summary.time.last.attempt" />
-                    </th>
-                    <td>
-                        <fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="H" timeZone="GMT" /> <fmt:message key="label.learning.summary.hours" />
-                        <fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="m" timeZone="GMT" /> <fmt:message key="label.learning.summary.minutes" />
-                    </td>
-                </tr>
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.time.last.attempt" />
+			</div>
+			<div class="col-7">
+				<fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="H" timeZone="GMT" />
+				<fmt:message key="label.learning.summary.hours" />
+				<fmt:formatDate value="${userSummary.timeOfLastAttempt}" pattern="m" timeZone="GMT" />
+				<fmt:message key="label.learning.summary.minutes" />
+			</div>
+		</div>
 
-                <tr>
-                    <th>
-                        <fmt:message key="label.monitoring.user.summary.last.attempt.grade" />
-                    </th>
-                    <td>
-                        <div id="lastAttemptGrade">${userSummary.lastAttemptGrade}</div>
-                    </td>
-                </tr>
-            </table>
+		<div class="row">
+			<div class="col-5">
+				<fmt:message key="label.monitoring.user.summary.last.attempt.grade" />
+			</div>
+			<div class="col-7">
+				<div id="lastAttemptGrade">${userSummary.lastAttemptGrade}</div>
+			</div>
+		</div>
+	</div>
 
-            <c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
-                <div class="voffset20">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <div class="panel-title">
-                                <table style="font-size: small;">
-                                    <tr>
-                                        <td width="70px;">
-                                            <fmt:message key="label.monitoring.user.summary.title" />
-                                        </td>
-                                        <td>
-                                            <c:out value="${userSummaryItem.questionDto.title}" escapeXml="true"/>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <fmt:message key="label.monitoring.user.summary.question" />
-                                        </td>
-                                        <td>
-                                            <c:out value="${userSummaryItem.questionDto.question}" escapeXml="false"/>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </div>
-                        </div>
+	<c:forEach var="userSummaryItem" items="${userSummary.userSummaryItems}" varStatus="status">
+		<div class="lcard">
+			<div class="card-header">
+				<c:out value="${userSummaryItem.questionDto.title}" escapeXml="true"/>
+			</div>
+			
+            <div class="card-body p-2">
+               	<div class="mb-3">
+                    <c:out value="${userSummaryItem.questionDto.question}" escapeXml="false"/>
+				</div>
+				
+                <table id="user${userSummaryItem.questionDto.uid}"></table>
+            </div>
+		</div>
 
+        <%--Display Etherpad for each question --%>
+        <c:if test="${isQuestionEtherpadEnabled}">
+        	<div class="question-etherpad-container mt-4 mb-2">
+            	<button type="button" data-bs-toggle="collapse" 
+            			data-bs-target="#question-etherpad-${userSummaryItem.questionDto.uid}"
+                		class="btn btn-light btn-sm collapsed card-subheader">
+                	<span class="if-collapsed">
+                		<i class="fa fa-xs fa-plus-square-o roffset5" aria-hidden="true"></i>
+                	</span>
+                    <span class="if-not-collapsed">
+                    	<i class="fa fa-xs fa-minus-square-o roffset5" aria-hidden="true"></i>
+                    </span>
+                    <fmt:message key="label.etherpad.discussion" />
+                </button>
 
-
-                        <table id="user${userSummaryItem.questionDto.uid}"></table>
+                <div id="question-etherpad-${userSummaryItem.questionDto.uid}" class="question-etherpad-collapse collapse">
+                	<div class="card question-etherpad">
+                    	<lams:Etherpad groupId="etherpad-assessment-${toolSessionID}-question-${userSummaryItem.questionDto.uid}"
+                        		showControls="true" showChat="false" heightAutoGrow="true" showOnDemand="true" />
                     </div>
                 </div>
+       		</div>
+        </c:if>
+	</c:forEach>
 
-                <%--Display Etherpad for each question --%>
-                <c:if test="${isQuestionEtherpadEnabled}">
-                    <div class="form-group question-etherpad-container">
-                        <a data-toggle="collapse" data-target="#question-etherpad-${userSummaryItem.questionDto.uid}"
-                           href="#qe${userSummaryItem.questionDto.uid}" class="collapsed">
-                            <span class="if-collapsed"><i class="fa fa-xs fa-plus-square-o roffset5" aria-hidden="true"></i></span>
-                            <span class="if-not-collapsed"><i class="fa fa-xs fa-minus-square-o roffset5" aria-hidden="true"></i></span>
-                            <fmt:message key="label.etherpad.discussion" />
-                        </a>
-
-                        <div id="question-etherpad-${userSummaryItem.questionDto.uid}" class="question-etherpad-collapse collapse">
-                            <div class="panel panel-default question-etherpad">
-                                <lams:Etherpad groupId="etherpad-assessment-${toolSessionID}-question-${userSummaryItem.questionDto.uid}"
-                                               showControls="true" showChat="false" heightAutoGrow="true" showOnDemand="true" />
-                            </div>
-                        </div>
-                    </div>
-                </c:if>
-            </c:forEach>
-
-            <a href="#nogo" onclick="refreshSummaryPage();" class="btn btn-default btn-sm voffset20 pull-right">
-                <fmt:message key="label.close" />
-            </a>
-
-        </div>
-        <!--closes content-->
-
-        <div id="footer">
-        </div>
-        <!--closes footer-->
-
-    </div>
-    </body>
-</lams:html>
\ No newline at end of file
+	<div class="activity-bottom-buttons">
+		<button type="button" onclick="refreshSummaryPage();" class="btn btn-primary">
+			<i class="fa-regular fa-circle-xmark me-1"></i>
+			<fmt:message key="label.close" />
+		</button>
+	</div>
+	
+</lams:PageMonitor>
Index: lams_tool_assessment/web/pages/monitoring/statisticpart.jsp
===================================================================
diff -u -r1d81e132bc101883c5643fcf54d2d40d45c5cf2e -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_assessment/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 1d81e132bc101883c5643fcf54d2d40d45c5cf2e)
+++ lams_tool_assessment/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -1,12 +1,17 @@
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="sessionDtos" value="${sessionMap.sessionDtos}"/>
 <c:set var="leaderDto" value="${sessionMap.leaderDto}"/>
 <c:set var="activityDto" value="${sessionMap.activityDto}"/>
 
+<lams:css suffix="chart"/>
+
+<script type="text/javascript" src="${lams}includes/javascript/chartjs/chart.umd.js"></script>
+<lams:JSImport src="includes/javascript/chart.js" relative="true" />
 <script type="text/javascript">
 	$(document).ready(function(){
-		$('[data-toggle="tooltip"]').bootstrapTooltip();
+		$('[data-bs-toggle="tooltip"]').tooltip();
 		
 		$('#activity-evaluation').on('focus', function(){
 			$(this).data('previousValue', this.value);
@@ -35,7 +40,6 @@
 			});
 			
 		});
-		
 
 	   	// must display charts after screen is visible or cannot calculate widths.
  		<c:choose>
@@ -56,36 +60,34 @@
 			</c:forEach>
 		</c:when>
 		</c:choose>
-
-
 	});
 </script>
 
 <c:choose>
-
 <c:when test="${empty sessionDtos}">
-	<lams:Alert type="warn" id="no-edit" close="false">
+	<lams:Alert5 type="warn" id="no-edit">
 		<fmt:message key="message.monitoring.summary.no.session" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:when>
 
 <c:otherwise>
-
-	<p><fmt:message key="label.graph.help"/></p>
-
+	<em>
+		<fmt:message key="label.graph.help"/>
+	</em>
+	
 	<c:choose>
-	<c:when test="${sessionMap.assessment.useSelectLeaderToolOuput}">
-		<div class="panel panel-default" >
-       	<div class="panel-body">
-
-        <c:if test="${leaderDto.count > 0}">
-            <div class="row">
-                 <div class="col-xs-12"></div>
-                 <div id="chartDivLeader${sessionMap.toolContentID}" class="markChartDiv"></div>
-            </div>
-        </c:if>
-
-        <div class="row">
+	<c:when test="${sessionMap.assessment.useSelectLeaderToolOuput}">	
+		<div class="lcard" >
+       	<div class="card-body">
+       	
+       	<c:if test="${leaderDto.count > 0}">
+	 		<div class="row">
+				<div class="col-12"></div>
+				<div id="chartDivLeader${sessionMap.toolContentID}" class="markChartDiv"></div>
+			</div>
+		</c:if>
+            
+        <div class="row"> 
             <div class="col-md-6" style="padding: 0px 20px 0px 20px;">
                 <table class="table table-striped table-hover table-condensed">
                     <tr>
@@ -150,16 +152,19 @@
 
 	<c:otherwise>
 		<c:if test="${sessionMap.isGroupedActivity}">
-			<h4 class="voffset20"><fmt:message key="label.activity.stats"/></h4>
+			<div class="card-subheader fs-4 mt-4 mb-2">
+				<fmt:message key="label.activity.stats"/>
+			</div>
 		</c:if>
-		<div class="panel panel-default" >
-       		<div class="panel-body">
-
-            <c:if test="${activityDto.count > 0}">
-                <div class="row">
-                     <div class="col-xs-12" ></div>
-                     <div id="chartDivActivity${sessionMap.toolContentID}" class="markChartDiv"></div>
-                </div>
+		
+		<div class="lcard" >
+       		<div class="card-body">
+       		
+       		<c:if test="${activityDto.count > 0}">
+	            <div class="row">
+	                 <div class="col-12" ></div>
+	                 <div id="chartDivActivity${sessionMap.toolContentID}" class="markChartDiv"></div>
+	            </div>
             </c:if>
 
 			<div class="row">
@@ -220,23 +225,24 @@
                     </table>
 				</div>
 			</div>
-
 			</div>
 		</div>
 
 		<c:if test="${sessionMap.isGroupedActivity}">
-			<h4 class="voffset20"><fmt:message key="label.group.stats"/></h4>
+			<div class="card-subheader fs-4 mt-4 mb-2">
+				<fmt:message key="label.group.stats"/>
+			</div>
+			
 			<c:forEach var="sessionDto" items="${sessionDtos}">
-			    <div class="panel panel-default" >
-			        <div class="panel-heading" id="heading${sessionDto.sessionId}">
-						<span class="panel-title">
-							<fmt:message key="monitoring.label.group" />: <c:out value="${sessionDto.sessionName}" />
-						</span>
+			    <div class="lcard" >
+			        <div class="card-header" id="heading${sessionDto.sessionId}">
+						<fmt:message key="monitoring.label.group" />: <c:out value="${sessionDto.sessionName}" />
 			        </div>
-		       		<div class="panel-body">
+			        
+		       		<div class="card-body">    
 
 					<div class="row">
-						 <div class="col-xs-12"></div>
+						 <div class="col-12"></div>
 		 				 <div id="chartDivSession${sessionDto.sessionId}" class="markChartDiv"></div>
 				    </div>
 
@@ -304,23 +310,23 @@
 			</c:forEach>
 		</c:if>
 	</c:otherwise>
-	</c:choose>
-
-	<div id="accordion-qb-stats" class="panel-group voffset20" role="tablist" aria-multiselectable="true">
-	    <div class="panel panel-default">
-	        <div class="panel-heading collapsable-icon-left" id="heading-qb-stats">
-	        	<span class="panel-title">
-			    	<a class="collapsed" role="button" data-toggle="collapse" href="#qb-stats" aria-expanded="true" aria-controls="qb-stats">
+	</c:choose>		
+	
+	<div id="accordion-qb-stats" class="panel-group voffset20" role="tablist" aria-multiselectable="true"> 
+	    <div class="lcard">
+	        <div class="card-header" id="heading-qb-stats">
+	        	<span class="card-title collapsable-icon-left">
+					<button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" data-bs-target="#qb-stats" 
+							aria-expanded="true" aria-controls="qb-stats">
 		          		<fmt:message key="label.qb.stats" />
-		          	</a>
+		          	</button>
 		          	<lams:Popover>
 		          		<fmt:message key="label.qb.stats.tooltip" />
 		          	</lams:Popover>
-
 	      		</span>
 	        </div>
-
-			<div aria-expanded="false" id="qb-stats" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="heading-qb-stats">
+	
+			<div id="qb-stats" class="card-body collapse show">
 				<table class="table table-striped table-hover table-condensed">
 					<tr>
 						<th scope="col"  class="text-left">
@@ -393,4 +399,4 @@
 </c:otherwise>
 </c:choose>
 
-<%@ include file="parts/toolOutput.jsp"%>
\ No newline at end of file
+<%@ include file="parts/toolOutput.jsp"%>
Index: lams_tool_forum/web/jsps/learning/viewforum.jsp
===================================================================
diff -u -rb3dd7f3d65e4eec044f69c253259b5ff743b6700 -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
+++ lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -126,7 +126,7 @@
 
         <lams:errors5/>
         
-        <c:if test="${not empty sessionMap.instructions}">
+        <c:if test="${not empty sessionMap.instruction}">
             <div id="instructions" class="instructions">
                 <c:out value="${sessionMap.instruction}" escapeXml="false" />
             </div>
Index: lams_tool_images/web/pages/learning/parts/commentsarea.jsp
===================================================================
diff -u -re90e4c14807715d5b15addca7385959808047bcb -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision e90e4c14807715d5b15addca7385959808047bcb)
+++ lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -54,12 +54,12 @@
 	}
 </script>
 
-<c:if test="${(mode != 'teacher') && (imageGallery.allowRank || imageGallery.allowVote || imageGallery.allowShareImages)}">
+<c:if test="${(imageGallery.allowRank || imageGallery.allowVote || imageGallery.allowShareImages)}">
 
 	<%--Ranking area---------------------------------------%>
 	
 	<c:if test="${imageGallery.allowRank && isImageSelected}">
-		<lams:Rating itemRatingDto="${sessionMap.itemRatingDto}" disabled="${finishedLock}" isDisplayOnly="${sessionMap.isAuthor}"
+		<lams:Rating itemRatingDto="${sessionMap.itemRatingDto}" disabled="${finishedLock || (mode == 'teacher')}" isDisplayOnly="${sessionMap.isAuthor}"
 				maxRates="${imageGallery.maximumRates}" countRatedItems="${sessionMap.countRatedItems}"
 				minNumberWordsLabel="label.minimum.number.words"/>
 	</c:if>
@@ -74,7 +74,7 @@
 
 				<div id="favourite-button" class="form-check float-end">
 					<input type="checkbox" name="vote" class="form-check-input" id="voting-form-checkbox" 
-							<c:if test="${finishedLock}">disabled="disabled"</c:if>	
+							<c:if test="${finishedLock || (mode == 'teacher')}">disabled="disabled"</c:if>	
 							<c:if test="${sessionMap.isVoted}">checked="checked"</c:if>	
 					/>
 						
@@ -94,7 +94,7 @@
 			
 		<%--"Check for new", "Add new image" and "Delete" buttons---------------%>		
 		<div id="manage-image-buttons" class="btn-group" role="group" aria-label="Control buttons">	
-			<c:if test="${imageGallery.allowShareImages}">
+			<c:if test="${imageGallery.allowShareImages && (mode != 'teacher')}">
 				<button type="button" onclick="return checkNew()" class="btn btn-sm btn-outline-secondary btn-icon-refresh" id="check-for-new-button"> 
 					<fmt:message key="label.check.for.new" /> 
 				</button>
Index: lams_tool_larsrc/web/pages/learning/learning.jsp
===================================================================
diff -u -re90e4c14807715d5b15addca7385959808047bcb -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision e90e4c14807715d5b15addca7385959808047bcb)
+++ lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -293,7 +293,7 @@
 						</span>
 
                     <div class="float-end">
-                        <c:if test="${not finishedLock && !item.createByAuthor && userID == item.createBy.userId}">
+                        <c:if test="${not finishedLock && !item.createByAuthor && userID == item.createBy.userId && mode != 'teacher'}">
                             <button type="button" class="no-decoration fa fa-trash delete-item-button text-bg-danger shadow p-2"
                                     title="<fmt:message key="label.delete" />"
                                     aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.delete" /></spring:escapeBody>"
@@ -303,16 +303,17 @@
 
                         <c:if test="${!item.complete && !finishedLock}">
                             <button type="button" onClick="javascript:completeItem(${item.uid})"
-                                    class="complete-item-button btn btn-success no-shadow ms-2">
+                                    class="complete-item-button btn btn-success no-shadow ms-2"
+                                    ${mode == 'teacher'? 'disabled' : ''}>
                                 <i class="fa-solid fa-pen-to-square fa-xl me-1"></i>
                                 <fmt:message key="label.mark.completed" />
                             </button>
                         </c:if>
 
                         <c:if test="${item.complete || !finishedLock}">
-								<span class="text-bg-success icon-complete shadow p-2 ms-2 ${(!item.complete && !finishedLock) ? 'd-none' : ''}">
-									<i class="fa-regular fa-square-check fa-xl" title='<fmt:message key="label.completed" />'></i>
-								</span>
+							<span class="text-bg-success icon-complete shadow p-2 ms-2 ${(!item.complete && !finishedLock) ? 'd-none' : ''}">
+								<i class="fa-regular fa-square-check fa-xl" title='<fmt:message key="label.completed" />'></i>
+							</span>
                         </c:if>
                     </div>
                 </div>
@@ -345,7 +346,7 @@
                         <fmt:message key="label.check.for.new" />
                     </button>
                 </c:if>
-                <c:if test="${not finishedLock}">
+                <c:if test="${not finishedLock && mode != 'teacher'}">
                     <c:choose>
                         <c:when test="${resource.allowAddFiles && resource.allowAddUrls}">
                             <button onclick="javascript:gotoURL()" type="button" class="btn btn-secondary">
Index: lams_tool_scratchie/web/pages/learning/learning.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f
--- lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
@@ -372,7 +372,8 @@
 
                     // reset ping timer
                     websocketPing('scratchieTimeLimit${scratchie.contentId}', true);
-                });
+                }
+            );
         });
 
         function displayCountdown(secondsLeft){