Index: lams_central/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_central/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -35,19 +35,19 @@
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default" >
-        <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
-          	${title}
-        	</a>
-      		</span>
-        </div>
+<div class="accordion" id="accordionAdvanced"> 
+    <div class="accordion-item">
+    	<h2 class="accordion-header" id="headingAdvanced">
+        	<button class="accordion-button collapsed text-bg-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
+	          	${title}
+    		</button>
+        </h2>
 
-        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
-		<jsp:doBody />
-		</div>
+		<div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced">
+      		<div>
+      			<jsp:doBody />
+      		</div>
+      	</div>
 	</div>
 </div>
 		
\ No newline at end of file
Index: lams_central/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r0b1d534ce1915b907afff0171909f90226b31921 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 0b1d534ce1915b907afff0171909f90226b31921)
+++ lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -8,7 +8,7 @@
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="refresh" required="false" rtexprvalue="true"%>
 <%@ attribute name="hideHeader" required="false" rtexprvalue="true"%>
-<c:set var="showHeader">${empty hideHeader ? true : false }</c:set>
+<c:set var="showHeader">${empty hideHeader || !hideHeader ? true : false }</c:set>
 <%@ attribute name="hideTitle" required="false" rtexprvalue="true"%>
 <c:set var="hideTitle">${empty hideTitle ? false : true }</c:set>
 <%@ attribute name="lessonID" required="false" rtexprvalue="true"%>
@@ -219,4 +219,4 @@
 		    </div>
 	    </c:if>
     </body>
-</lams:html>
\ No newline at end of file
+</lams:html>
Index: lams_central/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/PageMonitor.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/PageMonitor.tag	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -0,0 +1,146 @@
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab1Label" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab2Label" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab3Label" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab1Jsp" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab2Jsp" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab3Jsp" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpPage" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpToolSignature" required="false" rtexprvalue="true"%>
+<%@ attribute name="extraControl" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideHeader" required="false" rtexprvalue="true"%>
+<c:set var="showHeader">${empty hideHeader || !hideHeader ? true : false }</c:set>
+<%@ attribute name="lessonID" required="false" rtexprvalue="true"%>
+<%@ attribute name="initialTabId" required="false" rtexprvalue="true"%>
+<c:if test="${empty initialTabId && not empty pageScope.initialTabId}">
+	<c:set var="initialTabId">${pageScope.initialTabId}</c:set>
+</c:if>
+<c:if test="${empty tab1Label}">
+	<c:set var="tab1Label">monitoring.tab.summary</c:set>
+	<c:set var="tab2Label">monitoring.tab.edit.activity</c:set>
+	<c:set var="tab3Label">monitoring.tab.statistics</c:set>
+	
+	<c:set var="tab1Jsp">summary.jsp</c:set>
+	<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>
+
+<lams:html>
+    <lams:head>
+        <title>LAMS ::
+            <c:choose>
+                <c:when test="${empty title}">
+                    <fmt:message key="activity.title"/>
+                </c:when>
+                <c:otherwise>
+                    <c:out value="${title}" />
+                </c:otherwise>
+            </c:choose>
+        </title>
+        <link rel="icon" type="image/x-icon" href="${lams}images/svg/lamsv5_logo.svg">
+
+        <link rel="stylesheet" href="${lams}css/components-monitoring.css">
+        <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
+
+        <script src="${lams}includes/javascript/jquery.js"></script>
+        <script src="${lams}includes/javascript/jquery-ui.js"></script>
+        <script src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
+        <lams:JSImport src="includes/javascript/common.js" />
+        <c:if test="${showHeader}">
+	        <script src="${lams}/monitoring/includes/javascript/monitor-activity.js" type="text/javascript"></script>
+	        <script>
+				const INITIAL_TAB_ID = "${initialTabId}",
+					TOOL_CONTENT_ID = <c:out value="${param.toolContentID}" />,
+					MONITORING_STATISTIC_URL = "<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>";
+	        </script>
+        </c:if>
+    </lams:head>
+
+    <body class="component" <c:if test="${showHeader}">onLoad='init()'</c:if>>
+    	<div class="component-page-wrapper">
+			<div class="component-page-content">
+            	<a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
+	            	<fmt:message key='label.skip.to.main.content'/>
+	            </a>
+
+				<c:if test="${showHeader}">
+		            <nav class="navbar navbar-expand-md mx-n2x">
+		  				<div class="container-fluid g-0x">
+							<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+								<span class="navbar-toggler-icon"></span>
+							</button>
+							
+							<div class="collapse navbar-collapse" id="navbarSupportedContent">
+								 <div class="nav nav-tabs nav-justified bg-light rounded-5 w-100 py-2 me-2" id="tabs" role="tablist">
+								    <button class="nav-link active" id="tab-1" data-bs-toggle="tab" data-bs-target="#tab-1-content" type="button" role="tab" 
+								    		aria-controls="tab-1-content" 
+								    		aria-selected="true"
+								    		onclick="onSelectTab(1);">
+								    	<fmt:message key="${tab1Label}" />
+								    </button>
+								    <button class="nav-link"		id="tab-2" data-bs-toggle="tab" data-bs-target="#tab-2-content" type="button" role="tab" 
+								    		aria-controls="tab-2-content" 
+								    		aria-selected="false" 
+								    		onclick="onSelectTab(2);">
+								    	<fmt:message key="${tab2Label}"/>
+								    </button>
+								    <button class="nav-link" 		id="tab-3" data-bs-toggle="tab" data-bs-target="#tab-3-content" type="button" role="tab" 
+								    		aria-controls="tab-3-content" 
+								    		aria-selected="false" 
+								    		onclick="onSelectTab(3);">
+								    	<fmt:message key="${tab3Label}"/>
+								    </button>
+								</div>
+							</div>
+			                
+					        <c:if test="${not empty helpToolSignature or not empty helpPage or not empty extraControl}">
+							    <ul class="navbar-nav" id="page-actions">
+							        <c:if test="${not empty helpToolSignature}">
+								       	<li class="nav-item d-none d-md-block">
+								       		<lams:help toolSignature="${helpToolSignature}" module="monitoring" style="small"/>
+								       	</li>
+							        </c:if>
+							        <c:if test="${not empty helpPage}">
+							          	<li class="nav-item d-none d-md-block">
+							           		<lams:help page="${helpPage}" style="small"/>
+							           	</li>
+							        </c:if>
+							        <c:if test="${not empty extraControl}">
+							           	<li class="nav-item">
+							           		${extraControl}
+							           	</li>
+							        </c:if>
+							             
+									<li class="nav-item">
+										 <a href="${lams}home/monitorLesson.do?lessonID=${param.lessonID}" id="btn-close" class="btn btn-light btn-close btn-sm nav-link" 
+				                   				title="<fmt:message key='label.close.and.return'/>"></a>
+							       	</li>
+							   	</ul>
+					        </c:if>
+		  				</div>
+		  			</nav>
+	  			</c:if>
+
+	            <main class="p-3" id="component-main-content" tabindex="-1">
+	            	<c:if test="${showHeader}">
+						<div class="tab-content m-3" id="tabs-content">
+							<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
+							<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
+							<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
+						</div>
+						
+						<input type="hidden" name="currentTab" id="currentTab" />
+					</c:if>
+					
+	                <jsp:doBody/>
+	            </main>
+	        </div>
+	    </div>
+    </body>
+</lams:html>
Index: lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/controller/MonitoringController.java
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -137,6 +137,7 @@
 	SessionMap<String, Object> sessionMap = new SessionMap<>();
 	request.getSession().setAttribute(sessionMap.getSessionID(), sessionMap);
 	request.setAttribute(ForumConstants.ATTR_SESSION_MAP_ID, sessionMap.getSessionID());
+	sessionMap.put(AttributeNames.PARAM_MODE, "teacher");
 
 	Forum forum = forumService.getForumByContentId(toolContentId);
 	sessionMap.put("forum", forum);
@@ -285,7 +286,7 @@
 	    responseRow.put("numberOfPosts", numberOfPosts);
 
 	    if (userData.length > 1 && userData[1] != null) {
-		responseRow.put(ForumConstants.ATTR_PORTRAIT_ID, (String) userData[2]);
+		responseRow.put(ForumConstants.ATTR_PORTRAIT_ID, (String) userData[1]);
 	    }
 
 	    rows.add(responseRow);
