Index: lams_tool_images/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -r5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610 -r616e649f943510a725877c513774feae4f3267e3
--- lams_tool_images/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610)
+++ lams_tool_images/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 616e649f943510a725877c513774feae4f3267e3)
@@ -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>
@@ -59,6 +60,8 @@
 					TOOL_CONTENT_ID = <c:out value="${param.toolContentID}" />,
 					MONITORING_STATISTIC_URL = "<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>";
 	        </script>
+	        
+	        <jsp:doBody/>
         </c:if>
     </lams:head>
 
Fisheye: Tag 616e649f943510a725877c513774feae4f3267e3 refers to a dead (removed) revision in file `lams_tool_images/web/common/header.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_images/web/includes/javascript/imageGalleryitem.js
===================================================================
diff -u -r5274ca56bc898b027104d2d37105e9778927a831 -r616e649f943510a725877c513774feae4f3267e3
--- lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision 5274ca56bc898b027104d2d37105e9778927a831)
+++ lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision 616e649f943510a725877c513774feae4f3267e3)
@@ -26,14 +26,13 @@
 }
 
 function submitImageGalleryItem(){
-
 	if ( typeof CKEDITOR !== 'undefined' ) {
 		for ( instance in CKEDITOR.instances ) {
 			CKEDITOR.instances[instance].updateElement();
 		}
 	}
 
-	var formData = new FormData();
+	let formData = new FormData();
 	$.each($('#imageGalleryItemForm').serializeArray(), function(i, field) {
 		formData.append(field.name, field.value);
 	});
Index: lams_tool_images/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -r616e649f943510a725877c513774feae4f3267e3
--- lams_tool_images/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_images/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 616e649f943510a725877c513774feae4f3267e3)
@@ -2,42 +2,240 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="imageGallery" value="${sessionMap.imageGallery}"/>
 
-<c:if test="${sessionMap.isPageEditable}">
-	<lams:Alert type="warn" id="no-edit" close="false">
-		<fmt:message key="message.alertContentEdit" />
-	</lams:Alert>
-</c:if>
-
-<table class="table table-condensed">
-	<tr>
-		<td>
-			<fmt:message key="label.authoring.basic.title" />
-		</td>
-		<td>
-			<c:out value="${imageGallery.title}" escapeXml="true" />
-		</td>
-	</tr>
-
-	<tr>
-		<td>
-			<fmt:message key="label.authoring.basic.instruction" />
-		</td>
-		<td>
-			<c:out value="${imageGallery.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>
+<c:set var="adTitle"><fmt:message key="monitoring.tab.edit.activity" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+	<c:if test="${sessionMap.isPageEditable}">
+		<lams:Alert5 type="warn" id="no-edit">
+			<fmt:message key="message.alertContentEdit" />
+		</lams:Alert5>
+	</c:if>
 	
-			<a href="#nogo" onclick="javascript:launchDefineLaterPopup()" class="btn btn-default pull-right">
-				<fmt:message key="label.monitoring.edit.activity.edit" />
-			</a>
-		</td>
-	</tr>
-</table>
+	<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>
+	
+	<div id="manage-image-buttons" class="clearfix m-3">	
+		<button type="button" onclick="launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen float-end ms-2">
+			<fmt:message key="label.monitoring.edit.activity.edit" />
+		</button>
+		
+		<button type="button" onclick="newImageInit('<c:url value="/authoring/newImageInit.do?sessionMapID=${sessionMapID}&saveUsingLearningAction=true&bootstrap5=true"/>')"
+				class="btn btn-secondary float-end">  
+			<i class="fa fa-upload"></i> 
+			<fmt:message key="label.learning.add.new.image" />
+		</button>
+	</div>
+             
+	<table class="table table-striped table-condensed">
+		<tr>
+			<td>
+				<fmt:message key="label.authoring.basic.title" />
+			</td>
+			
+			<td>
+				<c:out value="${imageGallery.title}" escapeXml="true" />
+			</td>
+		</tr>
+	
+		<tr>
+			<td>
+				<fmt:message key="label.authoring.basic.instruction" />
+			</td>
+			
+			<td>
+				<c:out value="${imageGallery.instructions}" escapeXml="false" />
+			</td>
+		</tr>
+	
+		<tr>
+			<td>
+				<fmt:message key="label.authoring.advance.lock.on.finished" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.lockWhenFinished}">
+						<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.share.images" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.allowShareImages}">
+						<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.notify.monitoring.teachers" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.notifyTeachersOnImageSumbit}">
+						<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.comment.images" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.isCommentsEnabled}">
+						<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.vote" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.allowVote}">
+						<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.rank" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.allowRank}">
+						<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.minimum" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.minimumRates == 0}">
+						<fmt:message key="label.no.minimum" />
+					</c:when>
+					<c:otherwise>
+						${sessionMap.imageGallery.minimumRates}
+					</c:otherwise>
+				</c:choose>	
+			</td>
+		</tr>
+		
+		<tr>
+			<td>
+				<fmt:message key="label.maximum" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.maximumRates == 0}">
+						<fmt:message key="label.no.maximum" />
+					</c:when>
+					<c:otherwise>
+						${sessionMap.imageGallery.maximumRates}
+					</c:otherwise>
+				</c:choose>	
+			</td>
+		</tr>
+		
+		<tr>
+			<td>
+				<fmt:message key="label.authoring.advance.allow.learner.comment.images" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.isCommentsEnabled}">
+						<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.minimum" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.minimumRates == 0}">
+						<fmt:message key="label.no.minimum" />
+					</c:when>
+					<c:otherwise>
+						${sessionMap.imageGallery.minimumRates}
+					</c:otherwise>
+				</c:choose>	
+			</td>
+		</tr>
+		
+		<tr>
+			<td>
+				<fmt:message key="label.maximum" />
+			</td>
+			
+			<td>
+				<c:choose>
+					<c:when test="${sessionMap.imageGallery.maximumRates == 0}">
+						<fmt:message key="label.no.maximum" />
+					</c:when>
+					<c:otherwise>
+						${sessionMap.imageGallery.maximumRates}
+					</c:otherwise>
+				</c:choose>	
+			</td>
+		</tr>
+	</table>
+
+	<div id="new-image-input-area" class="mt-3"></div>
+</lams:AdvancedAccordian>
Index: lams_tool_images/web/pages/monitoring/imagesummary.jsp
===================================================================
diff -u -re90e4c14807715d5b15addca7385959808047bcb -r616e649f943510a725877c513774feae4f3267e3
--- lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision e90e4c14807715d5b15addca7385959808047bcb)
+++ lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision 616e649f943510a725877c513774feae4f3267e3)
@@ -1,148 +1,124 @@
 <!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"%>
-		<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
-		
-		<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>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<lams:JSImport src="includes/javascript/rating.js" />
-	</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" />
 	
-<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>
+
+	<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}"/>
 				
-				<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"
-						isDisplayOnly="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>
-						<fmt:message key="label.monitoring.number.votes" />: ${groupSummary[0].numberOfVotesForImage}
-					</div>
+			<div class="badge text-bg-warning mb-2">
+				<fmt:message key="label.monitoring.number.votes" />: ${groupSummary[0].numberOfVotesForImage}
+			</div>
 				
-					<table class="table" >
+			<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>
 				
-						<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.firstName} ${userImageContribution.user.lastName}" escapeXml="true"/>
-								</td>
+				<c:forEach var="userImageContribution" items="${groupSummary}">
+					<tr>
+						<td>
+							<c:out value="${userImageContribution.user.firstName} ${userImageContribution.user.lastName}" 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">
+		<button type="button" onclick="document.forms.imageGalleryItemForm.submit()" 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_images/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r9c34fd660838f37a7a22bfee4c6573848f895c9e -r616e649f943510a725877c513774feae4f3267e3
--- lams_tool_images/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 9c34fd660838f37a7a22bfee4c6573848f895c9e)
+++ lams_tool_images/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 616e649f943510a725877c513774feae4f3267e3)
@@ -5,7 +5,8 @@
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 <%@ page import="org.lamsfoundation.lams.util.FileUtil" %>
 
-<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" scope="request"/>
+<c:set var="summaryList" value="${sessionMap.summaryList}" scope="request"/>
 <c:choose>
 	<c:when test="${sessionMap.mode == 'learner'}">
 		<c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
@@ -17,13 +18,11 @@
 <c:set var="ALLOWED_EXTENSIONS_IMAGE"><%=FileUtil.ALLOWED_EXTENSIONS_IMAGE%></c:set>
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
 
-<lams:html>
-	<lams:head>
-		<title>
-			<fmt:message key="label.monitoring.title" />
-		</title>
-		<%@ include file="/common/tabbedheader.jsp" %>
-		
+<c:set var="title"><fmt:message key="label.monitoring.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+		helpToolSignature="<%= ImageGalleryConstants.TOOL_SIGNATURE %>"
+		initialTabId="${initialTabId}">
+
 		<link href="${lams}css/thickbox.css" rel="stylesheet" type="text/css">
 		<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
 		<link href="${lams}css/jquery.tablesorter.theme.bootstrap5.css" rel="stylesheet" >
@@ -64,32 +63,17 @@
 			var UPLOAD_ALLOWED_EXTENSIONS = JSON.parse("[" + "${ALLOWED_EXTENSIONS_IMAGE}".replace(/\.\w+/g, '"$&"') + "]");
 			var LABEL_ITEM_BLANK = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.resource.item.file.blank"/></spring:escapeBody>';
 		</script>
+		<lams:JSImport src="includes/javascript/imageGallerycommon.js" relative="true" />
 		<lams:JSImport src="includes/javascript/imageGalleryitem.js" relative="true" />
-		
 		<%@ include file="/common/uppylang.jsp"%>
-	
 		<lams:JSImport src="includes/javascript/uploadImageLearning.js" relative="true" />
     	<lams:JSImport src="includes/javascript/upload.js" />
  		<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
 		<lams:JSImport src="includes/javascript/monitorToolSummaryAdvanced.js" />
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
 		<lams:JSImport src="includes/javascript/rating.js" />
+		<script type="text/javascript" src="${lams}/includes/javascript/portrait5.js" ></script>
 		<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(imageUid,sessionMapID){
 				var myUrl = "<c:url value="/reviewItem.do"/>?mode=teacher&imageUid=" + imageUid + "&sessionMapID="+sessionMapID;
 				launchPopup(myUrl,"MonitoringReview");
@@ -100,6 +84,8 @@
 			}
 			
 			$(document).ready(function(){
+				doStatistic();
+				initializePortraitPopover('${lams}');
 
 				$(".tablesorter").tablesorter({
 					theme: 'bootstrap',
@@ -128,7 +114,9 @@
 				    		var isHidden = imageToggleLink.data("is-hidden");
 				    		imageToggleLink.data("is-hidden", !isHidden);
 				    		
-				    		var imageToggleLinkText = isHidden ? "<spring:escapeBody javaScriptEscape="true"><fmt:message key='monitoring.label.hide' /></spring:escapeBody>" : "<spring:escapeBody javaScriptEscape="true"><fmt:message key='monitoring.label.show' /></spring:escapeBody>";
+				    		var imageToggleLinkText = isHidden ? 
+						    		"<i class='fa-regular fa-eye-slash me-1'></i> <spring:escapeBody javaScriptEscape="true"><fmt:message key='monitoring.label.hide' /></spring:escapeBody>" 
+						    		: "<i class='fa-regular fa-eye me-1'></i> <spring:escapeBody javaScriptEscape="true"><fmt:message key='monitoring.label.show' /></spring:escapeBody>";
 				    		imageToggleLink.html(imageToggleLinkText);
 				    	},
 				    	error: function(jqXHR, textStatus, errorMessage) {   		
@@ -157,27 +145,4 @@
 				window.onresize = resizeIframe;
 			});
 		</script>		 
-	</lams:head>
-	
-	<body class="stripes" onLoad="init()">
-		<c:set var="title"><fmt:message key="label.learning.heading" /></c:set>
-	 	<lams:Page type="navbar" title="${title}"> 
-	
-			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ImageGalleryConstants.TOOL_SIGNATURE %>" helpModule="monitoring" refreshOnClickAction="javascript:location.reload();">
-				<lams:Tab id="1" key="monitoring.tab.summary"/>
-				<lams:Tab id="2" key="monitoring.tab.edit.activity"/>
-				<lams:Tab id="3" key="monitoring.tab.statistics"/>
-			</lams:Tabs>
-	
-	  		<lams:TabBodyArea>
-				<lams:TabBodys>
-					<lams:TabBody id="1" page="summary.jsp" />
-					<lams:TabBody id="2" page="editactivity.jsp" />			
-					<lams:TabBody id="3" page="statistic.jsp" />
-				</lams:TabBodys> 
-			</lams:TabBodyArea> 
-	
-			<div id="footer"></div>
-		</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+</lams:PageMonitor>
\ No newline at end of file
Index: lams_tool_images/web/pages/monitoring/statistic.jsp
===================================================================
diff -u -rb1018fb2d9bb8216f7a3e1753c47f03285d4eb03 -r616e649f943510a725877c513774feae4f3267e3
--- lams_tool_images/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision b1018fb2d9bb8216f7a3e1753c47f03285d4eb03)
+++ lams_tool_images/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision 616e649f943510a725877c513774feae4f3267e3)
@@ -3,30 +3,27 @@
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 
 <c:if 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" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:if>
 	
 <c:forEach var="group" items="${summaryList}" varStatus="firstGroup">
-
 	<c:if test="${sessionMap.isGroupedActivity}">
-		<div class="panel panel-default" >
-			<div class="panel-heading">
-				<span class="panel-title">
-					<fmt:message key="monitoring.label.group" /> ${group[0].sessionName}
-				</span>
+		<div class="lcard" >
+			<div class="card-header">
+				<fmt:message key="monitoring.label.group" /> ${group[0].sessionName}
 			</div>
 		</div>
 	</c:if>
 	
-	<div class="panel-body">
+	<div class="card-body">
 	<table class="table table-condensed table-striped">
 		<tr>
 			<th width="35%">
 				<fmt:message key="monitoring.label.title" />
 			</th>
-			<th width="25%" align="center">
+			<th width="25%" class="text-center">
 				<fmt:message key="monitoring.label.suggest" />
 			</th>
 			<c:choose>
@@ -61,7 +58,7 @@
 					<td>
 						<c:out value="${summary.itemTitle}" escapeXml="true"/>
 					</td>
-					<td align="center">
+					<td class="text-center">
 						<c:if test="${!summary.itemCreateByAuthor}">
 							<c:out value="${summary.username}" escapeXml="true"/>
 						</c:if>
Index: lams_tool_images/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r9c34fd660838f37a7a22bfee4c6573848f895c9e -r616e649f943510a725877c513774feae4f3267e3
--- lams_tool_images/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 9c34fd660838f37a7a22bfee4c6573848f895c9e)
+++ lams_tool_images/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 616e649f943510a725877c513774feae4f3267e3)
@@ -1,79 +1,70 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
-<c:set var="summaryList" value="${sessionMap.summaryList}"/>
-<c:set var="lams"><lams:LAMSURL /></c:set>
-<script type="text/javascript" src="${lams}/includes/javascript/portrait5.js" ></script>
 
-<script type="text/javascript">
-$(document).ready(function(){
-	initializePortraitPopover('${lams}');
-});
-</script>
+<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>
 
-<div class="panel">
-	<h4>
-	  <c:out value="${sessionMap.imageGallery.title}" escapeXml="true"/>
-	</h4>
+<h1>
+  <c:out value="${sessionMap.imageGallery.title}" escapeXml="true"/>
+</h1>
 	
-	<div class="instructions voffset5">
-	  <c:out value="${sessionMap.imageGallery.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>
+<div class="instructions">
+  <c:out value="${sessionMap.imageGallery.instructions}" escapeXml="false"/>
 </div>
 
 <c:if test="${sessionMap.isGroupedActivity}">
 	<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
 </c:if>
 
 <c:forEach var="group" items="${summaryList}" varStatus="status">
-
 	<c:if test="${sessionMap.isGroupedActivity}">	
-	    <div class="panel panel-default" >
-	        <div class="panel-heading" id="heading${group[0].sessionId}">
-	        	<span class="panel-title collapsable-icon-left">
-	        		<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${group[0].sessionId}" 
-							aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${group[0].sessionId}" >
+	    <div class="lcard" >
+	        <div class="card-header" id="heading${group[0].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${group[0].sessionId}" 
+							aria-expanded="${status.first}" aria-controls="collapse${group[0].sessionId}" >
 						<fmt:message key="monitoring.label.group" />:	<c:out value="${group[0].sessionName}" />
-					</a>
+					</button>
 				</span>
 	        </div>
         
-        <div id="collapse${group[0].sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" 
-        		role="tabpanel" aria-labelledby="heading${sessionSummary.sessionId}">
+			<div id="collapse${group[0].sessionId}" class="card-collapse collapse ${status.first ? 'show' : ''}">
 	</c:if>
 
-	<table class="tablesorter">
+	<table class="tablesorter ${sessionMap.isGroupedActivity ? '' : 'shadow mb-4'}">
 		<thead>
 			<tr>
-				<th width="20%" align="center">
+				<th width="180px" align="center" class="rounded-0">
 					<!--thumbnail-->
 				</th>
+				
 				<th>
 					<fmt:message key="monitoring.label.title" />
 				</th>
+				
 				<c:choose>
 					<c:when test="${sessionMap.imageGallery.allowRank}">
 						<th width="170px" style="padding-left:0px; text-align:center;">
 							<fmt:message key="label.monitoring.average.rating" />
 						</th>
+						
 						<c:if test="${sessionMap.isCommentsEnabled}">
 							<th width="200px" style="padding-left:0px; text-align:center;">
 								<fmt:message key="label.monitoring.imagesummary.comments" />
 							</th>								
 						</c:if>
 					</c:when>
+					
 					<c:when test="${sessionMap.imageGallery.allowVote}">
-						<th width="70px" style="padding-left:0px; text-align:center;">
+						<th width="120px" style="padding-left:0px; text-align:center;">
 							<fmt:message key="label.monitoring.number.votes" />
 						</th>
 					</c:when>
-				</c:choose>				
-				<th width="60px" >
+				</c:choose>
+						
+				<th width="120px" class="rounded-0">
 					<!--hide/show-->
 				</th>
 			</tr>
@@ -96,7 +87,6 @@
 			
 			<c:if test="${summary.itemUid != -1}">
 				<tr>
-
 					<td align="center">
 						<c:set var="thumbnailPath">
 						   	<lams:WebAppURL />download/?uuid=${image.thumbnailFileDisplayUuid}&preferDownload=false
@@ -116,20 +106,22 @@
 						<c:set var="title">
 							<c:out value="${image.title}" escapeXml="true"/>
 						</c:set>
-						<a href="${url}" class="thickbox"><c:out value="${title}" escapeXml="false"/></a>
+						<a href="${url}" class="thickbox">
+							<c:out value="${title}" escapeXml="false"/>
+						</a>
 
 						<c:if test="${! summary.itemCreateByAuthor}">
 							<c:set var="portraitURL"><lams:Portrait userId="${summary.userId}" hover="true"><c:out value="${summary.username}" escapeXml="true"/></lams:Portrait></c:set>
 							<c:choose>
-							<c:when test="${fn:containsIgnoreCase(portraitURL,'<a ')}">
-								<c:set var="authorref">${fn:replace(portraitURL, "class=\"", "href=\"REPLACEMEURL\" class=\"thickbox ")}</c:set>
-								<c:set var="authorref">${fn:replace(authorref, "REPLACEMEURL", url)}</c:set>
-							</c:when>
-							<c:otherwise>
-								<c:set var="authorref"><c:out value="${summary.username}" escapeXml="true"/></c:set>
-							</c:otherwise>
+								<c:when test="${fn:containsIgnoreCase(portraitURL,'<a ')}">
+									<c:set var="authorref">${fn:replace(portraitURL, "class=\"", "href=\"REPLACEMEURL\" class=\"thickbox ")}</c:set>
+									<c:set var="authorref">${fn:replace(authorref, "REPLACEMEURL", url)}</c:set>
+								</c:when>
+								<c:otherwise>
+									<c:set var="authorref"><c:out value="${summary.username}" escapeXml="true"/></c:set>
+								</c:otherwise>
 							</c:choose>
-							[ <fmt:message key="label.monitoring.by"/>&nbsp;${authorref} ]
+							[<fmt:message key="label.monitoring.by"/>&nbsp;${authorref}]
 						</c:if>							
 					</td>
 
@@ -157,7 +149,6 @@
 										</div>
 									</c:forEach>								
 								</td>
-								
 							</c:if>
 						</c:when>
 						
@@ -169,17 +160,19 @@
 					</c:choose>						
 					
 					<td style="vertical-align:middle; padding-left: 0px; text-align: center;">
-						<a href="#nogo"	class="btn btn-default btn-xs loffset5 toggle-image-visibility" 
+						<button type="button" class="btn btn-light btn-sm ms-1 toggle-image-visibility" 
 								data-image-uid="${summary.itemUid}" data-is-hidden="${summary.itemHide}">
 							<c:choose>
 								<c:when test="${summary.itemHide}">
+									<i class='fa-regular fa-eye me-1'></i>
 									<fmt:message key="monitoring.label.show" />
 								</c:when>
 								<c:otherwise>
+									<i class='fa-regular fa-eye-slash me-1'></i>
 									<fmt:message key="monitoring.label.hide" />
 								</c:otherwise>
 							</c:choose>
-						</a>
+						</button>
 					</td>
 					
 				</tr>
@@ -192,25 +185,20 @@
 		</div> <!-- end collapse area  -->
 		</div> <!-- end collapse panel  -->
 	</c:if>
-	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
-
 </c:forEach>
 
 <c:if test="${sessionMap.isGroupedActivity}">
 	</div> <!--  end panel group -->
 </c:if>
 
-<%@ include file="parts/advanceOptions.jsp"%>
+<!-- no need as it duplicates the main table 
+<h2 class="card-subheader fs-4 mt-3" id="header-statistics">
+	<fmt:message key="monitoring.tab.statistics" />
+</h2>
+<%@ include file="statistic.jsp"%>
+ -->
 
-<div id="manage-image-buttons">
-	<div class="panel panel-default" >
-		<div class="panel-heading">
-			<button onclick="javascript:newImageInit('<c:url value="/authoring/newImageInit.do?sessionMapID=${sessionMapID}&saveUsingLearningAction=true"/>');"
-					class="btn btn-default btn-xs loffset5  " id="">  
-				<i class="fa fa-upload"></i> <fmt:message key="label.learning.add.new.image" />
-			</button>
-		</div>
-	</div>
-</div>
-
-<div id="new-image-input-area" class="voffset20"></div>
\ No newline at end of file
+<h2 class="card-subheader fs-4" id="header-settings">
+	Settings
+</h2>
+<%@ include file="editactivity.jsp"%>