Index: lams_tool_larsrc/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -r5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610 -r23b477adb4e0891c656b111fd791f6c41b9b4d36
--- lams_tool_larsrc/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610)
+++ lams_tool_larsrc/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 23b477adb4e0891c656b111fd791f6c41b9b4d36)
@@ -29,7 +29,8 @@
 	<c:set var="tab2Jsp">editactivity.jsp</c:set>
 	<c:set var="tab3Jsp">statistic.jsp</c:set>
 </c:if>
-<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="lams" scope="request"><lams:LAMSURL /></c:set>
+<c:set var="tool" scope="request"><lams:WebAppURL/></c:set>
 
 <lams:html>
     <lams:head>
Index: lams_tool_larsrc/web/pages/monitoring/comments.jsp
===================================================================
diff -u -rcc5613c2fcc477b2ed37af8ae2cc469648b9d71a -r23b477adb4e0891c656b111fd791f6c41b9b4d36
--- lams_tool_larsrc/web/pages/monitoring/comments.jsp	(.../comments.jsp)	(revision cc5613c2fcc477b2ed37af8ae2cc469648b9d71a)
+++ lams_tool_larsrc/web/pages/monitoring/comments.jsp	(.../comments.jsp)	(revision 23b477adb4e0891c656b111fd791f6c41b9b4d36)
@@ -10,5 +10,3 @@
 		/>
 	</div>
 </lams:PageLearner>
-
-
Index: lams_tool_larsrc/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -r23b477adb4e0891c656b111fd791f6c41b9b4d36
--- lams_tool_larsrc/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_larsrc/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 23b477adb4e0891c656b111fd791f6c41b9b4d36)
@@ -2,42 +2,120 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="resource" value="${sessionMap.resource}"/>
 
+<c:set var="adTitle"><fmt:message key="monitoring.tab.edit.activity" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+
 <c:if test="${sessionMap.isPageEditable}">
-	<lams:Alert type="warn" id="no-edit" close="false">
+	<lams:Alert5 type="warn" id="no-edit">
 		<fmt:message key="message.alertContentEdit" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:if>
 
-<table class="table table-condensed">
+<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="${sessionMap.toolContentID}" />
+	<input type="hidden" name="contentFolderID" value="${sessionMap.contentFolderID}" />
+</form>
+
+<button type="button" onclick="launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen float-end m-3">
+	<fmt:message key="label.monitoring.edit.activity.edit" />
+</button>
+
+<table class="table table-striped table-condensed mb-0">
 	<tr>
-		<td width="15%" nowrap>
-			<fmt:message key="label.authoring.basic.title" />:
+		<td>
+			<fmt:message key="label.authoring.basic.title" />
 		</td>
 		<td>
 			<c:out value="${resource.title}" escapeXml="true" />
 		</td>
 	</tr>
 
 	<tr>
-		<td width="15%" nowrap>
-			<fmt:message key="label.authoring.basic.instruction" />:
+		<td>
+			<fmt:message key="label.authoring.basic.instruction" />
 		</td>
 		<td>
 			<c:out value="${resource.instructions}" escapeXml="false" />
 		</td>
 	</tr>
 
 	<tr>
-		<td colspan="2">
-			<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="${sessionMap.toolContentID}" />
-				<input type="hidden" name="contentFolderID" value="${sessionMap.contentFolderID}" />
-			</form>
+		<td>
+			<fmt:message key="label.authoring.advance.lock.on.finished" />
+		</td>
+		
+		<td>
+			<c:choose>
+				<c:when test="${sessionMap.resource.lockWhenFinished == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
 	
-			<a href="#nogo" onclick="javascript:launchDefineLaterPopup()" class="btn btn-default pull-right">
-				<fmt:message key="label.monitoring.edit.activity.edit" />
-			</a>
+	<tr>
+		<td>
+			<fmt:message key="label.authoring.advance.mini.number.resources.view" />
 		</td>
+		
+		<td>
+			${sessionMap.resource.miniViewResourceNumber}
+		</td>
 	</tr>