Index: lams_tool_forum/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_forum/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -35,19 +35,19 @@
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default" >
-        <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
-          	${title}
-        	</a>
-      		</span>
-        </div>
+<div class="accordion" id="accordionAdvanced"> 
+    <div class="accordion-item">
+    	<h2 class="accordion-header" id="headingAdvanced">
+        	<button class="accordion-button collapsed text-bg-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
+	          	${title}
+    		</button>
+        </h2>
 
-        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
-		<jsp:doBody />
-		</div>
+		<div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced">
+      		<div>
+      			<jsp:doBody />
+      		</div>
+      	</div>
 	</div>
 </div>
 		
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r0b1d534ce1915b907afff0171909f90226b31921 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 0b1d534ce1915b907afff0171909f90226b31921)
+++ lams_tool_forum/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -8,7 +8,7 @@
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="refresh" required="false" rtexprvalue="true"%>
 <%@ attribute name="hideHeader" required="false" rtexprvalue="true"%>
-<c:set var="showHeader">${empty hideHeader ? true : false }</c:set>
+<c:set var="showHeader">${empty hideHeader || !hideHeader ? true : false }</c:set>
 <%@ attribute name="hideTitle" required="false" rtexprvalue="true"%>
 <c:set var="hideTitle">${empty hideTitle ? false : true }</c:set>
 <%@ attribute name="lessonID" required="false" rtexprvalue="true"%>
