Index: lams_learning/web/discussion/monitor5.jsp
===================================================================
diff -u -rfc63987bf348f0821378370cd71e6b933129edfd -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_learning/web/discussion/monitor5.jsp	(.../monitor5.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
+++ lams_learning/web/discussion/monitor5.jsp	(.../monitor5.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -22,21 +22,21 @@
 		/* Start button is hidden by default */
 		display: none;
 	}
-	
+
 	.discussion-sentiment-table-header-row td {
 		/* Table headers look better this way */
 		font-weight: bold;
 		text-align: left !important;
 	}
-	
+
 	.discussion-sentiment-table-stay-header-row td {
 		background-color: rgba(255, 195, 55, 1);
 	}
-	
+
 	.discussion-sentiment-table-move-header-row td {
 		background-color: rgba(5, 204, 214, 1);
 	}
-	
+
 	.discussion-sentiment-table-option-row td:first-child {
 		/* Option cells are slightly moved to the right */
 		padding-left: 30px;
@@ -64,8 +64,8 @@
 		 var widget = $('#discussion-sentiment-chart-card-content-' + toolQuestionUid + (burningQuestionUid ? '-' + burningQuestionUid : ''))
 		 		.data('stop', true)
 				.closest('.discussion-sentiment-chart-card').addClass('disabled');
-		$('.discussion-sentiment-stop-button', widget).remove();	
-		$('.discussion-sentiment-start-button', widget).show();	
+		$('.discussion-sentiment-stop-button', widget).remove();
+		$('.discussion-sentiment-start-button', widget).show();
 	}
 
 	function getDiscussionSentimentMonitorData(toolQuestionUid, burningQuestionUid) {
@@ -83,7 +83,7 @@
 				}
 
 				// process raw data in response, which is "option" -> "number of votes"
-				var data = response.votes, 
+				var data = response.votes,
 					stayVotes  = 0,
 					moveVotes  = 0,
 					idSuffix = toolQuestionUid + (burningQuestionUid ? '-' + burningQuestionUid : '');
@@ -102,7 +102,7 @@
 					}
 				}
 				$('#discussion-sentiment-table-move-header-votes-' + idSuffix).text(moveVotes);
-				
+
 				var totalVotes = stayVotes + moveVotes;
 				$('#discussion-sentiment-votes-' + idSuffix).text(totalVotes);
 				var stayPercent = totalVotes === 0 ? 0 : Math.round(stayVotes / totalVotes * 100);
@@ -115,7 +115,7 @@
 						// currently options are 1-4 (stay) and 11-14 (move)
 						continue;
 					}
-					
+
 					var votes = data[optionNumber],
 						optionRow = $('#discussion-sentiment-table-option-row-' + idSuffix + '-' + optionNumber);
 					if (votes && totalVotes > 0) {
@@ -147,7 +147,7 @@
 
 				// create a new chart
 				chartCanvas = $('<canvas />').appendTo(chartCell);
-				
+
 				var ctx = chartCanvas[0].getContext('2d'),
 					chart = new Chart(ctx, {
 						type : 'doughnut',
@@ -163,7 +163,7 @@
 								data : chartData,
 								backgroundColor : [ 'rgba(255, 195, 55, 1)',
 													'rgba(5, 204, 214, 1)'
-													
+
 												  ],
 								borderWidth : 0,
 							} ],
@@ -201,16 +201,16 @@
 			}
 		});
 	}
-	
+
 	$(document).ready(function(){
 		var toolQuestionUid = ${param.toolQuestionUid},
 			burningQuestionUid = '${param.burningQuestionUid}',
 			idSuffix = toolQuestionUid + (burningQuestionUid ? '-' + burningQuestionUid : ''),
 			// how often to refresh the chart
 			dataRefreshInterval = 5 * 1000;
 		getDiscussionSentimentMonitorData(toolQuestionUid, burningQuestionUid);
-		
-	
+
+
 		var dataRefresh = window.setInterval(function(){
 			var cardContent = $('#discussion-sentiment-chart-card-content-' + idSuffix),
 				// If in TBL monitor the tab with the chart got refreshed, then old interval is still ticking.
@@ -222,7 +222,7 @@
 			}
 			getDiscussionSentimentMonitorData(toolQuestionUid, burningQuestionUid);
 		}, dataRefreshInterval);
-	
+
 		$('#discussion-sentiment-chart-card-content-' + idSuffix).data('dataRefresh', dataRefresh);
 	});
 </script>
@@ -253,9 +253,9 @@
 
     <div id="discussion-sentiment-chart-card-content-${idSuffix}" class="card-body container-fluid">
 		<div class="row">
-			<div class="col-xs-12 col-sm-6" id="discussion-sentiment-chart-cell-${idSuffix}">
+			<div class="discussion-sentiment-chart-cell offset-sm-2 col-sm-10 offset-lg-1 col-lg-5 offset-xl-2 col-xl-3" id="discussion-sentiment-chart-cell-${idSuffix}">
 			</div>
-			<div class="col-xs-12 col-sm-6">
+			<div class="col-sm-12 col-lg-6 offset-xl-1 col-xl-6">
 				<table class="table">
 			       	 <tr class="discussion-sentiment-table-header-row discussion-sentiment-table-stay-header-row">
 			       	 	<td>
Index: lams_monitoring/web/grouping/viewGroups.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_monitoring/web/grouping/viewGroups.jsp	(.../viewGroups.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_monitoring/web/grouping/viewGroups.jsp	(.../viewGroups.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -19,7 +19,6 @@
   http://www.gnu.org/licenses/gpl.txt
 --%>
 <!DOCTYPE html>
-
 <%@ include file="/taglibs.jsp"%>
 
 <lams:html>
@@ -29,11 +28,8 @@
 		
 		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
     </lams:head>
-    
-    <body class="component">
-		<lams:Page5 type="admin" title="${title}">
-		
-			<div class="container-fluid">
+
+	<lams:PageAdmin title="${title}">
 				<c:choose>
 				<c:when test="${empty groups}">
 					<fmt:message key="label.grouping.no.groups.created"/>
@@ -85,12 +81,5 @@
 					</c:forEach> 
 				</c:otherwise>
 				</c:choose>	
-			</div>
-			<div id="footer"></div>
-		</lams:Page5>
-
-		<div id="footer">
-		</div><!--closes footer-->
-
-    </body>
-</lams:html>
\ No newline at end of file
+	</lams:PageAdmin>
+</lams:html>
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -410,7 +410,6 @@
         },
 
         success : function(response) {
-
             // update lesson state label
             lessonStateId = +response.lessonStateID;
             var label = null,
@@ -445,7 +444,8 @@
                     labelColour = 'danger';
                     break;
             }
-            $('#lessonStateLabel').attr('class', 'btn btn-sm btn-' + labelColour).html(label + ' <i class="fa-solid fa-angles-down"></i>');
+            $('#lessonStateLabel').attr('class', 'btn btn-sm btn-' + labelColour)
+                .html(label + (lessonStateId == 7 ? '' : '<i class="fa-solid fa-angles-down"></i>'));
 
             // update available options in change state dropdown menu
             var selectField = $('#lessonStateField');
@@ -478,9 +478,8 @@
                 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 ) {
@@ -768,7 +767,8 @@
         case 7:
             showConfirm(LABELS.LESSON_REMOVE_ALERT, function() {
                 showConfirm(LABELS.LESSON_REMOVE_DOUBLECHECK_ALERT, function() {
-                    method = "removeLesson";
+                    // this is a callback, so standard processing won't work here
+                    applyStateChange(state, "removeLesson");
                 });
             });
             break;
@@ -1898,7 +1898,7 @@
                 }
                 $(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL))
                     .css({
-                        'left'        : learnerIndex * (activity.learnerCount < 5 ? 46 : 28)  + 'px',
+                        'left'        : learnerIndex * (activity.learnerCount < 4 ? 46 : 28)  + 'px',
                         'z-index'     : 100 + learnerIndex,
                         'padding-top' : '2px'
                     })
@@ -2430,12 +2430,12 @@
                 $('.accordion-button', itemHeader)
                     .attr('data-bs-target', '#' + itemCollapseId)
                     .attr('aria-controls', itemCollapseId)
-                    .prepend('<span>' + learner.firstName + ' ' + learner.lastName + '</span>')
+                    .prepend('<span>' + learner.lastName + ', ' + learner.firstName + '</span>')
                     .prepend(portraitSmall);
                 $('.accordion-completed-activity-count', itemHeader).text(learner.completedActivityCount).tooltip();
                 $('.accordion-completed-lesson', itemHeader).toggle(learner.completedLesson).tooltip();
 
-                $('.learners-accordion-name', item).text(learner.firstName + ' ' + learner.lastName);
+                $('.learners-accordion-name', item).text(learner.lastName + ', ' + learner.firstName);
                 $('.learners-accordion-login', item).html('<i class="fa-regular fa-user"></i>' + learner.login);
                 $('.learners-accordion-email', item).html('<i class="fa-regular fa-envelope"></i><a href="mailto:' + learner.email + '">'
                     + learner.email + '</a>');
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -330,69 +330,77 @@
 						<dt><fmt:message key="lesson.state"/>
 						</dt>
 						<dd>
-							<button data-bs-toggle="collapse" data-bs-target="#changeState" id="lessonStateLabel" class="lessonManageField"></button>
-							<div style="display:inline-block;vertical-align: middle;"><span id="lessonStartDateSpan" class="lessonManageField loffset5"></span>
-								<span id="lessonFinishDateSpan" class="lessonManageField loffset5"></span></div>
+							<button data-bs-toggle="collapse" data-bs-target="#changeState" id="lessonStateLabel" class="lessonManageField"
+								<c:if test="${lesson.lessonStateID eq 7}">
+									disabled
+								</c:if>
+							></button>
+							<c:if test="${lesson.lessonStateID != 7}">
+								<div style="display:inline-block;vertical-align: middle;">
+									<span id="lessonStartDateSpan" class="lessonManageField loffset5"></span>
+									<span id="lessonFinishDateSpan" class="lessonManageField loffset5"></span>
+								</div>
 
-							<!--  Change lesson status or start/schedule start -->
-							<div class="collapse offset10" id="changeState">
-								<div id="lessonScheduler">
-									<form>
-										<div id="lessonStartApply">
-											<div class="form-group mt-2" >
-												<label for="scheduleDatetimeField" class="form-label"><fmt:message key="lesson.start"/></label>
-												<input class="lessonManageField form-control-sm" id="scheduleDatetimeField" type="text" autocomplete="nope" />
-											</div>
+								<!--  Change lesson status or start/schedule start -->
+								<div class="collapse offset10" id="changeState">
+									<div id="lessonScheduler">
+										<form>
+											<div id="lessonStartApply">
+												<div class="form-group mt-2" >
+													<label for="scheduleDatetimeField" class="form-label"><fmt:message key="lesson.start"/></label>
+													<input class="lessonManageField form-control-sm" id="scheduleDatetimeField" type="text" autocomplete="nope" />
+												</div>
 
-											<div class="mt-2">
-												<a id="scheduleLessonButton" class="btn btn-sm btn-default lessonManageField" href="#"
-												   onClick="javascript:scheduleLesson()"
-												   title='<fmt:message key="button.schedule.tooltip"/>'>
-													<fmt:message key="button.schedule"/>
-												</a>
-												<a id="startLessonButton" class="btn btn-sm btn-secondary" href="#"
-												   onClick="javascript:startLesson()"
-												   title='<fmt:message key="button.start.now.tooltip"/>'>
-													<fmt:message key="button.start.now"/>
-												</a>
+												<div class="mt-2">
+													<a id="scheduleLessonButton" class="btn btn-sm btn-default lessonManageField" href="#"
+													   onClick="javascript:scheduleLesson()"
+													   title='<fmt:message key="button.schedule.tooltip"/>'>
+														<fmt:message key="button.schedule"/>
+													</a>
+													<a id="startLessonButton" class="btn btn-sm btn-secondary" href="#"
+													   onClick="javascript:startLesson()"
+													   title='<fmt:message key="button.start.now.tooltip"/>'>
+														<fmt:message key="button.start.now"/>
+													</a>
+												</div>
 											</div>
-										</div>
 
-										<div id="lessonDisableApply">
-											<div class="form-group mt-2">
-												<label for="disableDatetimeField" class="form-label d-block"><fmt:message key="lesson.end"/></label>
-												<input class="lessonManageField form-control-sm" id="disableDatetimeField" type="text"/>
+											<div id="lessonDisableApply">
+												<div class="form-group mt-2">
+													<label for="disableDatetimeField" class="form-label d-block"><fmt:message key="lesson.end"/></label>
+													<input class="lessonManageField form-control-sm" id="disableDatetimeField" type="text"/>
+												</div>
+												<div class="mt-2">
+													<a id="scheduleDisableLessonButton" class="btn btn-sm btn-secondary lessonManageField" href="#"
+													   onClick="javascript:scheduleDisableLesson()"
+													   title='<fmt:message key="button.schedule.disable.tooltip"/>'>
+														<fmt:message key="button.schedule"/>
+													</a>
+													<a id="disableLessonButton" class="btn btn-sm btn-secondary" href="#"
+													   onClick="javascript:disableLesson()"
+													   title='<fmt:message key="button.disable.now.tooltip"/>'>
+														<fmt:message key="button.disable.now"/>
+													</a>
+												</div>
 											</div>
-											<div class="mt-2">
-												<a id="scheduleDisableLessonButton" class="btn btn-sm btn-secondary lessonManageField" href="#"
-												   onClick="javascript:scheduleDisableLesson()"
-												   title='<fmt:message key="button.schedule.disable.tooltip"/>'>
-													<fmt:message key="button.schedule"/>
-												</a>
-												<a id="disableLessonButton" class="btn btn-sm btn-secondary" href="#"
-												   onClick="javascript:disableLesson()"
-												   title='<fmt:message key="button.disable.now.tooltip"/>'>
-													<fmt:message key="button.disable.now"/>
-												</a>
-											</div>
-										</div>
-									</form>
-								</div>
+										</form>
+									</div>
 
-								<div id="lessonStateChanger">
-									<select id="lessonStateField" class="form-select-sm mt-2" onchange="lessonStateFieldChanged()">
-										<option value="-1"><fmt:message key="lesson.select.state"/></option>
-									</select>
-									<span id="lessonStateApply">
-									<button type="button" class="lessonManageField btn btn-sm btn-primary"
-											onClick="javascript:changeLessonState()"
-											title='<fmt:message key="lesson.change.state.tooltip"/>'>
-								   		<i class="fa fa-check"></i> 
-								   		<span class="hidden-xs"><fmt:message key="button.apply"/></span>
-							    	</button>
-							    </span>
+									<div id="lessonStateChanger">
+										<select id="lessonStateField" class="form-select-sm mt-2" onchange="lessonStateFieldChanged()">
+											<option value="-1"><fmt:message key="lesson.select.state"/></option>
+										</select>
+										<span id="lessonStateApply">
+										<button type="button" class="lessonManageField btn btn-sm btn-primary"
+												onClick="javascript:changeLessonState()"
+												title='<fmt:message key="lesson.change.state.tooltip"/>'>
+											<i class="fa fa-check"></i>
+											<span class="hidden-xs"><fmt:message key="button.apply"/></span>
+										</button>
+									</span>
+									</div>
 								</div>
-							</div>
+							</c:if>
 						</dd>
 
 						<!--
Index: lams_monitoring/web/tblmonitor/teams.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -3,7 +3,6 @@
 <c:set var="ALPHABET_CAPITAL_LETTERS" value="${fn:split('A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z', ',')}" scope="request"/>
 
 <style>
-
 	#tbl-teams-tab-content .card-header,
 	#tbl-teams-tab-content a.card-title,
 	#tbl-teams-tab-content a.ira-modal-link,
@@ -263,41 +262,38 @@
 	}
 </script>
 
-
-<div id="tbl-teams-tab-content" class="container-fluid">
+<div id="tbl-teams-tab-content" class="container-main ms-4">
 	<!-- Tables -->