+	
+	<tr>
+		<td>
+			<fmt:message key="label.authoring.advance.allow.learner.add.urls" />
+		</td>
+		
+		<td>
+			<c:choose>
+				<c:when test="${sessionMap.resource.allowAddUrls == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	<tr>
+		<td>
+			<fmt:message key="label.authoring.advance.allow.learner.add.files" />
+		</td>
+		
+		<td>
+			<c:choose>
+				<c:when test="${sessionMap.resource.allowAddFiles == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	<tr>
+		<td>
+			<fmt:message key="label.authoring.advanced.notify.onassigmentsubmit" />
+		</td>
+		
+		<td>
+			<c:choose>
+				<c:when test="${sessionMap.resource.notifyTeachersOnAssigmentSumbit == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
 </table>
+</lams:AdvancedAccordian>
\ No newline at end of file
Index: lams_tool_larsrc/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r1a6408137fed60838b5744155f0884381c37d2c0 -r23b477adb4e0891c656b111fd791f6c41b9b4d36
--- lams_tool_larsrc/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 1a6408137fed60838b5744155f0884381c37d2c0)
+++ lams_tool_larsrc/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 23b477adb4e0891c656b111fd791f6c41b9b4d36)
@@ -1,60 +1,9 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.rsrc.ResourceConstants"%>
 
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/tabbedheader.jsp" %>
-		<script>
-			var initialTabId = "${initialTabId}";
-	
-			function init(){
-				if (initialTabId) {
-					selectTab(initialTabId);
-				} else {
-					selectTab(1);
-				}
-		    }     
-		        
-		    function doSelectTab(tabId) {
-			   // end optional tab controller stuff
-			   selectTab(tabId);
-		    } 
-		        
-			function viewItem(itemUid){
-				var myUrl = "<c:url value="/reviewItem.do"/>?mode=teacher&itemUid=" + itemUid + "&sessionMapID=${sessionMapID}";
-				launchPopup(myUrl,"MonitoringReview");
-			}
-			
-			function viewComments(itemUid, toolSessionID){
-				var myUrl = "<c:url value='/monitoring/viewComments.do'/>?mode=teacher&itemUid=" + itemUid + "&toolSessionID=" + toolSessionID + "&sessionMapID=${sessionMapID}";
-				launchPopup(myUrl,"MonitoringReview");
-			}
-		</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="<%= ResourceConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
-			<lams:Tab id="1" key="monitoring.tab.summary" />
-			<lams:Tab id="2" key="monitoring.tab.edit.activity" />			
-			<lams:Tab id="3" key="monitoring.tab.statistics" />
-		</lams:Tabs>
-		
-		<lams:TabBodyArea>
-		<lams:TabBodys>
-			<lams:TabBody id="1" page="summary.jsp" />
-			<lams:TabBody id="2" page="editactivity.jsp" />			
-			<lams:TabBody id="3" page="statistic.jsp" />
-		</lams:TabBodys>
-		</lams:TabBodyArea>
-		
-		<div id="footer" />
-		
-	</lams:Page>
-
-	</body>
-</lams:html>
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+	helpToolSignature="<%= ResourceConstants.TOOL_SIGNATURE %>"
+	initialTabId="${initialTabId}" />
+	 
Index: lams_tool_larsrc/web/pages/monitoring/statistic.jsp
===================================================================
diff -u -rf007d7e87e33de37ad35d279b1da1d59c9f42055 -r23b477adb4e0891c656b111fd791f6c41b9b4d36
--- lams_tool_larsrc/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision f007d7e87e33de37ad35d279b1da1d59c9f42055)
+++ lams_tool_larsrc/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision 23b477adb4e0891c656b111fd791f6c41b9b4d36)
@@ -2,43 +2,43 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 
-
-	<c:choose>
+<c:choose>
 	<c:when test="${empty summaryList}">
-		<lams:Alert type="info" id="no-session-summary" close="false">
+		<lams:Alert5 type="info" id="no-session-summary">
 			<fmt:message key="message.monitoring.summary.no.session" /> </b>
