Index: lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java
===================================================================
diff -u -reccd6838790a4369b6788e48fb5ae5851622fe35 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java	(.../TblMonitorController.java)	(revision eccd6838790a4369b6788e48fb5ae5851622fe35)
+++ lams_tool_scratchie/src/java/org/lamsfoundation/lams/tool/scratchie/web/controller/TblMonitorController.java	(.../TblMonitorController.java)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -128,8 +128,9 @@
 
 	model.addAttribute(AttributeNames.PARAM_TOOL_CONTENT_ID, toolContentId);
 	model.addAttribute("scratchie", scratchie);
+	model.addAttribute("isTbl", true);
 
-	return "pages/monitoring/studentChoices5";
+	return "pages/monitoring/studentChoices";
     }
 
     @RequestMapping("/traStudentChoicesTable")
@@ -220,8 +221,9 @@
 	long toolContentId = WebUtil.readLongParam(request, AttributeNames.PARAM_TOOL_CONTENT_ID);
 	Scratchie scratchie = scratchieService.getScratchieByContentId(toolContentId);
 	request.setAttribute("discussionSentimentEnabled", scratchie.isDiscussionSentimentEnabled());
+	request.setAttribute("isTbl", true);
 
-	return "pages/monitoring/parts/burningQuestions5";
+	return "pages/tblmonitoring/burningQuestions";
     }
 
     /**
@@ -231,6 +233,7 @@
     public String burningQuestionsTable(HttpServletRequest request) throws IOException, ServletException {
 	long toolContentId = WebUtil.readLongParam(request, AttributeNames.PARAM_TOOL_CONTENT_ID);
 	Scratchie scratchie = scratchieService.getScratchieByContentId(toolContentId);
+	request.setAttribute("isTbl", WebUtil.readBooleanParam(request, "isTbl"));
 
 	//find available burningQuestionDtos, if any
 	if (scratchie.isBurningQuestionsEnabled()) {
@@ -247,7 +250,7 @@
 	    request.setAttribute("discussionSentimentEnabled", scratchie.isDiscussionSentimentEnabled());
 	}
 
-	return "pages/monitoring/parts/burningQuestionsTable";
+	return "pages/tblmonitoring/burningQuestionsTable";
     }
 
     /**
Index: lams_tool_scratchie/web/WEB-INF/tags/PageMonitor.tag
===================================================================
diff -u -rb59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision b59a58136ac5d8b2c6fbf0752dc4fd3a6b5f0389)
+++ lams_tool_scratchie/web/WEB-INF/tags/PageMonitor.tag	(.../PageMonitor.tag)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -127,20 +127,43 @@
 		  			</nav>
 	  			</c:if>
 
-	            <main class="p-3" id="component-main-content" tabindex="-1">
-	            	<c:if test="${showHeader}">
-						<div class="tab-content m-3" id="tabs-content">
-							<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
-							<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
-							<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
-						</div>
-						
-						<input type="hidden" name="currentTab" id="currentTab" />
-					</c:if>
-					
-	                <jsp:doBody/>
+	            <main id="component-main-content" class="px-1 py-3" tabindex="-1">
+	            	<c:choose>
+	            		<c:when test="${showHeader}">
+							<div class="container-main tab-content m-3" id="tabs-content">
+								<div class="tab-pane fade show active"  id="tab-1-content" role="tabpanel" aria-labelledby="tab-1" tabindex="0"><jsp:include page="${tab1Jsp}"/></div>
+								<div class="tab-pane fade" 				id="tab-2-content" role="tabpanel" aria-labelledby="tab-2" tabindex="0"><jsp:include page="${tab2Jsp}"/></div>
+								<div class="tab-pane fade" 				id="tab-3-content" role="tabpanel" aria-labelledby="tab-3" tabindex="0"><jsp:include page="${tab3Jsp}"/></div>
+							</div>
+							
+							<input type="hidden" name="currentTab" id="currentTab" />
+	            		</c:when>
+	            		
+	            		<c:otherwise>
+			                <jsp:doBody/>
+	            		</c:otherwise>
+	            	</c:choose>
 	            </main>
 	        </div>
 	    </div>
+	    
+		<c:if test="${showHeader}">
+		    <div id="confirmationDialog" class="modal dialogContainer fade" tabindex="-1" role="dialog">
+		        <div class="modal-dialog  modal-dialog-centered">
+		            <div class="modal-content">
+		                <div class="modal-body">
+		                </div>
+		                <div class="modal-footer">
+		                    <button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">
+		                    	<fmt:message key='label.cancel'/>
+		                    </button>
+		                    <button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">
+		                    	<fmt:message key='label.confirm'/>
+		                    </button>
+		                </div>
+		            </div>
+		        </div>
+		    </div>
+		</c:if>
     </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_scratchie/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -1,96 +1,8 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.scratchie.ScratchieConstants"%>
 
-<c:set var="lams"><lams:LAMSURL /></c:set>
-
-<lams:html>
-	<lams:head>
-	
-	<lams:css/>
-	<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
-	<link type="text/css" href="${lams}css/thickbox.css" rel="stylesheet"  media="screen">
-	<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css" >
-	<link href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet" type="text/css">
-	<lams:css suffix="chart"/>
-		
-	<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.plugin.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.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/thickbox.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>
- 
- 	<!--  File Download -->
- 	<script type="text/javascript" src="${lams}includes/javascript/jquery.cookie.js"></script>
- 	<script type="text/javascript" src="${lams}includes/javascript/download.js"></script>
- 
- 	<!--  Marks Chart -->
- 	<script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
- 	<script type="text/javascript" src="${lams}includes/javascript/chart.js"></script>
-
- 	<lams:JSImport src="includes/javascript/portrait5.js" />
- 
-	 <script>
-			var initialTabId = "${initialTabId}";
-
-		   function init(){
-			 	if (initialTabId) {
-					selectTab(initialTabId);
-				} else {
-					selectTab(1);
-				}
-	        }     
-	        
-	        function doSelectTab(tabId) {
-		    	if ( tabId == 3 )
-		    		doStatistic();
-		    	selectTab(tabId);
-	        } 
-	        
-			function doStatistic(){
-				var url = '<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>';
-				$.ajaxSetup({ cache: true });
-				$("#statisticArea").load(
-					url,
-					{
-						toolContentID: <c:out value="${param.toolContentID}" />, 
-						reqID: (new Date()).getTime()
-					}
-				);
-				
-			}
-		</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}" control="true" helpToolSignature="<%= ScratchieConstants.TOOL_SIGNATURE %>" helpModule="monitoring" refreshOnClickAction="javascript:location.reload();">
- 			<lams:Tab id="1" key="monitoring.tab.summary" />
-			<lams:Tab id="2" key="monitoring.tab.edit.activity" />			
- 			<lams:Tab id="3" key="monitoring.tab.statistics" />
-		</lams:Tabs>
-		
-		<lams:TabBodyArea>
-		<lams:TabBodys>
- 			<lams:TabBody id="1" page="summary.jsp" />
-			<lams:TabBody id="2" page="editactivity.jsp" />			
- 			<lams:TabBody id="3" page="statistic.jsp" />
-		</lams:TabBodys>
-		</lams:TabBodyArea>
-		
-		<div id="footer" />
-	</lams:Page>
-	
-	</body>
-</lams:html>
\ No newline at end of file
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:PageMonitor title="${title}" 
+		helpToolSignature="<%= ScratchieConstants.TOOL_SIGNATURE %>"
+		initialTabId="${initialTabId}"/>
Fisheye: Tag e745a65b2a8cdd11176817c24cc93666040efccb refers to a dead (removed) revision in file `lams_tool_scratchie/web/pages/monitoring/parts/burningQuestions.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag e745a65b2a8cdd11176817c24cc93666040efccb refers to a dead (removed) revision in file `lams_tool_scratchie/web/pages/monitoring/parts/burningQuestions5.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag e745a65b2a8cdd11176817c24cc93666040efccb refers to a dead (removed) revision in file `lams_tool_scratchie/web/pages/monitoring/parts/burningQuestionsTable.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag e745a65b2a8cdd11176817c24cc93666040efccb refers to a dead (removed) revision in file `lams_tool_scratchie/web/pages/monitoring/parts/dateRestriction.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_scratchie/web/pages/monitoring/parts/itemSummary.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/monitoring/parts/itemSummary.jsp	(.../itemSummary.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_scratchie/web/pages/monitoring/parts/itemSummary.jsp	(.../itemSummary.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -4,41 +4,44 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="scratchie" value="${sessionMap.scratchie}"/>
 
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
+<c:set var="title">
+	<fmt:message key="label.monitoring.summary.report.for" >
+		<fmt:param>${fn:escapeXml(item.qbQuestion.name)}</fmt:param>
+	</fmt:message>
+</c:set>
+<lams:PageMonitor title="${title}" hideHeader="true">
+	<link href="<lams:WebAppURL/>includes/css/assessment.css" rel="stylesheet" type="text/css">
+	<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
+	<link href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet" type="text/css">
+	<style type="text/css">
+		/* remove jqGrid borders */
+		.ui-jqgrid {
+			border-left-style: none !important;
+			border-right-style: none !important;
+			border-bottom-style: none !important;
+		}
 		
