Index: lams_central/web/css/components.scss
===================================================================
diff -u -r8ab1c658eca81a42d7f21d0067bff04c15f70c38 -r76e983188f512edbc2d0b5e2028f06d8c5692cb7
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 8ab1c658eca81a42d7f21d0067bff04c15f70c38)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 76e983188f512edbc2d0b5e2028f06d8c5692cb7)
@@ -616,10 +616,9 @@
 
 /*----------collapsable-icon-left----------------*/ 
 
-.component-page-wrapper .collapsable-icon-left button[data-bs-toggle="collapse"]:after {
+.component-page-wrapper .collapsable-icon-left button:after {
 	font-family: FontAwesome;
 	float: left;
-	color: #6c757d;
 	margin-right: .5rem;
 }
 
Index: lams_central/web/css/free.ui.jqgrid.custom.css
===================================================================
diff -u -rbbe6b21a663059e2539bc0ea5ce761445b5ae1c1 -r76e983188f512edbc2d0b5e2028f06d8c5692cb7
--- lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision bbe6b21a663059e2539bc0ea5ce761445b5ae1c1)
+++ lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision 76e983188f512edbc2d0b5e2028f06d8c5692cb7)
@@ -9,10 +9,18 @@
 	font-size: 1rem;
 }
 
+.ui-jqgrid.ui-jqgrid-bootstrap {
+	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);/*copied from .shadow class*/
+}
+
 .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
 	background-color: var(--bs-gray-200);
 }
 
+.ui-jqgrid.ui-jqgrid-bootstrap .btn:not(.disabled) {
+	opacity: 0.8;
+}
+
 .ui-jqgrid .ui-jqgrid-bdiv {
 	overflow: inherit;
 }
@@ -21,15 +29,12 @@
 	border: 3px !important;
 	padding: 0 !important;
 	font-family: mont-bold, sans-serif;
-	font-size: 1.1rem;
 	margin: 0;
 	width: 100%;
-	background-color: var(--bs-gray-200) !important;
-    border-top: 1px solid var(--bs-gray-400) !important;
+	background-color: transparent !important;
 }
 
 .ui-jqgrid-labels th {
-	border-bottom: 2px solid var(--bs-secondary)!important;
 	padding-bottom: .4rem !important;
 	background-color: #fff;
 }
@@ -72,17 +77,27 @@
 }
 
 .ui-subgrid.ui-row-ltr .subgrid-cell, .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-bootstrap-corner-bottom	{
-	background-color: #F6F5FA;
+	
 }
 
