Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rd0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628 -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision d0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -2435,8 +2435,6 @@
 		},
 		'dataType' : 'json',
 		'success'  : function(response) {
-			let learnerProgressSource = null;
-			
 			$(response.learners).each(function(){
 				let learner = this,
 					itemHeaderId = 'learners-accordion-heading-' + learner.id,
@@ -2742,6 +2740,8 @@
 		tabName = 'learners';
 	} else if ($('#gradebookDiv').length === 1){
 		tabName = 'gradebook';
+	} else if ($('#tbl-teams-tab-content').length == 1) {
+		tabName = 'teams';
 	}
 	
 	if (tabName == 'sequence'){
@@ -2750,6 +2750,8 @@
 		updateLearnersTab();
 	} else if (tabName == 'gradebook'){
 		updateGradebookTab();
+	} else if (tabName == 'teams'){
+		loadTab('teams');
 	}
 }
 
Index: lams_monitoring/web/tblmonitor/gates5.jsp
===================================================================
diff -u
--- lams_monitoring/web/tblmonitor/gates5.jsp	(revision 0)
+++ lams_monitoring/web/tblmonitor/gates5.jsp	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -0,0 +1,98 @@
+<%@ include file="/taglibs.jsp"%>
+
+<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>
+
+<script type="text/javascript">
+	$(document).ready(function() {$("time.timeago").timeago();});
+	
+
+	function openGateNow(activityId) {
+		var data = {
+			'activityId' : activityId,
+			'<csrf:tokenname/>' : '<csrf:tokenvalue/>'
+		};
+		$.ajax({
+			'type' : 'post',
+			'url'  : '<lams:LAMSURL/>monitoring/gate/openGate.do',
+			'data'  : data,
+			'success' : function(){
+				refresh();
+			}
+		});
+	}
+</script>
+
+<!-- Header -->
+<div class="row no-gutter">
+	<div class="col-xs-12 col-md-12 col-lg-8">
+		<h3>
+			<fmt:message key="label.gates"/>
+		</h3>
+	</div>
+</div>
+<!-- End header -->
+
+<!-- Tables -->
+<div class="row no-gutter">
+<div class="col-xs-12 col-md-12 col-lg-12">
+
+	<c:forEach var="permissionGate" items="${permissionGates}">
+			
+		<div class="panel panel-default">
+			<div class="panel-heading">
+			</div>
+			
+			<div class="panel-body">
+				<c:out value="${permissionGate.title}" escapeXml="false"/>
+				<c:choose>
+					<c:when test="${permissionGate.complete}">
+						<br />
+						<small>
+						<fmt:message key="label.gate.gate.open"/>
+						<c:if test="${not empty permissionGate.openTime}">
+							&nbsp;<lams:Date value="${permissionGate.openTime}" timeago="true" />
+						</c:if>
+						<c:if test="${not empty permissionGate.openUser}">
+							&nbsp;<fmt:message key="label.gate.gate.open.user">
+								<fmt:param value="${permissionGate.openUser}" />
+							</fmt:message>
+						</c:if>
+						</small>
+						<i class="fa fa-check-square" 
+						   onClick="javascript:openPopUp('${permissionGate.url}','ContributeActivity', 600, 800, true)"
+						   title="<fmt:message key='button.task.gate.opened.tooltip'/>"></i>
+					</c:when>
+					<c:otherwise>
+						<c:if test="${permissionGate.waitingLearnersCount > 0}">
+							<br/>
+							<small class="m-r">
+								<i class="fa fa-users fa-users-at-gate"></i>
+													 
+								<fmt:message key="label.users.knocking.on.gate">
+									<fmt:param>${permissionGate.waitingLearnersCount}</fmt:param>
+								</fmt:message>
+							</small>
+						</c:if>
+
+						<button type="button" class="btn btn-sm btn-primary pull-right loffset10"
+								title="<fmt:message key='button.task.gate.open.tooltip'/>"
+								onClick="javascript:openPopUp('${permissionGate.url}','ContributeActivity', 600, 800, true)">
+							<fmt:message key="button.task.gate.open"/>
+						</button>
+						<button type="button" class="btn btn-sm btn-primary pull-right"
+								title="<fmt:message key='button.task.gate.open.now.tooltip'/>"
+								onClick="javascript:openGateNow(${permissionGate.activityID})">
+							<fmt:message key="button.task.gate.open.now"/>
+						</button>
+					</c:otherwise>
+				</c:choose>
+						
+			</div>
+		</div>			
+			
+	</c:forEach> 
+
+</div>
+</div>
Index: lams_monitoring/web/tblmonitor/teams5.jsp
===================================================================
diff -u -rc9048d2a6d579af33cc6b3a36e716715be8e9b2b -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38
--- lams_monitoring/web/tblmonitor/teams5.jsp	(.../teams5.jsp)	(revision c9048d2a6d579af33cc6b3a36e716715be8e9b2b)
+++ lams_monitoring/web/tblmonitor/teams5.jsp	(.../teams5.jsp)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -1,7 +1,9 @@
 <%@ include file="/taglibs.jsp"%>
 <style>
 	
-	#tbl-teams-tab-content .card-header {
+	#tbl-teams-tab-content .card-header,
+	#tbl-teams-tab-content a.card-title,
+	#tbl-teams-tab-content a.ira-modal-link {
 	   	cursor: pointer;
 	}
 	
