Index: lams_central/.gitignore
===================================================================
diff -u -rdf411d8446000acfdb5937f46a7a7e8ef4b656e0 -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_central/.gitignore	(.../.gitignore)	(revision df411d8446000acfdb5937f46a7a7e8ef4b656e0)
+++ lams_central/.gitignore	(.../.gitignore)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -5,6 +5,7 @@
 /web/css/components.css
 /web/css/defaultHTML*.css
 /web/css/jquery.jqGrid.confidence-level-formattter.css
+/web/css/components-monitoring.css
 /web/css/purple*.css
 /web/css/outcome.css
 /web/css/qb-question.css
Index: lams_central/src/java/org/lamsfoundation/lams/web/tag/HelpTag.java
===================================================================
diff -u -rf95c86fefb27fbad60e46af80e1a487bae53561a -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_central/src/java/org/lamsfoundation/lams/web/tag/HelpTag.java	(.../HelpTag.java)	(revision f95c86fefb27fbad60e46af80e1a487bae53561a)
+++ lams_central/src/java/org/lamsfoundation/lams/web/tag/HelpTag.java	(.../HelpTag.java)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -104,15 +104,15 @@
 			return Tag.SKIP_BODY;
 		    }
 
-		    writer.println("<span onclick=\"window.open('" + fullURL + "', 'help')\" id=\"help-tag\">"
-			    + "<i class=\"fa fa-question-circle\" ></i> " + helpWord + "</span>");
+		    writer.println("<button type=\"button\" class=\"nav-link no-decoration\" onclick=\"window.open('" + fullURL + "', 'help')\" id=\"help-tag\">"
+			    + "<i class=\"fa fa-question-circle\" ></i> " + helpWord + "</button>");
 
 		} else if (page != null) {
 
 		    String fullURL = HelpUtil.constructPageURL(page, languageCode);
 
-		    writer.println("<span onclick=\"window.open('" + fullURL + "', 'help')\" id=\"help-tag\">"
-			    + "<i class=\"fa fa-question-circle\" ></i> " + helpWord + "</span>");
+		    writer.println("<button type=\"button\" class=\"nav-link no-decoration\" onclick=\"window.open('" + fullURL + "', 'help')\" id=\"help-tag\">"
+			    + "<i class=\"fa fa-question-circle\" ></i> " + helpWord + "</button>");
 
 		} else {
 		    HelpTag.log.error("HelpTag unable to write out due to unspecified values.");
Index: lams_central/web/css/components-monitoring.scss
===================================================================
diff -u
--- lams_central/web/css/components-monitoring.scss	(revision 0)
+++ lams_central/web/css/components-monitoring.scss	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -0,0 +1,65 @@
+@import "../../../lams_central/web/css/components.scss";
+@import "_lams_variables.scss";
+
+body.component nav.navbar {
+	padding-top: 0;
+    /*box-shadow: 0px 1px 0px var(--bs-gray-300);*/
+    
+	#tabs {
+		border-bottom: none;
+		padding-left: 0.5rem;
+		
+		@include media-breakpoint-down(md) {
+			flex-direction: column
+		}
+
+		.nav-link {
+			border-radius: 30px;
+			/*padding: 0.9rem 8rem;*/
+			padding-bottom: 0.9rem;
+			padding-top: 0.9rem;
+			margin-right: 0.5rem;
+			border: none;
+
+			&.active {
+				color: #fff !important;
+				background-color: RGBA(5, 112, 213, var(--bs-bg-opacity, 1)) !important;
+				box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); //shadow
+			}
+			&:focus-visible {
+	    		box-shadow: 0 0 0 0.2rem rgba(99, 99, 99, 0.5);
+	    	}
+			&:not(.active) {
+				background: #e9ecef;
+			}
+		}
+	}
+	
+	.nav-link {
+		background-color: var(--bs-gray-200);
+	    border-radius: 1.25rem;
+	    box-shadow: 0px 3px 6px var(--bs-gray-100);
+	    
+	    &:hover {
+		    background-color: var(--bs-gray-300) !important;
+		}
+		&:focus {
+    		box-shadow: 0 0 0 0.2rem rgba(99, 99, 99, 0.5);
+    	}
+	}
+	
+	#page-actions {
+		.btn {
+			margin-left: 0.75rem;
+		}
+		
+		#help-tag {
+			padding: 1rem 1.3rem;
+		}
+		
+		#btn-close {
+			padding: 1.275rem 1.3rem;
+			opacity: 1;
+		}
+	}
+}
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r0993bbd812a25ddb84feec64dd0e4847ce32d164 -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 0993bbd812a25ddb84feec64dd0e4847ce32d164)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -1483,19 +1483,18 @@
                     activityGroup.css('cursor', 'pointer');
 
                     // double click on activity shape to open Monitoring for this activity