-		<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
-		<link href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet" type="text/css">
-		<style type="text/css">
-			/* remove jqGrid borders */
-			.ui-jqgrid {
-				border-left-style: none !important;
-				border-right-style: none !important;
-				border-bottom-style: none !important;
-			}
-			.ui-jqgrid tr {
-				border-left-style: none !important;
-			}
-			.ui-jqgrid td {
-				border-style: none !important;
-			}
-			
-			/* remove jqGrid border radius */
-			.ui-jqgrid.ui-jqgrid-bootstrap {
-			    border-radius:0;
-			    -moz-border-radius:0;
-			    -webkit-border-radius:0;
-			    -khtml-border-radius:0;
-			}
-		</style>
+		.ui-jqgrid tr {
+			border-left-style: none !important;
+		}
 		
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
- 		<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
-  	    <script>
-	  	  	$(document).ready(function(){
+		.ui-jqgrid td {
+			border-style: none !important;
+		}
+		
+		/* remove jqGrid border radius */
+		.ui-jqgrid.ui-jqgrid-bootstrap {
+			border-radius: 0;
+			-moz-border-radius: 0;
+			-webkit-border-radius: 0;
+			-khtml-border-radius: 0;
+		}
+	</style>
+
+ 	<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
+  	<script>
+		$(document).ready(function(){
 	  			<c:forEach var="summary" items="${summaryList}" varStatus="status">
-		  			
 	  				jQuery("#session${summary.sessionId}").jqGrid({
 	  					datatype: "local",
 	  					autoencode:false,
@@ -70,7 +73,6 @@
 	  	   	     			</c:forEach>
 	  	   	   	   	    });
 	  		        </c:forEach>			
-	  				
 	  			</c:forEach>
 	  			
 	  	        //jqgrid autowidth
@@ -85,44 +87,35 @@
 	  	            });
 	  	        };
 	  	        setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
-	  	        
-	  		});  	
+	  	});  	
 
-    		function refreshSummaryPage()  {
-        		self.parent.tb_remove();
-    		}
-  		</script>
-	</lams:head>
-	<body class="stripes">
-	
-		<c:set var="title">
-			<fmt:message key="label.monitoring.summary.report.for" >
-				<fmt:param>${fn:escapeXml(item.qbQuestion.name)}</fmt:param>
-			</fmt:message>
-		</c:set>
-		<lams:Page type="learning" title="${title}">
+    	function refreshSummaryPage()  {
+        	self.parent.tb_remove();
+    	}
+  	</script>
+  		
+	<h1 class="fs-3">
+		${title}
+	</h1>
 		
-			<c:out value="${item.qbQuestion.description}" escapeXml="false"/>
-			<br>
+	<div class="instructions">
+		<c:out value="${item.qbQuestion.description}" escapeXml="false"/>
+	</div>
 			
-			<c:forEach var="summary" items="${summaryList}" varStatus="status">
-				<div class="panel panel-default" >
-		        	<div class="panel-heading">
-						<span class="panel-title">
-							<fmt:message key="label.monitoring.item.summary.group" />&nbsp;${summary.sessionName}
-						</span>
-					</div>
+	<c:forEach var="summary" items="${summaryList}" varStatus="status">
+		<div class="lcard" >
+	       	<div class="card-header">
+				<fmt:message key="label.monitoring.item.summary.group" />&nbsp;${summary.sessionName}
+			</div>
 				
-					<table id="session${summary.sessionId}" class="scroll"></table>
-				</div>
-			</c:forEach>	
+			<table id="session${summary.sessionId}" class="scroll"></table>
+		</div>
+	</c:forEach>	
 
-			<a href="#" onclick="refreshSummaryPage();" class="btn btn-default pull-right">
-				<fmt:message key="button.close" /> 
-			</a>
-	
-		<div id="footer"></div>
-
-		</lams:Page>	
-	</body>
-</lams:html>
+	<div class="activity-bottom-buttons">
+		<button type="button" onclick="refreshSummaryPage()" class="btn btn-primary ms-2">
+			<i class="fa fa-close"></i>
+			<fmt:message key="button.close" />
+		</button>
+	</div>
+</lams:PageMonitor>
Index: lams_tool_scratchie/web/pages/monitoring/parts/statisticpart.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/monitoring/parts/statisticpart.jsp	(.../statisticpart.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_scratchie/web/pages/monitoring/parts/statisticpart.jsp	(.../statisticpart.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -10,29 +10,32 @@
 	   	// must display charts after screen is visible or cannot calculate widths.
 		drawHistogram('chartDiv', 
 					'<c:url value="/monitoring/getMarkChartData.do?sessionMapID=${sessionMapID}"/>', 
-					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.marks"/></spring:escapeBody>', '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.number.groups.in.mark.range"/></spring:escapeBody>');
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.marks"/></spring:escapeBody>', 
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.number.groups.in.mark.range"/></spring:escapeBody>'
+		);
 	});		
 </script>
 
 <c:choose>
