Index: lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/GateController.java
===================================================================
diff -u -rbeaa199615fcde4a870870eb2ae9088455d0dc8e -r89da5ec382514ba94e3b2f2b8661ec28b42f7afe
--- lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/GateController.java	(.../GateController.java)	(revision beaa199615fcde4a870870eb2ae9088455d0dc8e)
+++ lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/GateController.java	(.../GateController.java)	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -255,7 +255,7 @@
 		return "gate/passwordGateContent";
 	    }
 
-	    return "gate/permissionGateContent";
+	    return "gate/permissionGateContent5";
 	} else {
 	    throw new MonitoringServiceException("Invalid gate activity. " + "gate id [" + gate.getActivityId()
 		    + "] - the type [" + gate.getActivityTypeId() + "] is not a gate type");
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -rc9048d2a6d579af33cc6b3a36e716715be8e9b2b -r89da5ec382514ba94e3b2f2b8661ec28b42f7afe
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision c9048d2a6d579af33cc6b3a36e716715be8e9b2b)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -1252,3 +1252,10 @@
 	--bs-table-accent-bg: var(--bs-gray-200);
 }
 
+.gate-card .card-body {
+	height: 80px;
+}
+
+.gate-opened-icon {
+	cursor: pointer;
+}
\ No newline at end of file
Index: lams_monitoring/web/gate/gateInfo5.jsp
===================================================================
diff -u
--- lams_monitoring/web/gate/gateInfo5.jsp	(revision 0)
+++ lams_monitoring/web/gate/gateInfo5.jsp	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -0,0 +1,36 @@
+<%@ include file="/taglibs.jsp"%>
+
+
+<!--waiting learner information table-->
+
+<c:if test="${not gateForm.gate.gateOpen}">
+	<div class="text-center">
+		<div id="gateStatus" class="w-50 d-inline-block alert alert-danger">
+			<i class="fa fa-lg fa-minus-circle"></i>
+			<strong><fmt:message key="label.gate.closed"/></strong>
+		</div>
+	</div>
+</c:if>		
+
+<c:if test="${not empty gateForm.gate.description}">
+	<!-- general information section-->
+	<h5>
+		<lams:out value="${gateForm.gate.description}" escapeHtml="true" />
+	</h5>
+</c:if>
+
+<p id="gate-waiting-learners-p">
+	<span><fmt:message key="label.grouping.status"/></span> 
+	<strong> <fmt:message key="label.gate.waiting.learners">
+			<fmt:param value="${gateForm.waitingLearners}" />
+			<fmt:param value="${gateForm.totalLearners}" />
+		</fmt:message>
+	</strong>
+</p>
+
+
+<c:if test="${not gateForm.gate.gateOpen and gateForm.gate.gateStopAtPrecedingActivity}">
+	<p>
+		<fmt:message key="label.gate.stop.at.preceding"/>
+	</p>
+</c:if>
\ No newline at end of file
Index: lams_monitoring/web/gate/gateStatus5.jsp
===================================================================
diff -u
--- lams_monitoring/web/gate/gateStatus5.jsp	(revision 0)
+++ lams_monitoring/web/gate/gateStatus5.jsp	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -0,0 +1,61 @@
+<%@ include file="/taglibs.jsp"%>
+<script type="text/javascript">
+	$(document).ready(function() {
+		$("time.timeago").timeago();
+
+		<c:if test="${param.closingGate eq 'true' and not gateForm.gate.gateOpen}">
+			let opener = window.opener ? window.opener.document : null;
+			// refresh gate tab in TBL monitoring
+			if (window.opener && window.opener.document.URL.indexOf('#gates') > -1) {
+				window.opener.location.reload();
+			}
+		</c:if>
+
+		<c:if test="${gateJustToggled}">
+			if (window.opener && typeof window.opener.updateSequenceTab === 'function') {
+				window.opener.updateLessonTab();
+				window.opener.updateSequenceTab();
+			}
+		</c:if>
+	});
+</script>
+	        
+<c:if test="${not gateForm.gate.gateOpen}">
+	<c:if test="${not GateForm.readOnly}">
+		<form:form action="openGate.do" id="gateForm" modelAttribute="gateForm" target="_self">
+			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+			<input type="hidden" name="activityId" value="${gateForm.activityId}" />
+			<p>
+				<input type="submit"  id="openGateButton" class="btn btn-primary" value="<fmt:message key="label.gate.open"/>" />
+			</p>
+		</form:form>
+	</c:if>    
+</c:if>
+<c:if test="${gateForm.gate.gateOpen}">
+	<div id="gateStatus" class="alert alert-success p-3 mb-3">
+		<i class="fa fa-lg fa-sign-in"></i>
+		<strong>
+			<fmt:message key="label.gate.gate.open"/>
+			<c:if test="${not empty gateForm.gate.gateOpenTime}">
+				&nbsp;<lams:Date value="${gateForm.gate.gateOpenTime}" timeago="true" />
+			</c:if>
+			<c:if test="${not empty gateForm.gate.gateOpenUser}">
+				&nbsp;<fmt:message key="label.gate.gate.open.user">
+					<fmt:param value="${gateForm.gate.gateOpenUser.firstName} ${gateForm.gate.gateOpenUser.lastName}" />
+				</fmt:message>
+			</c:if>
+		</strong>
+	</div>
+	
+			
+	<form:form action="closeGate.do">
+		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+		<input type="hidden" name="activityId" value="${gateForm.activityId}" />
+		<input type="hidden" name="closingGate" value="true" />
+		<p>
+			<input type="submit" class="btn btn-danger"
+				   title="<fmt:message key="button.task.gate.close.tooltip"/>"
+				   value="<fmt:message key="button.task.gate.close"/>" />
+		</p>
+	</form:form>
+</c:if>
Index: lams_monitoring/web/gate/openGateSingleUser5.jsp
===================================================================
diff -u
--- lams_monitoring/web/gate/openGateSingleUser5.jsp	(revision 0)
+++ lams_monitoring/web/gate/openGateSingleUser5.jsp	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -0,0 +1,104 @@
+			<style type="text/css">
+				.gateLearners {
+					height: 300px;
+					overflow: auto;
+					padding: 5px 0 5px 5px;
+				}
+				
+			</style>
+								
+			<script type="text/javascript">
+			
+				function selectUnselectAll(column){
+					if ( $("#all-select-"+column).is(":checked") ) {
+						$("[id^="+column+"-]:input[type='checkbox']").prop("checked", true);
+					} else {
+						$("[id^="+column+"-]:input[type='checkbox']").prop("checked", false);
+					}
+				}
+				
+				function updateSelectAll(column){
+					$("#all-select-"+column).prop("checked", 
+							$("[id^="+column+"-]:input[type='checkbox']").length == $("[id^="+column+"-]:input[type='checkbox']:checked").length );
+				}
+			</script>
+			
+<hr />
+<p><fmt:message key="label.gate.open.single.learner"/></p>
+<form:form action="openGateForSingleUser.do" id="gateForm" modelAttribute="gateForm" target="_self">
+	<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+	<input type="hidden" id="activityId" name="activityId" value="${gateForm.activityId}" />
+	<input type="hidden" id="userId" name="userId" />
+	<div class="container-fluid">
+		<div class="row">
+			<div class="col-4">		
+				<div class="form-check text-danger text-center mb-2">
+					<input id="all-select-forbidden" class="form-check-input" 
+						   type="checkbox" value="${learner.userId}" onClick="javascript:selectUnselectAll('forbidden')" />
+					<label for="all-select-forbidden" class="form-check-label">
+						<strong><fmt:message key="label.gate.list.all.learners"/></strong>
+					</label>
+				</div>		   
+				<div class="card">
+					<div class="card-body gateLearners"  id="forbidden">
+						<c:forEach var="learner" items="${gateForm.forbiddenLearnerList}">
+							<div class="form-check mb-1">
+								<input id="forbidden-${learner.userId}" class="form-check-input" 
+									   type="checkbox" value="${learner.userId}" onClick="javascript:updateSelectAll('forbidden')" />
+								<label for="forbidden-${learner.userId}" class="form-check-label">
+									<c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/>
+								</label>
+							</div>
+						</c:forEach>
+					</div>
+				</div>
+				<input type="submit" class="btn btn-secondary w-100 mt-2" 
+					   value="<fmt:message key="label.gate.allow"/>"
+					   onclick="javascript:allowUsers('forbidden')"/>	
+			</div>
+			
+			<div class="col-4">
+				<div class="form-check text-center mb-2">
+					<input id="all-select-waiting" class="form-check-input" 
+						   type="checkbox" value="${learner.userId}" onClick="javascript:selectUnselectAll('waiting')" />
+					<label for="all-select-waiting" class="form-check-label">
+						<strong><fmt:message key="label.gate.list.waiting.learners"/></strong>
+					</label>
+				</div>	
+				<div class="card">
+					<div class="card-body gateLearners" id="waiting">
+						<c:forEach var="learner" items="${gateForm.waitingLearnerList}">
+							<div class="form-check mb-1">
+								<input id="waiting-${learner.userId}" class="form-check-input" 
+									   type="checkbox" value="${learner.userId}" onClick="javascript:updateSelectAll('waiting')" />
+								<label for="waiting-${learner.userId}" class="form-check-label">
+									<c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/>
+								</label>
+							</div>
+						</c:forEach>
+					</div>
+				</div>
+				<input type="submit" class="btn btn-secondary w-100 mt-2" 
+					   value="<fmt:message key="label.gate.allow"/>"
+					   onclick="javascript:allowUsers('waiting')"/>
+			</div>
+					
+			<div class="col-4">
+					<div class="form-check text-center text-success mb-2">
+					<label for="all-select-waiting" class="form-check-label">
+						<strong><fmt:message key="label.gate.list.allowed.learners"/></strong>
+					</label>
+				</div>	
+				<div class="card">
+					<div class="card-body gateLearners">
+						<c:forEach var="learner" items="${gateForm.allowedToPassLearnerList}">
+							<label class="form-check-label"><c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/></label>
+							<br />
+						</c:forEach>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>	
+
+</form:form>		
Index: lams_monitoring/web/gate/permissionGateContent5.jsp
===================================================================
diff -u
--- lams_monitoring/web/gate/permissionGateContent5.jsp	(revision 0)
+++ lams_monitoring/web/gate/permissionGateContent5.jsp	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -0,0 +1,61 @@
+<%-- 
+Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+License Information: http://lamsfoundation.org/licensing/lams/2.0/
+
+  This program is free software; you can redistribute it and/or modify
+  it under the terms of the GNU General Public License version 2 as 
+  published by the Free Software Foundation.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program; if not, write to the Free Software
+  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+  USA
+
+  http://www.gnu.org/licenses/gpl.txt
+--%>
+<!DOCTYPE html>
+
+<%@ include file="/taglibs.jsp"%>
+
+<lams:html>
+    <lams:head>
+    	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+		<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+	
+    	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+		<script type="text/javascript">
+			function allowUsers(who){
+				var allowed = '';
+				$('#' + who + ' input:checked').each(function(){
+					allowed += $(this).val() + ',';
+				});
+				if (allowed == ''){
+					return false;
+				}
+				$('#userId').val(allowed);
+				return true;
+			}
+		</script>
+    </lams:head>
+    
+    <body class="px-2">
+		<h3 class="text-center"><fmt:message key="label.permission.gate.title"/></h3>
+			
+		<%@ include file="gateInfo5.jsp" %>
+		
+		<c:if test="${not gateForm.gate.gateOpen}" >
+			<p><fmt:message key="label.gate.you.open.message"/></p>
+		</c:if>
+
+		<%@ include file="gateStatus5.jsp" %>
+		<c:if test="${not gateForm.gate.gateOpen}" >
+					<%@ include file="openGateSingleUser5.jsp" %>
+		</c:if>
+    </body>
+</lams:html>
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38 -r89da5ec382514ba94e3b2f2b8661ec28b42f7afe
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -143,6 +143,11 @@
 			tabContent.load(LAMS_URL + 'monitoring/tblmonitor/teams.do?lessonID=' + lessonId);
 		}
 		break;
