Index: lams_central/web/css/_chart_base.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_central/web/css/_chart_base.scss	(.../_chart_base.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/css/_chart_base.scss	(.../_chart_base.scss)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -43,7 +43,3 @@
 	width: 95%;
 	height: 500px;
 }
-
-.markChartDiv svg{
-    background: $canvas-dot-background;
-}
\ No newline at end of file
Index: lams_central/web/css/components-monitoring.scss
===================================================================
diff -u -red79701ac2614bab1d3aa3984588a238ec32a976 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_central/web/css/components-monitoring.scss	(.../components-monitoring.scss)	(revision ed79701ac2614bab1d3aa3984588a238ec32a976)
+++ lams_central/web/css/components-monitoring.scss	(.../components-monitoring.scss)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -1,6 +1,10 @@
 @import "../../../lams_central/web/css/components.scss";
 @import "_lams_variables.scss";
 
+.component-page-wrapper {
+	overflow: unset;
+}
+
 body.component nav.navbar {
 	padding-top: 0;
     /*box-shadow: 0px 1px 0px var(--bs-gray-300);*/
Index: lams_central/web/css/components.scss
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -121,7 +121,7 @@
 			padding: 1rem;
 			@extend .text-bg-secondary;
 			
-			*:not(.badge, .badge *, .btn, .btn *, button, button *) {
+			*:not(.badge, .badge *, .btn, .btn *, button, button *, .asterisk *) {
 				@extend .text-bg-secondary;
 			}
 	
Index: lams_central/web/includes/javascript/chart.js
===================================================================
diff -u -r732a4ae6cac3f936d7bee690671dc0a8c0200f8a -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_central/web/includes/javascript/chart.js	(.../chart.js)	(revision 732a4ae6cac3f936d7bee690671dc0a8c0200f8a)
+++ lams_central/web/includes/javascript/chart.js	(.../chart.js)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -260,8 +260,8 @@
 
 	var svg = d3.select(chartDiv[0])
 		.append("svg")
-		.attr('width', svgWidth)
-		.attr('height', svgHeight)
+		.attr('width', '100%')//this way it will take the full width of the parent
+		.attr('height', '100%')//this way it will take the full height of the parent
 	    .append("g")
 	    .attr("transform", "translate(0," + svgHeightOffset + ")");
 	
Index: lams_monitoring/web/timeLimit.jsp
===================================================================
diff -u -rbe926f6ed52a22831f928df2066024ff7df6be11 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_monitoring/web/timeLimit.jsp	(.../timeLimit.jsp)	(revision be926f6ed52a22831f928df2066024ff7df6be11)
+++ lams_monitoring/web/timeLimit.jsp	(.../timeLimit.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -540,7 +540,7 @@
 <div class="accordion mt-2" id="time-limit-panel"> 
 <div class="accordion-item">
 	<h2 class="accordion-header" id="time-limit-header">
-       	<button class="accordion-button text-bg-secondary ${param.isTbl ? '' : 'collapsed'}" type="button" data-bs-toggle="collapse" data-bs-target="#time-limit-collapse" aria-expanded="${param.isTbl}" aria-controls="time-limit-collapse">
+       	<button class="accordion-button text-bg-light ${param.isTbl ? '' : 'collapsed'}" type="button" data-bs-toggle="collapse" data-bs-target="#time-limit-collapse" aria-expanded="${param.isTbl}" aria-controls="time-limit-collapse">
           	<fmt:message key="label.monitoring.time.limit"/>
    		</button>
     </h2>
Index: lams_tool_assessment/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u -rb59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision b59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389)
+++ lams_tool_assessment/web/WEB-INF/tags/AdvancedAccordian.tag	(.../AdvancedAccordian.tag)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -35,19 +35,16 @@
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<div class="accordion" id="accordionAdvanced"> 
+<div class="accordion pt-2" id="edit-activity-accordion"> 
     <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">
+        	<button class="accordion-button collapsed text-bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
 	          	${title}
     		</button>
         </h2>
 
 		<div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced">
-      		<div>
-      			<jsp:doBody />
-      		</div>
+      		<jsp:doBody />
       	</div>
 	</div>
 </div>
-		
\ No newline at end of file
Index: lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -r3d1c6963589452c441b1670c2eecf3eb85a128a5 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
+++ lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -2,6 +2,7 @@
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
+<%@ tag  import="java.util.UUID"%>
 
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="tab1Label" required="false" rtexprvalue="true"%>
@@ -70,8 +71,8 @@
 	            </a>
 
 				<c:if test="${showHeader}">
-		            <nav class="navbar navbar-expand-md">
-		  				<div class="container-fluid">
+		            <nav class="navbar navbar-expand-md d-none">
+		  				<div class="container-main">
 							<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>
@@ -118,19 +119,48 @@
 							        </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>
+										 <a href="${lams}home/monitorLesson.do?lessonID=${param.lessonID}&reqID=<%= UUID.randomUUID().toString() %>" 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 id="component-main-content" class="px-1 py-3" tabindex="-1">
+				<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+					<div class="container-main">
+						<ol class="breadcrumb">
+						    <li class="breadcrumb-item">
+						    	<a href="${lams}home/monitorLesson.do?lessonID=${param.lessonID}">
+						    		<span id="lesson-name">
+						    			
+						    		</span>
+						    	</a>
+						    </li>
+						   	
+							<li class="breadcrumb-item active dropdown" aria-current="page">
+								<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
+									<fmt:message key="label.author.title" />
+								</a>
+								
+							    <ul class="dropdown-menu" style="">
+							      <li><a class="dropdown-item" href="#">Forum</a></li>
+							      <li><a class="dropdown-item disabled lesson-name" href="#"><fmt:message key="label.author.title" /></a></li>
+							      <li><a class="dropdown-item" href="#">Q&A</a></li>
+							      <li><a class="dropdown-item" href="#">Another activity</a></li>
+							      <li><hr class="dropdown-divider"></li>
+							      <li><a class="dropdown-item" href="#">Support activity</a></li>
+							    </ul>
+							</li>
+						</ol>
+					</div>
+				</nav>
+
+	            <main id="component-main-content" class="p-3" tabindex="-1">
 	            	<c:choose>
 	            		<c:when test="${showHeader}">
-							<div class="container-main tab-content m-3" id="tabs-content">
+							<div class="container-main tab-content" 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>
Index: lams_tool_assessment/web/WEB-INF/tags/RestrictedUsageAccordian.tag
===================================================================
diff -u -r5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(.../RestrictedUsageAccordian.tag)	(revision 5c2c403d7a8a0e1b7894ee7c49f3e0031a5a3610)
+++ lams_tool_assessment/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(.../RestrictedUsageAccordian.tag)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -43,7 +43,7 @@
 <div class="accordion ${cssClass}" 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">
+        	<button class="accordion-button collapsed text-bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#restrictUsageDiv" aria-expanded="false" aria-controls="restrictUsageDiv">
 	          	<fmt:message key="monitor.summary.date.restriction" />
     		</button>
         </h2>
Index: lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_tool_assessment/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -1,10 +1,50 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
-<lams:AdvancedAccordian title="${adTitle}">     
+<c:set var="adTitle"><fmt:message key="monitoring.tab.edit.activity" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+	<div class="p-2 pt-3">
+		<lams:Alert5 id="editWarning" type="warning">
+		    <fmt:message key="message.monitoring.edit.activity.warning" />
+		</lams:Alert5>
+		
+		<div class="clearfix">
+			<form id='define-later-form' method='post' action='../authoring/definelater.do' target='definelater'>
+				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+				<input type="hidden" name="toolContentID" value="${sessionMap.toolContentID}" />
+				<input type="hidden" name="contentFolderID" value="${sessionMap.contentFolderID}" />
+			</form>
+		
+			<button type="button" onclick="launchDefineLaterPopup()" class="btn btn-secondary btn-icon-pen float-end">
+				<fmt:message key="monitoring.tab.edit.activity" />
+			</button>
+		</div>
+	</div>
+	
+	<div class="card-subheader ms-3">
+		Activity settings
+	</div>
+
 	<div class="ltable table-striped table-sm no-header mb-0">
 		<div class="row">
 			<div class="col">
+				<fmt:message key="label.authoring.basic.title" />:
+			</div>
+			<div class="col">
+				<c:out value="${assessment.title}" escapeXml="true" />
+			</div>
+		</div>
+	
+		<div class="row">
+			<div class="col">
+				<fmt:message key="label.authoring.basic.instruction" />:
+			</div>
+			<div class="col">
+				<c:out value="${assessment.instructions}" escapeXml="false" />
+			</div>
+		</div>
+	
+		<div class="row">
+			<div class="col">
 				<fmt:message key="label.use.select.leader.tool.output" />
 			</div>
 			
Index: lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers.jsp
===================================================================
diff -u -r3d1c6963589452c441b1670c2eecf3eb85a128a5 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers.jsp	(.../discloseAnswers.jsp)	(revision 3d1c6963589452c441b1670c2eecf3eb85a128a5)
+++ lams_tool_assessment/web/pages/monitoring/parts/discloseAnswers.jsp	(.../discloseAnswers.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -6,7 +6,9 @@
 		// load an embedded results list
 		// show details button needs to be set in the page which included this page
 		resultsPane.load("<c:url value='/learning/showResultsForTeacher.do'/>?embedded=true&sessionMapID=${sessionMapID}&showQuestionDetailsButton="
-						  + showQuestionDetailsButton + "&toolContentID=" + toolContentId, function(){
+						  + showQuestionDetailsButton + "&toolContentID=" + toolContentId, 
+						  function(){
+
 			var assessmentQuestionsPane = $(this).closest('.assessment-questions-pane').length 
 					? $(this).closest('.assessment-questions-pane') : $('.assessment-questions-pane-ira'),
 				// are any correct/groups buttons clickable?
@@ -23,7 +25,6 @@
 					discloseAllGroupsEnabled = true;
 				}
 				
-				
 				button.click(function(event) {	
 					showConfirm(isCorrectButton ? "<spring:escapeBody javaScriptEscape='true'><fmt:message key='message.disclose.correct.answers' /></spring:escapeBody>"
 								: "<spring:escapeBody javaScriptEscape='true'><fmt:message key='message.disclose.groups.answers' /></spring:escapeBody>", function(){
@@ -91,6 +92,10 @@
 			} else {
 				disabledAndCheckButton(allGroupsButton);
 			}
+
+			//refresh scrollspy instance after loading Results pane
+		    const scrollElem = document.querySelector(`.bd-content[data-bs-spy="scroll"]`);
+		    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh();
 		});
 	}
 
Index: lams_tool_assessment/web/pages/monitoring/parts/toolOutput.jsp
===================================================================
diff -u -r55b53b0f50a1fb7b81b6759406cbe11c00417615 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/pages/monitoring/parts/toolOutput.jsp	(.../toolOutput.jsp)	(revision 55b53b0f50a1fb7b81b6759406cbe11c00417615)
+++ lams_tool_assessment/web/pages/monitoring/parts/toolOutput.jsp	(.../toolOutput.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -1,9 +1,9 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="lcard">
-    <div class="card-header" id="heading-tool-output">
+<div class="card" id="heading-tool-output">
+    <div class="card-header text-bg-light">
       	<span class="card-title collapsable-icon-left">
-	    	<button type="button" class="btn btn-secondary-darker no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#tool-output" aria-expanded="false" aria-controls="tool-output">
+	    	<button type="button" class="btn btn-light no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#tool-output" aria-expanded="false" aria-controls="tool-output">
           		<fmt:message key="label.tool.output" />
           	</button>
    		</span>
Index: lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -362,7 +362,7 @@
 	</c:forEach>
 
 	<div class="activity-bottom-buttons">
-		<button type="button" onclick="refreshSummaryPage();" class="btn btn-primary">
+		<button type="button" onclick="refreshSummaryPage()" class="btn btn-primary">
 			<i class="fa-regular fa-circle-xmark me-1"></i>
 			<fmt:message key="label.close" />
 		</button>
Index: lams_tool_assessment/web/pages/monitoring/statisticpart.jsp
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_tool_assessment/web/pages/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -311,10 +311,9 @@
 		</c:if>
 	</c:otherwise>
 	</c:choose>		
-	
-	<div id="accordion-qb-stats" class="panel-group voffset20" role="tablist" aria-multiselectable="true"> 
+ 
 	    <div class="lcard">
-	        <div class="card-header" id="heading-qb-stats">
+	        <div class="card-header" id="chapter-item-analysis">
 	        	<span class="card-title collapsable-icon-left">
 					<button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" data-bs-target="#qb-stats" 
 							aria-expanded="true" aria-controls="qb-stats">
@@ -394,9 +393,6 @@
 				</table>
 			</div>
 		</div>
-	</div>
 
 </c:otherwise>
 </c:choose>
-
-<%@ include file="parts/toolOutput.jsp"%>
Index: lams_tool_assessment/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rbe33897898483fec39439cf31c304bdb80c198f9 -r8e0b838435f2f4ad7668626d93162f857e07b1cf
--- lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision be33897898483fec39439cf31c304bdb80c198f9)
+++ lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 8e0b838435f2f4ad7668626d93162f857e07b1cf)
@@ -65,6 +65,206 @@
 	.complete-item-gif {
 	    display: none;
 	}
+
+
+@media (min-width: 992px) {
+    .bd-layout {
+        display:grid;
+        grid-template-areas: "sidebar main";
+        grid-template-columns: 1fr 5fr;
+        gap: 1.5rem
+    }
+}
+
+.bd-main {
+    grid-area: main
+}
+
+@media (max-width: 991.98px) {
+    .bd-main {
+        max-width:760px;
+        margin-inline:auto}
+}
+
+@media (min-width: 768px) {
+    .bd-main {
+        display:grid;
+        grid-template-areas: "intro" "toc" "content";
+        grid-template-rows: auto auto 1fr;
+        gap: inherit
+    }
+}
+
+@media (min-width: 992px) {
+    .bd-main {
+        grid-template-areas:"intro   toc" "content toc";
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 4fr 1fr
+    }
+}
+	
+.bd-intro {
+    grid-area: intro
+}
+
+.bd-toc {
+    grid-area: toc
+}
+
+.bd-content {
+    grid-area: content;
+    min-width: 1px
+}
+
+.bd-content>:target {
+    padding-top: 5rem;
+    margin-top: -5rem
+}
+
+.bd-content>h2:not(:first-child) {
+    margin-top: 3rem
+}
+
+.bd-content>h3 {
+    margin-top: 2rem
+}
+
+.bd-content>ul li,.bd-content>ol li {
+    margin-bottom: .25rem
+}
+
+.bd-content>ul li>p~ul,.bd-content>ol li>p~ul {
+    margin-top: -.5rem;
+    margin-bottom: 1rem
+}
+
+.bd-content>.table,.bd-content>.table-responsive .table {
+    margin-bottom: 1.5rem;
+    font-size: .875rem
+}
+
+@media (max-width: 991.98px) {
+    .bd-content>.table.table-bordered,.bd-content>.table-responsive .table.table-bordered {
+        border:0
+    }
+}
+
+.bd-content>.table thead,.bd-content>.table-responsive .table thead {
+    border-bottom: 2px solid currentcolor
+}
+
+.bd-content>.table tbody:not(:first-child),.bd-content>.table-responsive .table tbody:not(:first-child) {
+    border-top: 2px solid currentcolor
+}
+
+.bd-content>.table th:first-child,.bd-content>.table td:first-child,.bd-content>.table-responsive .table th:first-child,.bd-content>.table-responsive .table td:first-child {
+    padding-left: 0
+}
+
+.bd-content>.table th:not(:last-child),.bd-content>.table td:not(:last-child),.bd-content>.table-responsive .table th:not(:last-child),.bd-content>.table-responsive .table td:not(:last-child) {
+    padding-right: 1.5rem
+}
+
+.bd-content>.table th,.bd-content>.table td:first-child>code,.bd-content>.table-responsive .table th,.bd-content>.table-responsive .table td:first-child>code {
+    white-space: nowrap
+}
+
+@media (min-width: 992px) {
+    .bd-toc {
+        position:-webkit-sticky;
+        position: sticky;
+        top: 5rem;
+        right: 0;
+        z-index: 2;
+        height: calc(100vh - 7rem);
+        overflow-y: auto
+    }
+}
+
+.bd-toc nav {
+    font-size: .875rem
+}
+
+.bd-toc nav ul {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none
+}
+
+.bd-toc nav ul ul {
+    padding-left: 1rem;
+    margin-top: .25rem
+}
+
+.bd-toc nav li {
+    margin-bottom: .25rem
+}
+
+.bd-toc nav a {
+    color: inherit
+}
+
+.bd-toc nav a:not(:hover) {
+    text-decoration: none
+}
+
+.bd-toc nav a code {
+    font: inherit
+}
+
+.bd-toc-toggle {
+    display: flex;
+    align-items: center
+}
+
+@media (max-width: 575.98px) {
+    .bd-toc-toggle {
+        justify-content:space-between;
+        width: 100%
+    }
+}
+
+@media (max-width: 767.98px) {
+    .bd-toc-toggle {
+        border:1px solid #dee2e6;
+        border-radius: .4rem
+    }
+
+    .bd-toc-toggle:hover,.bd-toc-toggle:focus,.bd-toc-toggle:active,.bd-toc-toggle[aria-expanded="true"] {
+        color: var(--bd-violet);
+        background-color: #fff;
+        border-color: var(--bd-violet)
+    }
+
+    .bd-toc-toggle:focus,.bd-toc-toggle[aria-expanded="true"] {
+        box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), 0.25)
+    }
+}
+
+@media (max-width: 767.98px) {
+    .bd-toc-collapse nav {
+        padding:1.25rem;
+        background-color: var(--bs-gray-100);
+        border: 1px solid #dee2e6;
+        border-radius: .25rem
+    }
+}
+
+@media (min-width: 768px) {
+    .bd-toc-collapse {
+        display:block !important
+    }
+}
+
+@media (min-width: 1400px) {
+	 #container-main, .container-main {
+	    max-width: 1600px;
+	}
+}
+
+.nav-pills .nav-link {
+	padding: 0.25rem !important;
+}
 </style>
 
 <script>
@@ -149,8 +349,28 @@
 			showQuestionDetailsButton = true;
 
 	$(document).ready(function(){
+	    $.ajax({
+	        url: LAMS_URL + 'learning/learner/getLearnerProgress.do',
+	        data: {
+	            'toolSessionID': null,
+	            'lessonID': ${param.lessonID},
+	            'userID': null
+	        },
+	        cache: false,
+	        dataType: 'json',
+	        success: function (result) {
+	            $('.component-page-wrapper .component-page-content #lesson-name').text(result.lessonName).removeClass();
+	        }
+	    });
+		
 		loadResultsPane($('#results'), false);
 		initializePortraitPopover("<lams:LAMSURL />");
+		doStatistic();
+		setTimeout(function(){  
+			//refresh scrollspy instance after loading statistics pane
+		    const scrollElem = document.querySelector(`.bd-content[data-bs-spy="scroll"]`);
+		    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh();
+		}, 800);
 
 		<c:forEach var="sessionDto" items="${sessionDtos}">
 			buildJqgridLearnerTable(${sessionDto.sessionId});
@@ -423,7 +643,103 @@
 	}
 </script>
 
-<div class="instructions">
+<main class="bd-main order-1">
+
+<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-5 mb-lg-5 text-muted">
+	<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+		On this page
+		<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
+	</button>
+	
+	<strong class="d-none d-md-block h6 my-2">On this page</strong>
+	<hr class="d-none d-md-block my-2">
+	<div class="collapse bd-toc-collapse" id="tocContents">
+		<nav id="TableOfContents" class="nav-pills">
+	 		<ul>
+				<c:if test="${not empty sessionDtos}">
+					<li class="nav-item">
+						<a href="#instructions" class="nav-link">Overview</a>
+						
+						<ul>
+							<!-- <li>
+								<a href="#completion-charts-container">Completion charts</a>
+							</li> -->
+							
+							<c:if test="${displayStudentChoices and not empty questions}">
+								<li class="nav-item">
+									<a href="#student-choices" class="nav-link"><fmt:message key="label.student.choices" /></a>
+								</li>
+							</c:if>
+							
+							<c:if test="${sessionMap.isGroupedActivity and sessionMap.assessment.useSelectLeaderToolOuput and not empty questionDtos}">
+								<li class="nav-item">
+									<a href="#groups-choices" class="nav-link"><fmt:message key="label.groups.choices" /></a>
+								</li>
+							</c:if>
+						</ul>
+					</li>
+					
+					<li>
+						<a href="#header-reports" class="nav-link">Reports</a>
+						
+						<ul>
+							<li class="nav-item">
+								<a href="#header-report-by-group" class="nav-link">Report by group<!--<fmt:message key="label.monitoring.summary.summary" />--></a>
+							</li>
+
+							<li class="nav-item">
+								<a href="#header-report-by-question" class="nav-link"><fmt:message key="label.monitoring.summary.report.by.question" /></a>
+								
+								<!--<c:forEach var="question" items="${questions}" varStatus="i">
+									<li class="nav-item">
+										<a href="#header-report-by-question" class="nav-link">
+											<div class="d-flex">
+												<span>Q${i.index+1})</span>
+												<div>
+													<c:out value="${question.title}"  escapeXml="false" />
+												</div>
+											</div>
+										</a>
+									</li>
+								</c:forEach>-->
+							</li>
+							
+							<li class="nav-item">
+								<a href="#header-statistics" class="nav-link"><fmt:message key="monitoring.tab.statistics" /></a>
+							</li>
+							
+							<li class="nav-item">
+								<a href="#chapter-item-analysis" class="nav-link"><fmt:message key="label.qb.stats" /></a>
+							</li>
+						</ul>
+					</li>
+				</c:if>
+				
+				<li>
+					<a href="#header-settings" class="nav-link">Settings</a>
+					<ul>
+						<li class="nav-item">
+							<a href="#time-limit-panel-placeholder" class="nav-link">Timing limits</a>
+						</li>
+						<li class="nav-item">
+							<a href="#accordionRestrictUsageDiv" class="nav-link"><fmt:message key="monitor.summary.date.restriction" /></a>
+						</li>
+						<li class="nav-item">
+							<a href="#heading-tool-output" class="nav-link"><fmt:message key="label.tool.output" /></a>
+						</li>
+						<li class="nav-item">
+							<a href="#edit-activity-accordion" class="nav-link"><fmt:message key="monitoring.tab.edit.activity" /></a>
+						</li>
+					</ul>
+				</li>
+	 		</ul>
+		</nav>
+	</div>
+</div>
+
+<div class="bd-content ps-lg-2" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-smooth-scroll="true">
+
+<div class="instructions" id="instructions">
 	<div class="fs-4">
 		<c:out value="${assessment.title}" escapeXml="true"/>
 	</div>
@@ -456,14 +772,14 @@
 
 <c:if test="${not empty sessionDtos}">
 	<c:if test="${displayStudentChoices and not empty questions}">
-		<div class="card-subheader fs-4">
+		<div class="card-subheader fs-4" id="student-choices">
 			<fmt:message key="label.student.choices" />
 		</div>
 		<%@ include file="/pages/monitoring/parts/mcqStudentChoices.jsp" %>
 	</c:if>
 	
 	<c:if test="${sessionMap.isGroupedActivity and sessionMap.assessment.useSelectLeaderToolOuput and not empty questionDtos}">
-		<div class="card-subheader fs-4">
+		<div class="card-subheader fs-4" id="groups-choices">
 			<fmt:message key="label.groups.choices" />
 		</div>
 
@@ -535,7 +851,9 @@
 		</div>
 	</c:if>
 
-	<div class="mt-4">
+	<a id="header-reports" class="anchor-link" href="#header-reports" aria-label="Link to this section: header-reports"></a>
+
+	<div class="mt-4" id="header-report-by-group">
 		<lams:WaitingSpinner id="messageArea_Busy"></lams:WaitingSpinner>
 		<div class="clearfix">
 			<div class="badge text-bg-info float-end px-5 py-3 mt-2" id="messageArea"></div>
@@ -547,16 +865,15 @@
 		</button>
 	
 		<div class="card-subheader fs-4">
-			<fmt:message key="label.monitoring.summary.summary" />
+			Report by group <!--<fmt:message key="label.monitoring.summary.summary" />-->
 		</div>
 	
 		<div class="comments">
 			<fmt:message key="label.monitoring.summary.double.click" />
 		</div>
-	</div>
 
-	<div id="masterDetailArea" class="mt-3"></div>
-	<a onclick="" href="return false;" class="thickbox initially-hidden" id="userSummaryHref"></a>
+		<div id="masterDetailArea" class="mt-3"></div>
+		<a onclick="" href="return false;" class="thickbox initially-hidden" id="userSummaryHref"></a>
 
 	<c:forEach var="sessionDto" items="${sessionDtos}" varStatus="status">
 		<c:choose>
@@ -565,7 +882,7 @@
 					<div class="card-header" id="heading${sessionDto.sessionId}">
 			        	<span class="card-title collapsable-icon-left">
 			        		<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}" >