-                    if (isGate) {
-                        dblTap(activityGroup, function(){
-                            openGateSelectively(LAMS_URL + activity.url);
-                        });
-                    } else if (isGrouping) {
-                        dblTap(activityGroup, function(){
-                            document.location.href = LAMS_URL + activity.url;
-                        });
-                    } else {
-                        dblTap(activityGroup, function(){
-                            openPopUp(LAMS_URL + activity.url, "MonitorActivity", popupHeight, popupWidth, true, true);
-                        });
-                    }
+					if (isGate) {
+						dblTap(activityGroup, function(){  
+							openGateSelectively(LAMS_URL + activity.url);
+						});
+					} else {
+						dblTap(activityGroup, function(){
+							window.open(LAMS_URL + activity.url + "&lessonID=" + lessonId, "_self");
+							//document.location.href = LAMS_URL + activity.url;
+							
+							//openPopUp(LAMS_URL + activity.url, "MonitorActivity", popupHeight, popupWidth, true, true);
+						});
+					}
                 }
             });
 
Index: lams_tool_nb/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_tool_nb/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_nb/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -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 class="">
+      			<jsp:doBody />
+      		</div>
+      	</div>
 	</div>
 </div>
 		
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/PageMonitor.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/PageMonitor.tag	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -0,0 +1,158 @@
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+
+<%@ attribute name="initialTabId" required="false" rtexprvalue="true"%>
+<%@ 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="lessonID" 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>
+        <script src="${lams}includes/javascript/bootstrap5.tabcontroller.js" type="text/javascript"></script> 
+        <lams:JSImport src="includes/javascript/common.js" />
+        <script>
+			var initialTabId = "${initialTabId}";
+			     
+			function init(){
+				if (initialTabId) {
+					selectTab(initialTabId);
+				} else {
+					selectTab(1); //select the default tab;
+				}
+			}  
+			        
+			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="component" onLoad='init()'>
+    	<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>
+
+	            <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 bg-light rounded-5 d-flex w-100 py-2 me-2" id="tabs" role="tablist">
+							    <button class="nav-link flex-fill 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"><fmt:message key="${tab1Label}" /></button>
+							    <button class="nav-link flex-fill"		  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"><fmt:message key="${tab2Label}" /></button>
+							    <button class="nav-link flex-fill" 		  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"><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>
+
+	            <main class="p-3" id="component-main-content" tabindex="-1">
+					<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>
+					
+	                <jsp:doBody/>
+	            </main>
+	        </div>
+	    </div>
+    </body>
+</lams:html>
Index: lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rfaa119a6a494bab9b265ba46a597ee3442bb56cd -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
+++ lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -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_nb/web/monitoring/m_EditActivity.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_tool_nb/web/monitoring/m_EditActivity.jsp	(.../m_EditActivity.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_nb/web/monitoring/m_EditActivity.jsp	(.../m_EditActivity.jsp)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -1,43 +1,39 @@
 <%@ include file="/includes/taglibs.jsp"%>
 
-<div class="voffset10">
-
 <c:if test="${monitoringDTO.totalLearners >= 1}">
-	<lams:Alert type="warn" id="no-edit" close="false">
+	<lams:Alert5 type="warn" id="no-edit">
 		<fmt:message key="message.alertContentEdit" />
-	</lams:Alert>
+	</lams:Alert5>
 </c:if>
 
-<table class="table table-condensed">
-	<tr>
-		<td class="field-name">
+<div class="ltable table-condensed no-header">
+	<div class="row">
+		<div class="col field-name">
 			<fmt:message key="basic.title" />
-		</td>
-		<td>
+		</div>
+		<div class="col">
 			<c:out value="${monitoringDTO.title}" escapeXml="true" />
-		</td>
-	</tr>
-	<tr>
-		<td class="field-name">
+		</div>
+	</div>
+	<div class="row">
+		<div class="col field-name">
 			<fmt:message key="basic.content" />
-		</td>
-		<td>
+		</div>
+		<div class="col">
 			<c:out value="${monitoringDTO.basicContent}" escapeXml="false" />
-		</td>
-	</tr>
-</table>
+		</div>
+	</div>
+</div>
 
-<p class="align-right">
+<div class="float-end">
 	<form id='define-later-form' method='post' action='../authoring/definelater.do' target='definelater'>
 		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 		<input type="hidden" name="toolContentID" value="${toolContentID}" />
 		<input type="hidden" name="contentFolderID" value="${contentFolderID}" />
 	</form>
-		
-	<a href="#nogo" onclick="javascript:launchDefineLaterPopup()" class="btn btn-default pull-right">
+	
+	<button type="button" onclick="launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen">
 		<fmt:message key="button.edit" />
-	</a>
-</p>
-
+	</button>
 </div>
 
Index: lams_tool_nb/web/monitoring/m_Statistics.jsp
===================================================================
diff -u -r7b3ea39ddf6e10186cf9916562121c205bb0e5ad -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_tool_nb/web/monitoring/m_Statistics.jsp	(.../m_Statistics.jsp)	(revision 7b3ea39ddf6e10186cf9916562121c205bb0e5ad)
+++ lams_tool_nb/web/monitoring/m_Statistics.jsp	(.../m_Statistics.jsp)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -1,41 +1,57 @@
 <%@ include file="/includes/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-
-<div class="voffset10">
-
 	
  <c:if test="${isGroupedActivity}">
-	<table class="table table-striped table-condensed">
-		<tr><td colspan="${allowComments ? 3 : 2}"><fmt:message key="heading.totalLearnersInGroup" /></td></tr>
+	<div class="ltable table-striped">
+		<div>
+			<fmt:message key="heading.totalLearnersInGroup" />
+		</div>
 	
 		<c:forEach var="group" items="${monitoringDTO.groupStatsMap}">
-			<tr><td width="40%"><c:out value="${group.key}" /></td> 
-				<td><c:out value="${group.value}" /></td>
+			<div class="row align-items-center">
+				<div class="col">
+					<c:out value="${group.key}" />
+				</div>
+				<div class="col">
+					<c:out value="${group.value}" />
+				</div>
+				
 				<c:if test="${allowComments}">
-				<td width="20%">
-				<c:url value="/monitoring/viewComments.do" var="commentURL">
-					<c:param name="toolSessionID" value="${monitoringDTO.sessionIdMap[group.key]}" />
-				</c:url>
-				<a href="javascript:launchPopup('${commentURL}')" class="btn btn-default btn-sm pull-right"><fmt:message key="label.view.comments" /></a></td>
+					<div class="col">
+						<c:url value="/monitoring/viewComments.do" var="commentURL">
+							<c:param name="toolSessionID" value="${monitoringDTO.sessionIdMap[group.key]}" />
+						</c:url>
+						<button type="button" onclick="launchPopup('${commentURL}')" class="btn btn-secondary btn-sm float-end">
+							<fmt:message key="label.view.comments" />
+						</button>
+					</div>
 				</c:if>
-			</tr>
+			</div>
 		</c:forEach>
-	</table>
+	</div>
 </c:if>
 
-<table class="table table-striped table-condensed">
-	<tr>
-		<td width="40%"><fmt:message key="heading.totalLearners" /></td>
-		<td><c:out value="${monitoringDTO.totalLearners}" /></td>
+<div class="ltable table-striped no-header">
+	<div class="row align-items-center">
+		<div class="col">
+			<fmt:message key="heading.totalLearners" />
+		</div>
+		<div class="col">
+			<c:out value="${monitoringDTO.totalLearners}" />
+		</div>
+		
 		<c:if test="${allowComments && !isGroupedActivity}">
 			<c:forEach var="group" items="${monitoringDTO.sessionIdMap}">
-			<c:url value="/monitoring/viewComments.do" var="commentURL">
+				<c:url value="/monitoring/viewComments.do" var="commentURL">
 					<c:param name="toolSessionID" value="${group.value}" />
-			</c:url>
-			<td width="20%"><a href="javascript:launchPopup('${commentURL}')" cssClass="btn btn-default btn-sm pull-right"><fmt:message key="label.view.comments" /></a></td>
+				</c:url>
+				<div class="col">
+					<button type="button" onclick="launchPopup('${commentURL}')" class="btn btn-secondary btn-sm float-end">
+						<i class="fa-regular fa-comments me-1"></i>
+						<fmt:message key="label.view.comments" />
+					</button>
+				</div>
 			</c:forEach>
 		</c:if>
-	</tr>
-</table>
- 
+	</div>
 </div>
Index: lams_tool_nb/web/monitoring/m_Summary.jsp
===================================================================
diff -u -r52a6369ce66a2ea70d38bfa2e627dfcde6354b10 -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_tool_nb/web/monitoring/m_Summary.jsp	(.../m_Summary.jsp)	(revision 52a6369ce66a2ea70d38bfa2e627dfcde6354b10)
+++ lams_tool_nb/web/monitoring/m_Summary.jsp	(.../m_Summary.jsp)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -8,32 +8,35 @@
 	});
 </script>
 