+		
+		case 'gates': {
+			tabContent.load(LAMS_URL + 'monitoring/tblmonitor/gates.do?lessonID=' + lessonId);
+		}
+		break;
 	}
 }
 
@@ -174,6 +179,10 @@
 		loadTab('teams', this);
 	});
 	
+	$('#load-gates-tab-btn').click(function(){
+		loadTab('gates', this);
+	});
+	
 	$('#load-other-nvg-btn').click(function(){
 		let switchButton = $(this),
 			tblButtons = $('#tbl-navigate-btn-group'),
@@ -2752,6 +2761,8 @@
 		updateGradebookTab();
 	} else if (tabName == 'teams'){
 		loadTab('teams');
+	} else if (tabName == 'gates'){
+		loadTab('gates');
 	}
 }
 
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -rd0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628 -r89da5ec382514ba94e3b2f2b8661ec28b42f7afe
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision d0a966a0d817bebcc0ffbc9fa386e5ab5e8f3628)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <%@ include file="/taglibs.jsp"%>
+
+<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
+
 <lams:html>
 <head>
 	<meta charset="utf-8" />
@@ -25,6 +28,8 @@
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.cookie.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.timeago.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/popper.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/x-editable5.js"></script>
Index: lams_monitoring/web/tblmonitor/gates5.jsp
===================================================================
diff -u -rfd09b5f6803a74b4660114e2bacc234bf9ba7c38 -r89da5ec382514ba94e3b2f2b8661ec28b42f7afe
--- lams_monitoring/web/tblmonitor/gates5.jsp	(.../gates5.jsp)	(revision fd09b5f6803a74b4660114e2bacc234bf9ba7c38)
+++ lams_monitoring/web/tblmonitor/gates5.jsp	(.../gates5.jsp)	(revision 89da5ec382514ba94e3b2f2b8661ec28b42f7afe)
@@ -1,11 +1,7 @@
 <%@ include file="/taglibs.jsp"%>
 