+									aria-expanded="${status.first}" aria-controls="collapse${sessionDto.sessionId}" >
 								<fmt:message key="monitoring.label.group" />:	<c:out value="${sessionDto.sessionName}" />
 							</button>
 						</span>
@@ -627,9 +944,10 @@
 			</div>
 		</div>
 	</c:if>
+	</div>
 </c:if>
 
-<div class="assessment-questions-pane mb-5">
+<div class="assessment-questions-pane mb-5" id="header-report-by-question">
 	<div class="card-subheader fs-4 mt-4 pb-0">
 		<fmt:message key="label.monitoring.summary.report.by.question" />
 	</div>
@@ -661,10 +979,26 @@
 	<div id="results" class="mt-3" data-tool-content-id="${assessment.contentId}"></div>
 </div>
 
-<%@ include file="parts/advanceoptions.jsp"%>
+<div>
+	<div class="card-subheader fs-4" id="header-statistics">
+		<fmt:message key="monitoring.tab.statistics" />
+	</div>
+	<%@ include file="statistic.jsp"%>
+</div>
 
+<div class="card-subheader fs-4" id="header-settings">
+	Settings
+</div>
+
 <div id="time-limit-panel-placeholder"></div>
 
 <lams:RestrictedUsageAccordian submissionDeadline="${submissionDeadline}"/>
 
+<%@ include file="parts/toolOutput.jsp"%>
+
+<%@ include file="parts/advanceoptions.jsp"%>
+
+</div>
+</main>
+
 <div id="change-leader-modals"></div>