Index: lams_central/web/css/vertical-timeline.css
===================================================================
diff -u -rff9f51378eb2ac41ff5c96ba9263f1d51b37a075 -r7ecadc30076e09aa7a50a2c495344c56622f5105
--- lams_central/web/css/vertical-timeline.css	(.../vertical-timeline.css)	(revision ff9f51378eb2ac41ff5c96ba9263f1d51b37a075)
+++ lams_central/web/css/vertical-timeline.css	(.../vertical-timeline.css)	(revision 7ecadc30076e09aa7a50a2c495344c56622f5105)
@@ -180,4 +180,5 @@
 
 .vertical-timeline .timeline-entry .timeline-entry-inner .timeline-icon img {
 	width: 25px;
+	margin-top: -2px;
 }
\ No newline at end of file
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -rff9f51378eb2ac41ff5c96ba9263f1d51b37a075 -r7ecadc30076e09aa7a50a2c495344c56622f5105
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision ff9f51378eb2ac41ff5c96ba9263f1d51b37a075)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 7ecadc30076e09aa7a50a2c495344c56622f5105)
@@ -110,7 +110,7 @@
 }
 
 .monitoring-page-content .monitoring-layout-element > div {
-	margin: 1.8rem auto 0 auto;
+	margin: 0 auto;
 }
 
 .monitoring-page-content .graph-grades {
@@ -284,7 +284,6 @@
 	box-shadow: 0px 20px 20px #2E384D1A;
 	background-color: #fff;
 	border-radius: 1.2rem;
-	margin-top: 1.8rem;
 	margin-bottom: 2rem;
 	padding: 1.5rem 2rem;
 }
@@ -1011,46 +1010,75 @@
 	margin-top: 3px;
 }
 
-#canvas-container .portrait-color-0 {
+#canvas-container .leader-display {
+	margin: 0px;
+}
+
+#canvas-container .leader-display h4 {
+	margin-bottom: 0px;
+}
+
+#canvas-container .popover-link {
+	color: #337ab7 !important;
+}
+
+#canvas-container .popover-link:hover {
+	color: #0E9AEF !important;
+}
+
+#canvas-container .popover-link:focus {
+	color: #0E9AEF !important;
+}
+
+#canvas-container .popover-title {
+	background-color: #dddddd;
+}
+
+#canvas-container .popover-content-with-portrait {
+	min-height: 220px;
+	min-width: 220px;
+}
+
+.portrait-color-0 {
 	color: #001f3f;
 }
 
-#canvas-container .portrait-color-1 {
+.portrait-color-1 {
 	color: #FF851B;
 }
 
-#canvas-container .portrait-color-2 {
+.portrait-color-2 {
 	color: #85144b;
 }
 
-#canvas-container .portrait-color-3 {
+.portrait-color-3 {
 	color: #111111;
 }
 
-#canvas-container .portrait-color-4 {
+.portrait-color-4 {
 	color: #3D9970;
 }
 
-#canvas-container .portrait-color-5 {
+.portrait-color-5 {
 	color: #0074D9;
 }
 
-#canvas-container .portrait-color-6 {
+.portrait-color-6 {
 	color: #FF4136;
 }
 
-#canvas-container .portrait-sm-lineheight {
+.portrait-sm-lineheight {
 	line-height: 32px;
 	vertical-align: top;
 }
 
-#canvas-container .portrait-generic-sm {
+.portrait-generic-sm {
 	display: inline-block;
 	height: 35px;
 	vertical-align: middle;
 }
 
-#canvas-container .portrait-generic-sm:before {
+.portrait-generic-sm:before {
 	content: "\f2be";
 	font-family: FontAwesome;
 	font-style: normal;
@@ -1059,13 +1087,13 @@
 	line-height: 35px;
 }
 
-#canvas-container .portrait-generic-md {
+.portrait-generic-md {
 	display: inline-block;
 	height: 80px;
 	vertical-align: middle;
 }
 
-#canvas-container .portrait-generic-md:before {
+.portrait-generic-md:before {
 	content: "\f2be";
 	font-family: FontAwesome;
 	font-style: normal;
@@ -1074,13 +1102,13 @@
 	line-height: 65px;
 }
 
