Index: lams_central/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -r3d1c6963589452c441b1670c2eecf3eb85a128a5 -re5d709b66bb35b86733282fb7f0afdc8450432e7
--- lams_central/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
+++ lams_central/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision e5d709b66bb35b86733282fb7f0afdc8450432e7)
@@ -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>
@@ -56,9 +57,11 @@
 	        <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}"/>";
+					TOOL_CONTENT_ID = <c:out value="${param.toolContentID}" />;
+				var	MONITORING_STATISTIC_URL = "<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>";
 	        </script>
+	        
+	        <jsp:doBody/>
         </c:if>
     </lams:head>
 
Index: lams_tool_notebook/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -r5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610 -re5d709b66bb35b86733282fb7f0afdc8450432e7
--- lams_tool_notebook/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610)
+++ lams_tool_notebook/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision e5d709b66bb35b86733282fb7f0afdc8450432e7)
@@ -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>
@@ -56,8 +57,8 @@
 	        <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}"/>";
+					TOOL_CONTENT_ID = <c:out value="${param.toolContentID}" />;
+				var	MONITORING_STATISTIC_URL = "<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>";
 	        </script>
         </c:if>
     </lams:head>
Fisheye: Tag e5d709b66bb35b86733282fb7f0afdc8450432e7 refers to a dead (removed) revision in file `lams_tool_notebook/web/includes/javascript/monitoring.js'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_notebook/web/pages/monitoring/editActivity.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -re5d709b66bb35b86733282fb7f0afdc8450432e7
--- lams_tool_notebook/web/pages/monitoring/editActivity.jsp	(.../editActivity.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_notebook/web/pages/monitoring/editActivity.jsp	(.../editActivity.jsp)	(revision e5d709b66bb35b86733282fb7f0afdc8450432e7)
@@ -1,40 +1,77 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="dto" value="${notebookDTO}" />
 
-<c:if test="${dto.contentInUse}">
-	<lams:Alert type="warn" id="no-edit" close="false">
-		<fmt:message key="message.alertContentEdit" />
-	</lams:Alert>
-</c:if>
+<c:set var="adTitle"><fmt:message key="button.editActivity" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+	<c:if test="${dto.contentInUse}">
+		<lams:Alert5 type="warn" id="no-edit">
+			<fmt:message key="message.alertContentEdit" />
+		</lams:Alert5>
+	</c:if>
+	
+	<form id='define-later-form' method='post' action='authoring/definelater.do' target='definelater'>
+		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+		<input type="hidden" name="toolContentID" value="${dto.toolContentId}" />
+		<input type="hidden" name="contentFolderID" value="${contentFolderID}" />
+	</form>
+			
+	<button type="button" onclick="javascript:launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen float-end m-3">
+		<fmt:message key="button.editActivity" />
+	</button>
 
-
-<table class="table table-condensed">
-	<tr>
-		<td class="field-name" width="10%" valign="top">
-			<fmt:message key="label.authoring.basic.title" />
-		</td>
-		<td>
-			<c:out value="${dto.title}" escapeXml="true" />
-		</td>
-	</tr>
-
-	<tr>
-		<td class="field-name" width="10%" valign="top" NOWRAP>
-			<fmt:message key="label.authoring.basic.instructions" />
-		</td>
-		<td>
-			<c:out value="${dto.instructions}" escapeXml="false" />
-		</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="${dto.toolContentId}" />
-	<input type="hidden" name="contentFolderID" value="${contentFolderID}" />
-</form>
-		
-<a href="#nogo" onclick="javascript:launchDefineLaterPopup()" class="btn btn-default pull-right">
-	<fmt:message key="button.editActivity" />
-</a>
-
+	<table class="table table-striped table-condensed mb-0">
+		<tr>
+			<td class="field-name">
+				<fmt:message key="label.authoring.basic.title" />
+			</td>
+			
+			<td>
+				<c:out value="${dto.title}" escapeXml="true" />
+			</td>
+		</tr>
+	
+		<tr>
+			<td class="field-name">
+				<fmt:message key="label.authoring.basic.instructions" />
+			</td>
+			
+			<td>
+				<c:out value="${dto.instructions}" escapeXml="false" />
+			</td>
+		</tr>
+	
+			<tr>
+				<td>
+					<fmt:message key="advanced.lockOnFinished" />
+				</td>
+				
+				<td>
+					<c:choose>
+						<c:when test="${dto.lockOnFinish}">
+							<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="advanced.allowRichEditor" />
+				</td>
+				
+				<td>
+					<c:choose>
+						<c:when test="${dto.allowRichEditor}">
+							<fmt:message key="label.on" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="label.off" />
+						</c:otherwise>
+					</c:choose>	
+				</td>
+			</tr>
+	</table>
+</lams:AdvancedAccordian>
Index: lams_tool_notebook/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r9c34fd660838f37a7a22bfee4c6573848f895c9e -re5d709b66bb35b86733282fb7f0afdc8450432e7
--- lams_tool_notebook/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 9c34fd660838f37a7a22bfee4c6573848f895c9e)
+++ lams_tool_notebook/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision e5d709b66bb35b86733282fb7f0afdc8450432e7)
@@ -1,58 +1,15 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.notebook.util.NotebookConstants"%>
-<lams:html>
-	<lams:head>
-		<c:set scope="request" var="lams"><lams:LAMSURL/></c:set>
-		<c:set scope="request" var="tool"><lams:WebAppURL/></c:set>
-		<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
-		
-		<lams:css/>
-		
-		<lams:JSImport src="includes/javascript/common.js" />
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<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/free.jquery.jqgrid.min.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jinplace-1.0.1.js"></script>
-		
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
-		
-		<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>
-		
-		<lams:JSImport src="includes/javascript/portrait5.js" />
-		
-		<script type="text/javascript" src="${tool}includes/javascript/monitoring.js"></script>
-	</lams:head>
 
-	<body class="stripes">
-		<script type="text/javascript">
-		var statisticsURL = "<c:url value='/monitoring/getStatistics.do' />?toolContentID="+${notebookDTO.toolContentId}+"&reqID=";
-		</script>
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+	helpToolSignature="<%= NotebookConstants.TOOL_SIGNATURE %>"
+	initialTabId=""
+	tab1Label="button.summary"
+	tab2Label="button.editActivity"
+	tab3Label="button.statistics"
+	tab1Jsp="summary.jsp"
+	tab2Jsp="editActivity.jsp"
+	tab3Jsp="statistics.jsp"/>
 
-		<c:set var="title"><fmt:message key="activity.title" /></c:set>
-		<lams:Page title="${title}" type="navbar">
-
-			<lams:Tabs title="${title}" control="true" helpToolSignature="<%= NotebookConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
-				<lams:Tab id="1" key="button.summary" />
-				<lams:Tab id="2" key="button.editActivity" />
-				<lams:Tab id="3" key="button.statistics" />
-			</lams:Tabs>
-			<lams:TabBodyArea>
-				<lams:TabBodys>
-					<lams:TabBody id="1" page="summary.jsp" />
-					<lams:TabBody id="2" page="editActivity.jsp" />
-					<lams:TabBody id="3" page="statistics.jsp" />
-				</lams:TabBodys>
-			</lams:TabBodyArea>
-			
-			<div id="footer"></div>
-
-		</lams:Page>
-		<div class="footer"></div>					
-	</body>
-</lams:html>
\ No newline at end of file
Index: lams_tool_notebook/web/pages/monitoring/print.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -re5d709b66bb35b86733282fb7f0afdc8450432e7
--- lams_tool_notebook/web/pages/monitoring/print.jsp	(.../print.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_notebook/web/pages/monitoring/print.jsp	(.../print.jsp)	(revision e5d709b66bb35b86733282fb7f0afdc8450432e7)
@@ -2,78 +2,90 @@
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.notebook.util.NotebookConstants"%>
 <c:set var="escapeHTML" value="${printDTO.allowRichEditor ? 'false' : 'true'}"/>
-<lams:html>
-	<lams:head>
-		<lams:css/>
-		
-		<style>
-			body {
-				padding: 10px;
-			}
-			
-			/* Print only the aread below the print button */
-			@media print {
-			  body * {
-			    visibility: hidden;
-			  }
-			  #section-to-print, #section-to-print * {
-			    visibility: visible;
-			  }
-			  #section-to-print {
-			    position: absolute;
-			    left: 0;
-			    top: 0;
-			  }
-			}
-		</style>
-		
-		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
-	</lams:head>
 
-	<body>
-		<button class="btn btn-primary pull-right" onClick="javascript:window.print()">
-			<i class="fa fa-print"></i> <span class="d-none d-sm-block"><fmt:message key="monitor.summary.print"/></span>
+<c:set var="title"><<fmt:message key="monitor.summary.print"/></c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<style>
+		/* Print only the aread below the print button */
+		@media print {
+		  body * {
+		    visibility: hidden;
+		  }
+		  #section-to-print, #section-to-print * {
+		    visibility: visible;
+		  }
+		  #section-to-print {
+		    position: absolute;
+		    left: 0;
+		    top: 0;
+		  }
+		}
+	</style>
+
+	<div class="main-container">
+		<button class="btn btn-primary float-end" onClick="window.print()" type="button">
+			<i class="fa fa-print me-1"></i> 
+			<span class="d-none d-sm-block float-end">
+				<fmt:message key="monitor.summary.print"/>
+			</span>
 		</button>
 		
 		<div id="section-to-print">
-			<h3><c:out value="${printDTO.title}" /></h3>
-			<c:out value="${printDTO.instructions}" escapeXml="false"/>		
-			<hr>
+			<h1>
+				<c:out value="${printDTO.title}" />
+			</h1>
 			
+			<div class="instructions">
+				<c:out value="${printDTO.instructions}" escapeXml="false"/>		
+			</div>
+			
 			<c:forEach items="${printDTO.usersBySession}" var="sessionEntry">
-
 				<c:if test="${printDTO.groupedActivity}">
-				<h3><c:out value="${sessionEntry.key}" /></h3>
+					<h3>
+						<c:out value="${sessionEntry.key}" />
+					</h3>
 				</c:if>
 				
 				<c:forEach items="${sessionEntry.value}" var="printUserDTO">
-				<c:if test="${not empty printUserDTO.entry}">
-				<h4 style="margin-bottom: 1px"><c:out value="${printUserDTO.lastName}" />&nbsp;<c:out value="${printUserDTO.firstName}" /></h4>
-				<small><c:out value="${printUserDTO.email}" /></small></br>
-					<span class="loffset10"><small><lams:Date value="${printUserDTO.entryModifiedDate}"/></small></span> 
-					
-					<div class="panel-body" style="margin-left: 1em;">
-						<c:choose> 
-							<c:when test="${printDTO.allowRichEditor}">
-								<c:out value="${printUserDTO.entry}"  escapeXml='false' />
-							</c:when>
-							<c:otherwise>
-								<lams:out  value="${printUserDTO.entry}" escapeHtml='false' />
-							</c:otherwise>
-						</c:choose>	
-					</div>
-					<c:if test="${not empty printUserDTO.teacherComment}">
-						<div style="padding-left: 2em;">
-						<h4 class="voffset20"><fmt:message key="label.comment" /></h4>
-						<p class="panel-body"><lams:out value="${printUserDTO.teacherComment}"/> </p>
+					<c:if test="${not empty printUserDTO.entry}">
+						<h4 style="margin-bottom: 1px">
+							<c:out value="${printUserDTO.lastName}" />&nbsp;<c:out value="${printUserDTO.firstName}" />
+						</h4>
+						
+						<small><c:out value="${printUserDTO.email}" /></small>
+						</br>
+						
+						<span class="ms-2">
+							<small>
+								<lams:Date value="${printUserDTO.entryModifiedDate}"/>
+							</small>
+						</span> 
+						
+						<div class="card-body" style="margin-left: 1em;">
+							<c:choose> 
+								<c:when test="${printDTO.allowRichEditor}">
+									<c:out value="${printUserDTO.entry}"  escapeXml='false' />
+								</c:when>
+								<c:otherwise>
+									<lams:out  value="${printUserDTO.entry}" escapeHtml='false' />
+								</c:otherwise>
+							</c:choose>	
 						</div>
-					</c:if>
-					<hr>
-				  </c:if>	
+						
+						<c:if test="${not empty printUserDTO.teacherComment}">
+							<div style="padding-left: 2em;">
+								<h4 class="mt-3">
+									<fmt:message key="label.comment" />
+								</h4>
+								<p class="card-body">
+									<lams:out value="${printUserDTO.teacherComment}"/> 
+								</p>
+							</div>
+						</c:if>
+						<hr>
+					</c:if>	
 				</c:forEach>
-			   	
 			</c:forEach>	
 		</div>
-	</body>
-</lams:html>
+	</div>
+</lams:PageMonitor>
Index: lams_tool_notebook/web/pages/monitoring/statisticpart.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -re5d709b66bb35b86733282fb7f0afdc8450432e7
--- lams_tool_notebook/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_notebook/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision e5d709b66bb35b86733282fb7f0afdc8450432e7)
@@ -2,9 +2,9 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${empty statisticList}">
-	<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="statistic" items="${statisticList}">
Index: lams_tool_notebook/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rbe33897898483fec39439cf31c304bdb80c198f9 -re5d709b66bb35b86733282fb7f0afdc8450432e7
--- lams_tool_notebook/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision be33897898483fec39439cf31c304bdb80c198f9)
+++ lams_tool_notebook/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision e5d709b66bb35b86733282fb7f0afdc8450432e7)
@@ -1,6 +1,4 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set scope="request" var="lams"><lams:LAMSURL/></c:set>
-<c:set scope="request" var="tool"><lams:WebAppURL/></c:set>
 
 <link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet"/>
 <link type="text/css" href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet">
@@ -25,10 +23,19 @@
 	.comment-area {
 		margin: 1.2rem
 	}
-
 </style>
 
+<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
+<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/free.jquery.jqgrid.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jinplace-1.0.1.js"></script>
+<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>
+<lams:JSImport src="includes/javascript/portrait5.js" />
 <script type="text/javascript">
+	var MONITORING_STATISTIC_URL = "<c:url value='/monitoring/getStatistics.do' />?toolContentID=" + ${notebookDTO.toolContentId} + "&reqID=";
+
 	//pass settings to monitorToolSummaryAdvanced.js
 	var submissionDeadlineSettings = {
 		lams: '${lams}',
@@ -42,6 +49,7 @@
 	};
 
 	$(document).ready(function(){
+		doStatistic();
 		
 		<c:forEach var="sessionEntry" items="${notebookDTO.sessions}">
 			<c:set var="sessionId" value ="${sessionEntry.key}"/>
@@ -76,12 +84,12 @@
 			   	colModel:[
 			   		{name:'id',index:'id', width:10, hidden: true, search: false},
 			   		{name:'userUid',index:'userUid', width:0, hidden: true, search: false},
- 			   		{name:'userName',index:'userName', width:200, formatter:userNameFormatter},
+ 			   		{name:'userName',index:'userName', width:200, labelAlign:'left', formatter:userNameFormatter},
  			   		{name:'lastEdited',index:'lastEdited', hidden: true, width:0, search: false},		
 			   		{name:'lastEditedTimeago',index:'lastEditedTimeago', hidden: true, width:0,  search: false},		
-			   		{name:'lastEditedTimeagoOutput',index:'lastEditedTimeagoOutput', width:120, search: false},		
+			   		{name:'lastEditedTimeagoOutput',index:'lastEditedTimeagoOutput', width:120, labelAlign:'left', search: false},		
  			   		{name:'entry',index:'entry', hidden: true, width:0, search: false},	
-			   		{name:'commentsort',index:'commentsort', width:40, search: false },
+			   		{name:'commentsort',index:'commentsort', width:40, labelAlign:'left', search: false },
 			   		{name:'comment',index:'comment', hidden: true, width:0, search: false},
  			   		{name:'userId',index:'userId', width:0, hidden: true, search: false},
 			   		{name:'portraitId',index:'portraitId', width:0, hidden: true, search: false}
@@ -109,15 +117,16 @@
  	                var rowIds = $("#group${sessionId}").getDataIDs();
  	                $.each(rowIds, function (index, rowId) {
  	                	var comment = jQuery("#group${sessionId}").getCell(rowId, 'comment');
- 	                	if ( comment && comment.length > 0 ){
-							jQuery("#group${sessionId}").setCell(rowId, 'commentsort','<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.yes" /></spring:escapeBody>');
-						} else {
-							jQuery("#group${sessionId}").setCell(rowId, 'commentsort','<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.no" /></spring:escapeBody>');
-						}
+ 	                	let isCommentAvailableLabel =  (comment && comment.length > 0) ?
+ 	                			'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.yes" /></spring:escapeBody>' :
+ 	                			'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.no" /></spring:escapeBody>';
+ 	                	isCommentAvailableLabel = "<span class='badge text-bg-warning'>" + isCommentAvailableLabel + "</span>";
+						$("#group${sessionId}").setCell(rowId, 'commentsort', isCommentAvailableLabel);
+						
  	                	var lastEdited = jQuery("#group${sessionId}").getCell(rowId, 'lastEdited');
  	                	var lastEditedTimeagoFormat = jQuery("#group${sessionId}").getCell(rowId, 'lastEditedTimeago');
  	                	if ( lastEditedTimeagoFormat && lastEditedTimeagoFormat.length > 0) {
- 	                		jQuery("#group${sessionId}").setCell(rowId, 'lastEditedTimeagoOutput', 
+ 	                		$("#group${sessionId}").setCell(rowId, 'lastEditedTimeagoOutput', 
  	                				'<time class="timeago" title="'+lastEdited+'" datetime="'+lastEditedTimeagoFormat+'"></time>'); 
  	                	}
  	                	var entry = jQuery("#group${sessionId}").getCell(rowId, 'entry');
@@ -141,19 +150,21 @@
 
  					//display entry itself
  					$('<div/>', {
- 						"class": ''<c:if test="${!notebookDTO.allowRichEditor}"> + 'user-entry'</c:if>,
+ 						"class": 'm-3 mb-1 ${!notebookDTO.allowRichEditor ? "user-entry" : ""}',
  					    html: entry
  					}).appendTo(subgrid);
- 					subgrid.append("<br>");
+ 					 					
+ 					//teacher's comment
+ 					let teacherCommentWrapper = $('<div/>', {
+ 						"class": 'd-flex border-top m-3 mt-1',
+ 					}).appendTo(subgrid);
  					
- 					subgrid.append('<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all ui-state-default ui-th-column ui-th-ltr" style="text-align:left; margin-bottom: 4px;padding: 3px;"><spring:escapeBody javaScriptEscape="true"><fmt:message key="label.comment" /></spring:escapeBody></div>');
- 					//ui-widget-content
- 					//display teacher's comment
+ 					teacherCommentWrapper.append('<div class="fs-6 mt-2 fw-semibold"><spring:escapeBody javaScriptEscape="true"><fmt:message key="label.comment" /></spring:escapeBody></div>');
  					$('<div/>', {
- 						"class": "user-entry editable${sessionId}_" + rowId + "_t comment-area",
+ 						"class": "user-entry editable${sessionId}_" + rowId + "_t comment-area p-2 my-0 flex-grow-1",
  						"data-type": "textarea",
  						"data-checkbox-label": " <spring:escapeBody javaScriptEscape="true"><fmt:message key='label.notify.learner' /></spring:escapeBody> "
- 					}).text(comment).appendTo(subgrid); 
+ 					}).text(comment).appendTo(teacherCommentWrapper); 
   					
  					$(".editable${sessionId}_" + rowId + "_t").jinplace({
  					    url: "<c:url value='/monitoring/saveTeacherComment.do?userUid='/>" + userUid + "&<csrf:token/>",
@@ -165,7 +176,6 @@
  				}
 			}).jqGrid('filterToolbar',{searchOnEnter: false});
 		</c:forEach>
-		 
 		
         //jqgrid autowidth (http://stackoverflow.com/a/1610197)
         $(window).bind('resize', function() {
@@ -190,65 +200,70 @@
     		return definePortraitPopover(rowObject.portraitId, rowObject.userId,  rowObject.userName);
 	    }
 	});
-
 </script>
 <script type="text/javascript" src="${lams}/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
+	
+<c:if test="${empty notebookDTO.sessions}">
+	<lams:Alert5 type="info" id="no-session-summary">
+		<fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert5>
+</c:if>
 
-<div class="panel">
-	<button class="btn btn-default pull-right"
-			onClick="javascript:window.open('${tool}monitoring/showPrintDialog.do?toolContentID=${param.toolContentID}', 'PrintNotebook',width=800,height=600,scrollbars)">
-		<i class="fa fa-print"></i> <span class="d-none d-sm-block"><fmt:message key="monitor.summary.print"/></span>
-	</button>
+<button class="btn btn-secondary float-end" type="button"
+		onClick="window.open('${tool}monitoring/showPrintDialog.do?toolContentID=${param.toolContentID}', 'PrintNotebook',width=800,height=600,scrollbars)">
+	<i class="fa fa-print me-1"></i> 
+	<span class="d-none d-sm-block float-end">
+		<fmt:message key="monitor.summary.print"/>
+	</span>
+</button>
 	
-	<h4>
-	    <c:out value="${notebookDTO.title}" escapeXml="true"/>
-	</h4>
-	<div class="instructions voffset5">
-	    <c:out value="${notebookDTO.instructions}" escapeXml="false"/>
-	</div>
+<h1>
+    <c:out value="${notebookDTO.title}" escapeXml="true"/>
+</h1>
 	
-	<c:if test="${empty notebookDTO.sessions}">
-		<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="${notebookDTO.instructions}" escapeXml="false"/>
 </div>
 	 
-	<c:if test="${isGroupedActivity}">
-		<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
-	</c:if>
+<c:if test="${isGroupedActivity}">
+	<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
+</c:if>
 
-	<c:forEach var="session" items="${notebookDTO.sessions}" varStatus="status">
-
-		<c:if test="${isGroupedActivity}">	
-		    <div class="panel panel-default" >
-		        <div class="panel-heading" id="heading${session.key}">
-		        	<span class="panel-title collapsable-icon-left">
-		        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${session.key}" 
-							aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${session.key}" >
-					<fmt:message key="message.session.name" />:	<c:out value="${session.value}" /></a>
-					</span>
-		        </div>
+<c:forEach var="session" items="${notebookDTO.sessions}" varStatus="status">
+	<c:if test="${isGroupedActivity}">	
+	    <div class="lcard" >
+	        <div class="card-header" id="heading${session.key}">
+	        	<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${session.key}" 
+							aria-expanded="${status.first}" aria-controls="collapse${session.key}" >
+						<fmt:message key="message.session.name" />:	<c:out value="${session.value}" />
+					</button>
+				</span>
+	        </div>
 	        
-	       		<div id="collapse${session.key}" class="panel-collapse collapse ${status.first ? 'in' : ''}"
-	        	 role="tabpanel" aria-labelledby="heading${session.key}">
-		</c:if>
+	   		<div id="collapse${session.key}" class="card-collapse collapse ${status.first ? 'show' : ''}">
+	</c:if>
 	 
-	 	<table id="group${session.key}" class="scroll" cellpadding="0" cellspacing="0" ></table>
-		<div id="group${session.key}pager"></div>
+	<table id="group${session.key}" class="scroll" cellpadding="0" cellspacing="0" ></table>
+	<div id="group${session.key}pager"></div>
  
-		<c:if test="${isGroupedActivity}">
-			</div> <!-- end collapse area  -->
-			</div> <!-- end collapse panel  -->
-		</c:if>
-	${ !isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
-	</c:forEach>
-	
 	<c:if test="${isGroupedActivity}">
-		</div> <!--  end panel group -->
-	</c:if> 
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+</c:forEach>
+	
+<c:if test="${isGroupedActivity}">
+	</div> <!--  end panel group -->
+</c:if> 
 
-<%@include file="advanceOptions.jsp"%>
+<h2 class="card-subheader fs-4 mt-4" id="header-statistics">
+	<fmt:message key="button.statistics" />
+</h2>
+<%@ include file="statistics.jsp"%>
 
+<h2 class="card-subheader fs-4" id="header-settings">
+	Settings
+</h2>
+<%@ include file="editActivity.jsp"%>
 <lams:RestrictedUsageAccordian submissionDeadline="${submissionDeadline}"/>