Index: lams_tool_forum/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/PageMonitor.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/PageMonitor.tag	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -0,0 +1,146 @@
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab1Label" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab2Label" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab3Label" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab1Jsp" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab2Jsp" required="false" rtexprvalue="true"%>
+<%@ attribute name="tab3Jsp" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpPage" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpToolSignature" required="false" rtexprvalue="true"%>
+<%@ attribute name="extraControl" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideHeader" required="false" rtexprvalue="true"%>
+<c:set var="showHeader">${empty hideHeader || !hideHeader ? true : false }</c:set>
+<%@ attribute name="lessonID" required="false" rtexprvalue="true"%>
+<%@ attribute name="initialTabId" required="false" rtexprvalue="true"%>
+<c:if test="${empty initialTabId && not empty pageScope.initialTabId}">
+	<c:set var="initialTabId">${pageScope.initialTabId}</c:set>
+</c:if>
+<c:if test="${empty tab1Label}">
+	<c:set var="tab1Label">monitoring.tab.summary</c:set>
+	<c:set var="tab2Label">monitoring.tab.edit.activity</c:set>
+	<c:set var="tab3Label">monitoring.tab.statistics</c:set>
+	
+	<c:set var="tab1Jsp">summary.jsp</c:set>
+	<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>
+
+<lams:html>
+    <lams:head>
+        <title>LAMS ::
+            <c:choose>
+                <c:when test="${empty title}">
+                    <fmt:message key="activity.title"/>
+                </c:when>
+                <c:otherwise>
+                    <c:out value="${title}" />
+                </c:otherwise>
+            </c:choose>
+        </title>
+        <link rel="icon" type="image/x-icon" href="${lams}images/svg/lamsv5_logo.svg">
+
+        <link rel="stylesheet" href="${lams}css/components-monitoring.css">
+        <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
+
+        <script src="${lams}includes/javascript/jquery.js"></script>
+        <script src="${lams}includes/javascript/jquery-ui.js"></script>
+        <script src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
+        <lams:JSImport src="includes/javascript/common.js" />
+        <c:if test="${showHeader}">
+	        <script src="${lams}/monitoring/includes/javascript/monitor-activity.js" type="text/javascript"></script>
+	        <script>
+				const INITIAL_TAB_ID = "${initialTabId}",
+					TOOL_CONTENT_ID = <c:out value="${param.toolContentID}" />,
+					MONITORING_STATISTIC_URL = "<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>";
+	        </script>
+        </c:if>
+    </lams:head>
+
+    <body class="component" <c:if test="${showHeader}">onLoad='init()'</c:if>>
+    	<div class="component-page-wrapper">
+			<div class="component-page-content">
+            	<a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
+	            	<fmt:message key='label.skip.to.main.content'/>
+	            </a>
+
+				<c:if test="${showHeader}">
+		            <nav class="navbar navbar-expand-md">
+		  				<div class="container-fluid">
+							<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+								<span class="navbar-toggler-icon"></span>
+							</button>
+							
+							<div class="collapse navbar-collapse" id="navbarSupportedContent">
+								 <div class="nav nav-tabs nav-justified bg-light rounded-5 w-100 py-2 me-2" id="tabs" role="tablist">
+								    <button class="nav-link active" id="tab-1" data-bs-toggle="tab" data-bs-target="#tab-1-content" type="button" role="tab" 
+								    		aria-controls="tab-1-content" 
+								    		aria-selected="true"
+								    		onclick="onSelectTab(1);">
+								    	<fmt:message key="${tab1Label}" />
+								    </button>
+								    <button class="nav-link"		id="tab-2" data-bs-toggle="tab" data-bs-target="#tab-2-content" type="button" role="tab" 
+								    		aria-controls="tab-2-content" 
+								    		aria-selected="false" 
+								    		onclick="onSelectTab(2);">
+								    	<fmt:message key="${tab2Label}"/>
+								    </button>
+								    <button class="nav-link" 		id="tab-3" data-bs-toggle="tab" data-bs-target="#tab-3-content" type="button" role="tab" 
+								    		aria-controls="tab-3-content" 
+								    		aria-selected="false" 
+								    		onclick="onSelectTab(3);">
+								    	<fmt:message key="${tab3Label}"/>
+								    </button>
+								</div>
+							</div>
+			                
+					        <c:if test="${not empty helpToolSignature or not empty helpPage or not empty extraControl}">
+							    <ul class="navbar-nav" id="page-actions">
+							        <c:if test="${not empty helpToolSignature}">
+								       	<li class="nav-item d-none d-md-block">
+								       		<lams:help toolSignature="${helpToolSignature}" module="monitoring" style="small"/>
+								       	</li>
+							        </c:if>
+							        <c:if test="${not empty helpPage}">
+							          	<li class="nav-item d-none d-md-block">
+							           		<lams:help page="${helpPage}" style="small"/>
+							           	</li>
+							        </c:if>
+							        <c:if test="${not empty extraControl}">
+							           	<li class="nav-item">
+							           		${extraControl}
+							           	</li>
+							        </c:if>
+							             
+									<li class="nav-item">
+										 <a href="${lams}home/monitorLesson.do?lessonID=${param.lessonID}" id="btn-close" class="btn btn-light btn-close btn-sm nav-link" 
+				                   				title="<fmt:message key='label.close.and.return'/>"></a>
+							       	</li>
+							   	</ul>
+					        </c:if>
+		  				</div>
+		  			</nav>
+	  			</c:if>
+
+	            <main class="p-3" id="component-main-content" tabindex="-1">
+	            	<c:if test="${showHeader}">
+						<div class="tab-content m-3" id="tabs-content">
+							<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
+							<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
+							<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
+						</div>
+						
+						<input type="hidden" name="currentTab" id="currentTab" />
+					</c:if>
+					
+	                <jsp:doBody/>
+	            </main>
+	        </div>
+	    </div>
+    </body>
+</lams:html>
Index: lams_tool_forum/web/WEB-INF/tags/RestrictedUsageAccordian.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(.../RestrictedUsageAccordian.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_forum/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(.../RestrictedUsageAccordian.tag)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -35,20 +35,18 @@
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<div class="panel-group" id="accordionRestrictUsageDiv" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default" >
-        <div class="panel-heading collapsable-icon-left" id="headingRestrictedUsageDiv">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#restrictUsageDiv" aria-expanded="false" aria-controls="restrictUsageDiv" >
-          	${title}
-        	</a>
-      		</span>
-        </div>
+<div class="accordion" id="accordionRestrictUsageDiv"> 
+    <div class="accordion-item">
+    	<h2 class="accordion-header" id="headingRestrictedUsageDiv">
+        	<button class="accordion-button collapsed text-bg-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#restrictUsageDiv" aria-expanded="false" aria-controls="restrictUsageDiv">
+	          	${title}
+    		</button>
+        </h2>
 
-
-		<div id="restrictUsageDiv" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="headingRestrictedUsageDiv">
-		<jsp:doBody />
-		</div>
+		<div id="restrictUsageDiv" class="accordion-collapse collapse p-3" aria-labelledby="headingRestrictedUsageDiv">
+      		<div>
+      			<jsp:doBody />
+      		</div>
+      	</div>
 	</div>
 </div>
-		
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rfaa119a6a494bab9b265ba46a597ee3442bb56cd -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
+++ lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -346,6 +346,10 @@
 		<path>/WEB-INF/tags/PageLearner.tag</path>
    	</tag-file>
    	<tag-file>
+	    <name>PageMonitor</name>
+		<path>/WEB-INF/tags/PageMonitor.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>Popover</name>
        <path>/WEB-INF/tags/Popover.tag</path>
    	</tag-file> 
Index: lams_tool_forum/web/jsps/learning/message/msgview.jsp
===================================================================
diff -u -ra3b76a7a959ef77d75f311cc86fa65193e429289 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/learning/message/msgview.jsp	(.../msgview.jsp)	(revision a3b76a7a959ef77d75f311cc86fa65193e429289)
+++ lams_tool_forum/web/jsps/learning/message/msgview.jsp	(.../msgview.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -29,8 +29,8 @@
 
 			<c:choose>
 				<c:when test="${msgDto.message.isMonitor}">
- 	            	<c:set var="textClass" value="text-info"/>
- 	                <c:set var="bgClass" value="bg-info"/>
+ 	            	<c:set var="textClass" value="text-warning"/>
+ 	                <c:set var="bgClass" value="bg-warning"/>
  	            </c:when>
 				<c:otherwise>
  	            	<c:set var="textClass" value=""/>
@@ -55,7 +55,7 @@
 				</c:choose>
             </span><br/>
 
-            <div class="${textClass}">
+            <div class="font-size-init ${textClass}">
 				<c:set var="msgAuthor" value="${msgDto.author}" />
 				<c:if test="${empty msgAuthor}">
 					<c:set var="msgAuthor"><fmt:message key="label.default.user.name" /></c:set>
@@ -130,26 +130,26 @@
 		</c:if>
 
 		<c:if test="${((msgDto.released && msgDto.isAuthor) || sessionMap.mode=='teacher') && (not empty msgDto.mark)}">
-			<hr class="msg-hr">
-			<div>
-				<span class="label label-default">
+			<div class="mt-2">
+				<span class="badge bg-info me-1">
 					<fmt:message key="lable.topic.title.mark" />&nbsp;
 				</span>
-				
 				<fmt:formatNumber value="${msgDto.mark}" maxFractionDigits="2" />
 				<BR /> 
-				<span class="label label-default">
-					<fmt:message key="lable.topic.title.comment" />&nbsp;
-				</span>
 				
-				<c:choose>
-					<c:when test="${empty msgDto.comment}">
-						<fmt:message key="message.not.avaliable" />
-					</c:when>
-					<c:otherwise>
-						<c:out value="${msgDto.comment}" escapeXml="false" />
-					</c:otherwise>
-				</c:choose>
+				<div class="d-flex flex-row mt-2 align-items-center">
+					<span class="badge bg-info me-2">
+						<fmt:message key="lable.topic.title.comment" />&nbsp;
+					</span>
+					<c:choose>
+						<c:when test="${empty msgDto.comment}">
+							<fmt:message key="message.not.avaliable" />
+						</c:when>
+						<c:otherwise>
+							<c:out value="${msgDto.comment}" escapeXml="false" />
+						</c:otherwise>
+					</c:choose>
+				</div>
 			</div>
 		</c:if>
 
@@ -170,7 +170,8 @@
 				<c:set var="updateMark">
 					<lams:WebAppURL />monitoring/editMark.do?sessionMapID=${sessionMapID}&topicID=${msgDto.message.uid}&updateMode=viewForum
 				</c:set>
-				<a href="${updateMark}" class="comment">
+				<a href="${updateMark}" class="btn btn-light comment align-top ms-2">
+					<i class="fa-solid fa-marker me-1"></i>
 					<fmt:message key="lable.topic.title.mark" />
 				</a>
 				&middot;
@@ -182,7 +183,8 @@
 						<c:set var="hidetopic">
 							<lams:WebAppURL />learning/updateMessageHideFlag.do?sessionMapID=${sessionMapID}&topicID=${msgDto.message.uid}&hideFlag=false
 						</c:set>
-						<a href="${hidetopic}" class="comment">
+						<a href="${hidetopic}" class="btn btn-light comment align-top ms-2">
+							<i class="fa-regular fa-eye me-1"></i>
 							<fmt:message key="label.show" />
 						</a>
 					</c:when>
@@ -191,7 +193,8 @@
 						<c:set var="hidetopic">
 							<lams:WebAppURL />learning/updateMessageHideFlag.do?sessionMapID=${sessionMapID}&topicID=${msgDto.message.uid}&hideFlag=true
 						</c:set>
-						<a href="${hidetopic}" class="comment">
+						<a href="${hidetopic}" class="btn btn-light comment align-top ms-2">
+							<i class="fa-regular fa-eye-slash me-1"></i>
 							<fmt:message key="label.hide" />
 						</a>
 					</c:otherwise>
Index: lams_tool_forum/web/jsps/learning/viewforum.jsp
===================================================================
diff -u -r7b4ee4f4e13ad862387ee258f2625342abe8321c -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision 7b4ee4f4e13ad862387ee258f2625342abe8321c)
+++ lams_tool_forum/web/jsps/learning/viewforum.jsp	(.../viewforum.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -18,7 +18,8 @@
     <lams:WebAppURL />learning/viewForum.do?mode=${sessionMap.mode}&toolSessionID=${sessionMap.toolSessionID}&sessionMapID=${sessionMapID}
 </c:set>
 
-<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}"
+		hideHeader='${sessionMap.mode == "teacher" || param.mode == "teacher"}'>
 
     <!-- ********************  javascript ********************** -->
     <lams:JSImport src="includes/javascript/common.js" />
@@ -34,7 +35,9 @@
         var EXE_FILE_TYPES = '${EXE_FILE_TYPES}';
         var UPLOAD_FILE_MAX_SIZE = '${UPLOAD_FILE_MAX_SIZE}';
 
-        checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', submitFinish);
+        <c:if test='${sessionMap.mode != "teacher"}'>
+        	checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', submitFinish);
+        </c:if>
 
         function submitFinish() {
             location.href = '${finish}';
Index: lams_tool_forum/web/jsps/learning/viewtopic.jsp
===================================================================
diff -u -r7b4ee4f4e13ad862387ee258f2625342abe8321c -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/learning/viewtopic.jsp	(.../viewtopic.jsp)	(revision 7b4ee4f4e13ad862387ee258f2625342abe8321c)
+++ lams_tool_forum/web/jsps/learning/viewtopic.jsp	(.../viewtopic.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -7,7 +7,8 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="pageSize" value="<%=ForumConstants.DEFAULT_PAGE_SIZE%>" />
 
-<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}"
+		hideHeader='${sessionMap.mode == "teacher" || param.mode == "teacher"}'>
 
 	<!-- ********************  CSS ********************** -->
 	<link href="${lams}css/rating.css" rel="stylesheet" type="text/css">
Index: lams_tool_forum/web/jsps/monitoring/editactivity.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_forum/web/jsps/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -1,43 +1,44 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<lams:errors/>
+<lams:errors5/>
 		
 <c:if test="${!isPageEditable}">
-	<lams:Alert type="warn" id="no-edit" close="false">
+	<lams:Alert5 type="warn" id="no-edit">
 		<fmt:message key="message.monitoring.edit.activity.not.editable" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:if>
 
-
-<table class="table table-condensed">
-	<tr>
-		<td class="field-name" width="10%" valign="top">
+<div class="ltable no-header">
+	<div class="row">
+		<div class="col-2">
 			<fmt:message key="label.authoring.basic.title" />
-		</td>
-		<td>
+		</div>
+		<div class="col">
 			<c:out value="${title}" escapeXml="true" />
-		</td>
-	</tr>
+		</div>
+	</div>
 
-	<tr>
-		<td class="field-name" width="10%" valign="top" NOWRAP>
+	<div class="row">
+		<div class="col-2">
 			<fmt:message key="label.authoring.basic.instruction" />
-		</td>
-		<td>
+		</div>
+		<div class="col">
 			<c:out value="${instruction}" escapeXml="false" />
-		</td>
-	</tr>
-</table>
+		</div>
+	</div>
+</div>
 
 <c:if test='${isPageEditable}'>
-	<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="${toolContentID}" />
-		<input type="hidden" name="contentFolderID" value="${contentFolderID}" />
-	</form>
-	
-	<a href="#nogo" onclick="javascript:launchDefineLaterPopup()" class="btn btn-default pull-right">
-		<fmt:message key="label.monitoring.edit.activity.edit" />
-	</a>
+	<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="${toolContentID}" />
+			<input type="hidden" name="contentFolderID" value="${contentFolderID}" />
+		</form>
+		
+		<button type="button" onclick="launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen">
+			<fmt:message key="label.monitoring.edit.activity.edit" />
+		</button>
+	</div>
 </c:if>
 
Index: lams_tool_forum/web/jsps/monitoring/monitoring.jsp
===================================================================
diff -u -r47dddf6db4afaba99d8f3f88fc50b16df9251a76 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 47dddf6db4afaba99d8f3f88fc50b16df9251a76)
+++ lams_tool_forum/web/jsps/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -1,81 +1,10 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.forum.ForumConstants"%>
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-		<%@ include file="/common/tabbedheader.jsp"%>
-		<c:set var="tool"><lams:WebAppURL /></c:set>
-		<c:set var="lams"><lams:LAMSURL /></c:set>
-		
-				<script type="text/javascript">
-		    var initialTabId = "${initialTabId}";
-		     
-			function init(){
-				if (initialTabId) {
-					selectTab(initialTabId);
-				} else {
-					selectTab(1);
-				}
-			}  
-		        
-			function doSelectTab(tabId) {
-				var tag = document.getElementById("currentTab");
-				tag.value = tabId;
-				selectTab(tabId);
-				
-		    	//for statistic page change:
-		    	if(tabId == 3) {
-		    		doStatistic();
-		    	}
-			}
-			
-			function doStatistic(){
-				var url = "<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>";
-				
-				$("#statisticArea_Busy").show();
-				$.ajaxSetup({ cache: true });
-				$("#statisticArea").load(
-					url,
-					{
-						toolContentID: <c:out value="${param.toolContentID}" />, 
-						reqID: (new Date()).getTime()
-					},
-					function() {
-						$("#statisticArea_Busy").hide();
-					}
-				);
-				
-			}       
-		</script>
-	</lams:head>
 
-	<body class="stripes" onLoad="init()">
-	
-		<input type="hidden" name="currentTab" id="currentTab" />
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+		helpToolSignature="<%= ForumConstants.TOOL_SIGNATURE %>"
+		initialTabId="${initialTabId}">
+</lams:PageMonitor>
 
-		<c:set var="title"><fmt:message key="activity.title" /></c:set>
-		<lams:Page title="${title}" type="navbar">
-		
-			<lams:Tabs title="${title}" control="true" helpToolSignature="<%= ForumConstants.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>
-
Index: lams_tool_forum/web/jsps/monitoring/parts/advanceOptions.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/parts/advanceOptions.jsp	(.../advanceOptions.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_forum/web/jsps/monitoring/parts/advanceOptions.jsp	(.../advanceOptions.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -1,14 +1,12 @@
 <c:set var="adTitle"><spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.th.advancedSettings" /></spring:escapeBody></c:set>
-<lams:AdvancedAccordian title="${adTitle}">
-             
-<table class="table table-striped table-condensed">
-
-		<tr>
-			<td>
+<lams:AdvancedAccordian title="${adTitle}">             
+	<div class="ltable table-striped table-sm no-header mb-0">
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.lock.on.finished" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.lockWhenFinished == true}">
 						<fmt:message key="label.on" />
@@ -17,16 +15,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-		
-		
-		<tr>
-			<td>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.edit" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.allowEdit == true}">
 						<fmt:message key="label.on" />
@@ -35,15 +32,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.enable.anonymous.posts" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.allowAnonym}">
 						<fmt:message key="label.on" />
@@ -52,16 +49,16 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.rate.postings" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.allowRateMessages}">
 						<fmt:message key="label.on" />
@@ -70,15 +67,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.minimum.reply" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.minimumRate == 0}">
 						<fmt:message key="label.authoring.advance.no.minimum" />
@@ -87,15 +84,15 @@
 						${forum.minimumRate}
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.maximum.reply" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.maximumRate == 0}">
 						<fmt:message key="label.authoring.advance.no.maximum" />
@@ -104,15 +101,15 @@
 						${forum.maximumRate}
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.upload" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.allowUpload == true}">
 						<fmt:message key="label.on" />
@@ -121,15 +118,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.use.richeditor" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.allowRichEditor == true}">
 						<fmt:message key="label.on" />
@@ -138,15 +135,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.min.limited.input" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.limitedMinCharacters == true}">
 						<fmt:message key="label.on" />, ${forum.minCharacters}
@@ -155,15 +152,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.limited.input" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.limitedMaxCharacters == true}">
 						<fmt:message key="label.on" />, ${forum.maxCharacters}
@@ -172,15 +169,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.allow.new.topics" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.allowNewTopic == true}">
 						<fmt:message key="label.on" />
@@ -189,15 +186,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advance.number.reply" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<fmt:message key="label.authoring.advance.minimum.reply" />
 				<c:choose>
 					<c:when test="${forum.minimumReply != 0}">
@@ -218,15 +215,15 @@
 						<fmt:message key="label.authoring.advance.no.maximum" />
 					</c:otherwise>
 				</c:choose>
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advanced.send.emails.to" /> <fmt:message key="label.authoring.advanced.learners" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.notifyLearnersOnForumPosting == true}">
 						<fmt:message key="label.on" />
@@ -235,15 +232,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advanced.send.emails.to" /> <fmt:message key="label.authoring.advanced.teachers" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.notifyTeachersOnForumPosting == true}">
 						<fmt:message key="label.on" />
@@ -252,15 +249,15 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
+			</div>
+		</div>
 		
-		<tr>
-			<td>
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.authoring.advanced.notify.mark.release" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col text-start">
 				<c:choose>
 					<c:when test="${forum.notifyLearnersOnMarkRelease == true}">
 						<fmt:message key="label.on" />
@@ -269,7 +266,7 @@
 						<fmt:message key="label.off" />
 					</c:otherwise>
 				</c:choose>	
-			</td>
-		</tr>
-</table>
+			</div>
+		</div>
+	</div>
 </lams:AdvancedAccordian>
Index: lams_tool_forum/web/jsps/monitoring/parts/daterestriction.jsp
===================================================================
diff -u -rabf11f48c3a772c5715c3e5caa1ecc86d62056a8 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/parts/daterestriction.jsp	(.../daterestriction.jsp)	(revision abf11f48c3a772c5715c3e5caa1ecc86d62056a8)
+++ lams_tool_forum/web/jsps/monitoring/parts/daterestriction.jsp	(.../daterestriction.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -1,29 +1,40 @@
 <%@include file="/common/taglibs.jsp"%>
-
 <c:set var="ddTitle"><spring:escapeBody javaScriptEscape="true"><fmt:message key="monitor.summary.date.restriction" /></spring:escapeBody></c:set>
 <lams:RestrictedUsageAccordian title="${ddTitle}">
-
-	<p><fmt:message key="monitor.summary.when.date.restriction.is.set" /></p>
+	<p>
+		<fmt:message key="monitor.summary.when.date.restriction.is.set" />
+	</p>
 		
 	<div id="datetimeDiv" <c:if test='${not empty forum.submissionDeadline}'> style="display: none;" </c:if>>
-		<div class="form-group">
-		<label for="datetime"><fmt:message key="monitor.summary.after.date" />&nbsp;
-		<input type="text" name="datetime" id="datetime" value="" class="form-control form-control-inline" autocomplete="off"/>
-		</label>							
-		<a	href="javascript:setSubmissionDeadline();" class="btn btn-default">
-			<fmt:message key="monitor.summary.set.restriction" />
-		</a>
+		<div class="row align-items-center">
+			<div class="col-auto pe-0">
+				<label for="datetime">
+					<fmt:message key="monitor.summary.after.date" />
+				</label>
+			</div>
+			
+			<div class="col-auto pe-0">
+				<input type="text" name="datetime" id="datetime" value="" class="form-control form-control-inline" autocomplete="off"/>
+			</div>
+			
+			<div class="col-auto pe-0">
+				<button type="button" onclick="setSubmissionDeadline();" class="btn btn-secondary">
+					<i class="fa-solid fa-wrench me-1"></i>
+					<fmt:message key="monitor.summary.set.restriction" />
+				</button>
+			</div>
 		</div>
 	</div>
 
 	<div id="dateInfoDiv" <c:if test='${empty forum.submissionDeadline}'> style="display: none;" </c:if>>
-		<label><fmt:message key="monitor.summary.after.date" /></span>
-		<span id="dateInfo">
+		<span>
+			<fmt:message key="monitor.summary.after.date" />
+			<span id="dateInfo" class="badge text-bg-danger mx-2"></span>
 		</span>
-		</label>
-		<a	href="javascript:removeSubmissionDeadline();" class="btn btn-default">
+		
+		<button type="button" onclick="removeSubmissionDeadline();" class="btn btn-secondary">
+			<i class="fa-solid fa-trash-can me-1"></i>
 			<fmt:message key="monitor.summary.unset.restriction" />
-		</a>
+		</button>
 	</div>
-
-</lams:RestrictedUsageAccordian>
\ No newline at end of file
+</lams:RestrictedUsageAccordian>
Index: lams_tool_forum/web/jsps/monitoring/statisticpart.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_forum/web/jsps/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -6,9 +6,9 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
 <c:if test="${empty topicList}">
-	<lams:Alert type="info" id="no-session-summary" close="false">
+	<lams:Alert5 type="info" id="no-session-summary" close="false">
 		<fmt:message key="message.monitoring.summary.no.session" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:if>
 	
 <c:forEach var="element" items="${topicList}">
@@ -26,74 +26,76 @@
 	</c:forEach>
 
 	<c:if test="${sessionMap.isGroupedActivity}">	
-	    <div class="panel panel-default" >
-        <div class="panel-heading" id="heading${toolSessionDto.sessionID}">
-			<span class="panel-title">
-				<fmt:message key="message.session.name" />: <c:out value="${toolSessionDto.sessionName}" />
-			</span>
+	    <div class="lcard card-secondary" >
+        <div class="card-header" id="heading${toolSessionDto.sessionID}">
+			<fmt:message key="message.session.name" />: <c:out value="${toolSessionDto.sessionName}" />
         </div>
 
-        <div class="panel-body">
+        <div class="card-body p-2">
 	</c:if>
 
-	<h4><fmt:message key="monitoring.tab.summary"/></h4>
-	<table class="table table-condensed table-no-border">
-		<tr>
-			<td class="field-name" width="30%">
+	<div class="fs-4 my-3">
+		<fmt:message key="monitoring.tab.summary"/>
+	</div>
+	
+	<div class="ltable table-striped">
+		<div class="row">
+			<div class="col-2">
 				<fmt:message key="lable.monitoring.statistic.total.message" />
-			</td>
-			<td>
+			</div>
+			<div class="col">
 				<c:out value="${sessionTotalMessage}" />
-			</td>
-			
-		</tr>
-		<tr>
-			<td class="field-name" width="30%">
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-2">
 				<fmt:message key="label.monitoring.statistic.average.mark" />
-			</td>
+			</div>
 			
-			<td>
+			<div class="col">
 				<fmt:formatNumber value="${sessionMarkAverage}"  maxFractionDigits="2"/>
-			</td>
-		</tr>
-	</table>
+			</div>
+		</div>
+	</div>
 
-	<table class="table table-condensed table-striped">
-		<tr>
-			<th scope="col" width="50%">
+	<div class="ltable table-striped mt-5">
+		<div class="row">
+			<div class="col">
 				<fmt:message key="lable.topic.title.subject" />
-			</th>
-			<th scope="col" width="25%">
+			</div>
+			<div class="col-2">
 				<fmt:message key="lable.topic.title.message.number" />
-			</th>
-			<th scope="col" width="25%">
+			</div>
+			<div class="col-2">
 				<fmt:message key="lable.topic.title.average.mark" />
-			</th>
-		</tr>
+			</div>
+		</div>
+		
 		<c:forEach items="${sessionTopicList}" var="topic">
-			<tr>
-				<td valign="MIDDLE" width="48%">
+			<div class="row align-items-center">
+				<div class="col">
+					<c:out value="${topic.message.subject}" />
+					
 					<c:set var="viewtopic">
 						<lams:WebAppURL />learning/viewTopic.do?sessionMapID=${sessionMapID}&toolSessionID=${toolSessionDto.sessionID}&topicID=${topic.message.uid}&mode=teacher&pageLastId=0
 					</c:set>
-					<a href="javascript:launchPopup('${viewtopic}');">
-						<c:out value="${topic.message.subject}" />
-					</a>
-				</td>
-				<td>
+					<button type="button" onclick="launchPopup('${viewtopic}');" class="btn btn-sm btn-light ms-2">
+						<fmt:message key="page.title.monitoring.view.topic"/>
+						<i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
+					</button>
+				</div>
+				<div class="col-2">
 					<c:out value="${topic.message.replyNumber+1}" />
-				</td>
-				<td>
+				</div>
+				<div class="col-2">
 					<fmt:formatNumber value="${topic.mark}"  maxFractionDigits="2"/>
-				</td>
-			</tr>
+				</div>
+			</div>
 		</c:forEach>
-	</table>
+	</div>
 
 	<c:if test="${sessionMap.isGroupedActivity}">	
 		</div>
 		</div>
 	</c:if>
-
 </c:forEach>
-
Index: lams_tool_forum/web/jsps/monitoring/summary.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/summary.jsp	(.../summary.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_forum/web/jsps/monitoring/summary.jsp	(.../summary.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -7,10 +7,10 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="forum" value="${sessionMap.forum}" />
 
-<link type="text/css" href="${lams}/css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
+<link type="text/css" href="${lams}/css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
 <link type="text/css" href="${lams}/css/jquery-ui.timepicker.css" rel="stylesheet">
-<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
-<link type="text/css" href="${lams}css/jquery.tablesorter.pager.css" rel="stylesheet">
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css">
+<link type="text/css" href="${lams}css/jquery.tablesorter.pager5.css" rel="stylesheet">
  <style>
  	.group-mark-release-label {
  		margin-top: 8px;
@@ -19,7 +19,13 @@
  		font-size: small;
  	}
 </style>
-	
+
+<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>  
+<script type="text/javascript" src="${lams}includes/javascript/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="${tool}includes/javascript/message.js"></script>
 <script type="text/javascript">
 	//pass settings to monitorToolSummaryAdvanced.js
 	var submissionDeadlineSettings = {
@@ -37,10 +43,8 @@
 <c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
 <script src="${lams}includes/javascript/jquery.timeago.js" type="text/javascript"></script>
 <script src="${lams}includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js" type="text/javascript"></script>
-<script type="text/javascript" src="${lams}/includes/javascript/portrait.js" ></script>
-
+<script type="text/javascript" src="${lams}/includes/javascript/portrait5.js" ></script>
 <script type="text/javascript">
-
 	function releaseMarks(sessionId){
 		$("#message-area-busy").show();
 		$.ajax({
@@ -118,13 +122,16 @@
 								rows += "-";
 								
 							} else {
-								var anyPostsMarked = (userData["anyPostsMarked"]) ? '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.yes"/></spring:escapeBody>' : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.no"/></spring:escapeBody>';
-								rows += anyPostsMarked;	
-								
-								var viewUserMarkUrl = '<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${sessionMapID}&userUid=' + userData["userUid"] + "&toolSessionID=" + $(table).attr('data-session-id');
-								rows += 	'<a href="javascript:launchPopup(\'' + viewUserMarkUrl + '\')" style="margin-left: 7px;" styleClass="button">';
-								rows += 		'<spring:escapeBody javaScriptEscape="true"><fmt:message key="lable.topic.title.mark" /></spring:escapeBody>';
-								rows += 	'</a>';
+								let anyPostsMarked = (userData["anyPostsMarked"]) ? '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.yes"/></spring:escapeBody>' : '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.no"/></spring:escapeBody>',
+									viewUserMarkUrl = '<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${sessionMapID}&userUid=' + userData["userUid"] + "&toolSessionID=" + $(table).attr('data-session-id');
+
+								rows += '<div class="d-flex flex-row align-items-center">' +
+											anyPostsMarked +	
+											'<button type="button" onclick="launchPopup(\'' + viewUserMarkUrl + '\')" class="btn btn-sm btn-secondary d-flex align-items-center ms-1">' +
+												'<i class="fa-solid fa-marker me-1"></i>' +
+												'<spring:escapeBody javaScriptEscape="true"><fmt:message key="lable.topic.title.mark" /></spring:escapeBody>' +
+									 		'</button>' +
+									 	'</div>';
 							}
 							rows += '</td>';
 							
@@ -134,114 +141,109 @@
 						json.total = data.total_rows;
 						json.rows = $(rows);
 						return json;
-			            
 			    	}
 				}})
-			  .bind('pagerInitialized pagerComplete', function(event, options){
+				.bind('pagerInitialized pagerComplete', function(event, options){
 					initializePortraitPopover('${lams}');
 					$("time.timeago").timeago();
 				})
-			 
-			});
-	  	})
+		});
+	})
 	  	
