Index: lams_central/web/css/_chart_base.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r49efefa7e14ad58719df993f6c2a977e61c31ff5
--- lams_central/web/css/_chart_base.scss	(.../_chart_base.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/web/css/_chart_base.scss	(.../_chart_base.scss)	(revision 49efefa7e14ad58719df993f6c2a977e61c31ff5)
@@ -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.scss
===================================================================
diff -u -r6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f -r49efefa7e14ad58719df993f6c2a977e61c31ff5
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 6ca7c6f9b49fe23c7f11e22e40334749c6b7d13f)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 49efefa7e14ad58719df993f6c2a977e61c31ff5)
@@ -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 -r49efefa7e14ad58719df993f6c2a977e61c31ff5
--- lams_central/web/includes/javascript/chart.js	(.../chart.js)	(revision 732a4ae6cac3f936d7bee690671dc0a8c0200f8a)
+++ lams_central/web/includes/javascript/chart.js	(.../chart.js)	(revision 49efefa7e14ad58719df993f6c2a977e61c31ff5)
@@ -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_tool_assessment/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -rb199dcb5b2a1ebd73b6b381fb424be1a8cdbdb17 -r49efefa7e14ad58719df993f6c2a977e61c31ff5
--- lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision b199dcb5b2a1ebd73b6b381fb424be1a8cdbdb17)
+++ lams_tool_assessment/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision 49efefa7e14ad58719df993f6c2a977e61c31ff5)
@@ -71,7 +71,7 @@
 	            </a>
 
 				<c:if test="${showHeader}">
-		            <nav class="navbar navbar-expand-md">
+		            <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>
Index: lams_tool_assessment/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rb199dcb5b2a1ebd73b6b381fb424be1a8cdbdb17 -r49efefa7e14ad58719df993f6c2a977e61c31ff5
--- lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision b199dcb5b2a1ebd73b6b381fb424be1a8cdbdb17)
+++ lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 49efefa7e14ad58719df993f6c2a977e61c31ff5)
@@ -261,6 +261,10 @@
 	    max-width: 1600px;
 	}
 }
+
+.nav-pills .nav-link {
+	padding: 0.25rem !important;
+}
 </style>
 
 <script>
@@ -645,45 +649,45 @@
 	<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">
+		<nav id="TableOfContents" class="nav-pills">
 	 		<ul>
 				<c:if test="${not empty sessionDtos}">
-					<li>
-						<a href="#completion-charts-container">Overview</a>
+					<li class="nav-item">
+						<a href="#completion-charts-container" 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>
-									<a href="#student-choices"><fmt:message key="label.student.choices" /></a>
+								<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>
-									<a href="#groups-choices"><fmt:message key="label.groups.choices" /></a>
+								<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-summary-summary">Reports</a>
+						<a href="#header-summary-summary" class="nav-link">Reports</a>
 						
 						<ul>
-							<li>
-								<a href="#header-summary-summary">Report by group<!--<fmt:message key="label.monitoring.summary.summary" />--></a>
+							<li class="nav-item">
+								<a href="#header-summary-summary" class="nav-link">Report by group<!--<fmt:message key="label.monitoring.summary.summary" />--></a>
 							</li>
 
-							<li>
-								<a href="#header-report-by-question"><fmt:message key="label.monitoring.summary.report.by.question" /></a>
+							<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>
-										<a href="#header-report-by-question">
+									<li class="nav-item">
+										<a href="#header-report-by-question" class="nav-link">
 											<div class="d-flex">
 												<span>Q${i.index+1})</span>
 												<div>
@@ -695,27 +699,27 @@
 								</c:forEach>
 							</li>
 							
-							<li>
-								<a href="#header-statistics"><fmt:message key="monitoring.tab.statistics" /></a>
+							<li class="nav-item">
+								<a href="#header-statistics" class="nav-link"><fmt:message key="monitoring.tab.statistics" /></a>
 							</li>
 						</ul>
 					</li>
 				</c:if>
 				
 				<li>
-					<a href="#header-settings">Settings</a>
+					<a href="#header-settings" class="nav-link">Settings</a>
 					<ul>
 						<!--  <li>
 							<a href="#accordionAdvanced"><fmt:message key="monitor.summary.th.advancedSettings" /></a>
 						</li>-->
-						<li>
-							<a href="#time-limit-panel-placeholder">Timing limits</a>
+						<li class="nav-item">
+							<a href="#time-limit-panel-placeholder" class="nav-link">Timing limits</a>
 						</li>
-						<li>
-							<a href="#accordionRestrictUsageDiv"><fmt:message key="monitor.summary.date.restriction" /></a>
+						<li class="nav-item">
+							<a href="#accordionRestrictUsageDiv" class="nav-link"><fmt:message key="monitor.summary.date.restriction" /></a>
 						</li>
-						<li>
-							<a href="#heading-tool-output"><fmt:message key="label.tool.output" /></a>
+						<li class="nav-item">
+							<a href="#heading-tool-output" class="nav-link"><fmt:message key="label.tool.output" /></a>
 						</li>
 					</ul>
 				</li>
@@ -724,7 +728,7 @@
 	</div>
 </div>
 
-<div class="bd-content ps-lg-2">
+<div class="bd-content ps-lg-2" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true">
 
 
 
@@ -872,7 +876,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>