-<div class="panel">
-	<h4><c:out value="${monitoringDTO.title}" escapeXml="true" /></h4>
-	<div class="voffset5"><c:out value="${monitoringDTO.basicContent}" escapeXml="false" /></div>
+<div class="instructions">
+	<div class="fs-4">
+		<c:out value="${monitoringDTO.title}" escapeXml="true" />
+	</div>
+	<div class="mt-2">
+		<c:out value="${monitoringDTO.basicContent}" escapeXml="false" />
+	</div>
 </div>
 
-<H4><fmt:message key="titleHeading.statistics"/></H2>
 <%@ include file="m_Statistics.jsp"%>
 	
 <c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
-<lams:AdvancedAccordian title="${adTitle}">      	
-	<table class="table table-striped table-condensed">
-		<tr>
-			<td>
-				<fmt:message key="advanced.allow.comments" />
-			</td>
-			
-			<td>
-				<c:choose>
-					<c:when test="${allowComments}">
-						<fmt:message key="label.on" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.off" />
-					</c:otherwise>
-				</c:choose>	
-			</td>
-		</tr>
-	</table>
-</lams:AdvancedAccordian>
\ No newline at end of file
+<lams:AdvancedAccordian title="${adTitle}">
+<div class="ltable table-striped table-sm no-header mb-0">
+	<div class="row">
+		<div class="col">
+			<fmt:message key="advanced.allow.comments" />
+		</div>
+		
+		<div class="col text-end">
+			<c:choose>
+				<c:when test="${allowComments}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</div>
+	</div>
+</div>
+</lams:AdvancedAccordian>
Index: lams_tool_nb/web/monitoring/monitoring.jsp
===================================================================
diff -u -rfe19797ec82718905555353176ed719bec11043e -rd2e5991474ab481bbdb37b36fc26546d21d7c52d
--- lams_tool_nb/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision fe19797ec82718905555353176ed719bec11043e)
+++ lams_tool_nb/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision d2e5991474ab481bbdb37b36fc26546d21d7c52d)
@@ -1,57 +1,15 @@
 <!DOCTYPE html>
 <%@ include file="/includes/taglibs.jsp"%>
