Index: lams_tool_leader/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -rb812eb010aa5c6d01ef10b19d6325900b7ae5963 -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision b812eb010aa5c6d01ef10b19d6325900b7ae5963)
+++ lams_tool_leader/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -52,7 +52,7 @@
 outcome.authoring.existing = Added outcomes
 outcome.authoring.existing.none = none
 outcome.authoring.remove.confirm = Are you sure you want to remove this learning outcome?
-label.change.leader = Change leader
+label.change.leader = Change leader for {0}
 label.current.leader = Current leader:
 label.current.leader.none = none
 label.learner.available.in.activity = Learner has reached the activity
Index: lams_tool_leader/src/java/org/lamsfoundation/lams/tool/leaderselection/web/controller/MonitoringController.java
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/src/java/org/lamsfoundation/lams/tool/leaderselection/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_leader/src/java/org/lamsfoundation/lams/tool/leaderselection/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -200,7 +200,7 @@
 	    model.addAttribute("availableLearners", availableLearners.split(","));
 	}
 
-	return "/pages/monitoring/changeLeaderDialog5";
+	return "/pages/monitoring/changeLeaderDialog";
     }
 
     /**
Fisheye: Tag 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d refers to a dead (removed) revision in file `lams_tool_leader/web/includes/javascript/monitoring.js'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_leader/web/pages/monitoring/changeLeaderDialog.jsp
===================================================================
diff -u -r3eb8dcbf308a6b082c30d57f51e7000ebbe1c184 -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/web/pages/monitoring/changeLeaderDialog.jsp	(.../changeLeaderDialog.jsp)	(revision 3eb8dcbf308a6b082c30d57f51e7000ebbe1c184)
+++ lams_tool_leader/web/pages/monitoring/changeLeaderDialog.jsp	(.../changeLeaderDialog.jsp)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -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.firstName} ${user.lastName}" 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>
Fisheye: Tag 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d refers to a dead (removed) revision in file `lams_tool_leader/web/pages/monitoring/changeLeaderDialog5.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_leader/web/pages/monitoring/editActivity.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/web/pages/monitoring/editActivity.jsp	(.../editActivity.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_leader/web/pages/monitoring/editActivity.jsp	(.../editActivity.jsp)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -3,42 +3,38 @@
 <c:set var="dto" value="${leaderselectionDTO}" />
 
 <c:if test="${dto.contentInUse}">
-	<lams:Alert type="info" id="content-in-use" close="false">
+	<lams:Alert5 type="info" id="content-in-use">
 		<fmt:message key="message.alertContentEdit" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:if>
 
-<table class="table table-condensed">
-	<tbody>
-		<tr>
-			<td class="field-name" width="10%" nowrap>
-				<fmt:message key="label.authoring.basic.title" />
-			</td>
-			<td>
-				<c:out value="${dto.title}" escapeXml="true" />
-			</td>
-		</tr>
-		<tr>
-			<td class="field-name" width="10%" nowrap valign="top">
-				<fmt:message key="label.authoring.basic.instructions" />
-			</td>
-			<td>
-				<c:out value="${dto.instructions}" escapeXml="false" />
-			</td>
-		</tr>
-	</tbody>
-</table>
+<div class="ltable no-header">
+	<div class="row">
+		<div class="col-2">
+			<fmt:message key="label.authoring.basic.title" />
+		</div>
+		<div class="col">
+			<c:out value="${dto.title}" escapeXml="true" />
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-2">
+			<fmt:message key="label.authoring.basic.instructions" />
+		</div>
+		<div class="col">
+			<c:out value="${dto.instructions}" escapeXml="false" />
+		</div>
+	</div>
+</div>
 
-<p class="align-right">
+<div class="float-end">
 	<form id='define-later-form' method='post' action='authoring/definelater.do' target='definelater'>
 		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 		<input type="hidden" name="toolContentID" value="${dto.toolContentId}" />
 		<input type="hidden" name="contentFolderID" value="${contentFolderID}" />
 	</form>
 		
-	<a href="#nogo" onclick="javascript:launchDefineLaterPopup()" class="btn btn-default pull-right">
+	<button type="button" onclick="javascript:launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen">
 		<fmt:message key="button.editActivity" />
-	</a>
-</p>
-
-
+	</button>
+</div>
Index: lams_tool_leader/web/pages/monitoring/manageLeaders.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/web/pages/monitoring/manageLeaders.jsp	(.../manageLeaders.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_leader/web/pages/monitoring/manageLeaders.jsp	(.../manageLeaders.jsp)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -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-theme5.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>
+	<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: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.firstName} ${user.lastName}" escapeXml="true"/>
-							</div>
-						</c:forEach>
+				<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.firstName} ${user.lastName}" escapeXml="true"/>
+						</label>
 					</div>
 				</c:forEach>
-			</form>
-
-			<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>
 			</div>
+		</c:forEach>
+	</form>
 
-		</div>
-		<!--closes content-->
-	
-		<div id="footer"></div>
-
-	</lams:Page>		
-	</body>
-</lams:html>
+	<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/monitoring.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_leader/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -1,53 +1,14 @@
 <!DOCTYPE html>
 <%@ page import="org.lamsfoundation.lams.tool.leaderselection.util.LeaderselectionConstants"%>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="tool"><lams:WebAppURL /></c:set>
-<c:set var="lams"><lams:LAMSURL /></c:set>
 
-<lams:html>
-	<lams:head>
-		<title>
-			<fmt:message key="activity.title" />
-		</title>
-		<lams:headItems />
-		
-		<link type="text/css" href="${lams}css/thickbox.css" rel="stylesheet"  media="screen">
-		<link type="text/css" href="${lams}/css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
-		<style media="screen,projection" type="text/css">
-			.bottom-buttons {margin: 20px 20px 0px; padding-bottom: 10px;}
-			table {padding: 10px;}
-		</style>
-		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
-		<lams:JSImport src="includes/javascript/portrait5.js" />
-		<script type="text/javascript" src="${tool}includes/javascript/monitoring.js"></script>
-	</lams:head>
-
-	<body class="stripes" onload="init();">
-		<c:set var="title"><fmt:message key="activity.title" /></c:set>
-		<lams:Page title="${title}" type="navbar">
-	
-		<lams:Tabs title="${title}" control="true" helpToolSignature="<%= LeaderselectionConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
-			<lams:Tab id="1" key="button.summary" />
-			<lams:Tab id="2" key="button.editActivity" />
-			<lams:Tab id="3" key="button.statistics" />
-		</lams:Tabs>
-
-		<script type="text/javascript">
-			var initialTabId = "${leaderselectionDTO.currentTab}";
-		</script>
-	
-		<lams:TabBodyArea>
-			<lams:TabBodys>
-				<lams:TabBody id="1" page="summary.jsp" />
-				<lams:TabBody id="2" page="editActivity.jsp" />
-				<lams:TabBody id="3" page="statistics.jsp" />
-			</lams:TabBodys>
-		</lams:TabBodyArea>
-		
-		<div id="footer" />
-	
-		</lams:Page>
-	</body>
-</lams:html>
\ No newline at end of file
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+		helpToolSignature="<%= LeaderselectionConstants.TOOL_SIGNATURE %>"
+		initialTabId="${leaderselectionDTO.currentTab}"
+		tab1Label="button.summary"
+		tab2Label="button.editActivity"
+		tab3Label="button.statistics"
+		tab1Jsp="summary.jsp"
+		tab2Jsp="editActivity.jsp"
+		tab3Jsp="statistics.jsp"/>
Index: lams_tool_leader/web/pages/monitoring/statistics.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/web/pages/monitoring/statistics.jsp	(.../statistics.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_leader/web/pages/monitoring/statistics.jsp	(.../statistics.jsp)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -2,43 +2,41 @@
 <c:set var="dto" value="${leaderselectionDTO}" />
 
 <c:forEach var="session" items="${dto.sessionDTOs}">
-
 	<c:if test="${isGroupedActivity}">
-		<div class="panel panel-default" >
-        <div class="panel-heading" id="headingStats${session.sessionID}">
-   	    	<span class="panel-title collapsable-icon-left">
-	       		<a role="button" data-toggle="collapse" href="#collapseStats${session.sessionID}" 
-						aria-expanded="false" aria-controls="collapseStats${session.sessionID}" >
+		<div class="lcard" >
+        <div class="card-header" id="headingStats${session.sessionID}">
+   	    	<span class="card-title collapsable-icon-left">
+	       		<button type="button" data-bs-toggle="collapse" class="btn btn-secondary-darker no-shadow" data-bs-target="#collapseStats${session.sessionID}" 
+						aria-expanded="true" aria-controls="collapseStats${session.sessionID}" >
 					${session.sessionName}
-				</a>
+				</button>
 			</span>
        	</div>
        
-        <div id="collapseStats${session.sessionID}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingStats${session.sessionID}">
+        <div id="collapseStats${session.sessionID}" class="card-body collapse show">
 	</c:if>
 
-		<table class="table table-condensed">
-			<tr>
-				<td class="field-name" width="40%">
-					<fmt:message>heading.totalLearnersInGroup</fmt:message>
-				</td>
-				<td width="70%">
-					${session.numberOfLearners}
-				</td>
-			</tr>
-			<tr>
-				<td class="field-name" width="40%">
-					<fmt:message>heading.totalFinishedLearnersInGroup</fmt:message>
-				</td>
-				<td width="70%">
-					${session.numberOfFinishedLearners}
-				</td>
-			</tr>
-		</table>
+	<div class="ltable">
+		<div class="row">
+			<div class="col">
+				<fmt:message>heading.totalLearnersInGroup</fmt:message>
+			</div>
+			<div class="col">
+				${session.numberOfLearners}
+			</div>
+		</div>
+		<div class="row">
+			<div class="col">
+				<fmt:message>heading.totalFinishedLearnersInGroup</fmt:message>
+			</div>
+			<div class="col">
+				${session.numberOfFinishedLearners}
+			</div>
+		</div>
+	</div>
 	
 	<c:if test="${isGroupedActivity}">
 		</div> <!-- end collapse area  -->
 		</div> <!-- end collapse panel  -->
-	</c:if>
-		
+	</c:if>		
 </c:forEach>
Index: lams_tool_leader/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -r4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d
--- lams_tool_leader/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_leader/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 4f1f5bd1e1e2bee3a1868c66b99a331534f56a8d)
@@ -1,57 +1,58 @@
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="tool"><lams:WebAppURL /></c:set>
+<c:set var="lams"><lams:LAMSURL /></c:set>
 
+<link type="text/css" href="${lams}css/thickbox.css" rel="stylesheet"  media="screen">
+<link type="text/css" href="${lams}/css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">		
+		
+<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
+<lams:JSImport src="includes/javascript/portrait5.js" />
 <script type="text/javascript">
 	$(document).ready(function(){
 		initializePortraitPopover("<lams:LAMSURL />");
 	});
 </script>
 
-<div class="panel">
-	<h4>
+<div class="instructions">
+	<div class="fs-4">
 	    <c:out value="${leaderselectionDTO.title}" escapeXml="true"/>
-	</h4>
-	<div class="instructions voffset5">
+	</div>
+	<div class="mt-2">
 	    <c:out value="${leaderselectionDTO.instructions}" escapeXml="false"/>
 	</div>
 </div>
 
-<c:if test="${isGroupedActivity}">
-	<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
-</c:if>
-
 <c:forEach var="session" items="${leaderselectionDTO.sessionDTOs}">
-
 	<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 role="button" data-toggle="collapse" href="#collapse${session.sessionID}" 
+		<div class="lcard" >
+        	<div class="card-header" id="heading${session.sessionID}">
+   	    		<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${session.sessionID}" 
 							aria-expanded="false" aria-controls="collapse${session.sessionID}" >
 						${session.sessionName}
-					</a>
+					</button>
 				</span>
        		</div>
-       
-        	<div id="collapse${session.sessionID}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading${session.sessionID}">
+
+        	<div id="collapse${session.sessionID}" class="card-body collapse show">
 	</c:if>
 
-	<table class="table table-condensed table-striped">
-	
-		<tr>
-			<th>
+	<div class="ltable table-hover">
+		<div class="row">
+			<div class="col">
 				<fmt:message key="heading.learner" />
-			</th>
-			<th style="text-align: center;">
+			</div>
+			<div class="col text-center">
 				<fmt:message key="heading.leader" />
-			</th>
-		</tr>
+			</div>
+		</div>
 		
 		<c:forEach var="user" items="${session.userDTOs}">
-			<tr>
-				<td width="30%">
+			<div class="row">
+				<div class="col">
 					<lams:Portrait userId="${user.userId}" hover="true"><c:out value="${user.firstName} ${user.lastName}" escapeXml="true"/></lams:Portrait>
-				</td>
-				<td width="70%" align="center">
+				</div>
+				<div class="col text-center">
 					<c:choose>
 						<c:when test="${session.groupLeader != null && session.groupLeader.uid == user.uid}">
 							<i class="fa fa-check"></i>
@@ -61,24 +62,18 @@
 							-
 						</c:otherwise>
 					</c:choose>
-				</td>
-			</tr>
+				</div>
+			</div>
 		</c:forEach>
-		
-	</table>
+	</div>
 	
 	<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> 
-</c:if>
-
-<a href="<c:url value='/monitoring/manageLeaders.do?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true'/>" class="btn btn-default pull-right thickbox">
+<a href="<c:url value='/monitoring/manageLeaders.do?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true'/>" class="btn btn-secondary float-end mb-3 thickbox">
+	<i class="fa-solid fa-user-pen me-1"></i>
 	<fmt:message key="label.manage.leaders" />
 </a>