-#canvas-container .portrait-generic-lg {
+.portrait-generic-lg {
 	display: inline-block;
 	height: 200px;
 	vertical-align: middle;
 }
 
-#canvas-container .portrait-generic-lg:before {
+.portrait-generic-lg:before {
 	content: "\f2be";
 	font-family: FontAwesome;
 	font-style: normal;
@@ -1089,50 +1117,19 @@
 	line-height: 200px;
 }
 
-#canvas-container .portrait-generic-xl {
-	display: inline-block;
-	height: 400px;
-	vertical-align: middle;
+.learners-accordion-item-template {
+	display: none;
 }
 
-#canvas-container .portrait-generic-xl:before {
-	content: "\f2be";
-	font-family: FontAwesome;
-	font-style: normal;
-	font-size: 400px;
-	font-weight: normal;
-	line-height: 400px;
+#learners-accordion .accordion-body {
+	background-color: #F6F5FA;
 }
 
-#canvas-container .leader-display {
-	margin: 0px;
+#learners-accordion .no-progress {
+	display: none;	
 }
 
-#canvas-container .leader-display h4 {
-	margin-bottom: 0px;
-}
-
-#canvas-container .popover-link {
-	color: #337ab7 !important;
-}
-
-#canvas-container .popover-link:hover {
-	color: #0E9AEF !important;
-}
-
-#canvas-container .popover-link:focus {
-	color: #0E9AEF !important;
-}
-
-#canvas-container .popover-title {
-	background-color: #dddddd;
-}
-
-#canvas-container .popover-content-with-portrait {
-	min-height: 220px;
-	min-width: 220px;
-}
-
-.vertical-timeline {
-	transform: translateX(-40%);
+#learners-accordion .vertical-timeline {
+	display: none;
+	transform: translateX(-25%);
 }
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rff9f51378eb2ac41ff5c96ba9263f1d51b37a075 -r7ecadc30076e09aa7a50a2c495344c56622f5105
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision ff9f51378eb2ac41ff5c96ba9263f1d51b37a075)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 7ecadc30076e09aa7a50a2c495344c56622f5105)
@@ -2232,7 +2232,82 @@
  * Refreshes the existing progress bars. 
  */
 function updateLearnersTab(){
-	//TODO
+	let learnersAccordion = $('#learners-accordion').empty(),
+			itemTemplate = $('.learners-accordion-item-template').clone().removeClass('learners-accordion-item-template');
+		
+	$.ajax({
+		'url' : LAMS_URL + 'monitoring/monitoring/getLearnerProgressPage.do',
+		'data': {
+			lessonID: lessonId
+		},
+		'dataType' : 'json',
+		'success'  : function(response) {
+
+			$(response.learners).each(function(){
+				let learner = this,
+					itemHeaderId = 'learners-accordion-heading-' + learner.id,
+					itemCollapseId = 'learners-accordion-collapse-' + learner.id,
+					item = itemTemplate.clone().data('user-id', learner.id).appendTo(learnersAccordion),
+					portrait = learner.portraitId ? null : $(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL)).addClass('me-2');
+				$('.accordion-header', item).attr('id', itemHeaderId)
+					   .find('.accordion-button').attr('data-bs-target', '#' + itemCollapseId).attr('aria-controls', itemCollapseId)
+											  .html('<span>' + learner.firstName + ' ' + learner.lastName + '</span>')
+											  .prepend(portrait == null ? '' : portrait);
+				$('.accordion-collapse', item).attr('id', itemCollapseId).attr('data-bs-parent', '#learners-accordion')
+					  .on('show.bs.collapse', function () {
+						let learnerId = $(this).closest('.accordion-item').data('user-id'),
+							timeline = $('.vertical-timeline', this).empty(),
+							noProgressLabel = $('.no-progress', this);
+						
+						$.ajax({
+							'url' : LAMS_URL + 'learning/learner/getLearnerProgress.do',
+							'data': {
+								lessonID: lessonId,
+								userID  : learnerId
+							},
+							'dataType' : 'json',
+							'success'  : function(response) {
+								if (!response) {
+									noProgressLabel.show();
+									timeline.hide();
+									return;
+								}
+								noProgressLabel.hide();
+								
+								$(response.activities).each(function(){
+									let activity = this,
+										entry = $('<article />').addClass('timeline-entry').appendTo(timeline),
+										innerEntry = $('<div />').addClass('timeline-entry-inner').appendTo(entry),
+										icon = $('<div />').addClass('timeline-icon').appendTo(innerEntry),
+										content = $('<div />').addClass('timeline-label').appendTo(innerEntry),
+										title = $('<h4 />').addClass('timeline-title').text(activity.name).appendTo(content);
+
+									switch(activity.status){
+										case 0: icon.addClass('bg-primary');break;
+										case 1: icon.addClass('bg-success');break;
+									}
+
+									let iconURL = null;
+									if (activity.iconURL) {
+										iconURL = activity.iconURL;
+									} else if (activity.type === 'g') {
+										iconURL = 'images/svg/gateClosed.svg';
+									} else if (activity.type === 'o') {
+										iconURL = 'images/svg/branchingStart.svg';
+									}
+
+									if (iconURL) {
+										$('<img />').attr('src', LAMS_URL + iconURL).appendTo(icon);
+									}
+								});
+								
+								timeline.show();
+							}
+						});
+					  });
+				});
+		}
+	});
 }
 
 //********** COMMON FUNCTIONS **********