-<c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
-<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.timeago.js"></script>
-<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-
 <script type="text/javascript">
-	$(document).ready(function() {$("time.timeago").timeago();});
+	$(document).ready(function() {$("time.timeago").timeago();}); 
 	
 
 	function openGateNow(activityId) {
@@ -18,55 +14,76 @@
 			'url'  : '<lams:LAMSURL/>monitoring/gate/openGate.do',
 			'data'  : data,
 			'success' : function(){
-				refresh();
+				loadTab('gates');
 			}
 		});
 	}
+
+	function openGateSelectively(url){
+		showDialog("dialogGate", {
+			'autoOpen'  : true,
+			'height'    : 820,
+			'modal'     : false,
+			'resizable' : false,
+			'title'     : '<fmt:message key="button.task.gate.open"/>',
+			'open'      : function(){
+				var dialog = $(this);
+				// load contents after opening the dialog
+				$('iframe', dialog).attr('src', url);
+			},
+			'close' : function(){
+				loadTab('gates');
+			}
+		}, false, true).addClass('modal-lg');
+	}
+	
 </script>
 
-<!-- Header -->
-<div class="row no-gutter">
-	<div class="col-xs-12 col-md-12 col-lg-8">
-		<h3>
-			<fmt:message key="label.gates"/>
-		</h3>
-	</div>
-</div>
-<!-- End header -->
 
