Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -r716e8f6d2a43093e93f1a0e8b96894e9535e96d7 -r81f928586161dd03042b6353f68c7d7b8279ccde
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 716e8f6d2a43093e93f1a0e8b96894e9535e96d7)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
@@ -20,7 +20,6 @@
 		<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
 		<link rel="stylesheet" href="<lams:LAMSURL/>css/vertical-timeline.css">
 		<link rel="stylesheet" href="<lams:LAMSURL/>css/x-editable.css">
-		<link rel="stylesheet" href="<lams:LAMSURL/>css/free.ui.jqgrid.min.css">
 		<link rel="stylesheet" href="<lams:LAMSURL/>css/free.ui.jqgrid.custom.css">
 		<link rel="stylesheet" href="<lams:LAMSURL/>css/tempus-dominus.min.css">
 		<link rel="stylesheet" href="<lams:LAMSURL/>gradebook/includes/css/gradebook.css" />
@@ -203,7 +202,7 @@
 			<div class="component-menu">
 				<div class="component-menu-btn d-flex flex-column align-items-center">
 					<div class="navigate-btn-container">
-						<a id="load-sequence-tab-btn" href="#" class="btn btn-primary active"
+						<a id="load-sequence-tab-btn" href="#" class="btn btn-primary navigate-btn active"
 						   data-tab-name="sequence"	title="<fmt:message key='tab.dashboard' />">
 							<i class="fa fa-cubes fa-lg"></i>
 						</a>
@@ -214,7 +213,7 @@
 
 					<c:if test="${isTBLSequence}">
 						<div class="navigate-btn-container">
-							<a id="load-teams-tab-btn" class="btn btn-primary" href="#"
+							<a id="load-teams-tab-btn" class="btn btn-primary navigate-btn" href="#"
 							   data-tab-name="teams" title="<fmt:message key='label.teams' />">
 								<i class="fa fa-people-group fa-lg"></i>
 							</a>
@@ -225,7 +224,7 @@
 
 						<c:if test="${not empty isIraAvailable}">
 							<div class="navigate-btn-container">
-								<a id="load-irat-tab-btn" class="btn btn-primary" href="#"
+								<a id="load-irat-tab-btn" class="btn btn-primary navigate-btn" href="#"
 								   data-tab-name="iratStudentChoices"	title="<fmt:message key='label.ira' />">
 									<i class="fa fa-user fa-lg"></i>
 								</a>
@@ -238,7 +237,7 @@
 
 						<c:if test="${not empty isScratchieAvailable}">
 							<div class="navigate-btn-container">
-								<a id="load-trat-tab-btn" class="btn btn-primary" href="#"
+								<a id="load-trat-tab-btn" class="btn btn-primary navigate-btn" href="#"
 								   data-tab-name="tratStudentChoices" title="<fmt:message key='label.tra' />">
 									<i class="fa fa-users fa-lg"></i>
 								</a>
@@ -250,7 +249,7 @@
 
 							<c:if test="${burningQuestionsEnabled}">
 								<div class="navigate-btn-container">
-									<a id="load-burning-tab-btn" class="btn btn-primary" href="#"
+									<a id="load-burning-tab-btn" class="btn btn-primary navigate-btn" href="#"
 									   data-tab-name="burningQuestions" title="<fmt:message key='label.monitoring.burning.questions' />">
 										<i class="fa fa-question-circle fa-lg"></i>
 									</a>
@@ -263,7 +262,7 @@
 
 						<c:if test="${not empty isAeAvailable}">
 							<div class="navigate-btn-container">
-								<a id="load-aes-tab-btn" class="btn btn-primary" href="#"
+								<a id="load-aes-tab-btn" class="btn btn-primary navigate-btn" href="#"
 								   data-tab-name="aes" title="<fmt:message key='label.aes' />">
 									<i class="fa fa-dashboard fa-lg"></i>
 								</a>
@@ -275,7 +274,7 @@
 
 						<c:if test="${not empty isPeerreviewAvailable}">
 							<div class="navigate-btn-container">
-								<a id="load-peer-review-tab-btn" class="btn btn-primary" href="#"
+								<a id="load-peer-review-tab-btn" class="btn btn-primary navigate-btn" href="#"
 								   data-tab-name="peerReview" title="<fmt:message key='label.peer.review' />">
 									<i class="fa fa-person-circle-question fa-lg"></i>
 								</a>
@@ -287,7 +286,7 @@
 					</c:if>
 
 					<div class="navigate-btn-container">
-						<a id="load-learners-tab-btn" href="#" class="btn btn-primary"
+						<a id="load-learners-tab-btn" href="#" class="btn btn-primary navigate-btn"
 						   data-tab-name="learners"	title="<fmt:message key='tab.learners' />">
 							<i class="fa fa-solid fa-users fa-lg"></i>
 						</a>
@@ -297,7 +296,7 @@
 					</div>
 
 					<div class="navigate-btn-container">
-						<a id="load-gradebook-tab-btn" href="#" class="btn btn-primary"
+						<a id="load-gradebook-tab-btn" href="#" class="btn btn-primary navigate-btn"
 						   data-tab-name="gradebook" title="<fmt:message key='tab.gradebook' />">
 							<i class="fa fa-solid fa-list-ol fa-lg"></i>
 						</a>
@@ -307,7 +306,7 @@
 					</div>
 
 					<div class="navigate-btn-container">
-						<a id="edit-lesson-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.monitoring.edit.lesson.settings' />">
+						<a id="edit-lesson-btn" class="btn btn-primary navigate-btn" href="#" title="<fmt:message key='label.monitoring.edit.lesson.settings' />">
 							<i class="fa fa-pen fa-lg"></i>
 						</a>
 						<label for="edit-lesson-btn" class="d-none d-md-block">
@@ -521,22 +520,13 @@
 			</div>
 		</div>
 
-		<div class="monitoring-page-content active">
+		<div class="component-page-content monitoring-page-content active">
 			<header class="d-flex justify-content-between">
-				<div class="hamburger-box">
-					<!--
-                        <div class="hamburger">
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </div>
-                     -->
-					<p id="lesson-name"><c:out value="${lesson.lessonName}"/></p>
-				</div>
+				<h1 id="lesson-name"><c:out value="${lesson.lessonName}"/></h1>
 				<div class="top-menu">
 					<div id="sequenceSearchPhraseContainer" class="input-group">
-						<input id="sequenceSearchPhrase" type="search" class="form-control" placeholder="<fmt:message key='label.monitoring.search.learners' />...">
-						<button id="sequenceSearchPhraseButton" class="btn bg-white opacity-100" type="button" disabled onClick="javascript:sequenceClearSearchPhrase(true)" aria-label="<fmt:message key='label.monitoring.search.learners' />">
+						<input id="sequenceSearchPhrase" type="search" class="form-control shadow" placeholder="<fmt:message key='label.monitoring.search.learners' />...">
+						<button id="sequenceSearchPhraseButton" class="btn bg-white shadow" type="button" disabled onClick="javascript:sequenceClearSearchPhrase(true)" aria-label="<fmt:message key='label.monitoring.search.learners' />">
 							<i id="sequenceSearchPhraseIcon" class="fa-solid fa-fw fa-magnifying-glass"></i>
 							<i id="sequenceSearchPhraseClearIcon" class="fa-solid fa-fw fa-lg fa-xmark"></i>
 						</button>