-
-<%@ page import="java.util.HashMap"%>
 <%@ page import="org.lamsfoundation.lams.tool.noticeboard.NoticeboardConstants"%>
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
 
-<lams:html>
-<lams:head>
-	<lams:css/>
-	<title><fmt:message key="activity.title" /></title>
-	
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.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>
-	<lams:JSImport src="includes/javascript/common.js" />
-	<script type="text/javascript">
-		 function init(){
-            var tag = "${monitoringDTO.currentTab}";
-	    	if(tag != null && tag.value != "") {
-	    		selectTab(tag.value);
-	    	}
-            else {
-                selectTab(1); //select the default tab;
-            }
-        }   
-	</script>
-</lams:head>
-
-<body class="stripes" onLoad='init()'>
-	<c:set var="title"><fmt:message key="activity.title" /></c:set>
-	<lams:Page title="${title}" type="navbar">
-
-	 	<lams:Tabs title="${title}" helpToolSignature="<%= NoticeboardConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
-			<lams:Tab id="1" key="titleHeading.summary" />
-			<lams:Tab id="2" key="titleHeading.editActivity" />
-			<lams:Tab id="3" key="titleHeading.statistics" />
-		</lams:Tabs>
-			
-		<lams:TabBodyArea>
-			<lams:TabBodys>
-				<lams:TabBody id="1" page="m_Summary.jsp" /> 
-				<lams:TabBody id="2" page="m_EditActivity.jsp" />
-				<lams:TabBody id="3" page="m_Statistics.jsp" />
-			</lams:TabBodys>
-		</lams:TabBodyArea>
-				
-		<div id="footer" />
-			
-	</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+	helpToolSignature="<%= NoticeboardConstants.TOOL_SIGNATURE %>"
+	initialTabId="${monitoringDTO.currentTab}"
+	tab1Label="titleHeading.summary"
+	tab2Label="titleHeading.editActivity"
+	tab3Label="titleHeading.statistics"
+	tab1Jsp="m_Summary.jsp"
+	tab2Jsp="m_EditActivity.jsp"
+	tab3Jsp="m_Statistics.jsp">
+</lams:PageMonitor>
\ No newline at end of file