-<!-- Tables -->
-<div class="row no-gutter">
-<div class="col-xs-12 col-md-12 col-lg-12">
 
+<!-- Tables -->
+<div class="text-center">
+	<h3>
+		<fmt:message key="label.gates"/>
+	</h3>
+	
 	<c:forEach var="permissionGate" items="${permissionGates}">
-			
-		<div class="panel panel-default">
-			<div class="panel-heading">
-			</div>
-			
-			<div class="panel-body">
-				<c:out value="${permissionGate.title}" escapeXml="false"/>
+		<div class="card w-50 mb-3 d-inline-block text-start gate-card">
+			<div class="card-body">
+				<span class="card-title"><c:out value="${permissionGate.title}" escapeXml="false"/></span>
 				<c:choose>
 					<c:when test="${permissionGate.complete}">
+						<i class="fa fa-check-square gate-opened-icon fs-3 text-success float-end mt-2" 
+						   onClick="javascript:openGateSelectively('${permissionGate.url}')"
+						   title="<fmt:message key='button.task.gate.opened.tooltip'/>"></i>
 						<br />
 						<small>
-						<fmt:message key="label.gate.gate.open"/>
-						<c:if test="${not empty permissionGate.openTime}">
-							&nbsp;<lams:Date value="${permissionGate.openTime}" timeago="true" />
-						</c:if>
-						<c:if test="${not empty permissionGate.openUser}">
-							&nbsp;<fmt:message key="label.gate.gate.open.user">
-								<fmt:param value="${permissionGate.openUser}" />
-							</fmt:message>
-						</c:if>
+							<fmt:message key="label.gate.gate.open"/>
+							<c:if test="${not empty permissionGate.openTime}">
+								&nbsp;<lams:Date value="${permissionGate.openTime}" timeago="true" />
+							</c:if>
+							<c:if test="${not empty permissionGate.openUser}">
+								&nbsp;<fmt:message key="label.gate.gate.open.user">
+									<fmt:param value="${permissionGate.openUser}" />
+								</fmt:message>
+							</c:if>
 						</small>