+	<div class="float-end">
+		<c:if test="${not empty groupsSetupUrl}">
+			<a href="<lams:LAMSURL/>${groupsSetupUrl}" class="btn btn-secondary">
+				<i class="fa fa-people-group me-1"></i>
+				<fmt:message key="label.teams.setup"/>
+			</a>
+		</c:if>
+	</div>
+	<h3 id="tbl-teams-tab-title">
+		<fmt:message key="label.students.teams"/>
+	</h3>
+	
+	<c:if test="${not empty chartNamesDataset}">
+		<canvas id="summary-chart" class="mt-3"></canvas>
+	</c:if>
 
-	<div class="row">
-		<div class="col-10 offset-1">
-			<div class="float-end">
-				<c:if test="${not empty groupsSetupUrl}">
-					<a href="<lams:LAMSURL/>${groupsSetupUrl}" class="btn btn-secondary">
-						<fmt:message key="label.teams.setup"/>
-					</a>
-				</c:if>
-			</div>
-			<h3 id="tbl-teams-tab-title" class="text-right">
-				<fmt:message key="label.students.teams"/>
-			</h3>
+	<div class="lcard mt-5 mb-3">
+		<div class="card-header" id="heading-all-learners">
+	        <span class="card-title collapsable-icon-left">
+	       		<button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" data-bs-target="#collapse-0" 
+						aria-expanded="true" aria-controls="collapse-0">
+					<fmt:message key="label.ira.tra.summary"/>
+				</button>
+			</span>
 		</div>
-	</div>
-	<div class="row">
-		<div class="col-10 offset-1">
-			<c:if test="${not empty chartNamesDataset}">
-				<canvas id="summary-chart" class="mt-3"></canvas>
-			</c:if>
 
-			<div class="card mt-5 mb-3">
-				<h5 class="card-header" data-bs-toggle="collapse" data-bs-target="#collapse-0">
-					<a class="text-decoration-none">
-						<fmt:message key="label.ira.tra.summary"/>
-					</a>
-					</h4>
-
-					<div id="collapse-0" class="card-body collapse show">
-						<div class="table-responsive">
-							<table class="table table-hover table-condensed">
-								<thead>
+		<div id="collapse-0" class="card-body collapse show">
+			<div class="table-responsive">
+				<table class="table table-hover table-condensed">
+							<thead>
 								<tr>
 									<th style="width: 30%">
 										<fmt:message key="label.teams"/>
@@ -321,14 +317,16 @@
 										</c:if>
 									</c:if>
 								</tr>
-								</thead>
+							</thead>
 
-								<tbody>
+							<tbody>
 								<c:forEach var="groupDto" items="${groupDtos}">
-
 									<tr>
 										<td>
-											<a href="#teams-panel-${groupDto.groupID}"><c:out value="${groupDto.groupName}" /></a>
+											<c:out value="${groupDto.groupName}" />										
+											<a href="#teams-panel-${groupDto.groupID}" class="btn btn-sm btn-light ms-1">
+												<i class="fa-regular fa-hand-point-down"></i>
+											</a>
 										</td>
 
 										<c:if test="${isIraAvailable}">
@@ -356,7 +354,6 @@
 										</c:if>
 
 										<c:if test="${isScratchieAvailable}">
-
 											<td class="text-center">
 												<c:choose>
 													<c:when test="${empty groupDto.traCorrectAnswerCount}">
@@ -451,23 +448,28 @@
 										</c:if>
 									</tr>
 								</c:if>
-								</tbody>
-							</table>
-						</div>
-					</div>
+							</tbody>
+				</table>
 			</div>
+		</div>
+	</div>
 
-			<div id="question-results-panel"></div>
+	<div id="question-results-panel"></div>
 
-			<c:forEach var="groupDto" items="${groupDtos}">
-				<div class="card mb-3" id="teams-panel-${groupDto.groupID}" tabindex="0">
-					<h5 class="card-header" data-bs-toggle="collapse" data-bs-target="#collapse-${groupDto.groupID}">
-						<a class="text-decoration-none" id="group-name-${groupDto.groupID}">
+	<c:forEach var="groupDto" items="${groupDtos}">
+		<div class="lcard mb-3" id="teams-panel-${groupDto.groupID}">
+			<div class="card-header" id="heading-all-learners">
+		        <span class="card-title collapsable-icon-left">
+		       		<button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" data-bs-target="#collapse-${groupDto.groupID}" 
+							aria-expanded="true" aria-controls="collapse-${groupDto.groupID}">
+						<span id="group-name-${groupDto.groupID}">
 							<c:out value="${groupDto.groupName}" />
-						</a>
-					</h5>
-
-					<div id="collapse-${groupDto.groupID}" class="card-body collapse show">
+						</span>
+					</button>
+				</span>
+			</div>
+	
+			<div id="collapse-${groupDto.groupID}" class="card-body collapse show p-2">
 						<c:if test="${isScratchieAvailable}">
 							<c:choose>
 								<c:when test="${empty groupDto.traCorrectAnswerCount}">
@@ -518,7 +520,6 @@
 									<c:set var="lowestCorrectAnswerCountPercentDelta" value="${groupDto.lowestCorrectAnswerCountPercentDelta}" />
 
 									<c:forEach var="userDto" items="${groupDto.userList}">
-
 										<tr>
 											<td>
 												<c:choose>
@@ -620,8 +621,7 @@
 						</c:if>
 
 						<!-- Change leader and Compare buttons -->
-						<div class="row">
-							<div class="col-xs-12 col-md-12 col-lg-12">
+						<div class="clearfix">
 								<c:if test="${isIraAvailable and isScratchieAvailable and not empty groupDto.userList and not empty groupDto.traCorrectAnswerCount}">
 									<button href="#" data-bs-toggle="modal" data-bs-target="#comparison-modal" type="button" class="btn btn-sm btn-secondary float-end"
 											data-ira-scores="
@@ -641,28 +641,22 @@
 								<c:if test="${not empty leaderselectionToolActivityId and not empty groupDto.userList}">
 									<button onClick="javascript:showChangeLeaderModal(${groupDto.groupID})" type="button"
 											class="btn btn-sm btn-secondary float-end me-2">
+										<i class="fa-solid fa-user-pen me-1"></i>
 										<fmt:message key="label.change.leader"/>
 									</button>
 								</c:if>
-							</div>
 						</div>
 						<!-- End change leader -->
-
-
-					</div>
-				</div>
-			</c:forEach>
-
+			</div>
 		</div>
-		<div class="col-2"></div>
-	</div>
+	</c:forEach>
 </div>
 
 <!-- modal chart -->
 <div class="modal fade" id="comparison-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 	<div class="modal-dialog">
 		<div class="modal-content">
-			<div class="modal-header">
+			<div class="modal-header text-bg-warning">
 				<h4 class="modal-title" id="exampleModalLabel">
 					<fmt:message key="label.bar.chart"/>
 				</h4>
@@ -682,7 +676,7 @@
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 
-			<div class="modal-header">
+			<div class="modal-header text-bg-warning">
 				<div class="modal-title">
 					<h4>
 						<fmt:message key="label.ira.responses.for"/>: <span id="ira-user-name-label"></span>
@@ -697,6 +691,7 @@
 
 			<div class="modal-footer">
 				<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
+					<i class="fa fa-check fa-lg me-1"></i>
 					<fmt:message key="button.ok"/>
 				</a>
 			</div>
@@ -711,7 +706,7 @@
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 
-			<div class="modal-header">
+			<div class="modal-header text-bg-warning">
 				<div class="modal-title">
 					<h4>
 						<fmt:message key="label.tra.responses.for"/>: <span id="tra-user-name-label"></span>
@@ -728,6 +723,7 @@
 
 			<div class="modal-footer">
 				<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
+					<i class="fa fa-check fa-lg me-1"></i>
 					<fmt:message key="button.ok"/>
 				</a>
 			</div>
@@ -739,4 +735,4 @@
 
 <!-- container for Change Leader modals -->
 <div id="change-leader-modals">
-</div>
\ No newline at end of file
+</div>
Index: lams_tool_assessment/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r3d1c6963589452c441b1670c2eecf3eb85a128a5 -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_assessment/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
+++ lams_tool_assessment/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -488,3 +488,7 @@
 label.learning.submit.all.confirm = Are you certain you wish to submit your responses? Once submitted, you will not have the ability to alter them.
 message.authoring.rat.questions.sync = You've made edits to the questions in this activity. Would you like to sync these changes with the corresponding TBL RAT activity?
 label.monitoring.user.summary.grade.auto = auto-graded
+label.disclosed.correct.answers = Correct answers have been disclosed
+label.disclosed.groups.answers = Groups' answers have been disclosed
+label.authoring.advance.rate.answers = Allow learners to rate peers' answers
+label.export.section.mark = Marks per section
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java	(.../LearningController.java)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/LearningController.java	(.../LearningController.java)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -55,6 +55,7 @@
 import org.lamsfoundation.lams.tool.assessment.model.AssessmentSession;
 import org.lamsfoundation.lams.tool.assessment.model.AssessmentUser;
 import org.lamsfoundation.lams.tool.assessment.model.QuestionReference;
+import org.lamsfoundation.lams.tool.assessment.service.AssessmentServiceImpl;
 import org.lamsfoundation.lams.tool.assessment.service.IAssessmentService;
 import org.lamsfoundation.lams.tool.assessment.util.AssessmentSessionComparator;
 import org.lamsfoundation.lams.tool.assessment.util.SequencableComparator;
@@ -115,6 +116,7 @@
 public class LearningController {
 
     private static Logger log = Logger.getLogger(LearningController.class);
+    private static Logger logAutosave = Logger.getLogger(AssessmentServiceImpl.class.getName() + "_autosave");
 
     @Autowired
     @Qualifier("laasseAssessmentService")
@@ -294,7 +296,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) && !mode.isTeacher();
+		!assessment.isUseSelectLeaderToolOuput() || assessment.isUseSelectLeaderToolOuput() && isUserLeader;
 
 	//showResults if user has finished the last result
 	boolean showResults = (lastResult != null) && (lastResult.getFinishDate() != null);
@@ -452,8 +454,7 @@
 	    if (questionEtherpadEnabled) {
 		// get all users from the group, even if they did not reach the Scratchie yet
 		// order them by first and last name
-		Collection<User> allGroupUsers = service.getAllGroupUsers(toolSessionId).stream()
-			.sorted(Comparator.comparing(u -> u.getFirstName() + u.getLastName()))
+		Collection<User> allGroupUsers = service.getAllGroupUsers(toolSessionId).stream().sorted()
 			.collect(Collectors.toList());
 		request.setAttribute(AssessmentConstants.ATTR_ALL_GROUP_USERS, allGroupUsers);
 	    }
@@ -468,6 +469,7 @@
     @PostMapping("/nextPage")
     public String nextPage(HttpServletRequest request)
 	    throws ServletException, IllegalAccessException, InvocationTargetException, NoSuchMethodException {
+//	printIncomingParameters(request);
 	return nextPage(request, false, -1);
     }
 