@@ -34,13 +36,13 @@
 						datasets : [ {
 							label: "<fmt:message key='label.ira' />",
 							data : summaryChartIraDataset,
-							backgroundColor : 'rgba(255, 195, 55, 1)'
+							backgroundColor : 'rgba(249, 248, 113, 0.85)'
 											  
 						},
 						{
 							label: "<fmt:message key='label.tra' />",
 							data : summaryChartTraDataset,
-							backgroundColor : 'rgba(5, 204, 214, 1)'
+							backgroundColor : 'rgba(1, 117, 226, 0.85)'
 											  
 						}],
 						labels : summaryChartNamesDataset
@@ -109,13 +111,13 @@
 					datasets : [ {
 						label: "iRAT",
 						data : iraScores,
-						backgroundColor : 'rgba(255, 195, 55, 1)'
+						backgroundColor : 'rgba(249, 248, 113, 0.85)'
 										  
 					},
 					{
 						label: "tRAT",
 						data : traScores,
-						backgroundColor : 'rgba(5, 204, 214, 1)'
+						backgroundColor : 'rgba(1, 117, 226, 0.85)'
 										  
 					}],
 					labels : userNames
@@ -162,7 +164,8 @@
 			$('#ira-correct-answer-count').html(userScore);
 
 			//load modal dialog content using Ajax
-			var url = "${isIraMcqAvailable}" == "true" ? "<lams:LAMSURL/>tool/lamc11/tblmonitoring/getModalDialogForTeamsTab.do" : "<lams:LAMSURL/>tool/laasse10/tblmonitoring/getModalDialogForTeamsTab.do";
+			var url = "${isIraMcqAvailable}" == "true" ? "<lams:LAMSURL/>tool/lamc11/tblmonitoring/getModalDialogForTeamsTab.do" 
+													   : "<lams:LAMSURL/>tool/laasse10/tblmonitoring/getModalDialogForTeamsTab.do";
 			$('#ira-modal .modal-body').load(
 				url, 
 				{
@@ -206,13 +209,20 @@
 		});
 
 		$('[data-toggle="tooltip"]').tooltip();
+
+		if (sequenceSearchedLearner) {
+			 $('html,body').animate({scrollTop: $('#user-name-' + sequenceSearchedLearner).offset().top},'slow');
+		}
 	});
 
 	function showChangeLeaderModal(groupID) {
-		$('#change-leader-modals').empty()
+		var modalContainer = $('#change-leader-modals');
+		modalContainer.empty()
 		.load('<lams:LAMSURL/>tool/lalead11/monitoring/displayChangeLeaderForGroupDialog.do',{
 			leaderSelectionToolContentId : '${leaderSelectionToolContentId}',
 			groupId : groupID
+		}, function(){
+			modalContainer.children('.modal').modal('show');
 		});
 	}
 
@@ -442,7 +452,7 @@
 										<h5 class="card-title"><fmt:message key="label.tra.correct.count"/>: ${groupDto.traCorrectAnswerCount}</h5>
 									</c:when>
 									<c:otherwise>
-										<a data-toggle="modal" href="#tra-modal"
+										<a data-bs-toggle="modal" data-bs-target="#tra-modal"
 										   data-user-id="${groupDto.groupLeader.userID}"
 										   data-tra-correct-answer-count="${groupDto.traCorrectAnswerCount}"
 										   class="card-title text-decoration-none">