-						<i class="fa fa-check-square" 
-						   onClick="javascript:openPopUp('${permissionGate.url}','ContributeActivity', 600, 800, true)"
-						   title="<fmt:message key='button.task.gate.opened.tooltip'/>"></i>
+
 					</c:when>
 					<c:otherwise>
+						<button type="button" class="btn btn-sm btn-primary float-end ms-3 mt-2"
+								title="<fmt:message key='button.task.gate.open.tooltip'/>"
+								onClick="javascript:openGateSelectively('${permissionGate.url}')">
+							<fmt:message key="button.task.gate.open"/>
+						</button>
+						<button type="button" class="btn btn-sm btn-primary float-end mt-2"
+								title="<fmt:message key='button.task.gate.open.now.tooltip'/>"
+								onClick="javascript:openGateNow(${permissionGate.activityID})">
+							<fmt:message key="button.task.gate.open.now"/>
+						</button>
+						
 						<c:if test="${permissionGate.waitingLearnersCount > 0}">
-							<br/>
+							<br />
 							<small class="m-r">
 								<i class="fa fa-users fa-users-at-gate"></i>
 													 
@@ -75,24 +92,11 @@
 								</fmt:message>
 							</small>
 						</c:if>
-
-						<button type="button" class="btn btn-sm btn-primary pull-right loffset10"
-								title="<fmt:message key='button.task.gate.open.tooltip'/>"
-								onClick="javascript:openPopUp('${permissionGate.url}','ContributeActivity', 600, 800, true)">
-							<fmt:message key="button.task.gate.open"/>
-						</button>
-						<button type="button" class="btn btn-sm btn-primary pull-right"
-								title="<fmt:message key='button.task.gate.open.now.tooltip'/>"
-								onClick="javascript:openGateNow(${permissionGate.activityID})">
-							<fmt:message key="button.task.gate.open.now"/>
-						</button>
 					</c:otherwise>
 				</c:choose>
 						
 			</div>
 		</div>			
 			
 	</c:forEach> 
-
-</div>
-</div>
+</div>
\ No newline at end of file