Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r3f478fc78fc8176489071ec12663230b4c48f172 -rd0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 3f478fc78fc8176489071ec12663230b4c48f172)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision d0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628)
@@ -103,6 +103,7 @@
 .component-sidebar .component-menu-btn label {
 	display: block;
 	font-size: 15px;
+	white-space: nowrap;
 }
 
 .component-sidebar .lesson-properties {
@@ -113,12 +114,14 @@
 .component-sidebar .lesson-properties #lessonDetails {
 	opacity: 0;
 	height: 0;
+	visibility: hidden;
 	transition: height 0s ease 0s;
 }
 
 .component-sidebar .lesson-properties.active #lessonDetails {
 	opacity: 1;
 	height: initial;
+	visibility: visible;
 	transition: opacity .3s ease .3s;
 }
 
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rfd7c55b02c1430bad3c5e057f7a2a25db97db1f3 -rd0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision fd7c55b02c1430bad3c5e057f7a2a25db97db1f3)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision d0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628)
@@ -82,52 +82,67 @@
 	
 	let tabContent = $('.monitoring-page-content .tab-content');
 		
-	if (tabName == 'sequence') {
-		tabContent.load(LAMS_URL + 'monitoring/monitoring/displaySequenceTab.do', function(){
-			openEventSource(LAMS_URL + 'monitoring/monitoring/getLearnerProgressUpdateFlux.do?lessonId=' +  lessonId,
-				function (event) {
-					if ("doRefresh" == event.data && $('#sequence-tab-content').length === 1){
-						updateSequenceTab();
-				}
-			});
-			refreshMonitor('sequence');
-			canvasFitScreen(learningDesignSvgFitScreen, true);
-			$("#load-sequence-tab-btn").addClass('active');
-		});
-	} else if (tabName == 'learners') {
-		tabContent.load(LAMS_URL + 'monitoring/monitoring/displayLearnersTab.do', function(){
-			refreshMonitor('learners');
-		});
-	} else if (tabName == 'gradebook') {
-		tabContent.load(LAMS_URL + 'monitoring/monitoring/displayGradebookTab.do', function(){
-			openEventSource(LAMS_URL + 'monitoring/monitoring/getGradebookUpdateFlux.do?lessonId=' +  lessonId,
-				function (event) {
-					if ("doRefresh" == event.data && $('#gradebookDiv').length === 1){
-					    let expandedGridIds = [],
-							userGrid = $('#userView'),
-							activityGrid = $('#activityView');
-						// do not update if grid is being edited by the teacher
-						if (userGrid.data('isCellEdited') === true || activityGrid.data('isCellEdited') === true) {
-							return;
-						}
-						
-					    $("tr:has(.sgexpanded)", userGrid).each(function () {
-					        let num = $(this).attr('id');
-					        expandedGridIds.push(num);
-					    });
-						userGrid.data('expandedGridIds', expandedGridIds).trigger("reloadGrid");
-						
-						expandedGridIds = [];
-					    $("tr:has(.sgexpanded)", activityGrid).each(function () {
-					        let num = $(this).attr('id');
-					        expandedGridIds.push(num);
-					    });
-						activityGrid.data('expandedGridIds', expandedGridIds).trigger("reloadGrid");
+		
+	switch(tabName) {
+		case 'sequence': {
+			tabContent.load(LAMS_URL + 'monitoring/monitoring/displaySequenceTab.do', function(){
+				openEventSource(LAMS_URL + 'monitoring/monitoring/getLearnerProgressUpdateFlux.do?lessonId=' +  lessonId,
+					function (event) {
+						if ("doRefresh" == event.data && $('#sequence-tab-content').length === 1){
+							updateSequenceTab();
 					}
 				});
-			
-			refreshMonitor('gradebook');
-		});
+				refreshMonitor('sequence');
+				canvasFitScreen(learningDesignSvgFitScreen, true);
+				$("#load-sequence-tab-btn").addClass('active');
+			});
+		}
+		break;
+		
+		case 'learners': {
+			tabContent.load(LAMS_URL + 'monitoring/monitoring/displayLearnersTab.do', function(){
+				refreshMonitor('learners');
+			});
+		}
+		break;
+		
+		case 'gradebook': {
+			tabContent.load(LAMS_URL + 'monitoring/monitoring/displayGradebookTab.do', function(){
+				openEventSource(LAMS_URL + 'monitoring/monitoring/getGradebookUpdateFlux.do?lessonId=' +  lessonId,
+					function (event) {
+						if ("doRefresh" == event.data && $('#gradebookDiv').length === 1){
+						    let expandedGridIds = [],
+								userGrid = $('#userView'),
+								activityGrid = $('#activityView');
+							// do not update if grid is being edited by the teacher
+							if (userGrid.data('isCellEdited') === true || activityGrid.data('isCellEdited') === true) {
+								return;
+							}
+							
+						    $("tr:has(.sgexpanded)", userGrid).each(function () {
+						        let num = $(this).attr('id');
+						        expandedGridIds.push(num);
+						    });
+							userGrid.data('expandedGridIds', expandedGridIds).trigger("reloadGrid");
+							
+							expandedGridIds = [];
+						    $("tr:has(.sgexpanded)", activityGrid).each(function () {
+						        let num = $(this).attr('id');
+						        expandedGridIds.push(num);
+						    });
+							activityGrid.data('expandedGridIds', expandedGridIds).trigger("reloadGrid");
+						}
+					});
+				
+				refreshMonitor('gradebook');
+			});
+		}
+		break;
+		
+		case 'teams': {
+			tabContent.load(LAMS_URL + 'monitoring/tblmonitor/teams.do?lessonID=' + lessonId);
+		}
+		break;
 	}
 }
 
@@ -155,6 +170,10 @@
 		loadTab('gradebook', this);
 	});
 	
+	$('#load-teams-tab-btn').click(function(){
+		loadTab('teams', this);
+	});
+	
 	$('#load-other-nvg-btn').click(function(){
 		let switchButton = $(this),
 			tblButtons = $('#tbl-navigate-btn-group'),
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -rf932b797330099220514e4c2acef885899567207 -rd0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision f932b797330099220514e4c2acef885899567207)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision d0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628)
@@ -236,22 +236,149 @@
 		</a>
 		
 		<div class="component-menu">
-			<div class="component-menu-btn">
-				<a href="/" class="btn btn-primary" title="<fmt:message key='label.monitoring.return.to.index' />">
-					<i class="fa fa-arrow-left fa-lg"></i>
-				</a>
-				<a id="edit-lesson-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.monitoring.edit.lesson.settings' />">
-					<i class="fa fa-pen fa-lg"></i>
-				</a>
-				<a id="load-sequence-tab-btn" href="#" class="btn btn-primary navigate-btn active" title="<fmt:message key='tab.sequence' />">
-					<i class="fa fa-sitemap fa-lg"></i>
-				</a>
-				<a id="load-learners-tab-btn" href="#" class="btn btn-primary navigate-btn" title="<fmt:message key='tab.learners' />">
-					<i class="fa fa-solid fa-user fa-lg"></i>
-				</a>
-				<a id="load-gradebook-tab-btn" href="#" class="btn btn-primary navigate-btn" title="<fmt:message key='tab.gradebook' />">
-					<i class="fa fa-solid fa-list-ol fa-lg"></i>
-				</a>
+			<div class="component-menu-btn d-flex flex-column align-items-center">
+				<div class="navigate-btn-container">
+					<a id="return-to-index-btn" href="/" class="btn btn-primary" title="<fmt:message key='label.monitoring.return.to.index' />">
+						<i class="fa fa-arrow-left fa-lg"></i>
+					</a>
+					<label for="return-to-index-btn">
+						Return
+					</label>
+				</div>
+								
+				<div class="navigate-btn-container">
+					<a id="load-sequence-tab-btn" href="#" class="btn btn-primary navigate-btn active" title="<fmt:message key='tab.sequence' />">
+						<i class="fa fa-cubes fa-lg"></i>
+					</a>
+					<label for="load-sequence-tab-btn">
+						<fmt:message key='tab.sequence' />
+					</label>
+				</div>
+				
+				<div id="navigate-btn-group" style="display: ${isTBLSequence ? 'none' : ''}">
+					<div class="navigate-btn-container">
+						<a id="edit-lesson-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.monitoring.edit.lesson.settings' />">
+							<i class="fa fa-pen fa-lg"></i>
+						</a>
+						<label for="edit-lesson-btn">
+							Edit
+						</label>
+					</div>
+	
+					<div class="navigate-btn-container">
+						<a id="load-learners-tab-btn" href="#" class="btn btn-primary navigate-btn" title="<fmt:message key='tab.learners' />">
+							<i class="fa fa-solid fa-users fa-lg"></i>
+						</a>
+						<label for="load-learners-tab-btn">
+							<fmt:message key='tab.learners' />
+						</label>
+					</div>
+					
+					<div class="navigate-btn-container">
+						<a id="load-gradebook-tab-btn" href="#" class="btn btn-primary navigate-btn" title="<fmt:message key='tab.gradebook' />">
+							<i class="fa fa-solid fa-list-ol fa-lg"></i>
+						</a>
+						<label for="load-gradebook-tab-btn">
+							<fmt:message key='tab.gradebook' />
+						</label>
+					</div>
+				</div>
+				
+				<c:if test="${isTBLSequence}">
+					<div id="tbl-navigate-btn-group" class="shown">
+						<div class="navigate-btn-container">
+							<a id="load-teams-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.teams' />">
+								<i class="fa fa-people-group fa-lg"></i>
+							</a>
+							<label for="load-teams-tab-btn">
+								<fmt:message key='label.teams' />
+							</label>
+						</div>
+						
+						<c:if test="${not empty isGatesAvailable}">
+							<div class="navigate-btn-container">
+								<a id="load-gates-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.gates' />">
+									<i class="fa fa-sign-in fa-lg"></i>
+								</a>
+								<label for="load-gates-tab-btn">
+									<fmt:message key='label.gates' />
+								</label>
+							</div>
+						</c:if>
+						
+						<c:if test="${not empty isIraMcqAvailable || not empty isIraAssessmentAvailable}">
+							<c:set var="iraMethodName">
+								<c:choose>
+									<c:when test="${not empty isIraMcqAvailable}">iraMcq</c:when>
+									<c:otherwise>iraAssessment</c:otherwise>
+								</c:choose>
+							</c:set>
+							
+							<div class="navigate-btn-container">
+								<a id="load-ira-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.ira' />"
+								   data-method="${iraMethodName}">
+									<i class="fa fa-user fa-lg"></i>
+								</a>
+								<label for="load-ira-tab-btn">
+									<fmt:message key='label.ira' />
+								</label>
+							</div>
+						</c:if>
+						
+						<c:if test="${not empty isScratchieAvailable}">
+							<div class="navigate-btn-container">
+								<a id="load-tra-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.tra' />">
+									<i class="fa fa-users fa-lg"></i>
+								</a>
+								<label for="load-tra-tab-btn">
+									<fmt:message key='label.tra' />
+								</label>
+							</div>
+							
+							<div class="navigate-btn-container">
+								<a id="load-burning-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.burning.questions' />">
+									<i class="fa fa-question-circle fa-lg"></i>
+								</a>
+								<label for="load-burning-tab-btn">
+									Burning Qs
+								</label>
+							</div>
+						</c:if>
+						
+						<c:if test="${not empty isAeAvailable}">
+							<div class="navigate-btn-container">
+								<a id="load-aes-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.aes' />">
+									<i class="fa fa-dashboard fa-lg"></i>
+								</a>
+								<label for="load-aes-tab-btn">
+									<fmt:message key='label.aes' />
+								</label>
+							</div>
+						</c:if>
+						
+						<c:if test="${not empty isPeerreviewAvailable}">
+							<div class="navigate-btn-container">
+								<a id="load-peer-review-tab-btn" class="btn btn-primary" href="#" title="<fmt:message key='label.peer.review' />">
+									<i class="fa fa-users fa-lg"></i>
+								</a>
+								<label for="load-aes-tab-btn">
+									<fmt:message key='label.peer.review' />
+								</label>
+							</div>
+						</c:if>
+					</div>
+					
+					<div class="navigate-btn-container">
+						<a id="load-other-nvg-btn" class="btn btn-primary" href="#" title="Show remaining options">
+							<i class="fa fa-angles-up fa-lg"></i>
+						</a>
+						<label for="load-teams-tab-btn">
+							Other
+						</label>
+					</div>
+				</c:if>
+				
+
 			</div>
 			
 			<div class="lesson-properties">