-.table-hover tbody {
-	background-color: #FFF;
+.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-pager {
+	background-color: #e5e5e5;
 }
 
+.ui-jqgrid.ui-jqgrid-bootstrap>.ui-jqgrid-view {
+	border: none;
+}
+
 .table-hover tbody tr:hover {
 	background-color: var(--bs-gray-200);
 }
 
+.ui-jqgrid .ui-jqgrid-titlebar {
+	color: #fff !important; /* copied from .text-bg-secondary */
+    background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; /* copied from .text-bg-secondary */
+    --bs-bg-opacity: 0.85;
+}
+
 .ui-jqgrid .ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close {
 	right: .6rem;
 	top: 40%;
Index: lams_gradebook/web/gradebookMonitorContent.jsp
===================================================================
diff -u -r9f749a4b64195373d93faaa5353895713e3a7c09 -r76e983188f512edbc2d0b5e2028f06d8c5692cb7
--- lams_gradebook/web/gradebookMonitorContent.jsp	(.../gradebookMonitorContent.jsp)	(revision 9f749a4b64195373d93faaa5353895713e3a7c09)
+++ lams_gradebook/web/gradebookMonitorContent.jsp	(.../gradebookMonitorContent.jsp)	(revision 76e983188f512edbc2d0b5e2028f06d8c5692cb7)
@@ -90,7 +90,9 @@
 	/*
 		Expands all subgrids of the given jqGrid.
 	*/
-	function expandAllRows(jqGridId) {
+	function expandAllRows(jqGridId, button) {
+		$(button).removeClass("collapsed");
+		
 		let jqGrid = $('#' + jqGridId),
 				ids = jqGrid.getDataIDs();
 		$.each(ids, function(){
@@ -893,14 +895,19 @@
 </c:if>
 
 <div class="grid-holder mt-4">
-	<div class="d-flex flex-row-reverse mb-2">
-		<button class="btn btn-secondary btn-sm" onClick="javascript:expandAllRows('userView')"><fmt:message key="gradebook.grid.expand.all"/></button>
+	<div class="d-flex flex-row-reverse collapsable-icon-left mb-2">
+		<button class="btn btn-secondary btn-sm collapsed" onClick="javascript:expandAllRows('userView', this)">
+			<fmt:message key="gradebook.grid.expand.all"/>
+		</button>
 	</div>
+	
 	<table id="userView" class="scroll" ></table>
 	<div id="userViewPager" class="scroll" ></div>
 
-	<div class="d-flex flex-row-reverse mt-4 mb-2">
-		<button class="btn btn-secondary btn-sm" onClick="javascript:expandAllRows('activityView')"><fmt:message key="gradebook.grid.expand.all"/></button>
+	<div class="d-flex flex-row-reverse collapsable-icon-left mt-4 mb-2">
+		<button class="btn btn-secondary btn-sm collapsed" onClick="javascript:expandAllRows('activityView', this)">
+			<fmt:message key="gradebook.grid.expand.all"/>
+		</button>
 	</div>
 
 	<table id="activityView" class="scroll" ></table>
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -re820169ce662888b003dbe47ef24a48cf19d124c -r76e983188f512edbc2d0b5e2028f06d8c5692cb7
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision e820169ce662888b003dbe47ef24a48cf19d124c)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 76e983188f512edbc2d0b5e2028f06d8c5692cb7)
@@ -52,6 +52,14 @@
 	margin-left: 1.8rem;
 }
 
+.monitoring-page-wrapper button.btn:not(.navigate-btn) {
+	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);/*copied from .shadow class*/
+}
+.monitoring-page-wrapper #learners-accordion {
+	margin-right: -0.8rem;
+    margin-left: -0.8rem;
+}
+
 body.component #sequenceInfoDialog {
 	cursor: pointer;
 }
Index: lams_monitoring/web/monitor-learners-tab.jsp
===================================================================
diff -u -r4fedcb4cf4ff6424821847b4280f18fa25a17f22 -r76e983188f512edbc2d0b5e2028f06d8c5692cb7
--- lams_monitoring/web/monitor-learners-tab.jsp	(.../monitor-learners-tab.jsp)	(revision 4fedcb4cf4ff6424821847b4280f18fa25a17f22)
+++ lams_monitoring/web/monitor-learners-tab.jsp	(.../monitor-learners-tab.jsp)	(revision 76e983188f512edbc2d0b5e2028f06d8c5692cb7)
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <%@ include file="/taglibs.jsp"%>
 
-<div id="learners-tab-content" class="container-fluid">
+<div id="learners-tab-content" class="container-fluid shadow">
 	<div class="row" id="learners-pager">
 		<div class="col offset-4 text-end" >
 			<button class="btn btn-secondary pager-element d-none" onClick="javascript:learnersPageShift(-1)"
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -r78d4b7fda7982f0f9957d6ab206ce9c741f2eea1 -r76e983188f512edbc2d0b5e2028f06d8c5692cb7
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 78d4b7fda7982f0f9957d6ab206ce9c741f2eea1)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 76e983188f512edbc2d0b5e2028f06d8c5692cb7)
@@ -205,7 +205,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>
@@ -216,7 +216,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>
@@ -227,7 +227,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>
@@ -240,7 +240,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>
@@ -252,7 +252,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>
@@ -265,7 +265,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>
@@ -277,7 +277,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>
@@ -289,7 +289,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>
@@ -299,7 +299,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>
@@ -309,7 +309,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">
@@ -528,8 +528,8 @@
 				<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>