-		</lams:Alert>
+		</lams:Alert5>
 	</c:when>
 	<c:otherwise>
-		<lams:Alert type="info" id="no-session-summary" close="false">
+		<lams:Alert5 type="info" id="no-session-summary">
 			<fmt:message key="monitoring.summary.note" />
-		</lams:Alert>
+		</lams:Alert5>
 	</c:otherwise>
-	</c:choose>
+</c:choose>
 	
-	<c:forEach var="group" items="${summaryList}" varStatus="firstGroup">
+<c:forEach var="group" items="${summaryList}" varStatus="firstGroup">
 	
-		<c:if test="${sessionMap.isGroupedActivity}">	
-	    <div class="panel panel-default" >
-        <div class="panel-heading" id="heading${toolSessionDto.sessionID}">
-			<span class="panel-title">
+	<c:if test="${sessionMap.isGroupedActivity}">	
+	    <div class="lcard" >
+	        <div class="card-header" id="heading${toolSessionDto.sessionID}">
 				<fmt:message key="monitoring.label.group" />&nbsp;${group.sessionName}
-			</span>
-        </div>
-		</c:if>
+	        </div>
+	</c:if>
 		
-		<table class="table table-striped table-condensed">
+	<table class="table table-striped table-condensed shadow">
 			<tr>
 				<th width="20%">
 					<fmt:message key="monitoring.label.type" />
 				</th>
+				
 				<th>
 					<fmt:message key="monitoring.label.title" />
 				</th>
+				
 				<th width="25%">
 					<fmt:message key="monitoring.label.suggest" />
 				</th>
-				<th width="20%" align="center">
+				
+				<th width="20%" class="text-center">
 					<fmt:message key="monitoring.label.number.learners" />
 				</th>
 			</tr>
@@ -50,40 +50,48 @@
 							<c:when test="${item.itemType == 1}">
 								<fmt:message key="label.authoring.basic.resource.url" />
 							</c:when>
+							
 							<c:when test="${item.itemType == 2}">
 								<fmt:message key="label.authoring.basic.resource.file" />
 							</c:when>
+							
 							<c:when test="${item.itemType == 3}">
 								<fmt:message key="label.authoring.basic.resource.website" />
 							</c:when>
 						</c:choose>
 					</td>
+					
 					<td>
 						<c:out value="${item.itemTitle}" escapeXml="true"/>
 					</td>
+					
 					<td>
 						<c:if test="${!item.itemCreateByAuthor}">
 							<c:out value="${item.username}" escapeXml="true"/>
 						</c:if>
 					</td>
+					
 					<td align="center">
 						<c:choose>
 							<c:when test="${item.viewNumber > 0}">
 								<c:set var="listUrl">
 									<c:url value='/monitoring/listuser.do?toolSessionID=${group.sessionId}&itemUid=${item.itemUid}' />
 								</c:set>
-								<a href="#" onclick="launchPopup('${listUrl}','listuser')"> ${item.viewNumber}<a>
+								<a href="#" onclick="javascript:launchPopup('${listUrl}','listuser'); return false;"> 
+									${item.viewNumber}
+								</a>
 							</c:when>
+							
 							<c:otherwise>
-											0
-										</c:otherwise>
+								0
+							</c:otherwise>
 						</c:choose>
 					</td>
 				</tr>
 			</c:forEach>
-		</table>
+	</table>
        
-		<c:if test="${sessionMap.isGroupedActivity}">	
+	<c:if test="${sessionMap.isGroupedActivity}">	
 		</div>
-    	</c:if>   
-	</c:forEach>
+    </c:if>   
+</c:forEach>
Index: lams_tool_larsrc/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -r23b477adb4e0891c656b111fd791f6c41b9b4d36
--- lams_tool_larsrc/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_larsrc/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 23b477adb4e0891c656b111fd791f6c41b9b4d36)
@@ -16,16 +16,17 @@
 		ALLOW_RERATE = false; 
 </script>
 <lams:JSImport src="includes/javascript/rating.js" />