-
 <c:when test="${empty summaryList}">
 	<lams:Alert type="info" id="no-session-summary" close="false">
 		<fmt:message key="message.monitoring.summary.no.session" />
 	</lams:Alert>
 </c:when>
 	
 <c:otherwise>
-	
-	<p><fmt:message key="label.graph.help"/></p>
-	
-	<div class="panel panel-default" >
-      	<div class="panel-body">
+	<div class="lcard" >
+      	<div class="card-body">
+			<em class="p-2">
+				<fmt:message key="label.graph.help"/>
+			</em>
+			
             <div class="row">
-                <div class="col-xs-12">
+                <div class="col-12">
                     <div id="chartDiv" class="markChartDiv"></div>
                 </div>    
             </div>
+            
             <div class="row">
                 <div class="col-md-6" style="padding: 0px 20px 0px 20px;">
 					<table class="table table-striped table-hover table-condensed">
@@ -62,6 +65,7 @@
                         </tr>
                     </table>    
                 </div>
+                
                 <div class="col-md-6" style="padding: 0px 20px 0px 20px;">
 					<table class="table table-striped table-hover table-condensed">
                         <tr>
@@ -91,21 +95,22 @@
                     </table>
                 </div>
             </div>
+		</div>
+	</div>
 
-            <div id="accordion-qb-stats" class="panel-group voffset20" role="tablist" aria-multiselectable="true">             
-	<div class="panel panel-default" >
-        <div class="panel-heading collapsable-icon-left" id="heading-qb-stats">
-            <span class="panel-title">
-                <a class="" role="button" data-toggle="collapse" href="#qb-stats" aria-expanded="true" aria-controls="qb-stats">
+	<div class="lcard" >
+        <div class="card-header collapsable-icon-left" id="heading-qb-stats">
+            <span class="card-title">
+                <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">
                     <fmt:message key="label.qb.stats" />
-                </a>
-                <i class="fa fa-question-circle" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-original-title="Item analysis is a technique that analyses the student answers to evaluate the effectiveness of questions in an exam."></i>
+                </button>
+                <i class="fa fa-question-circle" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="right" title="Item analysis is a technique that analyses the student answers to evaluate the effectiveness of questions in an exam."></i>
     		</span>
         </div>
-        <div class="">
-            <div aria-expanded="true" id="qb-stats" class="panel-body panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-qb-stats" style="">
-                <table class="table table-striped table-hover table-condensed">
-                    <tr>		
+        
+		<div aria-expanded="true" id="qb-stats" class="card-body panel-collapse collapse show">
+                <table class="table table-striped table-condensed">
+                    <tr>
                         <th scope="col" class="text-left">
                             #
                         </th>
@@ -161,9 +166,7 @@
                         </tr>
                     </c:forEach>	
                 </table>
-            </div>
-	    </div>
+		</div>
     </div>
-	
 </c:otherwise>
 </c:choose>	
