Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r37b5d00e61527a69c3338aa319b8e85cda5a667a -r81f928586161dd03042b6353f68c7d7b8279ccde
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 37b5d00e61527a69c3338aa319b8e85cda5a667a)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
@@ -11,7 +11,7 @@
 	height: 3rem;
 	border-color: var(--bs-gray-300);
 	border-bottom-width: 2px;
-    cursor: pointer;
+	cursor: pointer;
 }
 
 body.component .dialogContainer .dialogListItem:hover {
@@ -36,7 +36,7 @@
 }
 
 body.component .dialogContainer .dialogListItem.dialogListItemSelected {
-    background-color: rgba(0, 145, 74, 0.1) !important;
+	background-color: rgba(0, 145, 74, 0.1) !important;
 }
 
 body.component .dialogContainer #classMonitorSearchRow {
@@ -48,20 +48,20 @@
 	width: calc(100% - 12px);
 }
 
-body.component #sequenceInfoDialog {
-	cursor: pointer;
+.component-page-wrapper #lesson-name {
+	margin-left: 1.8rem;
 }
 
-.monitoring-page-content {
-	min-height: 100%;
-	padding: 1rem 4rem 2rem 8rem;
-	transition: all .3s ease;
-	vertical-align: top;
+.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;
+}
 
-.monitoring-page-wrapper #lesson-name {
-	font-size: 2rem;
-	margin-left: 1.8rem;
+body.component #sequenceInfoDialog {
+	cursor: pointer;
 }
 
 .monitoring-page-wrapper #sequenceSearchPhraseContainer {
@@ -71,19 +71,29 @@
 
 .monitoring-page-wrapper #sequenceSearchPhrase {
 	width: 15rem;
-} 
+}
 
 .monitoring-page-wrapper #sequenceSearchPhraseButton {
 	border: none;
 	height: 3rem;
-} 
+}
 
 .monitoring-page-wrapper #sequenceSearchPhraseClearIcon {
 	display: none;
 }
 
+.component-page-wrapper .component-sidebar {
+	width: 7rem;
+	border-radius: 0 0 1.2rem 1.2rem;
+	transform: translateX(-7rem);
+}
+
+.component-page-wrapper .component-sidebar.active {
+	transform: translateX(0);
+}
+
 .monitoring-page-wrapper .component-sidebar.active.expanded {
-	width: 25rem;	
+	width: 25rem;
 }
 
 .monitoring-page-wrapper .component-sidebar.active.expanded ~ .monitoring-page-content.active {
@@ -141,6 +151,10 @@
 	margin-top: 1rem;
 }
 
+.component-page-wrapper .monitoring-page-content {
+	padding: 1rem 4rem 2rem 8rem;
+}
+
 .monitoring-page-wrapper .monitoring-panel {
 	display: inline-block;
 	width: 100%;
@@ -161,7 +175,7 @@
 }
 
 .monitoring-page-wrapper #sequence-tab-content {
-	text-align: center;	
+	text-align: center;
 }
 
 .monitoring-page-wrapper #sequence-tab-content .countdown-timeout {
@@ -203,7 +217,7 @@
 }
 
 .monitoring-page-wrapper #sequence-tab-content #required-tasks .dropdown-menu {
-	padding: 0;	
+	padding: 0;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #required-tasks .dropdown-item {
@@ -238,7 +252,7 @@
 .monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing,
 .monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design,
 .monitoring-page-wrapper #sequence-tab-content #canvas-container.svg-learner-draggable-area.force-completing div#sequenceCanvas svg.svg-learning-design * {
-	cursor: wait !important;	
+	cursor: wait !important;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.learner-icon-container {
@@ -263,12 +277,12 @@
 }
 
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched
-	{
+{
 	border: none;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before
-	{
+{
 	border: red 3px solid;
 	border-radius: 25px;
 }
@@ -345,7 +359,7 @@
 }
 
 .monitoring-page-wrapper #learners-accordion .no-progress {
-	display: none;	
+	display: none;
 	text-align: center;
 	position: relative;
 	top: 33%;