-
+<lams:JSImport src="includes/javascript/rsrccommon.js" relative="true" />
+<lams:JSImport src="includes/javascript/rsrcresourceitem.js" relative="true"/>
 <script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
 <lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
 <lams:JSImport src="includes/javascript/portrait5.js" />
 <script type="text/javascript">
 	$(document).ready(function(){
+		doStatistic();
 		initializePortraitPopover("<lams:LAMSURL />");
 
 		<c:forEach var="groupSummary" items="${summaryList}" varStatus="status">
-		
 			<%-- if no sessions exist the basic authored data is sent with a sessionId of 0. Do not use subgrid and modify how rating/comments are displayed. --%>
 			<c:set var="sessionsExist">${groupSummary.sessionId gt 0}</c:set>
 		
@@ -121,10 +122,22 @@
    	        <c:forEach var="item" items="${groupSummary.items}" varStatus="i">
 				<c:choose>
 					<c:when test="${item.itemHide}">
-						<c:set var="changeItemVisibility"><a href='#nogo' onclick='javascript:changeItemVisibility(this, ${item.itemUid}, ${groupSummary.sessionId}, false); return false;'> <fmt:message key='monitoring.label.show' /> </a></c:set>
+						<c:set var="changeItemVisibility">
+							"<button type='button' onclick='changeItemVisibility(this, ${item.itemUid}, ${groupSummary.sessionId}, false)'" +
+							"			class='btn btn-sm btn-light'>" +
+							"	<i class='fa-regular fa-eye me-1'></i>" +
+							"	<fmt:message key='monitoring.label.show' />" +
+							"</button>"
+						</c:set>
 					</c:when>
 					<c:otherwise>
-						<c:set var="changeItemVisibility"><a href='#nogo' onclick='javascript:changeItemVisibility(this, ${item.itemUid}, ${groupSummary.sessionId}, true); return false;'> <fmt:message key='monitoring.label.hide' /> </a></c:set>
+						<c:set var="changeItemVisibility">
+							"<button type='button' onclick='changeItemVisibility(this, ${item.itemUid}, ${groupSummary.sessionId}, true)'" +
+							"		class='btn btn-sm btn-light'>" +
+							"	<i class='fa-regular fa-eye-slash me-1'></i>" +
+							"	<fmt:message key='monitoring.label.hide' />" +
+							"</button>"
+						</c:set>
 					</c:otherwise>
 				</c:choose>
 				
@@ -176,7 +189,7 @@
 					<c:set var="commentButtonText"><fmt:message key="label.view.comments"/></c:set>
 					<c:choose>
 					<c:when test="${item.allowComments and sessionsExist}">
-						<c:set var="commentHTML"><a href="#nogo" onclick="javascript:viewComments(${item.itemUid}, ${groupSummary.sessionId}); return false;">${commentButtonText}</a></c:set>
+						<c:set var="commentHTML"><button type="button" onclick="viewComments(${item.itemUid}, ${groupSummary.sessionId})" class="btn btn-sm btn-light"><i class="fa-solid fa-binoculars me-1"></i>${commentButtonText}</button></c:set>
 					</c:when>
 					<c:when test="${item.allowComments and not sessionsExist}">
 						<c:set var="commentHTML"><i class="fa fa-check"></i></c:set>
@@ -190,7 +203,9 @@
    	     		jQuery("#group${groupSummary.sessionId}").addRowData(${i.index + 1}, {
    	   	     		id:		"${i.index + 1}",
    	   	     		itemUid:	"${item.itemUid}",
-   	   	     		title:	"<a href='#nogo' onclick='javascript:viewItem(${item.itemUid}); return false;'>${itemTitle}</a>",
+   	   	     		title:	"${itemTitle} <button type='button' onclick='viewItem(${item.itemUid})' class='btn btn-sm btn-light ms-2'>" +
+   	   	     					"<i class='fa-solid fa-up-right-from-square'></i>" +
+   	   	     				"</button>",
    	   	     		type:	"${itemTypeLabel}",
    	   	     		suggest:	"${item.username}",
    	   	     		viewNumber:"	${item.viewNumber}",
@@ -200,7 +215,7 @@
 					<c:if test="${groupSummary.allowComments}">
 						comments: '${commentHTML}',
 					</c:if>
-   	   	     		actions:	"${changeItemVisibility}"
+   	   	     		actions:	${changeItemVisibility}
    	   	   	    });
 	        </c:forEach>
 			
@@ -210,17 +225,23 @@
 
 		//jqgrid autowidth (http://stackoverflow.com/a/1610197)
 		$(window).bind('resize', function() {
-			var grid;
-		    if (grid = jQuery(".ui-jqgrid-btable:visible")) {
-		    	grid.each(function(index) {
-		        	var gridId = $(this).attr('id');
-		        	var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
-		        	jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
-		    	});
-		    }
+			resizeJqgrid(jQuery(".ui-jqgrid-btable"));
 		});
 		setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
+
+		//resize jqGrid on openning of bootstrap collapsible
+		$('div[id^="collapse"]').on('shown.bs.collapse', function () {
+			resizeJqgrid(jQuery(".ui-jqgrid-btable", this));
+		})
 	});