Index: lams_monitoring/web/monitor-learners-tab.jsp
===================================================================
diff -u -rff9f51378eb2ac41ff5c96ba9263f1d51b37a075 -r7ecadc30076e09aa7a50a2c495344c56622f5105
--- lams_monitoring/web/monitor-learners-tab.jsp	(.../monitor-learners-tab.jsp)	(revision ff9f51378eb2ac41ff5c96ba9263f1d51b37a075)
+++ lams_monitoring/web/monitor-learners-tab.jsp	(.../monitor-learners-tab.jsp)	(revision 7ecadc30076e09aa7a50a2c495344c56622f5105)
@@ -1,36 +1,25 @@
 <!DOCTYPE html>
 <%@ include file="/taglibs.jsp"%>
-<script>
-	$(document).ready(function(){
-		$.ajax({
-			'url' : LAMS_URL + 'learning/learner/getLearnerProgress.do',
-			'data': {
-				lessonID: lessonId
-			},
-			'dataType' : 'json',
-			'success'  : function(response) {
-				$(response.activities).each(function(){
-					let activity = this,
-						entry = $('<article />').addClass('timeline-entry').appendTo('.vertical-timeline'),
-						innerEntry = $('<div />').addClass('timeline-entry-inner').appendTo(entry),
-						icon = $('<div />').addClass('timeline-icon').appendTo(innerEntry),
-						content = $('<div />').addClass('timeline-label').appendTo(innerEntry),
-						title = $('<h4 />').addClass('timeline-title').text(activity.name).appendTo(content);
 
-					switch(activity.status){
-						case 0: icon.addClass('bg-primary');break;
-						case 1: icon.addClass('bg-success');break;
-					}
+<div id="learners-accordion" class="accordion">
+</div>
 
-					if (activity.iconURL) {
-						$('<img />').attr('src', LAMS_URL + activity.iconURL).appendTo(icon);
-					}
-				});
-			}
-		});
-	});
-</script>
 
+<div class="learners-accordion-item-template accordion-item">
+  <h2 class="accordion-header">
+    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-expanded="false">
+    </button>
+  </h2>
+  <div class="accordion-collapse collapse">
+	<div class="accordion-body">
+		<h5 class="no-progress">No progress yet</h5>
+		<div class="vertical-timeline timeline-sm">
+		</div>
+    </div>
+   </div>
+</div>
+
+<%--
 <div class="vertical-timeline timeline-sm">
 	<article class="timeline-entry">
 		<div class="timeline-entry-inner">
@@ -93,3 +82,4 @@
 		</div>
 	</article>
 </div>
+ --%>
\ No newline at end of file
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -rff9f51378eb2ac41ff5c96ba9263f1d51b37a075 -r7ecadc30076e09aa7a50a2c495344c56622f5105
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision ff9f51378eb2ac41ff5c96ba9263f1d51b37a075)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 7ecadc30076e09aa7a50a2c495344c56622f5105)
@@ -423,7 +423,7 @@
 			</div>
 		</header>
 		
-		<div class="tab-content">
+		<div class="tab-content pt-4">
 			
 		</div>
 	</div>