-	  	function downloadMarks(sessionId){
+	function downloadMarks(sessionId){
 		var url = "<c:url value="/monitoring/downloadMarks.do"/>";
 	    var reqIDVar = new Date();
 		var param = "?toolSessionID=" + sessionId +"&reqID="+reqIDVar.getTime();
 		url = url + param;
 		location.href = url;
 	}
-
 </script>
 
-<div class="panel">
-	<h4>
+<div class="instructions">
+	<div class="fs-4">
 	    <c:out value="${title}" escapeXml="true"/>
-	</h4>
-	<div class="instructions voffset5">
+	</div>
+	<div class="mt-2">
 	    <c:out value="${instruction}" escapeXml="false"/>
 	</div>
 	
 	<c:if test="${empty sessionMap.sessionDtos}">
-		<lams:Alert type="info" id="no-session-summary" close="false">
+		<lams:Alert5 type="info" id="no-session-summary" close="false">
 			<fmt:message key="message.monitoring.summary.no.session" />
-		</lams:Alert>
+		</lams:Alert5>
 	</c:if>
 	
 	<!--For release marks feature-->
 	<lams:WaitingSpinner id="message-area-busy"/>
 </div>
 
-<c:if test="${sessionMap.isGroupedActivity}">
-<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
-</c:if>
-
 <c:forEach var="sessionDto" items="${sessionMap.sessionDtos}" varStatus="status">
-
 	<c:if test="${sessionMap.isGroupedActivity}">	
-	    <div class="panel panel-default" >
-        <div class="panel-heading" id="heading${sessionDto.sessionID}">
-        	<span class="panel-title collapsable-icon-left">
-        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${sessionDto.sessionID}" 
-					aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${sessionDto.sessionID}" >
-			<fmt:message key="message.session.name" />:	<c:out value="${sessionDto.sessionName}" /></a>
+	    <div class="lcard card-secondary" >
+        <div class="card-header" id="heading${sessionDto.sessionID}">
+        	<span class="card-title collapsable-icon-left">
+        		<button type="button" class="btn btn-secondary-darker no-shadow ${status.first ? '' : 'collapsed'}" data-bs-toggle="collapse" data-bs-target="#collapse${sessionDto.sessionID}" 
+						aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${sessionDto.sessionID}" >					
+					<fmt:message key="message.session.name" />:	<c:out value="${sessionDto.sessionName}" />
+				</button>
 			</span>
         </div>
-        
-        <div id="collapse${sessionDto.sessionID}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel" aria-labelledby="heading${sessionDto.sessionID}">
+
+        <div id="collapse${sessionDto.sessionID}" class="card-body p-2 collapse ${status.first ? 'show' : ''}">
 	</c:if>
 		
-		<lams:TSTable numColumns="4" dataId="data-session-id='${sessionDto.sessionID}'">
-				<th><fmt:message key="monitoring.user.fullname"/></th>
-				<th width="5%" align="center"><fmt:message key="label.number.of.posts"/></th>
-				<th width="25%" align="center"><fmt:message key="label.latest.posting.date"/></th>
-				<th width="10%" align="center"><fmt:message key="monitoring.marked.question"/></th>
-		</lams:TSTable>
+	<lams:TSTable numColumns="4" dataId="data-session-id='${sessionDto.sessionID}'">
+		<th><fmt:message key="monitoring.user.fullname"/></th>
+		<th width="5%" align="center"><fmt:message key="label.number.of.posts"/></th>
+		<th width="25%" align="center"><fmt:message key="label.latest.posting.date"/></th>
+		<th width="10%" align="center"><fmt:message key="monitoring.marked.question"/></th>
+	</lams:TSTable>
 
-		<P style="display: inline"> 
-			<div id="release-marks-info-${sessionDto.sessionID}" class="loffset5 group-mark-release-label"
+	<div class="clearfix">
+		<div class="float-end"> 
+			<div id="release-marks-info-${sessionDto.sessionID}" class="group-mark-release-label text-center ms-2 "
 					<c:if test="${!sessionDto.marksReleased}">style="display:none;"</c:if>>
-				<span class="label label-success">
-					<i class="fa fa-check-circle"></i>
+				<span class="badge bg-success">
+					<i class="fa fa-check-circle me-1"></i>
 					<fmt:message key="label.marks.released" />
 				</span>
 			</div>
 					
 			<c:set var="viewforum">
 				<lams:WebAppURL />learning/viewForum.do?toolSessionID=${sessionDto.sessionID}&topicID=${topic.message.uid}&mode=teacher
 			</c:set>
-			<a href="javascript:launchPopup('${viewforum}');" class="btn btn-default loffset5 voffset10">
+			<button type="button" onclick="launchPopup('${viewforum}');" class="btn btn-secondary ms-2 mt-3">
+				<i class="fa-solid fa-eye me-1"></i>
 				<fmt:message key="label.monitoring.summary.view.forum"/>
-			</a>
-			<button name="releaseMarks" onclick="releaseMarks(${sessionDto.sessionID})" class="btn btn-default loffset5 voffset10" >
+			</button>
+			<button type="button" name="releaseMarks" onclick="releaseMarks(${sessionDto.sessionID})" class="btn btn-secondary ms-2 mt-3" >
+				<i class="fa-solid fa-box-open me-1"></i>
 				<fmt:message key="button.release.mark" />
 			</button>
+			
 			<c:set value="${sessionDto.sessionID}" var="toolSessionID"/>
-			<a href="javascript:downloadMarks(${toolSessionID});"
-				name="downloadMarks" class="btn btn-default voffset10 loffset5">
+			<button type="button"  onclick="downloadMarks(${toolSessionID});" name="downloadMarks" class="btn btn-secondary ms-2 mt-3">
+				<i class="fa-solid fa-download me-1"></i>
 				<fmt:message key="message.download.marks" />
-			</a>
+			</button>
 			<c:url value="/monitoring/monitoring.do" var="refreshMonitoring">
 				<c:param name="contentFolderID" value="${contentFolderID}"/>
 				<c:param name="toolContentID" value="${toolContentID}" />
+				<c:param name="lessonID" value="${param.lessonID}" />
 			</c:url>
-			<a href="${refreshMonitoring}" class="btn btn-default loffset5 voffset10" >
-					<fmt:message key="label.refresh" />
+			<a href="${refreshMonitoring}" class="btn btn-secondary btn-icon-refresh ms-2 mt-3" >
+				<fmt:message key="label.refresh" />
 			</a>
-		</P>
+		</div>
+	</div>
 	
 	<c:if test="${sessionMap.isGroupedActivity}">
 		</div> <!-- end collapse area  -->
 		</div> <!-- end collapse panel  -->
 	</c:if>
-	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
-
+	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="mt-2">&nbsp;</div>' :  ''}
 </c:forEach>
 
-<c:if test="${sessionMap.isGroupedActivity}">
-	</div> <!--  end panel group -->
-</c:if>
 <%@include file="parts/advanceOptions.jsp"%>
-
+<div class="my-2"></div>
 <%@include file="parts/daterestriction.jsp"%>
Index: lams_tool_forum/web/jsps/monitoring/updatemarks.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/updatemarks.jsp	(.../updatemarks.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_forum/web/jsps/monitoring/updatemarks.jsp	(.../updatemarks.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -1,91 +1,93 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="sessionMap" value="${sessionScope[markForm.sessionMapID]}" />
+<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
 
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
-	<body class="stripes">
-			
-			<lams:Page type="monitor" title="${page.title.monitoring.edit.user.mark}">
+<c:set var="title"><fmt:message key="page.title.monitoring.edit.user.mark" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>			
+	<script type="text/javascript">
+		jQuery(document).ready(function() {
+			jQuery("time.timeago").timeago();
+		});
+	</script>
+	
+	<h1>
+		${title}
+	</h1>
 
-			<form:form action="updateMark.do" id="markForm" modelAttribute="markForm" method="post">
-			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-
-			<c:set var="sessionMap" value="${sessionScope[markForm.sessionMapID]}" />
-			<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
-		    <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
-		    <script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-			<form:hidden path="sessionMapID"/>
-			<form:hidden path="topicID"/>
+	<form:form action="updateMark.do" id="markForm" modelAttribute="markForm" method="post">
+		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+		<form:hidden path="sessionMapID"/>
+		<form:hidden path="topicID"/>
 		
-			<p>
-				<fmt:message key="message.assign.mark" />&nbsp;
+		<p>
+			<fmt:message key="message.assign.mark" />&nbsp;
+			<span class="alert alert-warning">
 				<c:out value="${user.firstName}" />&nbsp;
 				<c:out value="${user.lastName}" />&nbsp;
 				<lams:Date value="${topic.message.updated}" timeago="true"/>
-			</p>		
+			</span>
+		</p>		
 			
-			<p>
-				<c:set var="viewtopic">
-				    <lams:WebAppURL />learning/viewTopic.do?topicID=${topic.message.uid}&create=${topic.message.created.time}&sessionMapID=${markForm.sessionMapID}
-				</c:set>
-				<a href="javascript:launchPopup('${viewtopic}','viewtopic')">
-					<c:out value="${topic.message.subject}" />
-				</a>
-				<c:if test="${topic.hasAttachment}">
-					<i class="fa fa-paperclip loffset5" title="<fmt:message key='message.label.attachment'/>"></i>
-				</c:if>
-			</p>
-			<lams:errors/>
+		<div class="clearfix mb-3">
+			<c:out value="${topic.message.subject}" />
+			<c:set var="viewtopic">
+			    <lams:WebAppURL />learning/viewTopic.do?topicID=${topic.message.uid}&create=${topic.message.created.time}&sessionMapID=${markForm.sessionMapID}&mode=teacher
+			</c:set>
+			<button type="button" onclick="launchPopup('${viewtopic}','viewtopic')" class="btn btn-sm btn-light ms-2">
+				<fmt:message key="page.title.monitoring.view.topic"/>
+				<i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
+			</button>
+			
+			<c:if test="${topic.hasAttachment}">
+				<div>			
+					<i class="fa fa-paperclip me-2 mt-2" title="<fmt:message key='message.label.attachment'/>"></i>
+					<c:forEach var="file" items="${topic.message.attachments}">
+						<span class="badge text-bg-warning bg-opacity-50 me-1 mt-3" title="<fmt:message key='message.label.attachment'/>">
+							<fmt:message key='message.label.attachment'/>&nbsp;<c:out value="${file.fileName}" />
+						</span>
+					</c:forEach>
+				</div>
+			</c:if>
+		</div>
 		
-			<div class="form-group">
-				<label for="mark"><fmt:message key="lable.topic.title.mark" />*</label>
-				<input type="text" name="mark" value="${markForm.mark}" class="form-control form-control-inline"/>
-			</div>
-			<div class="form-group">
-				<label for="comment"><fmt:message key="lable.topic.title.comment" /></label>
-				<lams:CKEditor id="comment"	value="${markForm.comment}" toolbarSet="DefaultMonitor">
-				</lams:CKEditor>
-			</div>
+		<lams:errors5/>
 		
+		<div class="mb-3">
+			<label for="mark">
+				<fmt:message key="lable.topic.title.mark" />*
+			</label>
+			<input type="text" name="mark" id="mark" value="${markForm.mark}" class="form-control form-control-inline"/>
+		</div>
+		<div class="mb-3">
+			<label for="comment">
+				<fmt:message key="lable.topic.title.comment" />
+			</label>
+			<lams:CKEditor id="comment"	value="${markForm.comment}" toolbarSet="DefaultMonitor">
+			</lams:CKEditor>
+		</div>
 		
-			<div class="pull-right">
-				<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="btn btn-default" />
+		<div class="activity-bottom-buttons">
+			<button type="submit" class="btn btn-primary">
+				<i class="fa-regular fa-circle-check me-1"></i>
+				<fmt:message key="lable.update.mark"/>
+			</button>
 							
-				<c:if test="${sessionMap.updateMode == 'listMarks'}">
-					<c:set var="cancelUrl">
-						<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${markForm.sessionMapID}&userUid=${user.uid}&toolSessionID=${sessionMap.toolSessionID}
-					</c:set>
-				</c:if>
-							
-				<c:if test="${sessionMap.updateMode == 'viewForum'}">
-					<c:set var="cancelUrl">
-							<c:url value="/learning/viewTopic.do"/>?sessionMapID=${markForm.sessionMapID}&topicID=${sessionMap.rootUid}
-					</c:set>
-				</c:if>
-			
-				<input type="button" onclick="location.href='${cancelUrl}';" class="btn btn-default" value="<fmt:message key="button.cancel"/>">
-			</div>
-			
-			<script type="text/javascript">
-			jQuery(document).ready(function() {
-				jQuery("time.timeago").timeago();
-			});
-		</script>
-		
-		</form:form>
-		
-
-			<div id="footer">
-			</div>
-
-			</lams:Page>
-	</body>
-</lams:html>
-
-
-
+			<c:if test="${sessionMap.updateMode == 'listMarks'}">
+				<c:set var="cancelUrl">
+					<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${markForm.sessionMapID}&userUid=${user.uid}&toolSessionID=${sessionMap.toolSessionID}
+				</c:set>
+			</c:if>
+			<c:if test="${sessionMap.updateMode == 'viewForum'}">
+				<c:set var="cancelUrl">
+					<c:url value="/learning/viewTopic.do"/>?sessionMapID=${markForm.sessionMapID}&topicID=${sessionMap.rootUid}
+				</c:set>
+			</c:if>
+			<button type="button" onclick="location.href='${cancelUrl}';" class="btn btn-secondary btn-icon-cancel me-2">
+				<fmt:message key="button.cancel"/>
+			</button>
+		</div>
+	</form:form>
+</lams:PageMonitor>
Fisheye: Tag b3dd7f3d65e4eec044f69c253259b5ff743b6700 refers to a dead (removed) revision in file `lams_tool_forum/web/jsps/monitoring/viewactivity.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_forum/web/jsps/monitoring/viewmarks.jsp
===================================================================
diff -u -r2de8f805211b6433aff4efd6fa9275a1b9933033 -rb3dd7f3d65e4eec044f69c253259b5ff743b6700
--- lams_tool_forum/web/jsps/monitoring/viewmarks.jsp	(.../viewmarks.jsp)	(revision 2de8f805211b6433aff4efd6fa9275a1b9933033)
+++ lams_tool_forum/web/jsps/monitoring/viewmarks.jsp	(.../viewmarks.jsp)	(revision b3dd7f3d65e4eec044f69c253259b5ff743b6700)
@@ -1,99 +1,114 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
 
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="activity.title" /></title>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
-	<body class="stripes">
+<c:set var="title"><fmt:message key="page.title.monitoring.view.user.mark" /></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<script type="text/javascript">
+		function closeAndRefreshParentMonitoringWindow() {
+			refreshParentMonitoringWindow();
+			window.close();
+		}
+	</script>
 			
-			<lams:Page type="monitor" title="${page.title.monitoring.view.user.mark}">
-
-			<style media="screen,projection" type="text/css">
-				.field-name {
-					padding-bottom: 0px;
-				}
-			</style>
-			<script type="text/javascript">
-				function closeAndRefreshParentMonitoringWindow() {
-					refreshParentMonitoringWindow();
-					window.close();
-				}
-			</script>
+	<h1>
+		${title}
+	</h1>
 			
-			<c:if test="${isMarksReleased}">
- 				<div class="alert alert-success">
- 					<fmt:message key="label.marks.released" />
- 				</div>
- 			</c:if>
+	<c:if test="${isMarksReleased}">
+ 		<div class="alert alert-success">
+ 			<fmt:message key="label.marks.released" />
+ 		</div>
+ 	</c:if>
 
-			<p>
-				<strong><c:out value="${user.lastName}" />&nbsp;<c:out value="${user.firstName}" /></strong>&nbsp;
-				<fmt:message key="monitoring.user.post.topic" />
-			</p>
+	<p>
+		<strong><c:out value="${user.lastName}" />&nbsp;<c:out value="${user.firstName}" /></strong>&nbsp;
+		<fmt:message key="monitoring.user.post.topic" />
+	</p>
 			
-			<c:forEach items="${messages}" var="topic">
+	<c:forEach items="${messages}" var="topic">
+		<div class="lcard ${highlightClass} msg" >
+			<c:choose>
+				<c:when test="${topic.message.isMonitor}">
+		           	<c:set var="textClass" value="text-warning"/>
+		            <c:set var="bgClass" value="bg-warning"/>
+		            <c:set var="iconClass" value ="fa-mortar-board ${textClass}"/>
+		        </c:when>
+				<c:otherwise>
+		          	<c:set var="textClass" value=""/>
+		            <c:set var="bgClass" value=""/>
+		            <c:set var="iconClass" value ="fa-user ${textClass}"/>
+		        </c:otherwise>
+		    </c:choose>
 			
-			<div class="panel panel-default ${highlightClass} msg" >
+			<div class="card-header">
+				<span class="${textClass}">
+					<span class="font-size-init float-end"> 
+						<i class="fa fa-xs ${iconClass}"></i> 
+						<lams:Date value="${topic.message.updated}" />
+					</span>
+					<c:out value="${topic.message.subject}" />
+				</span>
+			</div>
 			
-				<c:choose>
-					<c:when test="${topic.message.isMonitor}">
-			            	<c:set var="textClass" value="text-info"/>
-			                <c:set var="bgClass" value="bg-info"/>
-			                <c:set var="iconClass" value ="fa-mortar-board ${textClass}"/>
-			            </c:when>
-					<c:otherwise>
-			            	<c:set var="textClass" value=""/>
-			                <c:set var="bgClass" value=""/>
-			                <c:set var="iconClass" value ="fa-user ${textClass}"/>
-			        </c:otherwise>
-			    </c:choose>
+			<div class="card-body ${bgClass} p-2">
+				<span><c:out value="${topic.message.body}" escapeXml="false" /></span>
 			
-				<div class="panel-heading">
-					<h4 class="panel-title">
-					<span class="${textClass}">
-						<span style="float: right"> <i class="fa fa-xs ${iconClass}"></i> 
-							<lams:Date value="${topic.message.updated}" />
-						</span>
-						<c:out value="${topic.message.subject}" />
+				<c:forEach var="file" items="${topic.message.attachments}">
+					<span class="badge text-bg-warning bg-opacity-50 me-1 mt-3" title="<fmt:message key='message.label.attachment'/>">
+						<fmt:message key='message.label.attachment'/>&nbsp;<c:out value="${file.fileName}" />
 					</span>
-					</h4>
+				
+					<c:set var="downloadURL">
+						<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
+					</c:set>
+					<a href="<c:out value='${downloadURL}' escapeXml='false'/>" class="btn btn-sm btn-light">
+						<fmt:message key="label.download" />
+						<i class="fa-solid fa-download ms-1"></i>
+					</a>
+				</c:forEach>
+				
+				<div class="row mt-2">
+			  		<div class="col-2">
+			  			<strong><fmt:message key="label.number.of.replies" /></strong>
+			  		</div>
+					<div class="col">
+						${topic.message.replyNumber}
+					</div>
 				</div>
-			
-				<div class="panel-body ${bgClass}" >
-			
-				<div class="pull-right">
-						<form:form action="editMark.do" id="markForm" modelAttribute="markForm" method="post">
+				
+				<div class="row">
+					<div class="col-2">
+						<strong><fmt:message key="lable.topic.title.mark" /></strong>
+					</div>
+					<div class="col d-flex flex-row align-items-center">
+						<c:choose>
+							<c:when test="${empty topic.message.report.mark}">
+								<fmt:message key="message.not.avaliable" />
+							</c:when>
+							<c:otherwise>
+								<fmt:formatNumber value="${topic.message.report.mark}"  maxFractionDigits="2"/>
+							</c:otherwise>
+						</c:choose>
+						
+
+				<span>
+					<form:form action="editMark.do" id="markForm" modelAttribute="markForm" method="post">
 						<form:hidden path="sessionMapID" value="${sessionMapID}"/>
 						<form:hidden path="topicID" value="${topic.message.uid}"/>
-						<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="btn btn-default btn-sm" />
-						</form:form>
-				</div>
-			
-					<div class="row">
-			  		<div class="col-sm-2"><strong><fmt:message key="label.number.of.replies" /></strong></div>
-					<div class="col-sm-3">${topic.message.replyNumber}</div>
-				</div>
-				<div class="row">
-					<div class="col-sm-2"><strong><fmt:message key="lable.topic.title.mark" /></strong></div>
-					<div class="col-sm-3">
-					<c:choose>
-					<c:when test="${empty topic.message.report.mark}">
-						<fmt:message key="message.not.avaliable" />
-					</c:when>
-					<c:otherwise>
-						<fmt:formatNumber value="${topic.message.report.mark}"  maxFractionDigits="2"/>
-					</c:otherwise>
-					</c:choose>
+						<button type="submit" class="btn btn-light btn-sm ms-2">
+							<i class="fa-solid fa-marker me-1"></i>
+							<fmt:message key="lable.update.mark"/>
+						</button>
+					</form:form>
+				</span>	
 					</div>
 				</div>
 				
 				<div class="row">
-					<div class="col-sm-2"><strong><fmt:message key="lable.topic.title.comment" /></strong></div>
-				  	<div class="col-sm-10">
+					<div class="col-2">
+						<strong><fmt:message key="lable.topic.title.comment" /></strong>
+					</div>
+				  	<div class="col">
 					<c:choose>
 					<c:when test="${empty topic.message.report.comment}">
 						<fmt:message key="message.not.avaliable" />
@@ -104,35 +119,14 @@
 					</c:choose>
 					</div>
 				</div>
-				
-				<hr class="msg-hr">
-				
-				<span><c:out value="${topic.message.body}" escapeXml="false" /></span>
-			
-				<c:forEach var="file" items="${topic.message.attachments}">
-					<c:set var="downloadURL">
-						<lams:WebAppURL />download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
-					</c:set>
-					<a href="<c:out value='${downloadURL}' escapeXml='false'/>"><i class="fa fa-paperclip" title="<fmt:message key='message.label.attachment'/>"></i></a>
-				</c:forEach>
-			
-				</div>
-			</div>			
-			
-			</c:forEach>
-			
-			<div style="padding:0 15px 25px;">
-				<a href="javascript:window.close();" class="btn btn-default btn-sm pull-right">
-					<fmt:message key="button.close"/>
-				</a>
 			</div>
-
-
-			<div id="footer">
-			</div>
-
-			</lams:Page>
-	</body>
-</lams:html>
-
-
+		</div>
+	</c:forEach>
+			
+	<div class="activity-bottom-buttons">
+		<button onclick="window.close();" class="btn btn-primary">
+			<i class="fa-regular fa-circle-xmark me-1"></i>
+			<fmt:message key="button.close"/>
+		</button>
+	</div>
+</lams:PageMonitor>