@@ -485,13 +495,13 @@
 											<c:forEach var="userDto" items="${groupDto.userList}">
 											
 												<tr>
-													<td class="">
+													<td>
 														<c:choose>
 															<c:when test="${empty userDto.iraCorrectAnswerCount}">
 																<c:out value="${userDto.lastName}" />,&nbsp;<c:out value="${userDto.firstName}" />
 															</c:when>
 															<c:otherwise>
-																<a data-toggle="modal" href="#ira-modal"
+																<a class="text-decoration-none ira-modal-link" data-bs-toggle="modal" data-bs-target="#ira-modal"
 																   data-user-id="${userDto.userID}"
 																   data-ira-correct-answer-count="${userDto.iraCorrectAnswerCount}">
 																	<span id="user-name-${userDto.userID}" class="belong-to-group-${groupDto.groupID} new-popover <c:if test="${userDto.groupLeader}">fw-bold</c:if>" 
@@ -502,7 +512,7 @@
 															</c:otherwise>
 														</c:choose>
 														<c:if test="${userDto.groupLeader}">
-															<abbr title="Leader" class="fa fa-user-plus" style="color:darkorange"></abbr>
+															<abbr title="Leader" class="fa fa-user-plus" style="color: var(--bs-red)"></abbr>
 														</c:if>
 													</td>
 													
@@ -512,7 +522,7 @@
 																-													
 															</c:when>
 															<c:otherwise>
-																<a data-toggle="modal" href="#ira-modal"
+																<a class="text-decoration-none ira-modal-link" data-bs-toggle="modal" data-bs-target="#ira-modal"
 																		data-user-id="${userDto.userID}"
 																		data-ira-correct-answer-count="${userDto.iraCorrectAnswerCount}">
 																	${userDto.iraCorrectAnswerCount}
@@ -628,15 +638,10 @@
 <div class="modal-dialog">
 <div class="modal-content">
 	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal">
-			<span aria-hidden="true"><i class="fa fa-close"></i></span>
-			<span class="sr-only">
-				<fmt:message key="button.close"/>
-			</span>
-		</button>
 		<h4 class="modal-title" id="exampleModalLabel">
 			<fmt:message key="label.bar.chart"/>
 		</h4>
+		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 	</div>
           
 	<div class="modal-body">
@@ -653,20 +658,20 @@
 <div class="modal-content">
 
 	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
-		<h4 class="modal-title">
-			<fmt:message key="label.ira.responses.for"/>: <span id="ira-user-name-label"></span> 
-		</h4>
-		<fmt:message key="label.ira.correct.count"/>: <span id="ira-correct-answer-count"></span>
+		<div class="modal-title">
+			<h4>
+				<fmt:message key="label.ira.responses.for"/>: <span id="ira-user-name-label"></span> 
+			</h4>
+			<fmt:message key="label.ira.correct.count"/>: <span id="ira-correct-answer-count"></span>
+		</div>
+		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 	</div>
           
-	<!-- Begin -->
 	<div class="modal-body">
 	</div>
-	<!-- end -->  
 	
 	<div class="modal-footer">	
-		<a href="#" data-dismiss="modal" class="btn btn-default">
+		<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
 			<fmt:message key="button.ok"/>
 		</a>
 	</div>
@@ -682,11 +687,13 @@
 <div class="modal-content">
 
 	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close"></i></button>
-		<h4 class="modal-title">
-			<fmt:message key="label.tra.responses.for"/>: <span id="tra-user-name-label"></span> 
-		</h4>
-		<fmt:message key="label.tra.correct.count"/>: <span id="tra-correct-answer-count"></span>
+		<div class="modal-title">
+			<h4>
+				<fmt:message key="label.tra.responses.for"/>: <span id="tra-user-name-label"></span> 
+			</h4>
+			<fmt:message key="label.tra.correct.count"/>: <span id="tra-correct-answer-count"></span>
+		</div>
+		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 	</div>
           
 	<!-- Begin -->
@@ -695,7 +702,7 @@
 	<!-- end -->  
 	
 	<div class="modal-footer">	