@@ -695,6 +697,8 @@
     @ResponseBody
     public String autoSaveAnswers(HttpServletRequest request, HttpServletResponse response)
 	    throws IllegalAccessException, InvocationTargetException, NoSuchMethodException, IOException {
+//	printIncomingParameters(request);
+
 	SessionMap<String, Object> sessionMap = getSessionMap(request);
 	if (sessionMap == null) {
 	    log.warn("No sessionMap found in session for user: " + request.getRemoteUser());
@@ -822,6 +826,28 @@
 
 	    } else if (questionType == QbQuestion.TYPE_ESSAY) {
 		String answer = request.getParameter(AssessmentConstants.ATTR_QUESTION_PREFIX + i);
+
+		boolean isAnswerNowBlank =
+			StringUtils.isNotBlank(questionDto.getAnswer()) && StringUtils.isBlank(answer);
+
+		if (logAutosave.isTraceEnabled()) {
+		    AssessmentUser learner = (AssessmentUser) sessionMap.get(AssessmentConstants.ATTR_USER);
+		    if (learner != null) {
+			StringBuilder logBuilder = new StringBuilder("For learner ").append(learner.getUid())
+				.append(" \"").append(learner.getLoginName()).append("\" for essay question ")
+				.append(questionUid).append(" the answer was \"").append(questionDto.getAnswer());
+			if (isAnswerNowBlank) {
+			    logBuilder.append("\" and now it is blank, skipping save to session.");
+			} else {
+			    logBuilder.append("\" and now it is \"").append(answer).append("\"");
+			}
+			logAutosave.trace(logBuilder.toString());
+		    }
+		}
+		if (isAnswerNowBlank) {
+		    continue;
+		}
+
 		if (questionDto.getCodeStyle() == null) {
 		    answer = answer.replaceAll("[\n\r\f]", "");
 		} else {
@@ -1303,7 +1329,7 @@
 	if ((mode != null) && !mode.isTeacher() && !isAutosave && isResultsStored
 		&& assessment.isNotifyTeachersOnAttemptCompletion()) {
 	    AssessmentUser assessmentUser = getCurrentAssessmentUser(toolSessionId);
-	    String fullName = assessmentUser.getLastName() + " " + assessmentUser.getFirstName();
+	    String fullName = assessmentUser.getFullName();
 	    service.notifyTeachersOnAttemptCompletion(toolSessionId, fullName);
 	}
 
@@ -1346,4 +1372,21 @@
 	request.setAttribute(AssessmentConstants.ATTR_SESSION_MAP_ID, sessionMapID);
 	return (SessionMap<String, Object>) request.getSession().getAttribute(sessionMapID);
     }
+
+//    private void printIncomingParameters(HttpServletRequest request) {
+//	if (!logAutosave.isTraceEnabled()) {
+//	    return;
+//	}
+//	StringBuilder logBuilder = new StringBuilder("Incoming parameters for autosave/next page\n");
+//	Enumeration<String> parameterNames = request.getParameterNames();
+//	while (parameterNames.hasMoreElements()) {
+//	    String paramName = parameterNames.nextElement();
+//	    String[] paramValues = request.getParameterValues(paramName);
+//	    for (int i = 0; i < paramValues.length; i++) {
+//		String paramValue = paramValues[i];
+//		logBuilder.append(paramName).append(" = ").append(paramValue).append('\n');
+//	    }
+//	}
+//	logAutosave.trace(logBuilder.toString());
+//    }
 }
\ No newline at end of file
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java
===================================================================
diff -u -r62268e7ff195cf0f4cd2f3cdbb79b603ade5449d -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision 62268e7ff195cf0f4cd2f3cdbb79b603ade5449d)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -358,7 +358,7 @@
 		String gradeString = request.getParameter(AssessmentConstants.PARAM_GRADE);
 		if (StringUtils.isNotBlank(gradeString) && !gradeString.strip().equals("-")) {
 		    newGrade = Float.valueOf(gradeString);
-		    responseText = teacher.getLastName() + " " + teacher.getFirstName();
+		    responseText = teacher.getFullName();
 		}
 	    } else if (column.equals(AssessmentConstants.PARAM_MARKER_COMMENT)) {
 		markerComment = request.getParameter(AssessmentConstants.PARAM_MARKER_COMMENT);
@@ -485,7 +485,7 @@
 	    ArrayNode userData = JsonNodeFactory.instance.arrayNode();
 	    userData.add(userDto.getUserId());
 	    userData.add(userDto.getSessionId());
-	    String fullName = HtmlUtils.htmlEscape(userDto.getFirstName() + " " + userDto.getLastName());
+	    String fullName = HtmlUtils.htmlEscape(userDto.getFullName());
 	    userData.add(fullName);
 	    userData.add(userDto.getGrade());
 	    if (userDto.getPortraitId() != null) {
@@ -595,7 +595,7 @@
 	for (AssessmentUserDTO userDto : userDtos) {
 
 	    Long questionResultUid = userDto.getQuestionResultUid();
-	    String fullName = HtmlUtils.htmlEscape(userDto.getFirstName() + " " + userDto.getLastName());
+	    String fullName = HtmlUtils.htmlEscape(userDto.getFullName());
 
 	    ArrayNode userData = JsonNodeFactory.instance.arrayNode();
 	    if (questionResultUid != null) {
@@ -996,7 +996,7 @@
 		ObjectNode userJSON = JsonNodeFactory.instance.objectNode();
 		userJSON.put("value", "user-" + user.getUserId());
 
-		String name = user.getFirstName() + " " + user.getLastName() + " (" + user.getLogin() + ")";
+		String name = user.getFullName() + " (" + user.getLogin() + ")";
 		if (grouping != null) {
 		    Group group = grouping.getGroupBy(user);
 		    if (group != null && !group.isNull()) {
@@ -1049,7 +1049,7 @@
 	    userJSON.put("userId", user.getUserId());
 	    userJSON.put("adjustment", timeLimitAdjustments.get(user.getUserId().intValue()));
 
-	    String name = user.getFirstName() + " " + user.getLastName() + " (" + user.getLogin() + ")";
+	    String name = user.getFullName() + " (" + user.getLogin() + ")";
 	    if (grouping != null) {
 		Group group = grouping.getGroupBy(user);
 		if (group != null && !group.isNull()) {
Index: lams_tool_assessment/web/pages/learning/parts/allquestions.jsp
===================================================================
diff -u -r3d1c6963589452c441b1670c2eecf3eb85a128a5 -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_assessment/web/pages/learning/parts/allquestions.jsp	(.../allquestions.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
+++ lams_tool_assessment/web/pages/learning/parts/allquestions.jsp	(.../allquestions.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -4,8 +4,7 @@
     <%-- Prepare same content for each question Etherpad. Each group participant's first and last name --%>
     <c:set var="questionEtherpadContent">
         <c:forEach items="${allGroupUsers}" var="user">
-            <c:out value="${user.firstName}" />&nbsp;<c:out
-                value="${user.lastName}" />:<br />
+			<c:out value="${user.getFullName()}" />:<br />
             <br />
             <br />
         </c:forEach>
Index: lams_tool_assessment/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r8e0b838435f2f4ad7668626d93162f857e07b1cf -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
+++ lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -66,7 +66,6 @@
 	    display: none;
 	}
 
-
 @media (min-width: 992px) {
     .bd-layout {
         display:grid;
@@ -265,6 +264,11 @@
 .nav-pills .nav-link {
 	padding: 0.25rem !important;
 }
+
+	.discussion-sentiment-chart-cell > canvas {
+		max-width: 400px;
+		margin: auto;
+	}
 </style>
 
 <script>
Index: lams_tool_daco/web/pages/monitoring/listRecords.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_daco/web/pages/monitoring/listRecords.jsp	(.../listRecords.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_daco/web/pages/monitoring/listRecords.jsp	(.../listRecords.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,89 +1,71 @@
-<%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
+<%@ include file="/common/taglibs.jsp"%>
+<%-- This page/learning/listRecords.jsp page modifies its content depending on the page it was included from. --%>
+<c:if test="${not empty param.includeMode}">
+	<c:set var="includeMode" value="${param.includeMode}" />
+</c:if>
+<c:if test="${empty includeMode}">
+	<c:set var="includeMode" value="monitoring" />
+</c:if>
+<c:if test="${not empty param.sessionMapID}">
+	<c:set var="sessionMapID" value="${param.sessionMapID}" />
+</c:if>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="userGroup" value="${sessionMap.monitoringSummary}" />
 
-<lams:html> 
-<lams:head>
-		<%-- This page/learning/listRecords.jsp page modifies its content depending on the page it was included from. --%>
-		<c:if test="${not empty param.includeMode}">
-			<c:set var="includeMode" value="${param.includeMode}" />
-		</c:if>
-		<c:if test="${empty includeMode}">
-			<c:set var="includeMode" value="monitoring" />
-		</c:if>
-		<c:if test="${not empty param.sessionMapID}">
-			<c:set var="sessionMapID" value="${param.sessionMapID}" />
-		</c:if>
-		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-		<c:set var="userGroup" value="${sessionMap.monitoringSummary}" />
+<c:set var="title"><fmt:message key="title.monitoring.recordlist" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<link href="<c:url value='/includes/css/daco.css'/>" rel="stylesheet" type="text/css">
 			
-		<%@ include file="/common/header.jsp"%>
+	<lams:JSImport src="includes/javascript/dacoCommon.js" relative="true" />
+	<script type="text/javascript">
+		function checkCheckbox(checkboxName){
+			var checkbox = document.getElementById(checkboxName);
+			checkbox.checked=true;
+		}	
+	</script> 
 
-		<lams:JSImport src="includes/javascript/dacoMonitoring.js" relative="true" />
-		<script type="text/javascript">
-			function checkCheckbox(checkboxName){
-				var checkbox = document.getElementById(checkboxName);
-				checkbox.checked=true;
-			}	
-		</script> 
-		<title>
-			<fmt:message key="title.monitoring.recordlist" />
-		</title>
-</lams:head> 
-<body class="stripes">
-
-<c:set var="title"><fmt:message key="title.monitoring.recordlist" /></c:set>
-<lams:Page type="monitor" title="${title}">
-
-	<%-- Switch between the horizontal and vertical views --%>
-	<c:url var="changeViewUrl" value='/monitoring/changeView.do'>
-		<c:param name="sessionMapID" value="${sessionMapID}" />
-		<c:param name="toolSessionID" value="${toolSessionID}" />
-		<c:param name="userId" value="${userId}" />
-		<c:param name="sort" value="${sort}" />
-	</c:url>
-
-	<span class="pull-right voffset5">
-	<c:choose>
-		<c:when test="${sessionMap.learningView=='horizontal'}">
-		<i class="fa fa-ellipsis-h loffset10" title="<fmt:message key="label.common.view.change" />"
-		 onclick="javascript:document.location.href='${changeViewUrl}'" id="ellipsis"></i>
-		</c:when>
-		<c:otherwise>
-		<i class="fa fa-ellipsis-v loffset10" title="<fmt:message key="label.common.view.change" />"
-		 onclick="javascript:document.location.href='${changeViewUrl}'" id="ellipsis"></i>
-		</c:otherwise>
-	</c:choose>
-	</span>
-
-	<h4>
-	<c:if test="${sessionMap.isGroupedActivity}">
-		<fmt:message key="label.monitoring.group" />: ${userGroup.sessionName}
-	</c:if>
-	</h4>
+	<div class="container-main">
+		<h1 class="mb-4">
+			${title}
+		</h1>
 	
- 	<c:forEach var="user" items="${userGroup.users}">
-		<table class="table table-striped table-condensed">
-		<tr>
-			<th><fmt:message key="label.monitoring.fullname" /></th>
-			<th><fmt:message key="label.monitoring.recordcount" /></th>
-		</tr>
-		<tr>
-			<td style="height: 20px;">
-				 <c:out value="${user.getFullName()}" escapeXml="true"/>
-			</td>
-			<td>
-				 ${user.recordCount}
-			</td>
-		</tr>
-		</table>
- 		<c:if test="${not empty user.records}">
-			<c:set var="recordList" value="${user.records}" />
- 			<%@ include file="/pages/learning/listRecords.jsp" %>
+		<c:if test="${sessionMap.isGroupedActivity}">
+			<h2>
+				<fmt:message key="label.monitoring.group" />: ${userGroup.sessionName}
+			</h2>
 		</c:if>
-	</c:forEach> 
+		
+	 	<c:forEach var="user" items="${userGroup.users}">
+	 		<h3 class="card-subheader fs-4">
+	 			<fmt:message key="label.export.file.user" />:&nbsp;<c:out value="${user.getFullName}" escapeXml="true"/>
+	 		</h3>
+			
+	 		<c:if test="${not empty user.records}">
+				<c:set var="recordList" value="${user.records}" />
+	 			<%@ include file="/pages/learning/listRecords.jsp" %>
+			</c:if>
+		</c:forEach> 
 
-	<div id="footer">
+		<div class="activity-bottom-buttons">
+			<button type="button" onclick="window.close()" class="btn btn-primary">
+				<i class="fa-regular fa-circle-xmark me-1"></i>
+				<fmt:message key="label.close" />
+			</button>
+
+			<%-- Switch between the horizontal and vertical views --%>
+			<c:url var="changeViewUrl" value='/monitoring/changeView.do'>
+				<c:param name="sessionMapID" value="${sessionMapID}" />
+				<c:param name="toolSessionID" value="${toolSessionID}" />
+				<c:param name="userId" value="${userId}" />
+				<c:param name="sort" value="${sort}" />
+			</c:url>
+		
+			<button type="button" class="btn btn-secondary btn-sm me-2" onclick="document.location.href='${changeViewUrl}'">
+				<i class="fa-solid ${sessionMap.learningView=='horizontal' ? 'fa-ellipsis' : 'fa-ellipsis-vertical'} me-2" 
+						title="<fmt:message key="label.common.view.change" />" id="ellipsis"></i>
+				<fmt:message key="label.common.view.change" />
+			</button>
+		</div>
 	</div>
-</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+</lams:PageMonitor>
Index: lams_tool_doku/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r3f68e0187da7a713d110f42e55ba10a081f39786 -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_doku/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 3f68e0187da7a713d110f42e55ba10a081f39786)
+++ lams_tool_doku/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -16,10 +16,10 @@
 
 <%@ page import="org.lamsfoundation.lams.tool.dokumaran.DokumaranConstants"%>
 
-<lams:css suffix="jquery.jRating"/>
-<link href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css"/>
-<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css" />
+<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
+<link href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css"/>
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager5.css" />
 <link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css">
 
 <style media="screen,projection" type="text/css">
@@ -173,14 +173,12 @@
 <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-editable.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
-<lams:JSImport src="includes/javascript/portrait.js" />
+<lams:JSImport src="includes/javascript/portrait5.js" />
 <lams:JSImport src="includes/javascript/etherpad.js" />
 <lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
 <script type="text/javascript">
-	//var for jquery.jRating.js
-	var pathToImageFolder = "${lams}images/css/",
-			//vars for rating.js
-			AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
+	//vars for rating.js
+	var		AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
 			YOUR_RATING_LABEL = '<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message></spring:escapeBody>',
 			MAX_RATES = 0,
 			MIN_RATES = 0,
@@ -550,7 +548,6 @@
 </c:if>
 
 <lams:JSImport src="includes/javascript/rating.js" />
-<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 
 <!-- Extra container div to isolate content from multiple Application Excercise tabs in TBL monitoring -->
 <div id="doku-monitoring-summary-${sessionMap.toolContentID}" class="doku-monitoring-summary">
@@ -669,7 +666,7 @@
 								<td>${groupSummary.sessionName}</td>
 								<td>
 									<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}"
-												 isItemAuthoredByUser="true"
+												 isDisplayOnly="true"
 												 hideCriteriaTitle="true" />
 								</td>
 							</tr>
@@ -762,7 +759,7 @@
 					</c:if>
 
 					<c:if test="${dokumaran.galleryWalkStarted and not dokumaran.galleryWalkReadOnly}">
-						<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}" isItemAuthoredByUser="true" />
+						<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}" isDisplayOnly="true" />
 					</c:if>
 
 					<lams:Etherpad groupId="${groupSummary.sessionId}" padId="${groupSummary.padId}"
@@ -801,7 +798,7 @@
 				<h4 class="marks-header">
 					<fmt:message key="label.monitoring.learner.marks.header"/>
 				</h4>
-				<lams:TSTable numColumns="2" dataId='toolSessionId="${groupSummary.sessionId}"'>
+				<lams:TSTable5 numColumns="2" dataId='toolSessionId="${groupSummary.sessionId}"'>
 					<th><fmt:message key="label.monitoring.learner.marks.name"/></th>
 					<th><fmt:message key="label.monitoring.learner.marks.mark"/>&nbsp;
 						<small>
@@ -810,7 +807,7 @@
 							</fmt:message>
 						</small>
 					</th>
-				</lams:TSTable>
+				</lams:TSTable5>
 			</div>
 
 			<c:if test="${sessionMap.isGroupedActivity}">
@@ -831,7 +828,7 @@
 
 	<div id="time-limit-panel-placeholder"></div>
 
-	<%@ include file="dateRestriction.jsp"%>
+	<lams:RestrictedUsageAccordian submissionDeadline="${submissionDeadline}"/>
 
 	<div id="change-leader-modals"></div>
 </div>
\ No newline at end of file
Index: lams_tool_doku/web/pages/monitoring/summary5.jsp
===================================================================
diff -u -r3f68e0187da7a713d110f42e55ba10a081f39786 -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_doku/web/pages/monitoring/summary5.jsp	(.../summary5.jsp)	(revision 3f68e0187da7a713d110f42e55ba10a081f39786)
+++ lams_tool_doku/web/pages/monitoring/summary5.jsp	(.../summary5.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -4,7 +4,7 @@
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 <c:set var="dokumaran" value="${sessionMap.dokumaran}" />
 
-<c:set var="timeLimitPanelUrl"><lams:LAMSURL/>monitoring/timeLimit5.jsp</c:set>
+<c:set var="timeLimitPanelUrl"><lams:LAMSURL/>monitoring/timeLimit.jsp</c:set>
 <c:url var="timeLimitPanelUrl" value="${timeLimitPanelUrl}">
 	<c:param name="toolContentId" value="${dokumaran.contentId}"/>
 	<c:param name="absoluteTimeLimitFinish" value="${dokumaran.absoluteTimeLimitFinishSeconds}"/>
@@ -16,8 +16,8 @@
 
 <%@ page import="org.lamsfoundation.lams.tool.dokumaran.DokumaranConstants"%>
 
-<lams:css suffix="jquery.jRating"/>
-<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css"/>
+<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css"/>
 <link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager5.css" />
 
 <style media="screen,projection" type="text/css">
@@ -148,14 +148,12 @@
 <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-editable.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
-<lams:JSImport src="includes/javascript/portrait.js" />
+<lams:JSImport src="includes/javascript/portrait5.js" />
 <lams:JSImport src="includes/javascript/etherpad.js" />
 <lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
 <script type="text/javascript">
-	//var for jquery.jRating.js
-	var pathToImageFolder = "${lams}images/css/",
-			//vars for rating.js
-			AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
+	//vars for rating.js
+	var	AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
 			YOUR_RATING_LABEL = '<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message></spring:escapeBody>',
 			MAX_RATES = 0,
 			MIN_RATES = 0,
@@ -378,7 +376,7 @@
 			// destroy existing absolute time limit counter before refresh
 			$('.absolute-time-limit-counter, .time-limit-widget-individual-counter').countdown('destroy');
 			let data = JSON.parse(event.data);
-			$('#time-limit-panel-placeholder').load('<lams:LAMSURL/>monitoring/timeLimit5.jsp?toolContentId=${dokumaran.contentId}&absoluteTimeLimitFinish=' + data.absoluteTimeLimitFinish
+			$('#time-limit-panel-placeholder').load('<lams:LAMSURL/>monitoring/timeLimit.jsp?toolContentId=${dokumaran.contentId}&absoluteTimeLimitFinish=' + data.absoluteTimeLimitFinish
 					+ '&relativeTimeLimit=' + data.relativeTimeLimit + '&absoluteTimeLimit=' + data.absoluteTimeLimit
 					+ '&isTbl=true&controllerContext=tool/ladoku11/monitoring');
 		});
@@ -496,7 +494,6 @@
 </c:if>
 
 <lams:JSImport src="includes/javascript/rating.js" />
-<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 
 <!-- Extra container div to isolate content from multiple Application Excercise tabs in TBL monitoring -->
 <div id="doku-monitoring-summary-${sessionMap.toolContentID}" class="doku-monitoring-summary container-fluid">
@@ -621,7 +618,7 @@
 										<td>${groupSummary.sessionName}</td>
 										<td>
 											<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}"
-														 isItemAuthoredByUser="true"
+														 isDisplayOnly="true"
 														 hideCriteriaTitle="true" />
 										</td>
 									</tr>
@@ -712,7 +709,7 @@
 							</c:if>
 
 							<c:if test="${dokumaran.galleryWalkStarted and not dokumaran.galleryWalkReadOnly}">
-								<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}" isItemAuthoredByUser="true" />
+								<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}" isDisplayOnly="true" />
 							</c:if>
 
 							<lams:Etherpad groupId="${groupSummary.sessionId}" padId="${groupSummary.padId}"
@@ -746,12 +743,12 @@
 						<h4>
 							<fmt:message key="label.monitoring.learner.marks.header"/>
 						</h4>
-						<lams:TSTable numColumns="2" dataId='toolSessionId="${groupSummary.sessionId}"'>
+						<lams:TSTable5 numColumns="2" dataId='toolSessionId="${groupSummary.sessionId}"'>
 							<th><fmt:message key="label.monitoring.learner.marks.name"/></th>
 							<th><fmt:message key="label.monitoring.learner.marks.mark"/>&nbsp;
 								<small><fmt:message key="label.monitoring.learner.marks.mark.tip"/></small>
 							</th>
-						</lams:TSTable>
+						</lams:TSTable5>
 					</div>
 
 					<c:if test="${sessionMap.isGroupedActivity}">
Index: lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/controller/MonitoringController.java
===================================================================
diff -u -rb3dd7f3d65e4eec044f69c253259b5ff743b6700 -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
+++ lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -163,8 +163,8 @@
 	Date submissionDeadline = forum.getSubmissionDeadline();
 	if (submissionDeadline != null) {
 	    HttpSession ss = SessionManager.getSession();
-	    org.lamsfoundation.lams.usermanagement.dto.UserDTO learnerDto = (org.lamsfoundation.lams.usermanagement.dto.UserDTO) ss
-		    .getAttribute(AttributeNames.USER);
+	    org.lamsfoundation.lams.usermanagement.dto.UserDTO learnerDto = (org.lamsfoundation.lams.usermanagement.dto.UserDTO) ss.getAttribute(
+		    AttributeNames.USER);
 	    TimeZone learnerTimeZone = learnerDto.getTimeZone();
 	    Date tzSubmissionDeadline = DateUtil.convertToTimeZoneFromDefault(learnerTimeZone, submissionDeadline);
 	    sessionMap.put(ForumConstants.ATTR_SUBMISSION_DEADLINE, tzSubmissionDeadline.getTime());
@@ -190,8 +190,8 @@
 
 	// teacher timezone
 	HttpSession ss = SessionManager.getSession();
-	org.lamsfoundation.lams.usermanagement.dto.UserDTO teacher = (org.lamsfoundation.lams.usermanagement.dto.UserDTO) ss
-		.getAttribute(AttributeNames.USER);
+	org.lamsfoundation.lams.usermanagement.dto.UserDTO teacher = (org.lamsfoundation.lams.usermanagement.dto.UserDTO) ss.getAttribute(
+		AttributeNames.USER);
 	TimeZone teacherTimeZone = teacher.getTimeZone();
 
 	Long sessionId = WebUtil.readLongParam(request, "sessionId");
@@ -257,7 +257,7 @@
 
 	    responseRow.put(ForumConstants.ATTR_USER_UID, user.getUid());
 	    responseRow.put(ForumConstants.ATTR_USER_ID, user.getUserId());
-	    responseRow.put("userName", HtmlUtils.htmlEscape(user.getLastName() + " " + user.getFirstName()));
+	    responseRow.put("userName", HtmlUtils.htmlEscape(user.getFullName()));
 
 	    int numberOfPosts = 0;
 	    boolean isAnyPostsMarked = false;
@@ -378,8 +378,7 @@
 
 		    cell = row.createCell(idx++);
 		    if (dto.getMessage() != null && dto.getMessage().getReport() != null) {
-			cell.setCellValue(
-				ExcelUtil.ensureCorrectCellLength(dto.getMessage().getReport().getComment()));
+			cell.setCellValue(ExcelUtil.ensureCorrectCellLength(dto.getMessage().getReport().getComment()));
 		    } else {
 			cell.setCellValue("");
 		    }
@@ -461,7 +460,7 @@
 	    int msgNum;
 	    float totalMsgMarkSum = 0;
 	    float msgMarkSum = 0;
-	    for (; iter.hasNext();) {
+	    for (; iter.hasNext(); ) {
 		MessageDTO msgDto = (MessageDTO) iter.next();
 		// get all message under this topic
 		List topicThread = forumService.getTopicThread(msgDto.getMessage().getUid());
@@ -676,7 +675,7 @@
 	    return "jsps/monitoring/viewmarks";
 
 	} else { // mark from view forum
-		 // display root topic rather than leaf one
+	    // display root topic rather than leaf one
 	    Long rootTopicId = forumService.getRootTopicId(msg.getUid());
 
 	    String redirect = "redirect:/learning/viewTopic.do";
@@ -704,8 +703,8 @@
 	if (dateParameter != null) {
 	    Date submissionDeadline = new Date(dateParameter);
 	    HttpSession ss = SessionManager.getSession();
-	    org.lamsfoundation.lams.usermanagement.dto.UserDTO teacher = (org.lamsfoundation.lams.usermanagement.dto.UserDTO) ss
-		    .getAttribute(AttributeNames.USER);
+	    org.lamsfoundation.lams.usermanagement.dto.UserDTO teacher = (org.lamsfoundation.lams.usermanagement.dto.UserDTO) ss.getAttribute(
+		    AttributeNames.USER);
 	    TimeZone teacherTimeZone = teacher.getTimeZone();
 	    tzSubmissionDeadline = DateUtil.convertFromTimeZoneToDefault(teacherTimeZone, submissionDeadline);
 	    formattedDate = DateUtil.convertToStringForJSON(tzSubmissionDeadline, request.getLocale());
@@ -738,4 +737,4 @@
 	}
 	return topicsByUser;
     }
-}
+}
\ No newline at end of file
Index: lams_tool_forum/web/jsps/monitoring/updatemarks.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_forum/web/jsps/monitoring/updatemarks.jsp	(.../updatemarks.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_forum/web/jsps/monitoring/updatemarks.jsp	(.../updatemarks.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,87 +1,92 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="sessionMap" value="${sessionScope[markForm.sessionMapID]}" />
+<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
 
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
-	<body class="stripes">
-			
-			<lams:Page type="monitor" title="${page.title.monitoring.edit.user.mark}">
+<c:set var="title"><fmt:message key="page.title.monitoring.edit.user.mark" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>			
+	<script type="text/javascript">
+		jQuery(document).ready(function() {
+			jQuery("time.timeago").timeago();
+		});
+	</script>
+	
+	<h1>
+		${title}
+	</h1>
 
-			<form:form action="updateMark.do" id="markForm" modelAttribute="markForm" method="post">
-			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+	<form:form action="updateMark.do" id="markForm" modelAttribute="markForm" method="post">
+		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+		<form:hidden path="sessionMapID"/>
+		<form:hidden path="topicID"/>
 
-			<c:set var="sessionMap" value="${sessionScope[markForm.sessionMapID]}" />
-			<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
-		    <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
-		    <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-			<form:hidden path="sessionMapID"/>
-			<form:hidden path="topicID"/>
-		
-			<p>
-				<fmt:message key="message.assign.mark" />&nbsp;
+		<p>
+			<fmt:message key="message.assign.mark" />&nbsp;
+			<span class="alert alert-warning">
 				<c:out value="${user.getFullName()}" />&nbsp;
 				<lams:Date value="${topic.message.updated}" timeago="true"/>
-			</p>		
+			</span>
+		</p>		
 			
-			<p>
-				<c:set var="viewtopic">
-				    <lams:WebAppURL />learning/viewTopic.do?topicID=${topic.message.uid}&create=${topic.message.created.time}&sessionMapID=${markForm.sessionMapID}
-				</c:set>
-				<a href="javascript:launchPopup('${viewtopic}','viewtopic')">
-					<c:out value="${topic.message.subject}" />
-				</a>
-				<c:if test="${topic.hasAttachment}">
-					<i class="fa fa-paperclip loffset5" title="<fmt:message key='message.label.attachment'/>"></i>
-				</c:if>
-			</p>
-			<lams:errors/>
+		<div class="clearfix mb-3">
+			<c:out value="${topic.message.subject}" />
+			<c:set var="viewtopic">
+			    <lams:WebAppURL />learning/viewTopic.do?topicID=${topic.message.uid}&create=${topic.message.created.time}&sessionMapID=${markForm.sessionMapID}&mode=teacher
+			</c:set>
+			<button type="button" onclick="launchPopup('${viewtopic}','viewtopic')" class="btn btn-sm btn-light ms-2">
+				<fmt:message key="page.title.monitoring.view.topic"/>
+				<i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
+			</button>
+			
+			<c:if test="${topic.hasAttachment}">
+				<div>			
+					<i class="fa fa-paperclip me-2 mt-2" title="<fmt:message key='message.label.attachment'/>"></i>
+					<c:forEach var="file" items="${topic.message.attachments}">
+						<span class="badge text-bg-warning bg-opacity-50 me-1 mt-3" title="<fmt:message key='message.label.attachment'/>">
+							<fmt:message key='message.label.attachment'/>&nbsp;<c:out value="${file.fileName}" />
+						</span>
+					</c:forEach>
+				</div>
+			</c:if>
+		</div>
 		
-			<div class="form-group">
-				<label for="mark"><fmt:message key="lable.topic.title.mark" />*</label>
-				<input type="text" name="mark" value="${markForm.mark}" class="form-control form-control-inline"/>
-			</div>
-			<div class="form-group">
-				<label for="comment"><fmt:message key="lable.topic.title.comment" /></label>
-				<lams:CKEditor id="comment"	value="${markForm.comment}" toolbarSet="DefaultMonitor">
-				</lams:CKEditor>
-			</div>
+		<lams:errors5/>
 		
+		<div class="mb-3">
+			<label for="mark">
+				<fmt:message key="lable.topic.title.mark" />*
+			</label>
+			<input type="text" name="mark" id="mark" value="${markForm.mark}" class="form-control form-control-inline"/>
+		</div>
+		<div class="mb-3">
+			<label for="comment">
+				<fmt:message key="lable.topic.title.comment" />
+			</label>
+			<lams:CKEditor id="comment"	value="${markForm.comment}" toolbarSet="DefaultMonitor">
+			</lams:CKEditor>
+		</div>
 		
-			<div class="pull-right">
-				<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="btn btn-default" />
+		<div class="activity-bottom-buttons">
+			<button type="submit" class="btn btn-primary">
+				<i class="fa-regular fa-circle-check me-1"></i>
+				<fmt:message key="lable.update.mark"/>
+			</button>
 							
-				<c:if test="${sessionMap.updateMode == 'listMarks'}">
-					<c:set var="cancelUrl">
-						<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${markForm.sessionMapID}&userUid=${user.uid}&toolSessionID=${sessionMap.toolSessionID}
-					</c:set>
-				</c:if>
-							
-				<c:if test="${sessionMap.updateMode == 'viewForum'}">
-					<c:set var="cancelUrl">
-							<c:url value="/learning/viewTopic.do"/>?sessionMapID=${markForm.sessionMapID}&topicID=${sessionMap.rootUid}
-					</c:set>
-				</c:if>
-			
-				<input type="button" onclick="location.href='${cancelUrl}';" class="btn btn-default" value="<fmt:message key="button.cancel"/>">
-			</div>
-			
-			<script type="text/javascript">
-			jQuery(document).ready(function() {
-				jQuery("time.timeago").timeago();
-			});
-		</script>
-		
-		</form:form>
-		
-
-			<div id="footer">
-			</div>
-
-			</lams:Page>
-	</body>
-</lams:html>
\ No newline at end of file
+			<c:if test="${sessionMap.updateMode == 'listMarks'}">
+				<c:set var="cancelUrl">
+					<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${markForm.sessionMapID}&userUid=${user.uid}&toolSessionID=${sessionMap.toolSessionID}
+				</c:set>
+			</c:if>
+			<c:if test="${sessionMap.updateMode == 'viewForum'}">
+				<c:set var="cancelUrl">
+					<c:url value="/learning/viewTopic.do"/>?sessionMapID=${markForm.sessionMapID}&topicID=${sessionMap.rootUid}
+				</c:set>
+			</c:if>
+			<button type="button" onclick="location.href='${cancelUrl}';" class="btn btn-secondary btn-icon-cancel me-2">
+				<fmt:message key="button.cancel"/>
+			</button>
+		</div>
+	</form:form>
+</lams:PageMonitor>
Index: lams_tool_forum/web/jsps/monitoring/viewmarks.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_forum/web/jsps/monitoring/viewmarks.jsp	(.../viewmarks.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_forum/web/jsps/monitoring/viewmarks.jsp	(.../viewmarks.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,99 +1,114 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
 
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
-	<body class="stripes">
+<c:set var="title"><fmt:message key="page.title.monitoring.view.user.mark" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<script type="text/javascript">
+		function closeAndRefreshParentMonitoringWindow() {
+			refreshParentMonitoringWindow();
+			window.close();
+		}
+	</script>
 			
-			<lams:Page type="monitor" title="${page.title.monitoring.view.user.mark}">
-
-			<style media="screen,projection" type="text/css">
-				.field-name {
-					padding-bottom: 0px;
-				}
-			</style>
-			<script type="text/javascript">
-				function closeAndRefreshParentMonitoringWindow() {
-					refreshParentMonitoringWindow();
-					window.close();
-				}
-			</script>
+	<h1>
+		${title}
+	</h1>
 			
-			<c:if test="${isMarksReleased}">
- 				<div class="alert alert-success">
- 					<fmt:message key="label.marks.released" />
- 				</div>
- 			</c:if>
+	<c:if test="${isMarksReleased}">
+ 		<div class="alert alert-success">
+ 			<fmt:message key="label.marks.released" />
+ 		</div>
+ 	</c:if>
 
-			<p>
-				<strong><c:out value="${user.getFullName()}" /></strong>&nbsp;
-				<fmt:message key="monitoring.user.post.topic" />
-			</p>
+	<p>
+		<strong><c:out value="${user.getFullName()}" /></strong>&nbsp;
+		<fmt:message key="monitoring.user.post.topic" />
+	</p>
+
+	<c:forEach items="${messages}" var="topic">
+		<div class="lcard ${highlightClass} msg" >
+			<c:choose>
+				<c:when test="${topic.message.isMonitor}">
+		           	<c:set var="textClass" value="text-warning"/>
+		            <c:set var="bgClass" value="bg-warning"/>
+		            <c:set var="iconClass" value ="fa-mortar-board ${textClass}"/>
+		        </c:when>
+				<c:otherwise>
+		          	<c:set var="textClass" value=""/>
+		            <c:set var="bgClass" value=""/>
+		            <c:set var="iconClass" value ="fa-user ${textClass}"/>
+		        </c:otherwise>
+		    </c:choose>
 			
-			<c:forEach items="${messages}" var="topic">
+			<div class="card-header">
+				<span class="${textClass}">
+					<span class="font-size-init float-end"> 
+						<i class="fa fa-xs ${iconClass}"></i> 
+						<lams:Date value="${topic.message.updated}" />
+					</span>
+					<c:out value="${topic.message.subject}" />
+				</span>
+			</div>
 			
-			<div class="panel panel-default ${highlightClass} msg" >
+			<div class="card-body ${bgClass} p-2">
+				<span><c:out value="${topic.message.body}" escapeXml="false" /></span>
 			
-				<c:choose>
-					<c:when test="${topic.message.isMonitor}">
-			            	<c:set var="textClass" value="text-info"/>
-			                <c:set var="bgClass" value="bg-info"/>
-			                <c:set var="iconClass" value ="fa-mortar-board ${textClass}"/>
-			            </c:when>
-					<c:otherwise>
-			            	<c:set var="textClass" value=""/>
-			                <c:set var="bgClass" value=""/>
-			                <c:set var="iconClass" value ="fa-user ${textClass}"/>
-			        </c:otherwise>
-			    </c:choose>
-			
-				<div class="panel-heading">
-					<h4 class="panel-title">
-					<span class="${textClass}">
-						<span style="float: right"> <i class="fa fa-xs ${iconClass}"></i> 
-							<lams:Date value="${topic.message.updated}" />
-						</span>
-						<c:out value="${topic.message.subject}" />
+				<c:forEach var="file" items="${topic.message.attachments}">
+					<span class="badge text-bg-warning bg-opacity-50 me-1 mt-3" title="<fmt:message key='message.label.attachment'/>">
+						<fmt:message key='message.label.attachment'/>&nbsp;<c:out value="${file.fileName}" />
 					</span>
-					</h4>
+				
+					<c:set var="downloadURL">
+						<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
+					</c:set>
+					<a href="<c:out value='${downloadURL}' escapeXml='false'/>" class="btn btn-sm btn-light">
+						<fmt:message key="label.download" />
+						<i class="fa-solid fa-download ms-1"></i>
+					</a>
+				</c:forEach>
+				
+				<div class="row mt-2">
+			  		<div class="col-2">
+			  			<strong><fmt:message key="label.number.of.replies" /></strong>
+			  		</div>
+					<div class="col">
+						${topic.message.replyNumber}
+					</div>
 				</div>
-			
-				<div class="panel-body ${bgClass}" >
-			
-				<div class="pull-right">
-						<form:form action="editMark.do" id="markForm" modelAttribute="markForm" method="post">
+				
+				<div class="row">
+					<div class="col-2">
+						<strong><fmt:message key="lable.topic.title.mark" /></strong>
+					</div>
+					<div class="col d-flex flex-row align-items-center">
+						<c:choose>
+							<c:when test="${empty topic.message.report.mark}">
+								<fmt:message key="message.not.avaliable" />
+							</c:when>
+							<c:otherwise>
+								<fmt:formatNumber value="${topic.message.report.mark}"  maxFractionDigits="2"/>
+							</c:otherwise>
+						</c:choose>
+						
+
+				<span>
+					<form:form action="editMark.do" id="markForm" modelAttribute="markForm" method="post">
 						<form:hidden path="sessionMapID" value="${sessionMapID}"/>
 						<form:hidden path="topicID" value="${topic.message.uid}"/>
-						<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="btn btn-default btn-sm" />
-						</form:form>
-				</div>
-			
-					<div class="row">
-			  		<div class="col-sm-2"><strong><fmt:message key="label.number.of.replies" /></strong></div>
-					<div class="col-sm-3">${topic.message.replyNumber}</div>
-				</div>
-				<div class="row">
-					<div class="col-sm-2"><strong><fmt:message key="lable.topic.title.mark" /></strong></div>
-					<div class="col-sm-3">
-					<c:choose>
-					<c:when test="${empty topic.message.report.mark}">
-						<fmt:message key="message.not.avaliable" />
-					</c:when>
-					<c:otherwise>
-						<fmt:formatNumber value="${topic.message.report.mark}"  maxFractionDigits="2"/>
-					</c:otherwise>
-					</c:choose>
+						<button type="submit" class="btn btn-light btn-sm ms-2">
+							<i class="fa-solid fa-marker me-1"></i>
+							<fmt:message key="lable.update.mark"/>
+						</button>
+					</form:form>
+				</span>	
 					</div>
 				</div>
 				
 				<div class="row">
-					<div class="col-sm-2"><strong><fmt:message key="lable.topic.title.comment" /></strong></div>
-				  	<div class="col-sm-10">
+					<div class="col-2">
+						<strong><fmt:message key="lable.topic.title.comment" /></strong>
+					</div>
+				  	<div class="col">
 					<c:choose>
 					<c:when test="${empty topic.message.report.comment}">
 						<fmt:message key="message.not.avaliable" />
@@ -104,33 +119,14 @@
 					</c:choose>
 					</div>
 				</div>
-				
-				<hr class="msg-hr">
-				
-				<span><c:out value="${topic.message.body}" escapeXml="false" /></span>
-			
-				<c:forEach var="file" items="${topic.message.attachments}">
-					<c:set var="downloadURL">
-						<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
-					</c:set>
-					<a href="<c:out value='${downloadURL}' escapeXml='false'/>"><i class="fa fa-paperclip" title="<fmt:message key='message.label.attachment'/>"></i></a>
-				</c:forEach>
-			
-				</div>
-			</div>			
-			
-			</c:forEach>
-			
-			<div style="padding:0 15px 25px;">
-				<a href="javascript:window.close();" class="btn btn-default btn-sm pull-right">
-					<fmt:message key="button.close"/>
-				</a>
 			</div>
-
-
-			<div id="footer">
-			</div>
-
-			</lams:Page>
-	</body>
-</lams:html>
\ No newline at end of file
+		</div>
+	</c:forEach>
+			
+	<div class="activity-bottom-buttons">
+		<button onclick="window.close();" class="btn btn-primary">
+			<i class="fa-regular fa-circle-xmark me-1"></i>
+			<fmt:message key="button.close"/>
+		</button>
+	</div>
+</lams:PageMonitor>
Index: lams_tool_images/web/pages/monitoring/imagesummary.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,152 +1,126 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-<lams:html>
-	<lams:head>
-		<title>
-			<fmt:message key="label.monitoring.title" />
-		</title>
+<c:set var="sessionMapID" value="${param.sessionMapID}" />
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="imageGallery" value="${sessionMap.imageGallery}" />	
+
+<c:set var="title"><fmt:message key="label.monitoring.imagesummary.image" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
 		
-		<c:set var="sessionMapID" value="${param.sessionMapID}" />
-		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-		<c:set var="imageGallery" value="${sessionMap.imageGallery}" />		
-		
-		<%@ include file="/common/header.jsp"%>
-		<lams:css suffix="jquery.jRating"/>
-		
-		<script type="text/javascript">
-			//var for jquery.jRating.js
-			var pathToImageFolder = "${lams}images/css/";
-		
-			//vars for rating.js
-			var AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
-			YOUR_RATING_LABEL = '',
-			IS_DISABLED =  true,
-			COMMENTS_MIN_WORDS_LIMIT = 0,
-			MAX_RATES = 0,
-			MIN_RATES = 0,
-			LAMS_URL = '${lams}',
-			COUNT_RATED_ITEMS = 0,
-			COMMENT_TEXTAREA_TIP_LABEL = '',
-			WARN_COMMENTS_IS_BLANK_LABEL = '',
-			WARN_MIN_NUMBER_WORDS_LABEL = '';
-		</script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<lams:JSImport src="includes/javascript/rating.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-	</lams:head>
+	<script type="text/javascript">
+		//vars for rating.js
+		var AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
+		YOUR_RATING_LABEL = '',
+		IS_DISABLED =  true,
+		COMMENTS_MIN_WORDS_LIMIT = 0,
+		MAX_RATES = 0,
+		MIN_RATES = 0,
+		LAMS_URL = '${lams}',
+		COUNT_RATED_ITEMS = 0,
+		COMMENT_TEXTAREA_TIP_LABEL = '',
+		WARN_COMMENTS_IS_BLANK_LABEL = '',
+		WARN_MIN_NUMBER_WORDS_LABEL = '';
+	</script>
+	<lams:JSImport src="includes/javascript/rating.js" />
+	<lams:JSImport src="includes/javascript/imageGallerycommon.js" relative="true" />
+	<lams:JSImport src="includes/javascript/imageGalleryitem.js" relative="true" />
+	<lams:JSImport src="includes/javascript/uploadImageLearning.js" relative="true" />
 	
-<body class="stripes">
-	<div class="panel panel-default">
-		<div class="panel-heading">
-			<div class="panel-title">
-				<fmt:message key="label.monitoring.imagesummary.image" />
-			</div>
-		</div>
-			
-		<div class="panel-body">
-			<form:form action="updateImage.do" method="post" modelAttribute="imageGalleryItemForm" id="imageGalleryItemForm">
-				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-				<form:hidden path="imageUid" />		
-				<form:hidden path="sessionMapID" value="${sessionMapID}"/>
+	<h1 class="fs-3 mb-3">
+		${title}
+	</h1>
+
+	<c:set var="csrfToken"><csrf:token/></c:set>
+	<form:form action="updateImage.do?${csrfToken}" method="post" modelAttribute="imageGalleryItemForm" id="imageGalleryItemForm">
+		<form:hidden path="imageUid" />		
+		<form:hidden path="sessionMapID" value="${sessionMapID}"/>
 				
-				<c:set var="mediumImagePath">
-			   		<lams:WebAppURL />download/?uuid=${image.mediumFileDisplayUuid}&preferDownload=false
-				</c:set>	
-				<c:set var="title">
-					<c:out value="${image.title}" escapeXml="true"/>
-				</c:set>
-				<img src="${mediumImagePath}" alt="${title}" title="${title}"/>
+		<c:set var="mediumImagePath">
+	   		<lams:WebAppURL />download/?uuid=${image.mediumFileDisplayUuid}&preferDownload=false
+		</c:set>	
+		<c:set var="title">
+			<c:out value="${image.title}" escapeXml="true"/>
+		</c:set>
+		<img src="${mediumImagePath}" alt="${title}" title="${title}"/>
 					
-				<div class="form-group voffset10">
-				    <label for="file-title">
-				    	<fmt:message key="label.authoring.basic.resource.title.input"/>
-				    </label>
-				    <input type="text" name="title" value="${imageGalleryItemForm.title}" class="form-control" id="file-title" tabindex="1"/>
-				</div>
+		<div class="my-3">
+			<label for="file-title">
+			   	<fmt:message key="label.authoring.basic.resource.title.input"/>
+			</label>
+			<input type="text" name="title" value="${imageGalleryItemForm.title}" class="form-control" id="file-title" tabindex="1"/>
+		</div>
 				
-				<div class="form-group">
-					<label for="description">
-						<fmt:message key="label.authoring.basic.resource.description.input" />
-					</label>
+		<div class="mb-3">
+			<label for="description">
+				<fmt:message key="label.authoring.basic.resource.description.input" />
+			</label>
 		            	
-					<lams:CKEditor id="description" value="${imageGalleryItemForm.description}" width="99%" 
-						contentFolderID="${sessionMap.imageGalleryForm.contentFolderID}" />
-				</div>
-			</form:form>			
-			<br>
+			<lams:CKEditor id="description" value="${imageGalleryItemForm.description}" width="99%" 
+					contentFolderID="${sessionMap.imageGalleryForm.contentFolderID}" />
+		</div>
+	</form:form>
 			
-			<c:if test="${imageGallery.allowRank}">
-				<lams:Rating itemRatingDto="${itemRatingDto}" disabled="true"
-						isItemAuthoredByUser="true"
-						maxRates="0" 
-						countRatedItems="0" />
-			</c:if>
+	<c:if test="${imageGallery.allowRank}">
+		<lams:Rating itemRatingDto="${itemRatingDto}" disabled="true"
+				isDisplayOnly="true"
+				maxRates="0" 
+				countRatedItems="0" />
+	</c:if>
 			
-			<c:if test="${imageGallery.allowVote}">
-			
-				<c:forEach var="groupSummary" items="${imageSummary}">
-					<h4>
-						<fmt:message key="monitoring.label.group" />&nbsp;${groupSummary[0].sessionName}	
-					</h4>
+	<c:if test="${imageGallery.allowVote}">
+		<c:forEach var="groupSummary" items="${imageSummary}">
+			<c:if test="${sessionMap.isGroupedActivity}">
+				<h4>
+					<fmt:message key="monitoring.label.group" />&nbsp;${groupSummary[0].sessionName}	
+				</h4>
+			</c:if>
+
+			<div class="badge text-bg-warning mb-2">
+				<fmt:message key="label.monitoring.number.votes" />: ${groupSummary[0].numberOfVotesForImage}
+			</div>
 				
-					<div>
-						<fmt:message key="label.monitoring.number.votes" />: ${groupSummary[0].numberOfVotesForImage}
-					</div>
+			<table class="table table-striped">
+				<tr>
+					<th width="150px">
+						<fmt:message key="label.monitoring.imagesummary.user" />
+					</th>			
+					<th style="padding-left:0px; text-align:center; width: 100px;">
+						<fmt:message key="label.monitoring.imagesummary.voted.for.this.image" />
+					</th>
+				</tr>
 				
-					<table class="table" >
-				
-						<tr>
-							<th width="150px">
-								<fmt:message key="label.monitoring.imagesummary.user" />
-							</th>			
-							<th style="padding-left:0px; text-align:center; width: 100px;">
-								<fmt:message key="label.monitoring.imagesummary.voted.for.this.image" />
-							</th>
-						</tr>
-				
-						<c:forEach var="userImageContribution" items="${groupSummary}">
-						
-							<tr>
-								<td>
-									<c:out value="${userImageContribution.user.getFullName()}" escapeXml="true"/>
-								</td>
+				<c:forEach var="userImageContribution" items="${groupSummary}">
+					<tr>
+						<td>
+							<c:out value="${userImageContribution.user.getFullName()}" escapeXml="true"/>
+						</td>
 													
-								<td style="padding-left:0px; text-align:center;">
-									<c:choose>
-										<c:when test="${userImageContribution.votedForThisImage}">
-											<i class="fa fa-check text-success"></i>
-										</c:when>
+						<td style="padding-left:0px; text-align:center;">
+							<c:choose>
+								<c:when test="${userImageContribution.votedForThisImage}">
+									<i class="fa fa-check text-success"></i>
+								</c:when>
 											
-										<c:otherwise>
-											<i class="fa fa-minus"></i>
-										</c:otherwise>
-									</c:choose>
-								</td>
-								
-							</tr>
-						</c:forEach>
-					</table>
-				
+								<c:otherwise>
+									<i class="fa fa-minus"></i>
+								</c:otherwise>
+							</c:choose>
+						</td>						
+					</tr>
 				</c:forEach>
-			</c:if>
-			<br>
+			</table>
+		</c:forEach>
+	</c:if>
 			
-			<div class="voffset10 pull-right">
-				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default roffset5">
-					<fmt:message key="label.cancel" /> 
-				</a>
-				<a href="#nogo" onclick="javascript:document.forms.imageGalleryItemForm.submit();" class="btn btn-default">
-					<fmt:message key="label.monitoring.imagesummary.save" /> 
-				</a>
-			</div>
-		</div>
-	
-		<div id="footer">
-		</div>
-		<!--closes footer-->
+	<div class="activity-bottom-buttons" id="uploadButtons">
+		<button type="button" onclick="submitImageGalleryItem()" class="btn btn-primary">
+			<i class="fa-regular fa-circle-check me-1"></i>
+			<fmt:message key="label.monitoring.imagesummary.save" /> 
+		</button>
 		
+		<button type="button" onclick="self.parent.tb_remove()" class="btn btn-secondary btn-icon-cancel me-2">
+			<fmt:message key="label.cancel" /> 
+		</button>
 	</div>
-		
-</body>
-</lams:html>
\ No newline at end of file
+</lams:PageMonitor>
Index: lams_tool_imscc/web/pages/monitoring/userlist.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_imscc/web/pages/monitoring/userlist.jsp	(.../userlist.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_imscc/web/pages/monitoring/userlist.jsp	(.../userlist.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -4,7 +4,7 @@
 <lams:html>
 <lams:head>
 	<%@ include file="/common/header.jsp" %>
-	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/portrait.js" ></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/portrait5.js" ></script>
 	<script type="text/javascript">
 		$(document).ready(function(){
 			initializePortraitPopover('<lams:LAMSURL />');
Index: lams_tool_lamc/web/monitoring/SummaryContent.jsp
===================================================================
diff -u -rbe33897898483fec39439cf31c304bdb80c198f9 -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_lamc/web/monitoring/SummaryContent.jsp	(.../SummaryContent.jsp)	(revision be33897898483fec39439cf31c304bdb80c198f9)
+++ lams_tool_lamc/web/monitoring/SummaryContent.jsp	(.../SummaryContent.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -51,7 +51,7 @@
 			   	colModel:[
 			   		{name:'userUid',index:'userUid', width:0, hidden: true},
 			   		{name:'userId',index:'userId', width:0, hidden: true},
-			   		{name:'userName',index:'userName', width:200, searchoptions: { clearSearch: false }, formatter:userNameFormatter},
+			   		{name:'userName',index:'userName', width:200, searchoptions: { clearSearch: false, attr: {style: "text-align:left;"} }, formatter:userNameFormatter},
 			   		{name:'total',index:'total', width:50,align:"right",sorttype:"int", search:false}	,
 			   		{name:'portraitId', index:'portraitId', width:0, hidden: true}
 			   	],
Index: lams_tool_larsrc/web/pages/learning/learning.jsp
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -286,7 +286,7 @@
 
 								<c:if test="${!item.createByAuthor && item.createBy != null}">
 									<span class="badge text-bg-warning rounded-pill mx-2">
-										[<c:out value="${item.createBy.firstName} ${item.createBy.lastName}" escapeXml="true" />]
+										[<c:out value="${item.createBy.getFullName()}" escapeXml="true" />]
 									</span>
                                 </c:if>
 							</button>
Index: lams_tool_larsrc/web/pages/monitoring/userlist.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_larsrc/web/pages/monitoring/userlist.jsp	(.../userlist.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_larsrc/web/pages/monitoring/userlist.jsp	(.../userlist.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,26 +1,22 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-<lams:html>
-<lams:head>
-	<c:set var="lams"><lams:LAMSURL/></c:set>
-	<c:set var="tool"><lams:WebAppURL/></c:set>
-	<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
+<c:set var="uniqueId"><%=java.util.UUID.randomUUID()%></c:set>
+<c:set var="pagerClass">ts-pager</c:set>
+<c:set var="numColumns">4</c:set>
 
+<c:set var="title"><fmt:message key="label.monitoring.heading.access" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+
  	<!-- ********************  CSS ********************** -->
-	<lams:css/>
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
-	<link type="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
+	<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
+	<link type="text/css" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css" rel="stylesheet">
+	<link type="text/css" href="${lams}css/jquery.tablesorter.pager5.css" rel="stylesheet">
 
  	<!-- ********************  javascript ********************** -->
-	<lams:JSImport src="includes/javascript/common.js" />
-	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${tool}includes/javascript/rsrccommon.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script> 
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script> 
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script> 
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	    
 <%-- 	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.tablesorter.pack.js"></script> --%>
 	<script language="JavaScript" type="text/javascript">
 		jQuery(document).ready(function() {
@@ -45,76 +41,83 @@
 			}
 		});
 	</script>
-</lams:head>
-<body class="stripes">
 
-<div id="content">
-		
-	<c:set var="title"><fmt:message key="label.monitoring.heading.access"/></c:set>
-	<lams:Page type="learner" title="${title}">
+	<div class="container-main">
+		<h1 class="mb-4">
+			${title}
+		</h1>
 	
-	<table class="tablesorter">
-		<thead>
-			<tr>
-				<th>
-					<fmt:message key="monitoring.label.user.name" />
-				</th>		
-				<th>
-					<fmt:message key="monitoring.label.access.time" />
-				</th>
-				<th>
-					<fmt:message key="monitoring.label.complete.time" />
-				</th>
-				<th>
-					<fmt:message key="monitoring.label.time.taken" />
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<c:forEach var="user" items="${userList}">
+		<table class="tablesorter shadow rounded-4">
+			<thead>
 				<tr>
-					<td>
-						<c:out value="${user.getFullName()} (${user.loginName})" escapeXml="true"/>
-					</td>			
-					<td>
-						<lams:Date value="${user.accessDate}"/>
-					</td>
-					<td>
-						<lams:Date value="${user.completeDate}"/>
-					</td>
-					<td>
-						<fmt:formatDate value="${user.timeTaken}" pattern="HH:mm:ss" timeZone="GMT" />
-					</td>
+					<th>
+						<fmt:message key="monitoring.label.user.name" />
+					</th>		
+					<th>
+						<fmt:message key="monitoring.label.access.time" />
+					</th>
+					<th>
+						<fmt:message key="monitoring.label.complete.time" />
+					</th>
+					<th>
+						<fmt:message key="monitoring.label.time.taken" />
+					</th>
 				</tr>
-			</c:forEach>
-		</tbody>
-		<tfoot>
-			<tr>
-		    	<th colspan="4" class="ts-pager form-horizontal">
-		        <button type="button" class="btn btn-xs first"><i class="fa fa-step-backward"></i></button>
-		        <button type="button" class="btn btn-xs prev"><i class="fa fa-backward"></i></button>
-		        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-		        <button type="button" class="btn btn-xs next"><i class="fa fa-forward"></i></button>
-		        <button type="button" class="btn btn-xs last"><i class="fa fa-step-forward"></i></button>
-		        <select class="pagesize" title="Select page size">
-		      		<option selected="selected" value="10">10</option>
-		      		<option value="20">20</option>
-		      		<option value="30">30</option>
-		      		<option value="40">40</option>
-		      		<option value="50">50</option>
-		      		<option value="100">100</option>
-		        </select>
-		      </th>
-		    </tr>
-		</tfoot>
-	</table>
+			</thead>
+			<tbody>
+				<c:forEach var="user" items="${userList}">
+					<tr>
+						<td>
+							<c:out value="${user.getFullName()} (${user.loginName})" escapeXml="true"/>
+						</td>			
+						<td>
+							<lams:Date value="${user.accessDate}"/>
+						</td>
+						<td>
+							<lams:Date value="${user.completeDate}"/>
+						</td>
+						<td>
+							<fmt:formatDate value="${user.timeTaken}" pattern="HH:mm:ss" timeZone="GMT" />
+						</td>
+					</tr>
+				</c:forEach>
+			</tbody>
+			<tfoot>
+				<tr>
+					<th colspan="${numColumns}" class="${pagerClass} text-center">
+						<button type="button" class="btn btn-secondary btn-sm rounded first" title="First">
+							<i class="fa fa-step-backward"></i>
+						</button>
+						<button type="button" class="btn btn-secondary btn-sm rounded prev" title="Previous">
+							<i class="fa fa-backward"></i>
+						</button> 
+						<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+						<button type="button" class="btn btn-secondary btn-sm rounded next" title="Next">
+							<i class="fa fa-forward"></i>
+						</button>
+						<button type="button" class="btn btn-secondary btn-sm rounded last" title="Last">
+							<i class="fa fa-step-forward"></i>
+						</button>
+						
+						<label for="${uniqueId}" class="visually-hidden">Select page size</label>
+						<select class="pagesize form-select" title="Select page size" id="${uniqueId}">
+							<option selected="selected" value="10">10</option>
+							<option value="20">20</option>
+							<option value="30">30</option>
+							<option value="40">40</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</select>
+					</th>
+				</tr>
+			</tfoot>
+		</table>
 	
-	<div class="align-right small-space-top">
-		<a href="javaqscript:;" onclick="window.close()" class="btn btn-default">Close</a>
+		<div class="activity-bottom-buttons">
+			<button type="button" onclick="window.close()" class="btn btn-primary">
+				<i class="fa-regular fa-circle-xmark me-1"></i>
+				<fmt:message key="label.close" />
+			</button>
+		</div>
 	</div>
-
-	<div id="footer"></div>
-
-	</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+</lams:PageMonitor>
Index: lams_tool_leader/web/pages/monitoring/changeLeaderDialog.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_leader/web/pages/monitoring/changeLeaderDialog.jsp	(.../changeLeaderDialog.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_leader/web/pages/monitoring/changeLeaderDialog.jsp	(.../changeLeaderDialog.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -29,28 +29,34 @@
 				        }
 		            }
 		       	});
-			});
+		});
 	});
 </script>
 
 <div class="modal fade" id="change-leader-modal-${groupId}">
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 		
-			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-lg fa-close"></i></button>
-				<h4 class="modal-title">
-					<fmt:message key="label.change.leader"/>
-				</h4>
-				<c:if test="${empty toolSessionId}">
-					<small>
-						<fmt:message key="label.note.leader.change"/>
-					</small>
-				</c:if>
+			<div class="modal-header text-bg-warning">
+				<div class="modal-title">
+					<h4>
+						<fmt:message key="label.change.leader">
+							<fmt:param>${groupName}</fmt:param>
+						</fmt:message>
+					</h4>
+				</div>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			
 			<div class="modal-body">
-				<h4>${groupName}</h4> 
+				<c:if test="${empty toolSessionId}">
+					<lams:Alert5 id="note" type="warning">
+						<small>
+							<fmt:message key="label.note.leader.change"/>
+						</small>
+					</lams:Alert5>
+				</c:if>
+					
 				<fmt:message key="label.current.leader"/>&nbsp;
 				<c:choose>
 					<c:when test="${empty groupLeader}">
@@ -63,10 +69,11 @@
 				
 				<div id="usersInGroup">
 					<c:forEach var="user" items="${members}">
-						<div class="voffset10 loffset10">
-							<label>
-								<input type="radio" name="change-leader-radio-${groupId}" value="${user.userId}">
-								<lams:Portrait userId="${user.userId}"/>
+						<div class="mt-3 ms-3 form-check">
+							  <input class="form-check-input mt-2" type="radio" name="change-leader-radio-${groupId}"
+							         id="change-leader-radio-${groupId}-${user.userId}" value="${user.userId}">
+							  <label class="form-check-label" for="change-leader-radio-${groupId}-${user.userId}">
+							    <lams:Portrait userId="${user.userId}"/>
 								<span>
 									<c:out value="${user.getFullName()}" escapeXml="true" />
 									<c:forEach var="availableLearnerId" items="${availableLearners}">
@@ -75,17 +82,19 @@
 										</c:if>
 									</c:forEach>
 								</span>
-							</label>
+							  </label>
 						</div>
 					</c:forEach>
 				</div>
 			</div>
 			
 			<div class="modal-footer">	
-				<a href="#" data-dismiss="modal" class="btn btn-default">
+				<a href="#" data-bs-dismiss="modal" class="btn btn-secondary">
+					<i class="fa fa-xmark fa-lg me-1"></i>
 					<fmt:message key="button.cancel"/>
 				</a>
-				<a href="#" data-dismiss="modal" class="btn btn-default change-leader-button">
+				<a href="#" data-bs-dismiss="modal" class="btn btn-primary change-leader-button">
+					<i class="fa fa-check fa-lg me-1"></i>
 					<fmt:message key="button.save"/>
 				</a>
 			</div>
Index: lams_tool_leader/web/pages/monitoring/manageLeaders.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_leader/web/pages/monitoring/manageLeaders.jsp	(.../manageLeaders.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_leader/web/pages/monitoring/manageLeaders.jsp	(.../manageLeaders.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,74 +1,68 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 
-<lams:html>
-	<lams:head>
-		<lams:css />
-		<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet"/>
+<c:set var="title"><fmt:message key="label.plese.select.leaders" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet"/>
 		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
-
-  	    <script>
-    		function save()  {
-	    		$('#leaders').ajaxSubmit({
-    		   		success: function (responseText, statusText)  {
-    		   			self.parent.location.reload();
-    	    		}
-	    		});
-    		}
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
+  	<script>
+    	function save()  {
+	   		$('#leaders').ajaxSubmit({
+    	   		success: function (responseText, statusText)  {
+    	   			self.parent.location.reload();
+        		}
+	   		});
+    	}
 	  		
-    		function closeThickboxPage()  {
-        		self.parent.tb_remove();
-    		}
-  		</script>
-		
-	</lams:head>
+    	function closeThickboxPage()  {
+       		self.parent.tb_remove();
+    	}
+  	</script>
 	
-	<body class="stripes">
+	<h1 class="fs-3 mb-4">
+		${title}
+	</h1>
 
-	<c:set var="title"><fmt:message key="label.plese.select.leaders" /></c:set>
-	<lams:Page type="learner" title="${title}">
-		<form action="<c:url value='/monitoring/saveLeaders.do'/>" method="post" id="leaders">
-			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-                <input name="sessionMapID" type="hidden" value="${sessionMapID}"/>
-				<c:forEach var="session" items="${sessionMap.leaderselectionDT0.sessionDTOs}" varStatus="status">
-					<h1></h1>
-					<div style="padding-left: 30px; <c:if test='${! status.last}'>padding-bottom: 30px;</c:if><c:if test='${ status.last}'>padding-bottom: 15px;</c:if> ">
-						<c:if test="${sessionMap.isGroupedActivity}">
-							<div style="padding-bottom: 5px; font-size: small;">
-								<B><fmt:message key="monitoring.label.group" /></B> ${session.sessionName}
-							</div>
-						</c:if>
-						
-						<c:forEach var="user" items="${session.userDTOs}">
-							<div class="voffset5">
-								<input type="radio" name="sessionId${session.sessionID}" value="${user.uid}" <c:if test="${session.groupLeader.uid == user.uid}">checked="checked"</c:if>/>
-								&nbsp;<lams:Portrait userId="${user.userId}"/>&nbsp;
-								<c:out value="${user.getFullName()}" escapeXml="true"/>
-							</div>
-						</c:forEach>
+	<form action="<c:url value='/monitoring/saveLeaders.do'/>" method="post" id="leaders">
+		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+        <input name="sessionMapID" type="hidden" value="${sessionMapID}"/>
+        
+		<c:forEach var="session" items="${sessionMap.leaderselectionDT0.sessionDTOs}" varStatus="status">
+			<div class="lcard">
+				<c:if test="${sessionMap.isGroupedActivity}">
+					<div class="card-header">
+						<B><fmt:message key="monitoring.label.group" /></B> 
+						${session.sessionName}
 					</div>
-				</c:forEach>
-			</form>
+				</c:if>
 
-			<div class="pull-right">
-				<a href="#" onclick="closeThickboxPage();" class="btn btn-default">
-					<fmt:message key="button.cancel" /> 
-				</a>
-				<a href="#" onclick="save();" class="btn btn-primary">
-					<fmt:message key="button.save" /> 
-				</a>
+				<c:forEach var="user" items="${session.userDTOs}">
+					<div class="card-body align-items-center d-flex p-2">
+						<input type="radio" name="sessionId${session.sessionID}" id="sessionId${session.sessionID}-${user.uid}" 
+								value="${user.uid}" class="form-check-input me-2"
+								<c:if test="${session.groupLeader.uid == user.uid}">checked="checked"</c:if>/>
+								
+						<label for="sessionId${session.sessionID}-${user.uid}" class="form-check-label">
+							<lams:Portrait userId="${user.userId}"/>&nbsp;
+							<c:out value="${user.getFullName()}" escapeXml="true"/>
+						</label>
+					</div>
+				</c:forEach>
 			</div>
+		</c:forEach>
+	</form>
 
-		</div>
-		<!--closes content-->
-	
-		<div id="footer"></div>
-
-	</lams:Page>		
-	</body>
-</lams:html>
\ No newline at end of file
+	<div class="activity-bottom-buttons">
+		<button type="button"onclick="save();" class="btn btn-primary ms-2">
+			<i class="fa fa-check fa-lg me-1"></i>
+			<fmt:message key="button.save" /> 
+		</button>
+		<button type="button" onclick="closeThickboxPage();" class="btn btn-secondary">
+			<i class="fa fa-xmark fa-lg me-1"></i>
+			<fmt:message key="button.cancel" /> 
+		</button>
+	</div>
+</lams:PageMonitor>
Index: lams_tool_leader/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_leader/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
+++ lams_tool_leader/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -50,7 +50,7 @@
 		<c:forEach var="user" items="${session.userDTOs}">
 			<div class="row">
 				<div class="col">
-					<lams:Portrait userId="${user.userId}" hover="true"><c:out value="${user.firstName} ${user.lastName}" escapeXml="true"/></lams:Portrait>
+					<lams:Portrait userId="${user.userId}" hover="true"><c:out value="${user.getFullName()}" escapeXml="true"/></lams:Portrait>
 				</div>
 				<div class="col text-center">
 					<c:choose>
Index: lams_tool_mindmap/web/pages/monitoring/mindmapDisplay.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_mindmap/web/pages/monitoring/mindmapDisplay.jsp	(.../mindmapDisplay.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_mindmap/web/pages/monitoring/mindmapDisplay.jsp	(.../mindmapDisplay.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,64 +1,40 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 
-<lams:html>
-		<c:set var="lams"> <lams:LAMSURL /> </c:set>
-		<c:set var="tool">	<lams:WebAppURL /> </c:set>
-	
-	<lams:head>
-		<title>
-			<fmt:message key="activity.title" />
-		</title>
-		<lams:headItems />
-		<script type="text/javascript">
-			var initialTabId = "${mindmapDTO.currentTab}";
-		</script>
-		<script type="text/javascript" src="${tool}includes/javascript/monitoring.js"></script>
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.minicolors.css"></link>
+	<link rel="stylesheet" type="text/css" href="${tool}includes/css/mapjs.css"></link>
+	<link rel="stylesheet" type="text/css" href="${tool}includes/css/mindmap.css"></link>
 		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-		<lams:JSImport src="includes/javascript/common.js" />
-		
-		<link rel="stylesheet" type="text/css" href="${lams}css/jquery.minicolors.css"></link>
-		<link rel="stylesheet" type="text/css" href="${tool}includes/css/mapjs.css"></link>
-		<link rel="stylesheet" type="text/css" href="${tool}includes/css/mindmap.css"></link>
-		
-		<script src="${lams}includes/javascript/jquery.minicolors.min.js"></script>
-		<script src="${tool}includes/javascript/jquery.timer.js"></script>
-		<script src="<lams:LAMSURL/>includes/javascript/fullscreen.js"></script>
-		<script src="${tool}includes/javascript/mapjs/main.js"></script>
-		<script src="${tool}includes/javascript/mapjs/underscore-min.js"></script>
-	</lams:head>
+	<script src="${lams}includes/javascript/jquery.minicolors.min.js"></script>
+	<script src="${tool}includes/javascript/jquery.timer.js"></script>
+	<script src="${lams}includes/javascript/fullscreen.js"></script>
+	<script src="${tool}includes/javascript/mapjs/main.js"></script>
+	<script src="${tool}includes/javascript/mapjs/underscore-min.js"></script>
 
-	<body class="stripes">	
-	
-		<c:set var="title"><fmt:message key="activity.title" /></c:set>
-		<lams:Page title="${title}" type="learner">
-
-			
-			<div id="content">
-
-				<c:choose>
+	<div class="main-container">
+		<h1 class="fs-3 mb-3">
+			<c:choose>
 				<c:when test="${isMultiUserMode}">
-					<h4><fmt:message key="label.multimode" /></h4>
+					<fmt:message key="label.multimode" />
 				</c:when>
+				
 				<c:otherwise>
-					<h4><c:out value="${userDTO.getFullName()}" escapeXml="true"/></h4>
+					<c:out value="${userDTO.getFullName()}" escapeXml="true"/>
 				</c:otherwise>
-				</c:choose>
+			</c:choose>
+		</h1>
 				
-				<%--  Monitor cannot edit mindmaps. mapjs.jsp also uses sessionId and mindmapId --%>
-				<c:set var="multiMode">${isMultiUserMode}</c:set>
-				<c:set var="contentEditable">false</c:set>
-								
-				<%@ include file="/common/mapjs.jsp"%>
+		<%--  Monitor cannot edit mindmaps. mapjs.jsp also uses sessionId and mindmapId --%>
+		<c:set var="multiMode">${isMultiUserMode}</c:set>
+		<c:set var="contentEditable">false</c:set>				
+		<%@ include file="/common/mapjs.jsp"%>
 				
-				<button class="btn btn-primary voffset10 pull-right" name="backButton" onclick="history.go(-1)">
-					<fmt:message>button.back</fmt:message>
-				</button>
-
-			</div>
-		</lams:Page>
-		<div id="footer"></div>
-	</body>
-</lams:html>
\ No newline at end of file
+		<div class="activity-bottom-buttons">
+			<button class="btn btn-primary btn-icon-return" name="backButton" onclick="history.go(-1)" type="button">
+				<fmt:message>button.back</fmt:message>
+			</button>
+		</div>
+	</div>
+</lams:PageMonitor>
Index: lams_tool_mindmap/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_mindmap/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_mindmap/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,9 +1,8 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:set var="dto" value="${mindmapDTO}" />
 
-<lams:css suffix="jquery.jRating"/>
-<link type="text/css" href="${lams}/css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
+<link href="${lams}css/rating.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/jquery-ui.timepicker.css" rel="stylesheet">
 <style>
 	#gallery-walk-panel {
@@ -35,11 +34,6 @@
 	#gallery-walk-rating-table td {
 		text-align: center;
 	}
-	
-	#gallery-walk-rating-table th:first-child,
-	#gallery-walk-rating-table td:first-child {
-		text-align: right;
-	}
 								
 	.mindmap-frame {
 		width: calc(100% - 35px);
@@ -48,6 +42,7 @@
 		border: none;
 	}
 </style>
+
 <script type="text/javascript">
 	//pass settings to monitorToolSummaryAdvanced.js
 	var submissionDeadlineSettings = {
@@ -61,28 +56,24 @@
 		messageRestrictionRemoved: '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction.removed" /></spring:escapeBody>'
 	};
 
-
-	//var for jquery.jRating.js
-	var pathToImageFolder = "${lams}images/css/",
-		//vars for rating.js
-		AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
+	//vars for rating.js
+	var	AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
 		YOUR_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message></spring:escapeBody>',
 		MAX_RATES = 0,
 		MIN_RATES = 0,
 		LAMS_URL = '${lams}',
 		COUNT_RATED_ITEMS = true,
 		ALLOW_RERATE = false;
 </script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.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/monitorToolSummaryAdvanced.js" ></script>
-<lams:JSImport src="includes/javascript/portrait.js" />
+<lams:JSImport src="includes/javascript/portrait5.js" />
 <lams:JSImport src="includes/javascript/rating.js" />
-<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 
 <script type="text/javascript">
 	$(document).ready(function(){
+		doStatistic();
 		initializePortraitPopover("<lams:LAMSURL />");
 
 		// show mindmaps only on Group expand
@@ -164,31 +155,28 @@
 			}
 		});
 	}
-	
 </script>
 
-<div class="panel">
-	<h4>
-	  <c:out value="${mindmapDTO.title}" escapeXml="true"/>
-	</h4>
+<c:if test="${empty dto.sessionDTOs}">
+	<lams:Alert5 type="info" id="no-session-summary">
+		<fmt:message key="label.nogroups" />
+	</lams:Alert5>
+</c:if>
+
+<h1>
+  <c:out value="${mindmapDTO.title}" escapeXml="true"/>
+</h1>
 	
-	<div class="instructions voffset5">
-	  <c:out value="${mindmapDTO.instructions}" escapeXml="false"/>
-	</div>
-	
-	<c:if test="${empty dto.sessionDTOs}">
-		<lams:Alert type="info" id="no-session-summary" close="false">
-			<fmt:message key="label.nogroups" />
-		</lams:Alert>
-	</c:if>
+<div class="instructions voffset5">
+  <c:out value="${mindmapDTO.instructions}" escapeXml="false"/>
 </div>
 	
 <c:if test="${not empty dto.sessionDTOs and mindmapDTO.galleryWalkEnabled}">
-	<div class="panel panel-default ${mindmapDTO.galleryWalkFinished and not mindmapDTO.galleryWalkReadOnly ? 'gallery-walk-panel-ratings' : ''}"
-		 id="gallery-walk-panel">
-	  <div class="panel-heading">
-	    <h3 class="panel-title">
+	<div class="card shadow mb-5 ${mindmapDTO.galleryWalkFinished and not mindmapDTO.galleryWalkReadOnly ? 'gallery-walk-panel-ratings' : ''}"
+			id="gallery-walk-panel">
+		<div class="card-header">
 			<fmt:message key="label.gallery.walk" />&nbsp;
+			
 			<b>
 				<c:choose>
 					<c:when test="${not mindmapDTO.galleryWalkStarted and not mindmapDTO.galleryWalkFinished}">
@@ -205,53 +193,59 @@
 					<fmt:message key="label.gallery.walk.state.learner.edit.enabled" />
 				</c:if>
 			</b>
-		</h3>
-	  </div>
-	  <div class="panel-body">
-	   		<button id="gallery-walk-start" type="button"
-			        class="btn btn-primary
-			        	   ${not mindmapDTO.galleryWalkStarted and not mindmapDTO.galleryWalkFinished ? '' : 'hidden'}"
-			        onClick="javascript:startGalleryWalk()">
+		</div>
+
+		<div class="card-body">
+			<button id="gallery-walk-start" type="button"
+			        class="btn btn-primary ${not mindmapDTO.galleryWalkStarted and not mindmapDTO.galleryWalkFinished ? '' : 'd-none'}"
+			        onClick="startGalleryWalk()">
+			    <i class="fa-solid fa-play me-1"></i>
 				<fmt:message key="monitoring.summary.gallery.walk.start" /> 
 			</button>
 			
 			<button id="gallery-walk-finish" type="button"
-			        class="btn btn-primary ${mindmapDTO.galleryWalkStarted and not mindmapDTO.galleryWalkFinished ? '' : 'hidden'}"
-			        onClick="javascript:finishGalleryWalk()">
+			        class="btn btn-primary ${mindmapDTO.galleryWalkStarted and not mindmapDTO.galleryWalkFinished ? '' : 'd-none'}"
+			        onClick="finishGalleryWalk()">
+				<i class="fa-regular fa-circle-stop me-1"></i>
 				<fmt:message key="monitoring.summary.gallery.walk.finish" /> 
 			</button>
 			
 			<br>
 
 			<button id="gallery-walk-skip" type="button"
-					  class="btn btn-danger
-							   ${not mindmapDTO.galleryWalkStarted and not mindmapDTO.galleryWalkFinished ? '' : 'hidden'}"
-					  onClick="javascript:skipGalleryWalk()">
-				  <fmt:message key="monitoring.summary.gallery.walk.skip" />
+					  class="btn btn-light ${not mindmapDTO.galleryWalkStarted and not mindmapDTO.galleryWalkFinished ? '' : 'd-none'}"
+					  onClick="skipGalleryWalk()">
+				<i class="fa-solid fa-forward me-1"></i>
+				<fmt:message key="monitoring.summary.gallery.walk.skip" />
 			</button>
 
 			<button id="gallery-walk-learner-edit" type="button"
-			        class="btn btn-default ${not mindmapDTO.galleryWalkEditEnabled and (mindmapDTO.galleryWalkStarted or mindmapDTO.galleryWalkFinished) ? '' : 'hidden'}"
-			        onClick="javascript:enableGalleryWalkLearnerEdit()">
+			        class="btn btn-light ${not mindmapDTO.galleryWalkEditEnabled and (mindmapDTO.galleryWalkStarted or mindmapDTO.galleryWalkFinished) ? '' : 'd-none'}"
+			        onClick="enableGalleryWalkLearnerEdit()">
+			    <i class="fa-regular fa-pen-to-square me-1"></i>
 				<fmt:message key="monitoring.summary.gallery.walk.learner.edit" /> 
 			</button>
 			
 			<c:if test="${mindmapDTO.galleryWalkFinished and not mindmapDTO.galleryWalkReadOnly}">
-				<h4 style="text-align: center"><fmt:message key="label.gallery.walk.ratings.header" /></h4>
-				<table id="gallery-walk-rating-table" class="table table-hover table-condensed">
-				  <thead class="thead-light">
+				<h4 style="text-align: center">
+					<fmt:message key="label.gallery.walk.ratings.header" />
+				</h4>
+				
+				<table id="gallery-walk-rating-table" class="table table-hover table-condensed mb-0">
+				  <thead class="text-bg-light">
 				    <tr>
 				      <th scope="col"><fmt:message key="monitoring.label.group" /></th>
 				      <th scope="col"><fmt:message key="label.rating" /></th>
 				    </tr>
 				  </thead>
+				  
 				  <tbody>
 					<c:forEach var="mindmapSession" items="${mindmapDTO.sessionDTOs}">
 						<tr>
 							<td>${mindmapSession.sessionName}</td>
 							<td>
 								<lams:Rating itemRatingDto="${mindmapSession.itemRatingDto}" 
-											 isItemAuthoredByUser="true"
+											 isDisplayOnly="true"
 											 hideCriteriaTitle="true" />
 							</td>
 						</tr>
@@ -268,30 +262,37 @@
 </c:if>
 
 <c:forEach var="session" items="${dto.sessionDTOs}" varStatus="status">
+	<c:set var="totalLearnersHtml">
+		<div class="badge text-bg-light m-2 float-end">
+			<fmt:message key="heading.totalLearners" />&nbsp;${session.numberOfLearners}
+		</div>
+	</c:set>
 
-	<c:if test="${isGroupedActivity}">	
-	    <div class="panel panel-default" >
-	        <div class="panel-heading" id="heading${session.sessionID}">
-	        	<span class="panel-title collapsable-icon-left">
-	        		<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${session.sessionID}" 
-							aria-expanded="false" aria-controls="collapse${session.sessionID}" >
-						<fmt:message key="heading.group" >
-							<fmt:param><c:out value="${session.sessionName}" /></fmt:param>
-						</fmt:message>
-					</a>
-				</span>
-	        </div>
-        
-			<div id="collapse${session.sessionID}" class="panel-collapse collapse mindmap-collapse" 
-        			role="tabpanel" aria-labelledby="heading${session.sessionID}">
-	</c:if>
+	<c:choose>
+		<c:when test="${isGroupedActivity}">	
+		    <div class="lcard" >
+		        <div class="card-header" id="heading${session.sessionID}">
+					${totalLearnersHtml}
+		
+		        	<span class="card-title collapsable-icon-left">
+		        		<button class="btn btn-secondary-darker no-shadow collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${session.sessionID}" 
+								aria-expanded="false" aria-controls="collapse${session.sessionID}" >
+							<fmt:message key="heading.group" >
+								<fmt:param><c:out value="${session.sessionName}" /></fmt:param>
+							</fmt:message>
+						</button>
+					</span>
+		        </div>
+	        
+				<div id="collapse${session.sessionID}" class="card-collapse collapse mindmap-collapse">
+		</c:when>
+		<c:otherwise>
+			${totalLearnersHtml}
+		</c:otherwise>
+	</c:choose>
 	
-	<div class="loffset10">
-		<fmt:message key="heading.totalLearners" />&nbsp;${session.numberOfLearners}
-	</div>
-	
 	<c:if test="${dto.multiUserMode}">
-		<iframe class="mindmap-frame"
+		<iframe class="mindmap-frame ${isGroupedActivity ? '' : 'shadow'} p-1"
 			<c:choose>
 				<c:when test="${isGroupedActivity}">
 					<%-- iframe is loaded on collapse panel open --%>
@@ -307,12 +308,12 @@
 	</c:if>
 
 	<c:if test="${not dto.multiUserMode}">
-		<table class="table table-striped table-condensed voffset10">
-	
+		<table class="table table-striped table-condensed mt-2">
 			<tr>
 				<th width="40%">
 					<fmt:message key="heading.learner" />
 				</th>
+				
 				<c:if test="${not dto.multiUserMode}">
 					<th width="40%">
 						<fmt:message key="heading.mindmapEntry" />
@@ -329,7 +330,6 @@
 							</td>
 					
 							<td width="30%">
-								
 							</td>
 						</tr>
 					</c:forEach>
@@ -347,8 +347,11 @@
 									<c:when test="${user.finishedActivity != true}">
 										<fmt:message key="label.notAvailable" />
 									</c:when>
+									
 									<c:otherwise>
-										<a href="showMindmap.do?allowPrinting=true&userUID=${user.uid}&toolContentID=${dto.toolContentId}&toolSessionID=${session.sessionID}">
+										<a href="showMindmap.do?allowPrinting=true&userUID=${user.uid}&toolContentID=${dto.toolContentId}&toolSessionID=${session.sessionID}"
+												class="btn btn-sm btn-light">
+											<i class="fa-regular fa-eye me-1"></i>
 											<fmt:message key="label.view" />
 										</a>									
 									</c:otherwise>
@@ -357,24 +360,27 @@
 						</tr>
 					</c:forEach>
 				</c:otherwise>
-				
 			</c:choose>
-	
 		</table>
 	</c:if>
 	
-		<c:if test="${isGroupedActivity}">
+	<c:if test="${isGroupedActivity}">
 		</div> <!-- end collapse area  -->
 		</div> <!-- end collapse panel  -->
 	</c:if>
-	${ !isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
-	
 </c:forEach>
 
 <c:if test="${isGroupedActivity}">
 	</div> <!--  end panel group -->
 </c:if>
 
-<%@ include file="advanceOptions.jsp"%>
+<h2 class="card-subheader fs-4 mt-3" id="header-statistics">
+	<fmt:message key="button.statistics" />
+</h2>
+<%@ include file="statistics.jsp"%>
 
-<%@include file="dateRestriction.jsp"%>
\ No newline at end of file
+<h2 class="card-subheader fs-4" id="header-settings">
+	Settings
+</h2>
+<%@ include file="editActivity.jsp"%>
+<lams:RestrictedUsageAccordian submissionDeadline="${submissionDeadline}"/>
Index: lams_tool_pixlr/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_pixlr/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_pixlr/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -2,7 +2,7 @@
 <c:set var="dto" value="${pixlrDTO}" />
 
 <script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
-<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/portrait.js" ></script>
+<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/portrait5.js" ></script>
 <script type="text/javascript">
 	$(document).ready(function(){
 		initializePortraitPopover("<lams:LAMSURL />");
Index: lams_tool_preview/web/pages/monitoring/rubricspart.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_preview/web/pages/monitoring/rubricspart.jsp	(.../rubricspart.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_preview/web/pages/monitoring/rubricspart.jsp	(.../rubricspart.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -1,14 +1,6 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<style>
-	.panel-collapse > .rubrics-user-panel,
-	.panel-collapse > #emailPreviewArea {
-		margin: 10px;
-	}
-</style>
-
 <script>
-
 	function getResultsElement(sessionId, selector) {
 		let element = null;
 		if (sessionId) {
@@ -92,34 +84,31 @@
 
 <!--For send results feature-->
 <i class="fa fa-spinner messageArea2_Busy" style="display:none"></i>
-<div class="voffset5 messageArea2"></div>
+<div class="mt-2 messageArea2"></div>
 
+<c:forEach var="learnerData" items="${rubricsLearnerData}">   	
+	<%-- List learners in the given session --%>
+	<div class="lcard rubrics-user-panel">
+		<div class="card-header" id="rubrics-user-heading-${learnerData.key.uid}">
+	      	<span class="card-title collapsable-icon-left">
+	      		<button type="button" class="btn btn-secondary-darker no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#rubrics-user-collapse-${learnerData.key.uid}" 
+						aria-expanded="false" aria-controls="rubrics-user-collapse-${learnerData.key.uid}">
+					<lams:Portrait userId="${learnerData.key.userId}" hover="false" />
+					&nbsp;<c:out value="${learnerData.key.getFullName()}" escapeXml="true"/>
+				</button>
+			</span>
+			<button type="button" class="btn btn-light float-end email-button btn-disable-on-submit"
+					onClick="previewResultsForLearner(${toolSessionId}, ${learnerData.key.userId}, this)">
+				<fmt:message key="button.preview.results" />
+			</button>
+		</div>
 	     
-<c:forEach var="learnerData" items="${rubricsLearnerData}">
-  	    	
-<%-- List learners in the given session --%>
-<div class="panel panel-default rubrics-user-panel">
-      <div class="panel-heading" role="tab" id="rubrics-user-heading-${learnerData.key.uid}">
-      	<span class="panel-title collapsable-icon-left">
-      		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-user-collapse-${learnerData.key.uid}" 
-				aria-expanded="false" aria-controls="rubrics-user-collapse-${learnerData.key.uid}">
-			<lams:Portrait userId="${learnerData.key.userId}" hover="false" />
-			&nbsp;<c:out value="${learnerData.key.getFullName()}" escapeXml="true"/>
-		</a>
-	</span>
-	<button class="btn btn-default pull-right email-button btn-disable-on-submit"
-			onClick="javascript:previewResultsForLearner(${toolSessionId}, ${learnerData.key.userId}, this)">
-		<fmt:message key="button.preview.results" />
-	</button>
-      </div>
-     
-     	<div id="rubrics-user-collapse-${learnerData.key.uid}" class="panel-collapse collapse" 
-     	    role="tabpanel" aria-labelledby="rubrics-user-heading-${learnerData.key.uid}">
-     	    	<%-- Display ratings given to this user --%>
-		<lams:StyledRating criteriaRatings="${learnerData.value}" showJustification="true" alwaysShowAverage="false"
-						   currentUserDisplay="true" rubricsInBetweenColumns="${sessionMap.peerreview.rubricsInBetweenColumns}" />
+		<div id="rubrics-user-collapse-${learnerData.key.uid}" class="card-body collapse">
+	     	<%-- Display ratings given to this user --%>
+			<lams:StyledRating criteriaRatings="${learnerData.value}" showJustification="true" alwaysShowAverage="false"
+							   currentUserDisplay="true" rubricsInBetweenColumns="${sessionMap.peerreview.rubricsInBetweenColumns}" />
+		</div>
 	</div>
-</div>
 </c:forEach>
 
-<div class="voffset10 emailPreviewArea" style="display:none" ></div>
\ No newline at end of file
+<div class="mt-3 emailPreviewArea" style="display:none" ></div>
Index: lams_tool_sbmt/web/monitoring/mark/fileinfo.jsp
===================================================================
diff -u -rd0f4c3bdd871e236755472c8443c337b2b96e48c -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_sbmt/web/monitoring/mark/fileinfo.jsp	(.../fileinfo.jsp)	(revision d0f4c3bdd871e236755472c8443c337b2b96e48c)
+++ lams_tool_sbmt/web/monitoring/mark/fileinfo.jsp	(.../fileinfo.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -2,92 +2,110 @@
 <c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
 <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
+
 <c:if test="${status.first}">
-			<div class="lead well" style="padding:5px"><lams:Portrait userId="${fileInfo.owner.userID}"/>&nbsp;<strong><c:out value="${fileInfo.owner.getFullName()}" /></strong> </div>
+	<div class="card-header">
+		<lams:Portrait userId="${fileInfo.owner.userID}"/>&nbsp;
+		<strong><c:out value="${fileInfo.owner.getFullName()}" /></strong> 
+	</div>
 </c:if> 
 
-<dl class="dl-horizontal">
+<div class="p-2">
+<div class="row">
 	<c:choose>
-	<c:when test="${fileInfo.removed}">
-		<dt>
-			<span style="color:red"><fmt:message key="label.deleted"/> : 
-		</dt>
-		<dd>
-			<span style="color:red"><c:out value="${fileInfo.filePath}" /></span>
-		</dd>
-	</c:when>
-	<c:otherwise>
-		<dt>
-			<fmt:message key="label.learner.filePath" />:
-		</dt>
-		<dd>
-			<c:out value="${fileInfo.filePath}" />
-	</c:otherwise>
-	</c:choose>
-	<div id="actionButtons" class="pull-right">
-		<c:choose>
-		<c:when test="${fileInfo.removed and empty updateMode}">
-			<a href="javascript:restoreLearnerFile(${fileInfo.submissionID},${toolSessionID},${fileInfo.owner.userID},'${fileInfo.filePath}');" class="btn btn-xs btn-default loffset10">
-				<i class="fa fa-life-saver" title="<fmt:message key="label.monitoring.original.learner.file.restore" />"></i> <span class="d-none d-sm-block"><fmt:message key="label.monitoring.original.learner.file.restore" /></span>
-			</a>
+		<c:when test="${fileInfo.removed}">
+			<div class="col-2 fw-bold">
+				<span style="color:red"><fmt:message key="label.deleted"/> : 
+			</div>
+			<div class="col">
+				<span style="color:red"><c:out value="${fileInfo.filePath}" /></span>
 		</c:when>
-	
+		
 		<c:otherwise>
-			<c:set var="viewURL">
-				<lams:WebAppURL/>download/?uuid=${fileInfo.displayUuid}&versionID=${fileInfo.versionID}&preferDownload=false
-			</c:set>
-			<a href="javascript:launchInstructionsPopup('${viewURL}')" class="btn btn-xs btn-default">
-				<i class="fa fa-eye" title="<fmt:message key="label.view" />"></i> <span class="d-none d-sm-block"><fmt:message key="label.view" /></span>
-			</a>
-			<c:set var="downloadURL">
-				<lams:WebAppURL/>download/?uuid=${fileInfo.displayUuid}&versionID=${fileInfo.versionID}&preferDownload=true
-			</c:set>
-			<a href="${downloadURL}" class="btn btn-xs btn-default loffset10">
-				<i class="fa fa-download" title="<fmt:message key="label.download" />"></i> <span class="d-none d-sm-block"><fmt:message key="label.download" /></span>
-			</a>
-			<c:if test="${empty updateMode}">
-				<a href="javascript:removeLearnerFile(${fileInfo.submissionID},${toolSessionID},${fileInfo.owner.userID},'${fileInfo.filePath}');" class="btn btn-xs btn-danger loffset10">
-					<i class="fa fa-trash" title="<fmt:message key="label.monitoring.original.learner.file.delete" />"></i> <span class="d-none d-sm-block"><fmt:message key="label.monitoring.original.learner.file.delete" /></span>
-				</a>
-			</c:if>
+			<div class="col-2 fw-bold">
+				<fmt:message key="label.learner.filePath" />:
+			</div>
+			<div class="col">
+				<c:out value="${fileInfo.filePath}" />
 		</c:otherwise>
-		</c:choose>
-	</div>
-		</dd>
+	</c:choose>
+	
+				<div id="actionButtons" class="float-end">
+					<c:choose>
+						<c:when test="${fileInfo.removed and empty updateMode}">
+							<button type="button" onclick="restoreLearnerFile(${fileInfo.submissionID},${toolSessionID},${fileInfo.owner.userID},'${fileInfo.filePath}');" class="btn btn-sm btn-light ms-2">
+								<i class="fa-regular fa-life-ring me-1" title="<fmt:message key="label.monitoring.original.learner.file.restore" />"></i> 
+								<span class="d-none d-sm-block float-end"><fmt:message key="label.monitoring.original.learner.file.restore" /></span>
+							</button>
+						</c:when>
+					
+						<c:otherwise>
+							<c:set var="viewURL">
+								<lams:WebAppURL/>download/?uuid=${fileInfo.displayUuid}&versionID=${fileInfo.versionID}&preferDownload=false
+							</c:set>
+							<button type="button" onclick="launchInstructionsPopup('${viewURL}')" class="btn btn-sm btn-light ms-2">
+								<i class="fa fa-eye me-1" title="<fmt:message key="label.view" />"></i> 
+								<span class="d-none d-sm-block float-end"><fmt:message key="label.view" /></span>
+							</button>
+							
+							<c:set var="downloadURL">
+								<lams:WebAppURL/>download/?uuid=${fileInfo.displayUuid}&versionID=${fileInfo.versionID}&preferDownload=true
+							</c:set>
+							<a href="${downloadURL}" class="btn btn-sm btn-light ms-2">
+								<i class="fa fa-download me-1" title="<fmt:message key="label.download" />"></i> 
+								<span class="d-none d-sm-block float-end"><fmt:message key="label.download" /></span>
+							</a>
+							
+							<c:if test="${empty updateMode}">
+								<button type="button" onclick="removeLearnerFile(${fileInfo.submissionID},${toolSessionID},${fileInfo.owner.userID},'${fileInfo.filePath}')" class="btn btn-sm btn-light ms-2">
+									<i class="fa fa-trash me-1" title="<fmt:message key="label.monitoring.original.learner.file.delete" />"></i> 
+									<span class="d-none d-sm-block float-end"><fmt:message key="label.monitoring.original.learner.file.delete" /></span>
+								</button>
+							</c:if>
+						</c:otherwise>
+					</c:choose>
+				</div>
+			</div>
+</div>
 
+<div class="row">
+	<c:if test="${not fileInfo.removed}">
+		<div class="col-2 fw-bold">
+			<fmt:message key="label.learner.fileDescription" />:
+		</div>
+		<div class="col">
+			<c:choose>
+				<c:when test="${empty fileInfo.fileDescription}">
+					<div class="badge text-bg-warning">
+						<fmt:message key="label.learner.notAvailable" />
+					</div>
+				</c:when>
+				<c:otherwise>
+					<lams:out value="${fileInfo.fileDescription}" escapeHtml="true" />
+				</c:otherwise>
+			</c:choose>
+		</div>
+	</c:if>
+</div>
 
-<c:if test="${not fileInfo.removed}">
-	<dt>
-		<fmt:message key="label.learner.fileDescription" />:
-	</dt>
-	<dd>
-		<c:choose>
-			<c:when test="${empty fileInfo.fileDescription}">
-				<fmt:message key="label.learner.notAvailable" />
-			</c:when>
-			<c:otherwise>
-				<lams:out value="${fileInfo.fileDescription}" escapeHtml="true" />
-			</c:otherwise>
-		</c:choose>
-	</dd>
-
-</c:if>
-
-<c:set var="style">${fileInfo.removed?"style=\"margin-bottom: 5px; border-bottom: 5px solid #ddd\"":""}</c:set>
-	<dt>
+<div class="row">
+	<c:set var="style">${fileInfo.removed?"style=\"margin-bottom: 5px; border-bottom: 5px solid #ddd\"":""}</c:set>
+	<div class="col-2 fw-bold">
 		<fmt:message key="label.learner.dateOfSubmission" />:
-	</dt>
-	<dd>
+	</div>
+	<div class="col">
 		<lams:Date value="${fileInfo.dateOfSubmission}" timeago="true"/>
-	</dd>
+	</div>
+</div>
 
 <c:if test="${not fileInfo.removed and empty updateMode}">
-<!--  do not show full details if removed or on mark screen --> 
+	<!--  do not show full details if removed or on mark screen --> 
 	<%@include file="filelist.jsp"%>
 </c:if>
-</dl>
+</div>
+
 <script type="text/javascript">
 	jQuery(document).ready(function() {
 		jQuery("time.timeago").timeago();
 	});	
-</script>
\ No newline at end of file
+</script>
Index: lams_tool_scratchie/web/pages/tblmonitoring/burningQuestions.jsp
===================================================================
diff -u -re745a65b2a8cdd11176817c24cc93666040efccb -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_scratchie/web/pages/tblmonitoring/burningQuestions.jsp	(.../burningQuestions.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
+++ lams_tool_scratchie/web/pages/tblmonitoring/burningQuestions.jsp	(.../burningQuestions.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -13,6 +13,11 @@
 	.burning-questions-likes {
 		width: 50px;
 	}
+
+	.discussion-sentiment-chart-cell {
+		min-width: 300px;
+		margin: auto;
+	}
 </style>
 <script>
 	// global variable that stores information which burning question collapse panel was expanded before reload
Index: lams_tool_whiteboard/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r3340a9fb8b4f086b2aa82aa121a2c597d863e8b9 -rc52f84ea751e7f1bdfb0574df665fa66081217f9
--- lams_tool_whiteboard/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 3340a9fb8b4f086b2aa82aa121a2c597d863e8b9)
+++ lams_tool_whiteboard/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision c52f84ea751e7f1bdfb0574df665fa66081217f9)
@@ -16,10 +16,10 @@
 
 <%@ page import="org.lamsfoundation.lams.tool.whiteboard.WhiteboardConstants"%>
 
-<lams:css suffix="jquery.jRating"/>
-<link href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css"/>
-<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css" />
+<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
+<link href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css"/>
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager5.css" />
 <link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css">
 
 <style media="screen,projection" type="text/css">
@@ -159,14 +159,12 @@
 <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-editable.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
-<lams:JSImport src="includes/javascript/portrait.js" />
+<lams:JSImport src="includes/javascript/portrait5.js" />
 <script type="text/javascript" src="${lams}includes/javascript/fullscreen.js"></script>
 <lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
 <script type="text/javascript">
-	//var for jquery.jRating.js
-	var pathToImageFolder = "${lams}images/css/",
-			//vars for rating.js
-			AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
+	//vars for rating.js
+	var		AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
 			YOUR_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message></spring:escapeBody>',
 			MAX_RATES = 0,
 			MIN_RATES = 0,
@@ -487,7 +485,6 @@
 
 </script>
 <lams:JSImport src="includes/javascript/rating.js" />
-<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 
 <!-- Extra container div to isolate content from multiple Application Excercise tabs in TBL monitoring -->
 <div id="whiteboard-monitoring-summary-${sessionMap.toolContentID}" class="whiteboard-monitoring-summary">
@@ -594,7 +591,7 @@
 								<td>${groupSummary.sessionName}</td>
 								<td>
 									<lams:Rating itemRatingDto="${groupSummary.itemRatingDto}"
-												 isItemAuthoredByUser="true"
+												 isDisplayOnly="true"
 												 hideCriteriaTitle="true" />
 								</td>
 							</tr>
@@ -667,12 +664,12 @@
 				<h4>
 					<fmt:message key="label.monitoring.learner.marks.header"/>
 				</h4>
-				<lams:TSTable numColumns="2" dataId='toolSessionId="${groupSummary.sessionId}"'>
+				<lams:TSTable5 numColumns="2" dataId='toolSessionId="${groupSummary.sessionId}"'>
 					<th><fmt:message key="label.monitoring.learner.marks.name"/></th>
 					<th><fmt:message key="label.monitoring.learner.marks.mark"/>&nbsp;
 						<small><fmt:message key="label.monitoring.learner.marks.mark.tip"/></small>
 					</th>
-				</lams:TSTable>
+				</lams:TSTable5>
 			</div>
 
 			<c:if test="${sessionMap.isGroupedActivity}">
@@ -693,7 +690,7 @@
 
 	<div id="time-limit-panel-placeholder"></div>
 
-	<%@ include file="dateRestriction.jsp"%>
+	<lams:RestrictedUsageAccordian submissionDeadline="${submissionDeadline}"/>
 
 	<div id="change-leader-modals"></div>
-</div>
\ No newline at end of file
+</div>