Fisheye: Tag e745a65b2a8cdd11176817c24cc93666040efccb refers to a dead (removed) revision in file `lams_tool_scratchie/web/pages/monitoring/studentChoices.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_scratchie/web/pages/monitoring/studentChoices5.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/monitoring/studentChoices5.jsp	(.../studentChoices5.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_scratchie/web/pages/monitoring/studentChoices5.jsp	(.../studentChoices5.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -1,5 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+<c:set var="newLineChar" value="<%= \"\r\n\" %>" />
 
 <style>
 	/* show horizontal scroller for iPads */
@@ -39,24 +39,25 @@
 	  background-color: #d9534f; }
 </style>
 
-
 <script>
 	// tell TBL monitor that this element is scrollable horizontally
 	tlbMonitorHorizontalScrollElement = '#questions-data-container';
-	
-	function exportExcel(){
-		//dynamically create a form and submit it
-		var exportExcelUrl = "<lams:LAMSURL/>tool/lascrt11/tblmonitoring/exportExcel.do?toolContentID=${toolContentID}&reqID=" + (new Date()).getTime();
-		var form = $('<form method="post" action="' + exportExcelUrl + '"></form>');
-	    var hiddenInput = $('<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"></input>');
-	    form.append(hiddenInput);
-	    $(document.body).append(form);
-	    form.submit();
-	};
 
+	<c:if test="${!isTbl}">
+		function exportExcel(){
+			//dynamically create a form and submit it
+			var exportExcelUrl = "<lams:LAMSURL/>tool/lascrt11/tblmonitoring/exportExcel.do?toolContentID=${toolContentID}&reqID=" + (new Date()).getTime();
+			var form = $('<form method="post" action="' + exportExcelUrl + '"></form>');
+		    var hiddenInput = $('<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"></input>');
+		    form.append(hiddenInput);
+		    $(document.body).append(form);
+		    form.submit();
+		};
+	</c:if>
+
 	function openActivityMonitoring(){
-		openPopUp('<lams:WebAppURL />monitoring/summary.do?toolContentID=${toolContentID}&contentFolderID='
-				+ contentFolderId, "MonitorActivity", popupHeight, popupWidth, true, true);
+		window.open("<lams:WebAppURL />monitoring/summary.do?toolContentID=${toolContentID}&lessonID=" + lessonId + 
+				"&contentFolderID=" + contentFolderId + "&reqID=" + (new Date()).getTime(), "_self");
 	}
 
 	$(document).ready(function(){
@@ -98,69 +99,70 @@
 	});
 </script>
 
-<div class="container-fluid">
-	 <div class="col-10 offset-1 pb-2">
-		<!-- Notifications -->  
+<div class="${isTbl ? 'container-main ms-4' : ''}">
+	<c:if test="${isTbl}">
 		<div class="float-end">
-			<a href="#nogo" onclick="javascript:openActivityMonitoring(); return false;" type="button" class="btn btn-secondary buttons_column">
-				<i class="fa-solid fa-circle-info"></i>
+			<button onclick="openActivityMonitoring()" type="button" class="btn btn-secondary buttons_column">
+				<i class="fa-solid fa-circle-info me-1"></i>
 				<fmt:message key="label.activity.monitoring"/>
-			</a>
-			<a href="#nogo" type="button" class="btn btn-secondary buttons_column"
-					onclick="javascript:loadTab('trat', $('#load-trat-tab-btn'))">
-				<i class="fa fa-clipboard-question"></i>
+			</button>
+			<button type="button" class="btn btn-secondary buttons_column"
+					onclick="loadTab('trat', $('#load-trat-tab-btn'))">
+				<i class="fa fa-clipboard-question me-1"></i>
 				<fmt:message key="label.hide.students.choices"/>
-			</a>
-			<a href="#nogo" onclick="javascript:printTable(); return false;" type="button" class="btn btn-secondary buttons_column">
-				<i class="fa fa-print"></i>
+			</button>
+			<button onclick="printTable()" type="button" class="btn btn-secondary buttons_column">
+				<i class="fa fa-print me-1"></i>
 				<fmt:message key="label.print"/>
-			</a>
-			<a href="#nogo" onclick="javascript:exportExcel(); return false;" type="button" class="btn btn-secondary buttons_column">
-				<i class="fa fa-file"></i>
+			</button>
+			<button onclick="exportExcel()" type="button" class="btn btn-secondary buttons_column">
+				<i class="fa fa-file-excel me-1"></i>
 				<fmt:message key="label.export.excel"/>
-			</a>
+			</button>
 			<c:if test="${vsaPresent}">
 				<a class="btn btn-secondary buttons_column" target="_blank"
-				   href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${scratchie.contentId}'>
+					   href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${scratchie.contentId}'>
+					<i class="fa-solid fa-arrow-down-1-9 me-1"></i>
 					<fmt:message key="label.vsa.allocate.button" />
 				</a>
 			</c:if>
 		</div>
-		<!-- End notifications -->
+			
 		<h3>
 			<fmt:message key="label.tra.questions.marks"/>
 		</h3>
+	</c:if>
+
+	<div class="lcard ${isTbl ? 'mt-5' : ''}">
+		<div id="questions-data-container" class="table-responsive card-body">
+		</div>
 	</div>
-	<div class="row">
-		<div class="col-10 offset-1">
-			<div class="card">
-				<div id="questions-data-container" class="table-responsive card-body">
-				</div>
-			</div>
-		</div>          
-	</div>
 		
 	<!-- Question detail modal -->
 	<c:forEach var="item" items="${items}" varStatus="i">
 		<div class="modal fade" id="question${i.index}Modal">
 		<div class="modal-dialog modal-dialog-centered">
 		<div class="modal-content">
-			<div class="modal-header align-items-start">
-				<div class="modal-title">
-					<span>Q${i.index+1})</span>
+			<div class="modal-header align-items-start text-bg-warning">
+				<div class="modal-title d-flex">
+					<span class="me-2">
+						Q${i.index+1})
+					</span>
 					<c:if test="${not empty item.qbQuestion.name}">
-						<p><c:out value="${item.qbQuestion.name}"  escapeXml="false" /></p>
+						<div><c:out value="${item.qbQuestion.name}"  escapeXml="false" /></div>
 					</c:if>
-					${item.qbQuestion.description}
 				</div>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
+			
 			<div class="modal-body">
+				${item.qbQuestion.description}
+					
 				<div class="table-responsive voffset10">
 					<table class="table table-striped table-hover">
 						<tbody>
 							<c:forEach var="qbOption" items="${item.qbQuestion.qbOptions}" varStatus="j">
-								<c:set var="cssClass"><c:if test='${qbOption.correct}'>bg-success</c:if></c:set>
+								<c:set var="cssClass"><c:if test='${qbOption.correct}'>text-bg-success</c:if></c:set>
 									<tr>
 										<c:choose>
 											<c:when test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
@@ -195,6 +197,7 @@
 			</div> 
 			<div class="modal-footer">	
 				<a href="#" data-bs-dismiss="modal" class="btn btn-secondary">
+					<i class="fa fa-check fa-lg me-1"></i>
 					<fmt:message key="button.close"/>
 				</a>
 			</div>
@@ -204,8 +207,8 @@
 	</c:forEach>
 	<!-- End question detail modal -->
 	
-	<div class="row">
-		<div class="col-10 offset-1" id="time-limit-panel-placeholder">
+	<c:if test="${isTbl}">
+		<div id="time-limit-panel-placeholder">
 		</div>
-	</div>
-</div>
\ No newline at end of file
+	</c:if>
+</div>
Index: lams_tool_scratchie/web/pages/monitoring/studentChoicesTable.jsp
===================================================================
diff -u -r8a7a259deba12163c46440a712e41bde926fdaf8 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/monitoring/studentChoicesTable.jsp	(.../studentChoicesTable.jsp)	(revision 8a7a259deba12163c46440a712e41bde926fdaf8)
+++ lams_tool_scratchie/web/pages/monitoring/studentChoicesTable.jsp	(.../studentChoicesTable.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -1,6 +1,6 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-	<table id="questions-data" class="table table-bordered table-hover table-condensed">
+	<table id="questions-data" class="table table-bordered table-striped table-hover table-condensed">
 		<thead>
 			<tr role="row" class="border-top-0">
 				<th></th>
@@ -35,7 +35,6 @@
 			</tr>
 		</thead>
 		<tbody>
-		
 			<tr>
 				<th>
 					<b>
Index: lams_tool_scratchie/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_tool_scratchie/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -1,9 +1,14 @@
 <%@ include file="/common/taglibs.jsp"%>
-
+<c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 <c:set var="scratchie" value="${sessionMap.scratchie}"/>
-	
+
+<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme5.css" rel="stylesheet">
+<link type="text/css" href="${lams}css/thickbox.css" rel="stylesheet"  media="screen">
+<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css" >
+<link href="${lams}css/free.ui.jqgrid.custom.css" rel="stylesheet" type="text/css" >
+<lams:css suffix="chart"/>
 <style type="text/css">
 	/* remove jqGrid borders */
 	.ui-jqgrid {
@@ -53,14 +58,26 @@
 	}
 </style>
 
+<script type="text/javascript" src="${lams}includes/javascript/jquery.plugin.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.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/thickbox.js"></script> 
+<lams:JSImport src="includes/javascript/portrait5.js" />
+<!--  File Download -->
+<script type="text/javascript" src="${lams}includes/javascript/jquery.cookie.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/download.js"></script>
+ <!--  Marks Chart -->
+ <script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
+ <script type="text/javascript" src="${lams}includes/javascript/chart.js"></script>
 <script type="text/javascript">
 	$(document).ready(function(){
 		 $('[data-bs-toggle="tooltip"]').tooltip();
 		 
 		var oldValue = 0;
 		
 		<c:forEach var="summary" items="${summaryList}" varStatus="status">
-		
 			jQuery("#list${summary.sessionId}").jqGrid({
 				datatype: "local",
 				rowNum: 10000,
@@ -266,10 +283,16 @@
 	};
 
 	function showChangeLeaderModal(toolSessionId) {
-		$('#change-leader-modals').empty()
-		.load('<c:url value="/monitoring/displayChangeLeaderForGroupDialogFromActivity.do" />',{
-			toolSessionID : toolSessionId
-		});
+		let modalContainer = $('#change-leader-modals');
+		modalContainer.empty().load(
+			'<c:url value="/monitoring/displayChangeLeaderForGroupDialogFromActivity.do" />',
+			{
+				toolSessionID : toolSessionId
+			}, 
+			function(){
+				modalContainer.children('.modal').modal('show');
+			}
+		);
 	}
 
 	function onChangeLeaderCallback(response, leaderUserId, toolSessionId){
@@ -308,118 +331,130 @@
 		messageRestrictionSet: '<spring:escapeBody javaScriptEscape='true'><fmt:message key="monitor.summary.date.restriction.set" /></spring:escapeBody>',
 		messageRestrictionRemoved: '<spring:escapeBody javaScriptEscape='true'><fmt:message key="monitor.summary.date.restriction.removed" /></spring:escapeBody>'
 	};
-
-
 </script>
-<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
+<script type="text/javascript" src="${lams}includes/javascript/monitorToolSummaryAdvanced.js" ></script>
 
+<div class="instructions">
 	<c:if test="${not empty summaryList}">
-		<button onclick="return exportExcel();" class="btn btn-default btn-sm btn-disable-on-submit pull-right">
-			<i class="fa fa-download" aria-hidden="true"></i> 
+		<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>
+		</div>
+	
+		<c:if test="${vsaPresent}">
+			<a class="btn btn-sm btn-secondary float-end ms-2" target="_blank"
+				   href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${scratchie.contentId}'>
+				<i class="fa-solid fa-arrow-down-1-9 me-1"></i>
+				<fmt:message key="label.vsa.allocate.button" />
+			</a>
+		</c:if>
+	
+		<button type="button" onclick="exportExcel()" class="btn btn-secondary btn-sm btn-disable-on-submit float-end">
+			<i class="fa fa-file-excel me-1" aria-hidden="true"></i> 
 			<fmt:message key="label.export.excel" />
 		</button>
 	</c:if>
 
-	<div class="panel">
-		<h4>
-		    <c:out value="${scratchie.title}" escapeXml="true"/>
-		</h4>
-		<div class="instructions voffset5">
-		    <c:out value="${scratchie.instructions}" escapeXml="false"/>
-		</div>
-		
-		<c:if test="${empty summaryList}">
-			<lams:Alert type="info" id="no-session-summary" close="false">
-				 <fmt:message key="message.monitoring.summary.no.session" />
-			</lams:Alert>
-		</c:if>
+	<div class="fs-4">
+		<c:out value="${scratchie.title}" escapeXml="true"/>
+	</div>
 	
-		<lams:WaitingSpinner id="messageArea_Busy"></lams:WaitingSpinner>
-		<div class="voffset5 help-block" id="messageArea"></div>
-	
+	<div class="mt-2">
+		<c:out value="${scratchie.instructions}" escapeXml="false"/>
 	</div>
+</div>
+
+<c:if test="${empty summaryList}">
+	<lams:Alert5 type="info" id="no-session-summary">
+		 <fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert5>
+</c:if>
 	
-	<c:set var="showStudentChoicesTableOnly" value="true" />
-	<c:set var="isTbl" value="false" />
-	<h4><fmt:message key="monitoring.tab.summary" /></h4>
-	<%@ include file="studentChoices.jsp"%>
-	
-	<div class="form-group">
-		<!-- Dropdown menu for choosing scratchie item -->
-		<label for="item-uid"><h4><fmt:message key="label.monitoring.summary.report.by.scratchie" /></h4></label>
-		<select id="item-uid" class="form-control">
-			<option selected="selected" value="-1"><fmt:message key="label.monitoring.summary.choose" /></option>
-   			<c:forEach var="item" items="${scratchie.scratchieItems}" varStatus="questionCount">
-				<option value="${item.uid}">${questionCount.count})&nbsp;<c:out value="${item.qbQuestion.name}" escapeXml="true"/></option>
-		   	</c:forEach>
-		</select>
-		<a href="#nogo" class="thickbox" id="item-summary-href" style="display: none;"></a>
+<c:set var="showStudentChoicesTableOnly" value="true" />
+<c:set var="isTbl" value="false" />
+<c:set var="toolContentID" value="${scratchie.contentId}" />
+<div class="card-subheader fs-4">
+	<fmt:message key="monitoring.tab.summary" />
+</div>
+<%@ include file="studentChoices.jsp"%>
+
+<!-- Dropdown menu for choosing scratchie item -->
+<div class="mb-4 mt-2">
+	<div class="card-subheader fs-4">
+		<label for="item-uid">
+			<fmt:message key="label.monitoring.summary.report.by.scratchie" />
+		</label>
 	</div>
 	
-	<c:if test="${vsaPresent}">
-		<a class="btn btn-sm btn-default buttons_column" target="_blank"
-		   href='<lams:LAMSURL />qb/vsa/displayVsaAllocate.do?toolContentID=${scratchie.contentId}'>
-			<fmt:message key="label.vsa.allocate.button" />
-		</a>
-	</c:if>
+	<select id="item-uid" class="form-select">
+		<option selected="selected" value="-1"><fmt:message key="label.monitoring.summary.choose" /></option>
+   		<c:forEach var="item" items="${scratchie.scratchieItems}" varStatus="questionCount">
+			<option value="${item.uid}">${questionCount.count})&nbsp;<c:out value="${item.qbQuestion.name}" escapeXml="true"/></option>
+	   	</c:forEach>
+	</select>
+	<a href="#nogo" class="thickbox" id="item-summary-href" style="display: none;"></a>
+</div>
 
-	<h4 style="padding-top: 10px"><fmt:message key="label.report.by.team.tra" /></h4>
-	<fmt:message key="label.monitoring.summary.select.student" />
+<div class="mb-3">
+	<div class="card-subheader fs-4">
+		<fmt:message key="label.report.by.team.tra" />
+	</div>
+	<em>
+		<fmt:message key="label.monitoring.summary.select.student" />
+	</em>
+</div>
 
-	<c:set var="summaryTitle"><fmt:message key="label.monitoring.summary.summary" /></c:set>
-	<c:forEach var="summary" items="${summaryList}" varStatus="status">
-
-		<c:if test="${sessionMap.isGroupedActivity}">
-			<c:set var="summaryTitle"><strong><fmt:message key="monitoring.label.group" /></strong> ${summary.sessionName}</c:set>
-		</c:if>
+<c:set var="summaryTitle"><fmt:message key="label.monitoring.summary.summary" /></c:set>
+<c:forEach var="summary" items="${summaryList}" varStatus="status">
+	<c:if test="${sessionMap.isGroupedActivity}">
+		<c:set var="summaryTitle"><strong><fmt:message key="monitoring.label.group" /></strong> ${summary.sessionName}</c:set>
+	</c:if>
 		
-	    <div class="panel panel-default" >
-        <div class="panel-heading" id="heading${summary.sessionId}">
-        	<span class="panel-title collapsable-icon-left">
-        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${summary.sessionId}" 
-					aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${summary.sessionId}" >
-				${summaryTitle}</a>
+	<div class="lcard" >
+        <div class="card-header" id="heading${summary.sessionId}">
+        	<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${summary.sessionId}" 
+						aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${summary.sessionId}" >
+					${summaryTitle}
+				</button>
 			</span>
 			<c:if test="${fn:length(summary.users) > 0 and not summary.scratchingFinished}">
-				<button type="button" class="btn btn-default btn-xs pull-right"
-						onClick="javascript:showChangeLeaderModal(${summary.sessionId})">
+				<button type="button" class="btn btn-light btn-sm float-end"
+						onClick="showChangeLeaderModal(${summary.sessionId})">
+					<i class="fa-solid fa-user-pen me-1"></i>
 					<fmt:message key='label.monitoring.change.leader'/>
 				</button>
 			</c:if>
         </div>
         
-        <div id="collapse${summary.sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel" aria-labelledby="heading${summary.sessionId}">
+        <div id="collapse${summary.sessionId}" class="card-collapse collapse ${status.first ? 'show' : ''}">
+			<table id="list${summary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>	
+		</div>
+	</div>	
+</c:forEach>
 
-		<table id="list${summary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>
-		
-		</div> <!-- end collapse area  -->
-		</div> <!-- end collapse panel  -->
-	
-	</c:forEach>
-
-	<!-- Display burningQuestionItemDtos -->
-	<c:if test="${scratchie.burningQuestionsEnabled}">
-		<div class="panel-group" style="padding-top: 10px" id="accordionBurning" role="tablist" aria-multiselectable="true"> 
-		    <div class="panel panel-default" >
-		        <div class="panel-heading collapsable-icon-left" id="headingBurning">
-		        	<span class="panel-title">
-			    	<a role="button" data-toggle="collapse" href="#collapseBurning" aria-expanded="false" aria-controls="collapseBurning" >
+<!-- Display burningQuestionItemDtos -->
+<c:if test="${scratchie.burningQuestionsEnabled}">
+	<div class="lcard" >
+		<div class="card-header collapsable-icon-left">
+			<span class="card-title">
+			    <button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" 
+			    		data-bs-target="#collapseBurning" aria-expanded="true" aria-controls="collapseBurning" >
 		          	<fmt:message key="label.burning.questions" />
-		        	</a>
-		      		</span>
-		        </div>
+		        </button>
+			</span>
+		</div>
 		
-		        <div id="collapseBurning" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingBurning" style="padding: 10px;">
-					<%@ include file="parts/burningQuestions.jsp"%>
-				</div>
-			</div>
+		<div id="collapseBurning" class="card-body collapse show">
+			<%@ include file="../tblmonitoring/burningQuestions.jsp"%>
 		</div>
-	</c:if>
+	</div>
+</c:if>
 	
 <%@ include file="parts/advanceOptions.jsp"%>
 
 <div id="time-limit-panel-placeholder"></div>
 
-<%@ include file="parts/dateRestriction.jsp"%>
+<lams:RestrictedUsageAccordian submissionDeadline="${submissionDeadline}" cssClass="my-2"/>
 
 <div id="change-leader-modals"></div>
Index: lams_tool_scratchie/web/pages/tblmonitoring/burningQuestions.jsp
===================================================================
diff -u
--- lams_tool_scratchie/web/pages/tblmonitoring/burningQuestions.jsp	(revision 0)
+++ lams_tool_scratchie/web/pages/tblmonitoring/burningQuestions.jsp	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -0,0 +1,93 @@
+<%@ include file="/common/taglibs.jsp"%>
+
+<style>
+	.discussion-sentiment-start-button-cell {
+		width: 200px;
+		text-align: right;
+	}	
+	
+	.discussion-sentiment-chart-row {
+		display: none;
+	}
+	
+	.burning-questions-likes {
+		width: 50px;
+	}
+</style>
+<script>
+	// global variable that stores information which burning question collapse panel was expanded before reload
+	var lamsTratBurningQuestionExpanded = null;
+
+	// copied from parent window's monitorLesson.js
+	<c:if test="${!isTbl}">
+	    var eventSources = [],
+	    	traToolContentId = ${scratchie.contentId};
+	    	
+		function openEventSource(url, onMessageFunction, skipExisting) {
+		    if (skipExisting) {
+		        for (let i = 0; i < eventSources.length; i++) {
+		            if (eventSources[i].url === url) {
+		                return eventSources[i];
+		            }
+		        }
+		    }
+	
+		    const eventSource = new EventSource(url);
+		    eventSources.push(eventSource);
+		    eventSource.onmessage = onMessageFunction;
+		    return eventSource;
+		}
+	</c:if>
+	
+	$(document).ready(function(){
+		openEventSource('<lams:WebAppURL />tblmonitoring/burningQuestionsFlux.do?toolContentId=' + traToolContentId, function (event) {
+			lamsTratBurningQuestionExpanded = [];
+			// store information about expanded panels
+			$('#burningQuestionsTable .collapse.show').each(function(){
+				let collapse = $(this),
+					itemUid = collapse.data('itemUid');
+				lamsTratBurningQuestionExpanded.push(
+					{ 
+						itemUid : itemUid,
+						optionsExpanded : $('#options-show-' + itemUid, collapse).length === 0
+					}						
+				);
+			});		
+			$("#burningQuestionsTable").load('<lams:WebAppURL />tblmonitoring/burningQuestionsTable.do?isTbl=${isTbl}&toolContentID=' + traToolContentId,
+					function(){
+						// expand same panels as before the reload
+						lamsTratBurningQuestionExpanded.forEach(function(entry){
+							let collapse = $('#burningQuestionsTable #collapse' + entry.itemUid).addClass('show');
+							collapse.closest('.accordion-item').find('.accordion-button')
+								.removeClass('collapsed').attr('aria-expanded', 'true');
+							if (entry.optionsExpanded) {
+								$('#options-show-' + entry.itemUid, collapse).remove();
+								$('#options-' + entry.itemUid, collapse).show();
+							}
+						});
+					}
+			);
+		});
+	});
+
+	<c:if test="${isTbl and discussionSentimentEnabled}">
+		function startDiscussionSentiment(toolQuestionUid, burningQuestionUid, markAsActive) {
+			var idSuffix = toolQuestionUid + '-' + burningQuestionUid,
+				chartRow = $('#discussion-sentiment-chart-row-' + idSuffix).css('display', 'table-row');
+			
+			$('#discussion-sentiment-chart-panel-container-' + idSuffix, chartRow).load(
+				'<lams:LAMSURL />learning/discussionSentiment/startMonitor.do',
+				{
+					toolQuestionUid    : toolQuestionUid,
+					burningQuestionUid : burningQuestionUid,
+					markAsActive       : markAsActive
+				},
+				function(){
+					$('#discussion-sentiment-start-button-' + idSuffix).remove();
+				}
+			)
+		}
+	</c:if>
+</script>
+
+<div id="burningQuestionsTable" class="${isTbl ? 'container-main ms-4' : 'p-2'}"></div>
Index: lams_tool_scratchie/web/pages/tblmonitoring/burningQuestionsTable.jsp
===================================================================
diff -u
--- lams_tool_scratchie/web/pages/tblmonitoring/burningQuestionsTable.jsp	(revision 0)
+++ lams_tool_scratchie/web/pages/tblmonitoring/burningQuestionsTable.jsp	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -0,0 +1,210 @@
+<%@ include file="/common/taglibs.jsp"%>
+
+<c:set var="burningQuestionsAvailable" value="false" />
+<c:forEach var="burningQuestionItemDto" items="${burningQuestionItemDtos}">
+	<c:if test="${not empty burningQuestionItemDto.burningQuestionDtos}">
+		<c:set var="burningQuestionsAvailable" value="true" />
+	</c:if>
+</c:forEach>
+		
+<script>
+	$(document).ready(function(){
+		//handler for expand/collapse all button
+		$("#toggle-burning-questions-button").click(function() {
+			var isExpanded = eval($(this).data("expanded"));
+				
+			//fire the actual buttons so burning questions can be closed/expanded
+			if (isExpanded) {
+				$("#burning-questions-accordion .accordion-button:not('.collapsed')").each(function() {
+					this.click();
+				});
+								
+			} else {
+				$("#burning-questions-accordion .accordion-button").each(function() {
+					this.click();
+				});					
+			}
+
+			//change button label
+			var newButtonLabel = isExpanded ? "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.expand.all' /></spring:escapeBody>" : "<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.collapse.all' /></spring:escapeBody>";
+			$(".hidden-xs", $(this)).text(newButtonLabel);
+
+			//change button icon
+			if (isExpanded) {
+				$(".fa", $(this)).removeClass("fa-minus-circle").addClass("fa-plus-circle");
+			} else {
+				$(".fa", $(this)).removeClass("fa-plus-circle").addClass("fa-minus-circle");
+			}
+
+			//change button's data-expanded attribute
+			$(this).data("expanded", !isExpanded);
+		});
+
+		$('.options-show-link').click(function(e){			
+			// hide button, show answers
+			let button = $(this),
+				itemUid = button.closest('.collapse').data('itemUid');
+			button.remove();
+			$('#options-' + itemUid).show();
+		});
+
+		<c:if test="${isTbl and discussionSentimentEnabled}">
+			$.ajax({
+				url : '<lams:LAMSURL />learning/discussionSentiment/checkMonitor.do',
+				data : {
+					toolContentId : traToolContentId
+				},
+				dataType : 'json',
+				success : function(result){
+					result.forEach(function(discussion){
+						startDiscussionSentiment(discussion.toolQuestionUid, discussion.burningQuestionUid, false);
+					});
+				}
+			});
+		</c:if>
+	});
+</script>
+
+<div class="pb-2 clearfix">
+	<c:if test="${burningQuestionsAvailable}">
+		<button type="button" id="toggle-burning-questions-button" class="btn btn-secondary float-end" data-expanded="false">
+			<i class="fa fa-plus-circle"></i>
+			<span class="hidden-xs">
+				<fmt:message key='label.expand.all' />
+			</span>
+		</button>
+	</c:if>
+
+	<c:if test="${isTbl}">
+		<h3>
+			<fmt:message key="label.burning.questions"/>
+		</h3>
+	</c:if>
+</div>
+
+<c:choose>
+	<c:when test="${burningQuestionsAvailable}">
+		<div class="accordion" id="burning-questions-accordion"> 	
+			<c:forEach var="burningQuestionItemDto" items="${burningQuestionItemDtos}" varStatus="i">
+				<c:if test="${not empty burningQuestionItemDto.burningQuestionDtos}">
+							<c:set var="item" value="${burningQuestionItemDto.scratchieItem}"/>
+							<%-- toolQuestionUid, i.e. item UID, is required for discussion token.
+								 It is missing for general burning questions as they are not bound to any question.
+								 In this case we use first question's UID, as burning question UID will uniquely identify the discussion anyway
+							 --%>
+							<c:set var="generalBurningQuestionDiscussionItemUid"
+								   value="${empty generalBurningQuestionDiscussionItemUid and not empty item.uid ? item.uid : generalBurningQuestionDiscussionItemUid}" />
+							<c:set var="discussionItemUid" value="${empty item.uid ? generalBurningQuestionDiscussionItemUid : item.uid}" />
+				 			<div class="accordion-item" tabindex="0">
+						    	<h4 class="accordion-header" id="heading${item.uid}">
+						    	  	<button class="accordion-button collapsed" type="button"
+							    			data-bs-toggle="collapse" data-bs-target="#collapse${item.uid}"
+							    			aria-expanded="false">
+							    		<!-- Don't display number prior to general burning question -->
+										<c:choose>
+											<c:when test="${empty item.uid}">
+												<c:out value="${item.qbQuestion.name}" escapeXml="false"/>
+											</c:when>
+											<c:otherwise>
+												Q${i.index+1}) 
+												<c:if test="${not hideTitles}">
+													<c:out value="${item.qbQuestion.name}" escapeXml="false"/>
+												</c:if> 
+											</c:otherwise>
+										</c:choose>
+							    	</button>
+							    </h4>
+							    
+							    <div id="collapse${item.uid}" data-item-uid="${item.uid}" class="accordion-collapse collapse">	
+									<div class="accordion-body">
+										<span class="burning-question-description">
+											<c:out value="${item.qbQuestion.description}" escapeXml="false"/><br /> 
+										</span>
+										
+										<c:if test="${not empty burningQuestionItemDto.scratchieItem.uid}">
+											<div class="clearfix">
+												<button type="button" id="options-show-${item.uid}" class="btn btn-light btn-sm options-show-link float-end">
+													<i class="fa-regular fa-eye me-1"></i>
+													<fmt:message key='label.options.show' />
+												</button>
+											</div>
+											
+											<div  id="options-${item.uid}" class="table-responsive" style="display: none">
+												<table class="table table-hover">
+													<c:forEach var="answer" items="${item.qbQuestion.qbOptions}" varStatus="j">
+														<c:set var="cssClass"><c:if test='${answer.correct}'>bg-success</c:if></c:set>
+														<tr>
+															<td width="5px" class="${cssClass} align-middle">
+																${ALPHABET[j.index]}.
+															</td>
+															<td class="${cssClass} align-middle">
+																<c:out value="${answer.name}" escapeXml="false"/> 
+															</td>
+														</tr>
+													</c:forEach>
+												</table>
+											</div>
+										</c:if>
+										
+										<div class="table-responsive mt-3">
+											<table class="table table-striped">
+												<tbody>
+													<c:forEach var="burningQuestionDto" items="${burningQuestionItemDto.burningQuestionDtos}">
+														<tr>
+															<td class="text-nowrap align-middle fw-bold" width="20%">
+																<c:out value="${burningQuestionDto.sessionName}" escapeXml="false"/>
+															</td>
+															<td>
+																${burningQuestionDto.escapedBurningQuestion}
+															</td>
+															<td class="text-nowrap burning-questions-likes align-middle">
+																<span class="badge rounded-pill text-bg-secondary">
+																	${burningQuestionDto.likeCount}
+																</span>
+																<i class="fa-regular fa-thumbs-up ms-1"></i>
+															</td>
+															
+															<c:if test="${isTbl}">
+																<td class="discussion-sentiment-start-button-cell align-middle">
+																	<c:if test="${discussionSentimentEnabled and not empty discussionItemUid}">
+																		<button type="button" id="discussion-sentiment-start-button-${discussionItemUid}-${burningQuestionDto.burningQuestion.uid}"
+																		     	class="btn btn-sm btn-light discussion-sentiment-start-button"
+																		     	onClick="startDiscussionSentiment(${discussionItemUid}, ${burningQuestionDto.burningQuestion.uid}, true)">
+																			<i class="fa-regular fa-comments me-1"></i>
+																			<fmt:message key="label.monitoring.discussion.start"/>
+																		</button>
+																	</c:if>
+																</td>
+															</c:if>
+														</tr>
+														
+														<c:if test="${isTbl and discussionSentimentEnabled and not empty discussionItemUid}">
+															<tr id="discussion-sentiment-chart-row-${discussionItemUid}-${burningQuestionDto.burningQuestion.uid}"
+															    	class="discussion-sentiment-chart-row">
+																<td colspan="4">
+																	<div id="discussion-sentiment-chart-panel-container-${discussionItemUid}-${burningQuestionDto.burningQuestion.uid}"
+																			class="w-75 mx-auto">
+																	</div>
+																</td>
+															</tr>
+														</c:if>
+													</c:forEach>
+												</tbody>
+											</table>
+										</div>
+									</div>
+								</div>
+							</div>
+				</c:if>
+			</c:forEach>    
+		</div>
+	</c:when>
+			
+	<c:otherwise>
+		<div class="card">
+			<div class="card-body text-center">
+				<fmt:message key="label.burning.questions.none"/>
+			</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_scratchie/web/pages/tblmonitoring/teams.jsp
===================================================================
diff -u -r35dd47046a83ab2f9e80f76dc22d1521412219b5 -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/tblmonitoring/teams.jsp	(.../teams.jsp)	(revision 35dd47046a83ab2f9e80f76dc22d1521412219b5)
+++ lams_tool_scratchie/web/pages/tblmonitoring/teams.jsp	(.../teams.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -15,7 +15,6 @@
 				<tbody>
 					<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="j">
 						<c:if test="${optionDto.scratched}">
-								
 							<tr>
 								<td width="5px">
 									${ALPHABET[j.index]}.
@@ -33,7 +32,6 @@
 									</c:choose>
 								</td>
 							</tr>
-									
 						</c:if>
 					</c:forEach>
 				</tbody>
Index: lams_tool_scratchie/web/pages/tblmonitoring/tra.jsp
===================================================================
diff -u -rf619aa5955dca265aae7744ea3319f3ec468801e -re745a65b2a8cdd11176817c24cc93666040efccb
--- lams_tool_scratchie/web/pages/tblmonitoring/tra.jsp	(.../tra.jsp)	(revision f619aa5955dca265aae7744ea3319f3ec468801e)
+++ lams_tool_scratchie/web/pages/tblmonitoring/tra.jsp	(.../tra.jsp)	(revision e745a65b2a8cdd11176817c24cc93666040efccb)
@@ -1,5 +1,6 @@
 <%@ include file="/common/taglibs.jsp"%>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+<c:set var="newLineChar" value="<%= \"\r\n\" %>" />
+
 <style>
 	#barChart {
 		width: 515px !important; 
@@ -55,53 +56,42 @@
 	});
 </script>
 
-<div class="container-fluid">
-	 <div class="row">
-		<div class="col-10 offset-1">
-			<div class="float-end">
-				<button class="btn btn-secondary" type="button"
-					 onclick="javascript:loadTab('tratStudentChoices', $('#load-trat-student-choices-tab-btn'))">
-					<i class="fa fa-list-check"></i> 
-					<fmt:message key="label.show.students.choices"/>
-				</button>   
-			</div>                 
+<div class="container-main ms-4">
+	<div class="float-end">
+		<button class="btn btn-primary btn-icon-return" type="button"
+				 onclick="loadTab('tratStudentChoices', $('#load-trat-student-choices-tab-btn'))">
+			<fmt:message key="label.show.students.choices"/>
+		</button>   
+	</div>                 
 
-			<h3>
-				<fmt:message key="label.tra.questions.marks"/>
-			</h3>
-		</div>
-	</div>
+	<h3>
+		<fmt:message key="label.tra.questions.marks"/>
+	</h3>
 	
-	<div class="row mb-3">
-		<div class="col-5 offset-1 pt-1">
-			<h4>
-				<i class="fa fa-users text-secondary"></i> 
-				<fmt:message key="label.attendance"/>: <span>${attemptedLearnersNumber}</span>/<span class="total-learners-number"></span> 
-			</h4> 
+	<div class="pt-1 mb-3">
+		<div>
+			<i class="fa fa-users text-secondary"></i> 
+			<fmt:message key="label.attendance"/>: <span>${attemptedLearnersNumber}</span>/<span class="total-learners-number"></span> 
 		</div>
-	</div>
-	<!-- End notifications -->              
+	</div>          
 	
 	<!-- Tables -->
-	<c:forEach var="item" items="${items}" varStatus="i">
-		<div class="row mb-3">
-			<div class="col-10 offset-1">			
-				<div class="card" tabindex="0">
-					<div class="card-header">			
-						<h3 class="card-title mb-3" style="font-size: initial">
-							${i.index+1}. <c:out value="${item.qbQuestion.name}" escapeXml="false"/>
-						</h3> 
-						<c:out value="${item.qbQuestion.description}" escapeXml="false"/>
-					</div>
+	<c:forEach var="item" items="${items}" varStatus="i">		
+		<div class="lcard mb-3">
+			<div class="card-header">
+				${i.index+1}. <c:out value="${item.qbQuestion.name}" escapeXml="false"/>
+			</div>
 			
-					<div class="card-body">
-						<div class="table-responsive">
-							<table class="table">
-								<tbody>
-									<c:forEach var="qbOption" items="${item.qbQuestion.qbOptions}" varStatus="j">
-										<c:set var="cssClass"><c:if test='${qbOption.correct}'>bg-success</c:if></c:set>
-										<tr>
-											<c:choose>
+			<div class="card-body">
+				<c:out value="${item.qbQuestion.description}" escapeXml="false"/>
+						
+				<div class="table-responsive">
+					<table class="table table-hover">
+						<tbody>
+							<c:forEach var="qbOption" items="${item.qbQuestion.qbOptions}" varStatus="j">
+								<c:set var="cssClass"><c:if test='${qbOption.correct}'>text-bg-success</c:if></c:set>
+								<tr>
+									<c:choose>
 												<c:when test="${item.qbQuestion.type == 1 or item.qbQuestion.type == 8}">
 													<td width="5px" class="${cssClass}">
 														<c:if test="${item.qbQuestion.prefixAnswersWithLetters}">
@@ -127,30 +117,24 @@
 														${fn:replace(qbOption.name, newLineChar, ', ')}
 													</td>
 												</c:otherwise>
-											</c:choose>
-										</tr>					
-									</c:forEach>
-								</tbody>
-							</table>
-						</div>
-					</div>
-				</div>  
+									</c:choose>
+								</tr>					
+							</c:forEach>
+						</tbody>
+					</table>
+				</div>
 			</div>
-		</div>
+		</div>  
 	</c:forEach>
 	<!-- End tables -->
 	
-	<div class="row">
-		<div class="col-8 offset-2 text-center">
-			<div class="card">
-				<div class="card-header">
-					<fmt:message key="label.tra.results.by.team"/>&nbsp;<small>(<fmt:message key="label.average"/>)</small>
-				</div>
+	<div class="lcard">
+		<div class="card-header">
+			<fmt:message key="label.tra.results.by.team"/>&nbsp;<small>(<fmt:message key="label.average"/>)</small>
+		</div>
 				
-				<div class="card-body">
-					<canvas id="barChart" height="240" width="515"></canvas>
-				</div>
-			</div>  
+		<div class="card-body">
+			<canvas id="barChart" height="240" width="515"></canvas>
 		</div>
-	</div>
+	</div> 
 </div>