+
+	function resizeJqgrid(jqgrids) {
+		jqgrids.each(function(index) {
+			var gridId = $(this).attr('id');
+			var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
+			jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
+		});
+	};
 	
 	function userNameFormatter (cellvalue, options, rowObject) {
 		return definePortraitPopover(rowObject[5], rowObject[0],  rowObject[1]);
@@ -233,13 +254,13 @@
             type: 'post',
             success: function () {
             	if (isHideItem) {
-            		linkObject.innerHTML = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitoring.label.show" /></spring:escapeBody>' ;
+            		linkObject.innerHTML = '<i class="fa-regular fa-eye me-1"></i> <spring:escapeBody javaScriptEscape="true"><fmt:message key="monitoring.label.show" /></spring:escapeBody>' ;
             		linkObject.onclick = function (){
             			changeItemVisibility(this, itemUid, toolSessionId, false); 
             			return false;
             		}
             	} else {
-            		linkObject.innerHTML = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="monitoring.label.hide" /></spring:escapeBody>' ;
+            		linkObject.innerHTML = '<i class="fa-regular fa-eye-slash me-1"></i> <spring:escapeBody javaScriptEscape="true"><fmt:message key="monitoring.label.hide" /></spring:escapeBody>' ;
             		linkObject.onclick = function (){
             			changeItemVisibility(this, itemUid, toolSessionId, true); 
             			return false;
@@ -249,62 +270,79 @@
        	});
 	}
 
+	function viewItem(itemUid){
+		var myUrl = "<c:url value="/reviewItem.do"/>?mode=teacher&itemUid=" + itemUid + "&sessionMapID=${sessionMapID}";
+		launchPopup(myUrl,"MonitoringReview");
+	}
+	
+	function viewComments(itemUid, toolSessionID){
+		var myUrl = "<c:url value='/monitoring/viewComments.do'/>?mode=teacher&itemUid=" + itemUid + "&toolSessionID=" + toolSessionID + "&sessionMapID=${sessionMapID}";
+		launchPopup(myUrl,"MonitoringReview");
+	}
 </script>
-
-<div class="panel">
-	<h4>
-	    <c:out value="${sessionMap.resource.title}" escapeXml="true"/>
-	</h4>
-	<div class="instructions voffset5">
-	    <c:out value="${sessionMap.resource.instructions}" escapeXml="false"/>
-	</div>
 	
-	<c:if test="${empty summaryList}">
-		<lams:Alert type="info" id="no-session-summary" close="false">
-			 <fmt:message key="message.monitoring.summary.no.session" />
-		</lams:Alert>
-	</c:if>
-	
-	<!--For release marks feature-->
-	<lams:WaitingSpinner id="message-area-busy"/>
-	<div id="message-area"></div>
+<c:if test="${empty summaryList}">
+	<lams:Alert5 type="info" id="no-session-summary">
+		 <fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert5>
+</c:if>
+
+<h1>
+    <c:out value="${sessionMap.resource.title}" escapeXml="true"/>
+</h1>
+
+<div class="instructions">
+    <c:out value="${sessionMap.resource.instructions}" escapeXml="false"/>
 </div>
+	
+<!--For release marks feature-->
+<lams:WaitingSpinner id="message-area-busy"/>
+<div id="message-area"></div>
 
 <c:if test="${sessionMap.isGroupedActivity}">
-<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
+	<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
 </c:if>
 
 <c:forEach var="groupSummary" items="${summaryList}" varStatus="status">
-	
 	<c:if test="${sessionMap.isGroupedActivity}">	
-	    <div class="panel panel-default" >
-        <div class="panel-heading" id="heading${groupSummary.sessionId}">
-        	<span class="panel-title collapsable-icon-left">
-        	<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${groupSummary.sessionId}" 
-					aria-expanded="false" aria-controls="collapse${groupSummary.sessionId}" >
-			<c:choose>
-			<c:when test="${sessionsExist}"><fmt:message key="monitoring.label.group" />&nbsp;${groupSummary.sessionName}</c:when>
-			<c:otherwise>&nbsp;</c:otherwise>
-			</c:choose>
-		</a>
+	    <div class="lcard" >
+        <div class="card-header" id="heading${groupSummary.sessionId}">
+        	<span class="card-title collapsable-icon-left">
+        		<button class="btn btn-secondary-darker no-shadow ${status.first ? '' : 'collapsed'}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${groupSummary.sessionId}" 
+						aria-expanded="${status.first}" aria-controls="collapse${groupSummary.sessionId}" >
+					<c:choose>
+						<c:when test="${sessionsExist}">
+							<fmt:message key="monitoring.label.group" />&nbsp;${groupSummary.sessionName}
+						</c:when>
+						<c:otherwise>
+							&nbsp;
+						</c:otherwise>
+					</c:choose>
+				</button>
 			</span>
         </div>
         
-        <div id="collapse${groupSummary.sessionId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading${groupSummary.sessionId}">
+        <div id="collapse${groupSummary.sessionId}" class="card-collapse collapse ${status.first ? 'show' : ''}">
 	</c:if>
 
-		<table id="group${groupSummary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>
+	<table id="group${groupSummary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>
 	
 	<c:if test="${sessionMap.isGroupedActivity}">
 		</div> <!-- end collapse area  -->
 		</div> <!-- end collapse panel  -->
-	</c:if>
-	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
-	
+	</c:if>	
 </c:forEach>
 
 <c:if test="${sessionMap.isGroupedActivity}">
-</div> <!--  end accordianSessions --> 
+	</div> <!--  end accordianSessions --> 
 </c:if>
 
-<%@ include file="advanceoptions.jsp"%>
+<h2 class="card-subheader fs-4 mt-3" id="header-statistics">
+	<fmt:message key="monitoring.tab.statistics" />
+</h2>
+<%@ include file="statistic.jsp"%>
+
+<h2 class="card-subheader fs-4" id="header-settings">
+	Settings
+</h2>
+<%@ include file="editactivity.jsp"%>
Index: lams_tool_larsrc/web/pages/monitoring/userlist.jsp
===================================================================
diff -u -r9c34fd660838f37a7a22bfee4c6573848f895c9e -r23b477adb4e0891c656b111fd791f6c41b9b4d36
--- lams_tool_larsrc/web/pages/monitoring/userlist.jsp	(.../userlist.jsp)	(revision 9c34fd660838f37a7a22bfee4c6573848f895c9e)
+++ lams_tool_larsrc/web/pages/monitoring/userlist.jsp	(.../userlist.jsp)	(revision 23b477adb4e0891c656b111fd791f6c41b9b4d36)
@@ -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.bootstrap5.css">
-	<link type="stylesheet" href="${lams}css/jquery.tablesorter.pager5.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.firstName},${user.lastName} (${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.firstName},${user.lastName} (${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>