-		<a href="#" data-dismiss="modal" class="btn btn-primary">
+		<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
 			<fmt:message key="button.ok"/>
 		</a>
 	</div>
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/TblMonitoringController.java
===================================================================
diff -u -ra6bd52bd717d1e9e860036461c7c71c45cf8113a -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/TblMonitoringController.java	(.../TblMonitoringController.java)	(revision a6bd52bd717d1e9e860036461c7c71c45cf8113a)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/TblMonitoringController.java	(.../TblMonitoringController.java)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -49,9 +49,6 @@
     @Qualifier("laasseAssessmentService")
     private IAssessmentService assessmentService;
 
-    @Autowired
-    private ILearnerService learnerService;
-
     /**
      * Shows ira page in case of Assessment activity
      */
@@ -352,7 +349,7 @@
 	AssessmentResultDTO result = assessmentService.getUserMasterDetail(user.getSession().getSessionId(), userId);
 	request.setAttribute(AssessmentConstants.ATTR_ASSESSMENT_RESULT, result);
 
-	return "pages/tblmonitoring/teams";
+	return "pages/tblmonitoring/teams5";
     }
 
 }
Index: lams_tool_assessment/web/pages/tblmonitoring/teams5.jsp
===================================================================
diff -u
--- lams_tool_assessment/web/pages/tblmonitoring/teams5.jsp	(revision 0)
+++ lams_tool_assessment/web/pages/tblmonitoring/teams5.jsp	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -0,0 +1,148 @@
+<%@ include file="/common/taglibs.jsp"%>
+
+<c:forEach var="questionResult" items="${assessmentResult.questionResults}" varStatus="i">
+	<c:set var="question" value="${questionResult.questionDto}"/>
+	
+	<div class="card mb-3">
+		<div class="card-header">
+			<span class="card-title fw-bold">
+				<span class="float-start space-right">Q${i.index+1})</span> 
+				<c:out value="${question.title}" escapeXml="false"/>
+			</span> 
+		</div>
+	              
+		<div class="card-body">
+			<table class="table table-responsive">
+				<tbody>
+					<tr>
+						<td>
+							<c:choose>
+								<c:when test="${question.type == 1}">
+									<c:forEach var="option" items="${question.optionDtos}">
+										<c:forEach var="optionAnswer" items="${questionResult.optionAnswers}">
+											<c:if test="${optionAnswer.answerBoolean && (optionAnswer.optionUid == option.uid)}">
+												<div class="clearfix">
+													${option.name}
+												
+													<c:choose>
+														<c:when test="${option.maxMark == 1}">
+															<i class="fa fa-check-square text-success"></i>
+														</c:when>
+														<c:when test="${option.maxMark <= 0}">
+															<i class="fa fa-minus-square text-danger"></i>
+														</c:when>
+													</c:choose>
+												</div>
+											</c:if>
+										</c:forEach>					
+									</c:forEach>						
+								</c:when>
+													
+								<c:when test="${question.type == 2}">
+									<c:forEach var="option" items="${question.optionDtos}">
+										<div>
+											<div style="float: left;">
+												${option.matchingPair}
+											</div>
+											<div style=" float: right; width: 50%;">
+															 - 
+												<c:forEach var="optionAnswer" items="${questionResult.optionAnswers}">
+													<c:if test="${option.uid == optionAnswer.optionUid}">
+														<c:forEach var="optionIter" items="${question.optionDtos}">
+															<c:if test="${optionIter.uid == optionAnswer.answerInt}">
+																${optionIter.name}
+																
+																<c:choose>
+																	<c:when test="${optionAnswer.optionUid == optionAnswer.answerInt}">
+																		<i class="fa fa-check-square text-success"></i>
+																	</c:when>
+																	<c:otherwise>
+																		<i class="fa fa-minus-square text-danger"></i>
+																	</c:otherwise>
+																</c:choose>
+															</c:if>
+														</c:forEach>
+													</c:if>
+												</c:forEach>										
+											</div>
+										</div>
+										<br>
+									</c:forEach>
+								</c:when>
+													
+								<c:when test="${question.type == 3 || question.type == 4}">
+									${fn:escapeXml(questionResult.answer)}
+
+									<c:choose>
+										<c:when test="${not empty questionResult.qbOption && questionResult.qbOption.maxMark == 1}">
+											<i class="fa fa-check-square text-success"></i>
+										</c:when>
+										<c:when test="${empty questionResult.qbOption || not empty questionResult.qbOption && questionResult.qbOption.maxMark <= 0}">
+											<i class="fa fa-minus-square text-danger"></i>
+										</c:when>
+									</c:choose>
+								</c:when>
+													
+								<c:when test="${question.type == 5}">
+									<c:if test="${questionResult.answer != null}">			
+										${questionResult.answerBoolean}
+										
+										<c:choose>
+											<c:when test="${questionResult.answerBoolean == question.correctAnswer}">
+												<i class="fa fa-check-square"></i>
+											</c:when>
+											<c:otherwise>
+												<i class="fa fa-minus-square"></i>
+											</c:otherwise>
+										</c:choose>
+									</c:if>
+								</c:when>
+													
+								<c:when test="${question.type == 6}">
+									${questionResult.answer}
+								</c:when>
+													
+								<c:when test="${question.type == 7}">
+									<c:forEach var="j" begin="0" end="${fn:length(questionResult.optionAnswers) - 1}" step="1">
+										<c:forEach var="optionAnswer" items="${questionResult.optionAnswers}">
+											<c:if test="${optionAnswer.answerInt == j}">		
+												<c:forEach var="option" items="${question.optionDtos}">
+													<c:if test="${optionAnswer.optionUid == option.uid}">
+														${option.name}
+													</c:if>
+												</c:forEach>
+											</c:if>								
+										</c:forEach>
+									</c:forEach>
+								</c:when>
+													
+								<c:when test="${question.type == 8}">
+									<c:forEach var="option" items="${question.optionDtos}">
+										<div>
+											<div style="float: left;">
+												${option.name}
+											</div>
+											<div style=" float: right; width: 20%;">
+												- 
+												<c:forEach var="optionAnswer" items="${questionResult.optionAnswers}">
+													<c:if test="${option.uid == optionAnswer.optionUid}">
+														${optionAnswer.answerInt}
+														
+														<c:if test="${optionAnswer.answerInt > 0 && option.correct}">
+															<i class="fa fa-check-square text-success"></i>
+														</c:if>
+													</c:if>
+												</c:forEach>										
+											</div>
+										</div>
+										<br>
+									</c:forEach>
+								</c:when>
+							</c:choose>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</c:forEach>
Index: lams_tool_leader/src/java/org/lamsfoundation/lams/tool/leaderselection/web/controller/MonitoringController.java
===================================================================
diff -u -r3eb8dcbf308a6b082c30d57f51e7000ebbe1c184 -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38
--- lams_tool_leader/src/java/org/lamsfoundation/lams/tool/leaderselection/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision 3eb8dcbf308a6b082c30d57f51e7000ebbe1c184)
+++ lams_tool_leader/src/java/org/lamsfoundation/lams/tool/leaderselection/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -201,7 +201,7 @@
 	    model.addAttribute("availableLearners", availableLearners.split(","));
 	}
 
-	return "/pages/monitoring/changeLeaderDialog";
+	return "/pages/monitoring/changeLeaderDialog5";
     }
 
     /**
Index: lams_tool_leader/web/pages/monitoring/changeLeaderDialog5.jsp
===================================================================
diff -u
--- lams_tool_leader/web/pages/monitoring/changeLeaderDialog5.jsp	(revision 0)
+++ lams_tool_leader/web/pages/monitoring/changeLeaderDialog5.jsp	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -0,0 +1,98 @@
+<%@ include file="/common/taglibs.jsp"%>
+
+<script>
+	$(document).ready(function(){
+		<c:if test="${not empty groupLeader}">
+			$('input[name="change-leader-radio-${groupId}"][value="${groupLeader.userId}"]').prop('checked', true);
+		</c:if>
+			 
+		// Change leader button handler 
+		var changeLeaderModalGroup${groupId} = $('#change-leader-modal-${groupId}').modal();
+		
+		$('.change-leader-button', changeLeaderModalGroup${groupId}).click(function () {
+				var leaderUserId = $('input[name="change-leader-radio-${groupId}"]:checked').val();
+				if (!leaderUserId || leaderUserId == '${not empty groupLeader ? groupLeader.userId : ""}') {
+					return;
+				}
+				
+		        $.ajax({
+		            url: '<lams:WebAppURL />monitoring/changeLeaderForGroup.do',
+		            data: {
+		            	toolContentID : ${toolContentID},
+		            	userID: leaderUserId,
+		    			'<csrf:tokenname/>' : '<csrf:tokenvalue/>',
+			        },
+		            type: 'post',
+		            success: function (response) {
+			            if (typeof onChangeLeaderCallback == 'function') {
+				            onChangeLeaderCallback(response, leaderUserId, '${toolSessionId}');
+				        }
+		            }
+		       	});
+			});
+	});
+</script>
+
+<div class="modal fade" id="change-leader-modal-${groupId}">
+	<div class="modal-dialog modal-lg">
+		<div class="modal-content">
+		
+			<div class="modal-header">
+				<div class="modal-title">
+					<h4>
+						<fmt:message key="label.change.leader"/>
+					</h4>
+					<c:if test="${empty toolSessionId}">
+						<small>
+							<fmt:message key="label.note.leader.change"/>
+						</small>
+					</c:if>
+				</div>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			</div>
+			
+			<div class="modal-body">
+				<h4>${groupName}</h4> 
+				<fmt:message key="label.current.leader"/>&nbsp;
+				<c:choose>
+					<c:when test="${empty groupLeader}">
+						<fmt:message key="label.current.leader.none"/>
+					</c:when>
+					<c:otherwise>
+						<c:out value="${groupLeader.firstName} ${groupLeader.lastName}" escapeXml="true" />
+					</c:otherwise>
+				</c:choose>
+				
+				<div id="usersInGroup">
+					<c:forEach var="user" items="${members}">
+						<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.firstName} ${user.lastName}" escapeXml="true" />
+									<c:forEach var="availableLearnerId" items="${availableLearners}">
+										<c:if test="${user.userId eq availableLearnerId}">
+											&nbsp;<i class="fa fa-check text-success" title="<fmt:message key='label.learner.available.in.activity'/>"></i>
+										</c:if>
+									</c:forEach>
+								</span>
+							  </label>
+						</div>
+					</c:forEach>
+				</div>
+			</div>
+			
+			<div class="modal-footer">	
+				<a href="#" data-bs-dismiss="modal" class="btn btn-secondary">
+					<fmt:message key="button.cancel"/>
+				</a>
+				<a href="#" data-bs-dismiss="modal" class="btn btn-primary change-leader-button">
+					<fmt:message key="button.save"/>
+				</a>
+			</div>
+		</div>
+	          
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java
===================================================================
diff -u -rca273b5530c1fead65c271da891dcdd3cb5709f7 -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38
--- lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java	(.../TblMonitorController.java)	(revision ca273b5530c1fead65c271da891dcdd3cb5709f7)
+++ lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java	(.../TblMonitorController.java)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -212,6 +212,6 @@
 		: scratchieService.getItemsWithIndicatedScratches(user.getSession().getSessionId());
 
 	request.setAttribute("scratchieItems", scratchieItems);
-	return "pages/tblmonitoring/teams";
+	return "pages/tblmonitoring/teams5";
     }
 }
Index: lams_tool_scratchie/web/pages/tblmonitoring/teams5.jsp
===================================================================
diff -u
--- lams_tool_scratchie/web/pages/tblmonitoring/teams5.jsp	(revision 0)
+++ lams_tool_scratchie/web/pages/tblmonitoring/teams5.jsp	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
@@ -0,0 +1,44 @@
+<%@ include file="/common/taglibs.jsp"%>
+
+<c:forEach var="item" items="${scratchieItems}" varStatus="i">
+	<div class="card mb-3">
+			
+		<div class="card-header">
+			<span class="card-title fw-bold">
+				<span class="float-start me-2">Q${i.index+1})</span> 
+				<c:out value="${item.qbQuestion.name}" escapeXml="false"/>
+			</span> 
+		</div>
+				
+		<div class="card-body">
+			<table class="table table-responsive">
+				<tbody>
+					<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="j">
+						<c:if test="${optionDto.scratched}">
+								
+							<tr>
+								<td width="5px">
+									${ALPHABET[j.index]}.
+								</td>
+								<td>
+									<c:out value="${optionDto.answer}" escapeXml="${!optionDto.mcqType}"/>
+									
+									<c:choose>
+										<c:when test="${optionDto.correct}">
+											<i class="fa fa-check-square text-success"></i>
+										</c:when>
+										<c:otherwise>
+											<i class="fa fa-minus-square text-danger"></i>
+										</c:otherwise>
+									</c:choose>
+								</td>
+							</tr>
+									
+						</c:if>
+					</c:forEach>
+				</tbody>
+			</table>
+		</div>
+				
+	</div> 
+</c:forEach>