Index: lams_central/web/css/free.ui.jqgrid.custom.css
===================================================================
diff -u -r2bdc681a324a92f1b630dfd888223eedff8ca097 -r6582c67f62fe86aeb15f5b7e21b54a82952ec3d3
--- lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision 2bdc681a324a92f1b630dfd888223eedff8ca097)
+++ lams_central/web/css/free.ui.jqgrid.custom.css	(.../free.ui.jqgrid.custom.css)	(revision 6582c67f62fe86aeb15f5b7e21b54a82952ec3d3)
@@ -91,7 +91,7 @@
 .ui-jqgrid .ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close {
 	top: 40%;
 }
-.ui-jqgrid .ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span.fa-solid {
+.ui-jqgrid .ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span.fas {
 	font-size: 1.3rem;
 }
 
@@ -153,4 +153,8 @@
 
 .ui-jqgrid.ui-jqgrid-bootstrap .ui-search-toolbar .ui-search-table .ui-search-clear > a {
 	font-size: 30px;
+}
+
+.ui-jqgrid.ui-jqgrid-bootstrap .ui-search-toolbar .ui-search-table .ui-search-input {
+	width: 90%;
 }
\ No newline at end of file
Index: lams_gradebook/src/java/org/lamsfoundation/lams/gradebook/web/controller/GradebookMonitoringController.java
===================================================================
diff -u -re3931b3fb440adbb62e0ab4112df71f620050066 -r6582c67f62fe86aeb15f5b7e21b54a82952ec3d3
--- lams_gradebook/src/java/org/lamsfoundation/lams/gradebook/web/controller/GradebookMonitoringController.java	(.../GradebookMonitoringController.java)	(revision e3931b3fb440adbb62e0ab4112df71f620050066)
+++ lams_gradebook/src/java/org/lamsfoundation/lams/gradebook/web/controller/GradebookMonitoringController.java	(.../GradebookMonitoringController.java)	(revision 6582c67f62fe86aeb15f5b7e21b54a82952ec3d3)
@@ -271,7 +271,8 @@
     }
 
     @RequestMapping("/displayReleaseMarksPanel")
-    public String displayReleaseMarksPanel(@RequestParam long lessonID, Model model) {
+    public String displayReleaseMarksPanel(@RequestParam long lessonID, @RequestParam(required = false) boolean isTab,
+	    Model model) {
 	Lesson lesson = lessonService.getLesson(lessonID);
 	if (lesson.getMarksReleased()) {
 	    model.addAttribute("marksReleased", true);
@@ -290,7 +291,7 @@
 	    }
 	}
 
-	return "releaseLessonMarks";
+	return "releaseLessonMarks" + (isTab ? "5" : "");
     }
 
     @RequestMapping("/getReleaseMarksEmailContent")
Index: lams_gradebook/web/gradebookMonitorContent5.jsp
===================================================================
diff -u -re3931b3fb440adbb62e0ab4112df71f620050066 -r6582c67f62fe86aeb15f5b7e21b54a82952ec3d3
--- lams_gradebook/web/gradebookMonitorContent5.jsp	(.../gradebookMonitorContent5.jsp)	(revision e3931b3fb440adbb62e0ab4112df71f620050066)
+++ lams_gradebook/web/gradebookMonitorContent5.jsp	(.../gradebookMonitorContent5.jsp)	(revision 6582c67f62fe86aeb15f5b7e21b54a82952ec3d3)
@@ -8,6 +8,10 @@
 		display: none;
 		margin: 20px 0;
 	}
+	
+	.gbTopButtonsContainer button {
+		margin: 0 0 0 .8rem;
+	}
 </style>
 	
 <script type="text/javascript">
@@ -67,7 +71,8 @@
 		
 		if (releaseMarksPanel.is(':empty')) {
 			releaseMarksPanel.load('<lams:LAMSURL/>gradebook/gradebookMonitoring/displayReleaseMarksPanel.do',{
-				'lessonID' : ${lessonDetails.lessonID}
+				'lessonID' : ${lessonDetails.lessonID},
+				'isTab'	   : true
 			}, function(){
 				releaseMarksPanel.slideDown();
 			});
@@ -83,8 +88,8 @@
 		
 		// Create the user view grid with sub grid for activities
 		jQuery("#userView").jqGrid({
-			guiStyle: "bootstrap",
-			iconSet: 'fontAwesome',
+			guiStyle: "bootstrap4",
+			iconSet: 'fontAwesomeSolid',
 			autoencode:false,
 			caption: "<fmt:message key="gradebook.gridtitle.usergrid"/>",
 		    datatype: "xml",
@@ -143,8 +148,8 @@
 		   	   
 				jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_table_id+"_pager' class='scroll' ></div>");
 				jQuery("#"+subgrid_table_id).jqGrid({
-						 guiStyle: "bootstrap",
-						 iconSet: 'fontAwesome',
+						 guiStyle: "bootstrap4",
+						 iconSet: 'fontAwesomeSolid',
 						 autoencode:false,
 					     datatype: "xml",
 					     url: "<lams:LAMSURL />gradebook/gradebook/getActivityGridData.do?lessonID=${lessonDetails.lessonID}&view=monUserView&userID=" + userID,
@@ -348,8 +353,8 @@
 						   	    activityID = rowData["id"].split("_")[0];
 							jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll archive'></table><div id='"+subgrid_table_id+"_pager' class='scroll' ></div>");
 							jQuery("#"+subgrid_table_id).jqGrid({
-									 guiStyle: "bootstrap",
-									 iconSet: 'fontAwesome',
+									 guiStyle: "bootstrap4",
+									 iconSet: 'fontAwesomeSolid',
 									 autoencode:false,
 									 autowidth: true,
 								     datatype: "xml",
@@ -403,8 +408,8 @@
 
 			// Creating activity view with sub learner view
 			jQuery("#activityView").jqGrid({
-				guiStyle: "bootstrap",
-				iconSet: 'fontAwesome',
+				guiStyle: "bootstrap4",
+				iconSet: 'fontAwesomeSolid',
 				autoencode:false,
 				caption: "<fmt:message key="gradebook.gridtitle.activitygrid"/>",
 			    datatype: "xml",
@@ -448,8 +453,8 @@
 				   
 				   jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_table_id+"_pager' class='scroll' ></div>");
 				   jQuery("#"+subgrid_table_id).jqGrid({
-							 guiStyle: "bootstrap",
-						 iconSet: 'fontAwesome',
+							 guiStyle: "bootstrap4",
+						 iconSet: 'fontAwesomeSolid',
 						 autoencode:false,
 					     datatype: "xml",
 					     url: "<lams:LAMSURL />gradebook/gradebook/getUserGridData.do?view=monActivityView&lessonID=${lessonDetails.lessonID}&activityID=" + activityID + "&groupId=" + groupID,
@@ -583,8 +588,8 @@
 						   	    userID = nameParts[3];
 							jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll archive'></table><div id='"+subgrid_table_id+"_pager' class='scroll' ></div>");
 							jQuery("#"+subgrid_table_id).jqGrid({
-									 guiStyle: "bootstrap",
-									 iconSet: 'fontAwesome',
+									 guiStyle: "bootstrap4",
+									 iconSet: 'fontAwesomeSolid',
 									 autoencode:false,
 								     datatype: "xml",
 								     url: "<lams:LAMSURL />gradebook/gradebook/getActivityArchiveGridData.do?lessonID=${lessonDetails.lessonID}&activityID="
@@ -679,53 +684,53 @@
 </script>
 
 
-<div class="gbTopButtonsContainer pull-left flaot-start">
+<div class="gbTopButtonsContainer pull-left float-start">
 	<div class="visible-xs-inline">
 		<div id="padlockLocked" style="display:none">
 			<span class="lockLabel">
-			<i class="fa fa-lock"></i>
+			<i class="fa-solid fa-lock"></i>
 			<fmt:message key="label.marks"/>
 			</span>
 		</div>
 		<div id="padlockUnlocked" style="display:none">
 			<span class="lockLabel">
-			<i class="fa fa-unlock"></i>
+			<i class="fa-solid fa-unlock"></i>
 			<fmt:message key="label.marks"/>
 			</span>
 		</div>
 	</div>
 </div>
 
-<div class="gbTopButtonsContainer pull-right float-end" id="export-link-area">
+<div class="gbTopButtonsContainer d-flex justify-content-end" id="export-link-area">
 
 	<div>
-		<button type="button" id="export-grades-button" class="btn btn-sm btn-default btn-secondary" title="<fmt:message key='gradebook.export.excel'/>" >
-			<i class="fa fa-download"></i><span id="exportSpan" class="hidden-xs">
+		<button type="button" id="export-grades-button" class="btn btn-sm btn-secondary" title="<fmt:message key='gradebook.export.excel'/>" >
+			<i class="fa-solid fa-download"></i><span id="exportSpan" class="hidden-xs">
 			<fmt:message key="gradebook.export.excel" />
 			</span>
 		</button> 
 	</div>
 
 	<div id="tour-release-marks">
-		<button type="button" onClick="javascript:toggleReleaseMarksPanel()" class="btn btn-sm btn-default btn-secondary" 
+		<button type="button" onClick="javascript:toggleReleaseMarksPanel()" class="btn btn-sm btn-secondary" 
 			title="<fmt:message key="gradebook.monitor.releasemarks.toggle.panel.tooltip" />">
-			<i class="fa fa-share-alt "></i> <span class="hidden-xs">
+			<i class="fa-solid fa-share-alt "></i> <span class="hidden-xs">
 				<fmt:message key="gradebook.monitor.releasemarks.toggle.panel" />
 			</span>
 		</button>
 	</div>
 
-		<div id="tour-mark-chart-button">
+	<div id="tour-mark-chart-button">
 		<div id="markChartShown" style="display:none">
-			<button type="button" onClick="javascript:toggleMarkChart()" class="btn btn-sm btn-default btn-secondary" title="<fmt:message key='label.hide.marks.chart'/>" >
-				<i class="fa fa-bar-chart"></i> <span class="hidden-xs">
+			<button type="button" onClick="javascript:toggleMarkChart()" class="btn btn-sm btn-secondary" title="<fmt:message key='label.hide.marks.chart'/>" >
+				<i class="fa-solid fa-bar-chart"></i> <span class="hidden-xs">
 				<fmt:message key="label.hide.marks.chart"/>
 				</span>
 			</button> 
 		</div>
 		<div id="markChartHidden">
-			<button type="button" onClick="javascript:toggleMarkChart()" class="btn btn-sm btn-default btn-secondary" title="<fmt:message key='label.show.marks.chart'/>" >
-				<i class="fa fa-bar-chart"></i> <span class="hidden-xs">
+			<button type="button" onClick="javascript:toggleMarkChart()" class="btn btn-sm btn-secondary" title="<fmt:message key='label.show.marks.chart'/>" >
+				<i class="fa-solid fa-bar-chart"></i> <span class="hidden-xs">
 				<fmt:message key="label.show.marks.chart"/>
 				</span>
 			</button> 
@@ -735,37 +740,34 @@
 	<c:if test="${usesWeights}">
 		<div id="tour-weight-button">
 			<div id="weightShown" style="display:none">
-			<button type="button" onClick="javascript:toggleWeight()" class="btn btn-sm btn-default btn-secondary" title="<fmt:message key='label.button.hide.weights'/>" >
-				<i class="fa fa-balance-scale"></i> <span class="hidden-xs">
+			<button type="button" onClick="javascript:toggleWeight()" class="btn btn-sm btn-secondary" title="<fmt:message key='label.button.hide.weights'/>" >
+				<i class="fa-solid fa-balance-scale"></i> <span class="hidden-xs">
 				<fmt:message key="label.button.hide.weights"/>
 				</span>
 			</button>  
 			</div>
 			<div id="weightHidden">
-				<button type="button" onClick="javascript:toggleWeight()" class="btn btn-sm btn-default btn-secondary" title="<fmt:message key='label.button.show.weights'/>" >
-					<i class="fa fa-balance-scale"></i> <span class="hidden-xs">
+				<button type="button" onClick="javascript:toggleWeight()" class="btn btn-sm btn-secondary" title="<fmt:message key='label.button.show.weights'/>" >
+					<i class="fa-solid fa-balance-scale"></i> <span class="hidden-xs">
 					<fmt:message key="label.button.show.weights"/>
 					</span>
 				</button>  
 			</div>
 		</div>
 	</c:if>
 	
-	<button onclick="javascript:startTour();return false;" class="btn btn-sm btn-default btn-secondary float-end tour-button"> 
-	<i class="fa fa-question-circle"></i> <span class="hidden-xs">Tour</span></button>
+	<div>
+		<button onclick="javascript:startTour();return false;" class="btn btn-sm btn-secondary tour-button"> 
+			<i class="fa-solid fa-question-circle"></i> <span class="hidden-xs">Tour</span>
+		</button>
+	</div>
 </div> <!-- Closes buttons -->
 		
-<div class="row">
-	<div class="col-xs-12">
-		<div id="releaseMarksPanel"></div>
-	</div>
-</div>
+<div id="releaseMarksPanel"></div>
 		
-<div class="row">
-	 <div class="col-xs-12">
+<div>
 	 <lams:WaitingSpinner id="markChartBusy"/>
-		 <div id="markChartDiv" class="markChartDiv" style="display:none"></div>
-	</div>
+	 <div id="markChartDiv" class="markChartDiv" style="display:none"></div>
 </div>
 
 <c:if test="${usesWeights}">
Index: lams_gradebook/web/releaseLessonMarks5.jsp
===================================================================
diff -u
--- lams_gradebook/web/releaseLessonMarks5.jsp	(revision 0)
+++ lams_gradebook/web/releaseLessonMarks5.jsp	(revision 6582c67f62fe86aeb15f5b7e21b54a82952ec3d3)
@@ -0,0 +1,439 @@
+<%@ include file="/common/taglibs.jsp"%>
+
+<style>
+	#release-marks-alert {
+		display: none;
+		width: 50%;
+		margin: auto;
+		margin-bottom: 10px;
+		padding: 5px 15px;
+	}
+	
+	#release-marks-learner-table {
+		cursor: pointer;
+	}
+
+	#release-marks-email-preview {
+		display: none;
+	}
+	
+	#release-marks-email-preview > h4 {
+		text-align: center;
+	}
+	
+	#release-marks-email-preview-content {
+		border-top: thin darkgray solid;
+	}
+	
+	#release-marks-email-preview-content > iframe {
+		width: 100%;
+		min-height: 480px;
+		border: none;
+	}
+	
+	.release-marks-buttons {
+		text-align: right;
+		margin-bottom: 10px;
+	}
+	
+	#release-marks-schedule-labels > label {
+		vertical-align: text-top;
+	}
+</style>
+	
+<script type="text/javascript">
+
+	// reset variables which was set in gradebookMonitor.jsp
+	marksReleased = ${marksReleased};
+
+	
+	var releaseMarksLessonID = ${param.lessonID},
+		releaseMarksAlertBox = null,
+		// is release marks scheduled?
+		releaseMarksScheduleDate = '${releaseMarksScheduleDate}';
+		
+
+	jQuery(document).ready(function() {
+		$.extend(true, $.jgrid.guiStyles.bootstrap4, {
+			pager : {
+				pagerSelect : 'form-control-select'
+			},
+			searchToolbar : {
+				clearButton : 'btn btn-sm'
+			}
+		});
+		
+		// store this frequently used element
+		releaseMarksAlertBox = $('#release-marks-alert');
+		
+		$('#release-marks-schedule-date').datetimepicker({
+			// date must be in future
+			minDate : 0,
+			dateFormat : 'yy-mm-dd'
+		}).change(function(){
+			// if there is no date selected, disable the confirmation button
+			var date = $(this).val();
+			$('#release-marks-schedule-confirm').prop('disabled', !date || date.trim() == '');
+		});
+		
+		onReleaseMarksOpen();
+	});
+
+	// when this panels gets (re)loaded
+	function onReleaseMarksOpen(){
+		if (releaseMarksScheduleDate) {
+			// release marks are scheduled
+			$('#release-marks-schedule-date').val(releaseMarksScheduleDate);
+			displayReleaseMarksSchedule();
+		} else {
+			displayReleaseMarksLearners();
+		}
+	}
+
+	// release/hide marks
+	function toggleMarksRelease() {
+		if (confirm(marksReleased ? "<fmt:message key="gradebook.monitor.releasemarks.check.hide"/>" : "<fmt:message key="gradebook.monitor.releasemarks.check.release"/>")) {
+			releaseMarksAlertBox.hide();
+			
+			$.ajax({
+				url : "<lams:LAMSURL/>gradebook/gradebookMonitoring/toggleReleaseMarks.do", 
+				data : {
+				  	"<csrf:tokenname/>":"<csrf:tokenvalue/>",
+					lessonID: releaseMarksLessonID
+				}, 
+				type     : 'post',
+				dataType : 'text',
+				success : function(response) {
+			    	if (response == 'success') {
+				    	marksReleased = !marksReleased;
+				    	updateReleaseMarksDependantElements();
+			    	} else {
+						releaseMarksAlertBox.removeClass('alert-success').addClass('alert-danger').text("<fmt:message key="error.releasemarks.fail"/>").show();
+			    	}
+		    	}
+			});
+	    }
+	}
+	
+	function sendReleaseMarksEmails(){
+		releaseMarksAlertBox.hide();
+		
+		let grid = $("#release-marks-learners-table"),
+			filteredData = grid.jqGrid('getGridParam', 'lastSelectedData'),
+			selectedLearners = grid.jqGrid('getGridParam','selarrrow'),
+			finalList = [];
+		filteredData.forEach(function(learner){
+			if (selectedLearners.indexOf(learner.id) >= 0) {
+				finalList.push(learner.id);
+			}
+		});
+
+		if (finalList.length == 0) {
+			releaseMarksAlertBox.removeClass('alert-success').addClass('alert-danger')
+								.text('<fmt:message key="gradebook.monitor.releasemarks.send.emails.no.learners" />').show();
+			return;
+		}
+		
+		if (!confirm('<fmt:message key="gradebook.monitor.releasemarks.send.emails.confirm" />'.replace('[COUNT_PLACEHOLDER]', finalList.length))){
+			return;
+		}
+	
+		$.ajax({
+			'url'      : '<lams:LAMSURL/>gradebook/gradebookMonitoring/sendReleaseMarksEmails.do',
+			'data'     : {
+				'lessonID' : releaseMarksLessonID,
+				 'includedLearners' : JSON.stringify(finalList)
+			 },
+			'dataType' : 'text',
+			'cache'    : false,
+			'success' : function(response) {
+				if (response == 'success') {
+					releaseMarksAlertBox.removeClass('alert-danger').addClass('alert-success').text('Emails were sent').show();
+					return;
+				}
+
+				releaseMarksAlertBox.removeClass('alert-success').addClass('alert-danger').text('There was a problem with sending emails: ' + response).show();
+			}
+		});
+	}
+
+	function updateReleaseMarksDependantElements(){
+		if (marksReleased) {
+			$('#marksNotReleased, #padlockLocked, #release-marks-schedule-display').hide();
+			$('#marksReleased, #padlockUnlocked').show();
+		} else {
+			$('#marksReleased, #padlockUnlocked').hide();
+			$('#marksNotReleased, #padlockLocked, #release-marks-schedule-display').show();
+		}
+	}
+	
+	function displayReleaseMarksLearners() {
+		updateReleaseMarksDependantElements();
+		releaseMarksAlertBox.hide();
+		$('#release-marks-schedule').hide();
+		$('#release-marks-learners').show();
+
+		// initialize user list 
+		var grid = $('<table id="release-marks-learners-table"></table>').appendTo('#release-marks-learners-panel').jqGrid({
+			guiStyle: "bootstrap4",
+			iconSet: 'fontAwesomeSolid',
+		   	url: "<lams:LAMSURL/>monitoring/emailNotifications/getUsers.do?searchType=4&lessonID=" + releaseMarksLessonID,
+			datatype: "json",
+		   	colNames:['<fmt:message key="gradebook.columntitle.learnerName"/>'],
+		   	colModel:[
+		   		{name:'name',index:'name', sortable: false, sorttype: 'text'}
+		   	],
+		    rowList:[20, 50],
+		   	rowNum: 20,
+		   	pager: true,
+		   	sortname: 'name',
+		   	multiselect: true,
+			multiPageSelection : true,
+		    sortorder: "asc",
+		    loadonce: true,
+		    height:'100%',
+			autowidth:true,
+			beforeSelectRow: function(rowid, e) {
+				let target = $(e.target),
+					isCheckboxClicked = target.is('input[type=checkbox]'),
+					row = target.closest('tr')
+			   if (isCheckboxClicked) {
+				   return true;
+			   }
+
+			   highlightReleaseMarksLearnerRow(row.attr('id'));
+			   return false;
+			},
+			gridComplete : function(){
+				let grid = $(this),
+					rows = $('[role="row"]:not(.jqgfirstrow)', grid),
+				    mode = grid.data('mode'),
+				    // cell containing "(de)select all" button
+				    selectAllCell = grid.closest('.ui-jqgrid-view').find('.ui-jqgrid-labels .jqgh_cbox > div');
+				// remove the default button provided by jqGrid
+				$('.cbox', selectAllCell).remove();
+				// create own button which follows own rules
+				var selectAllCheckbox = $('<input type="checkbox" class="cbox" />')
+										.prop('checked', mode == 'all' || mode == 'start')
+										.prependTo(selectAllCell)
+										.change(function(){
+											// start with deselecting
+											grid.resetSelection();
+											var ids = [];
+											if ($(this).prop('checked')){
+												grid.data('mode', 'all');
+												// on select all change mode and select all
+												grid.jqGrid('getGridParam', 'data').forEach(function(row) {
+													ids.push(row.id);
+													// also select on current page as it is too late for selarrrow to be picked up
+													grid.jqGrid("setSelection", row.id, false);
+												});
+											} else {
+												grid.data('mode', 'none');
+											}
+											grid.jqGrid("setGridParam", { selarrrow: ids }, true);
+										});
+				
+				// initial select all
+				if (mode == 'start') {
+					selectAllCheckbox.change();
+				}
+				
+				if (rows.length === 0) {
+					// empty email preview on grid page change
+					$('#release-marks-email-preview').slideUp(function(){
+						 $('#release-marks-email-preview-content', this).empty();
+					});
+				} else {
+					// highlight first row
+					highlightReleaseMarksLearnerRow(rows[0].id);
+				}
+			}}).data({'mode' : 'start'})
+			   .jqGrid('filterToolbar', {
+				       stringResult: true,
+				       searchOnEnter: true,
+				       defaultSearch: 'cn'
+					  });
+	}
+
+	function highlightReleaseMarksLearnerRow(userID) {
+		let table = $('#release-marks-learners-table'),
+			row = $('#' + userID, table),
+			isHighlighted = row.hasClass('warning');
+		
+		   row.siblings('tr.warning').removeClass('warning');
+		   if (!isHighlighted) {
+			   row.addClass('warning');
+
+			   $('<iframe />').appendTo($('#release-marks-email-preview-content').empty())
+								  .attr('src', '<lams:LAMSURL/>gradebook/gradebookMonitoring/getReleaseMarksEmailContent.do?lessonID=' 
+	   								         + releaseMarksLessonID + '&userID=' + userID)
+	   						  .one('load',	function(){
+								   // set learner name in email preview
+								   $('#release-marks-email-preview-user').text(row.find('td:nth-child(2)').text());
+								   $(this).parent().parent().slideDown();
+							   });
+		   }
+	}
+
+	function displayReleaseMarksSchedule(){
+		$('#release-marks-learners').hide();
+		$('#release-marks-email-preview').hide();
+		$('#release-marks-learners-panel').empty();
+		releaseMarksAlertBox.hide();
+
+		// disable/enable schedule confirmation button depending on its content
+		$('#release-marks-schedule-date').change();
+		$('#release-marks-schedule').show();
+	}
+
+	function cancelScheduleReleaseMarks(){
+		if (releaseMarksScheduleDate) {
+			// cancel schedule and reload panel
+			scheduleReleaseMarks(true);
+		} else {
+			// reset date field and switch to other tab
+			$('#release-marks-schedule-date').val(null);
+			displayReleaseMarksLearners();
+		}
+	}
+
+	function scheduleReleaseMarks(isCancel){
+		var scheduleDate = isCancel ? null : $('#release-marks-schedule-date').val();
+		$.ajax({
+				url : "<lams:LAMSURL/>gradebook/gradebookMonitoring/scheduleReleaseMarks.do", 
+				data: {
+				  	"<csrf:tokenname/>":"<csrf:tokenvalue/>",
+					lessonID: releaseMarksLessonID,
+					sendEmails : scheduleDate == null ? false : $('#release-marks-schedule-emails').prop('checked'),
+					scheduleDate : scheduleDate
+				}, 
+				type     : 'post',
+				dataType : 'text',
+				async    : false,
+				success: function(response) {
+					if (response == 'success') {
+						// reload panel; function is defined in gradebookMonitor.jsp
+						toggleReleaseMarksPanel(true);
+					} else {
+						releaseMarksAlertBox.removeClass('alert-success').addClass('alert-danger').text('There was a problem with scheduling marks release: ' + response).show();
+					}
+		    	}
+		});
+	}
+</script>
+
+<div id="release-marks-panel" class="panel panel-default panel-body">
+	<div id="release-marks-alert" class="alert alert-dismissable"></div>
+	
+	<div id="release-marks-learners">
+		<div class="release-marks-buttons">
+        	<button type="button" id="release-marks-schedule-display" class="btn btn-sm btn-secondary me-2" onClick="javascript:displayReleaseMarksSchedule()">
+        	    <i class="fa fa-calendar"></i>
+                <span class="hidden-xs">
+                    <fmt:message key="gradebook.monitor.releasemarks.schedule.button" />
+                </span>
+        	</button>
+              
+			<button type="button" class="btn btn-sm btn-primary" onClick="javascript:sendReleaseMarksEmails()">
+			    <i class="fa fa-bullhorn"></i>
+                <span class="hidden-xs">
+                    <fmt:message key="gradebook.monitor.releasemarks.send.emails" />
+                </span>
+            </button>
+              
+            <button type="button" id="marksNotReleased" onClick="javascript:toggleMarksRelease()" class="btn btn-sm btn-primary"
+                title="<fmt:message key="gradebook.monitor.releasemarks.release" />" >
+                <i class="fa fa-share-alt "></i>
+                <span class="hidden-xs">
+                    <fmt:message key="gradebook.monitor.releasemarks.release" />
+                </span>
+            </button>
+            <button type="button" id="marksReleased" onClick="javascript:toggleMarksRelease()" class="btn btn-sm btn-primary"
+                title="<fmt:message key="gradebook.monitor.releasemarks.hide" />" >
+                <i class="fa fa-share-alt "></i>
+                <span class="hidden-xs">
+                    <fmt:message key="gradebook.monitor.releasemarks.hide" />
+                </span>
+            </button>  
+		</div>
+		<div class="row">
+			<div class="col-sm-4 col-xs-12">
+				<!-- A dummy element so learners table starts on the same height as email preview -->
+				<span>&nbsp;</span>
+				
+                <div id="release-marks-learners-panel"> </div>
+			</div>
+			<div class="col-sm-8 col-xs-12">
+                <div id="release-marks-email-preview">
+					<p style="margin: 0 0 0 0;" class="text-muted text-center"><small><em><fmt:message key="gradebook.monitor.releasemarks.email.preview" />&nbsp;<span id="release-marks-email-preview-user"></span></em></small></p>
+                    <div id="release-marks-email-preview-content"></div>
+                </div>
+            </div>
+		</div>
+
+	</div>
+	
+	<div id="release-marks-schedule" class="container-fluid">
+		<div class="release-marks-buttons">
+			<button type="button" id="release-marks-schedule-cancel" onClick="javascript:cancelScheduleReleaseMarks()" class="btn btn-sm btn-secondary">
+				<i class="fa fa-ban"></i>
+                <span class="hidden-xs">
+                    <fmt:message key="gradebook.monitor.releasemarks.schedule.cancel" />
+                </span>
+			</button>
+			
+			<c:if test="${empty releaseMarksScheduleDate}">
+				<button type="button" id="release-marks-schedule-confirm" onClick="javascript:scheduleReleaseMarks()" class="btn btn-sm btn-primary"
+					title="" >
+					<i class="fa fa-calendar"></i>
+					<span class="hidden-xs">
+						<fmt:message key="gradebook.monitor.releasemarks.schedule.confirm" />
+					</span>
+				</button>
+			</c:if>
+		</div>
+		<div class="row">
+			<div class="col-1"></div>
+			<div class="col-6">
+				<c:choose>
+					<c:when test="${empty releaseMarksScheduleDate}">
+						<div  id="release-marks-schedule-labels" class="row">
+							<div class="col-6">
+								<label for="release-marks-schedule-date" class="form-label"><fmt:message key="gradebook.monitor.releasemarks.schedule.date" /></label>
+							</div>
+							<div class="col-6">
+								<input type="text" class="form-control form-control-sm" id="release-marks-schedule-date" autocomplete="nope" />
+							</div>
+						</div>
+						<div class="row mt-4">
+							<div class="col-6">
+								<label for="release-marks-schedule-emails" class="form-check-label"><fmt:message key="gradebook.monitor.releasemarks.schedule.send.emails" /></label>
+							</div>
+							<div class="col-6">
+								<input type="checkbox" class="form-check-input" id="release-marks-schedule-emails" />
+							</div>
+						</div>
+					</c:when>
+					<c:otherwise>
+						<p>
+							<fmt:message key="gradebook.monitor.releasemarks.scheduled.date">
+								<fmt:param value="${releaseMarksScheduleDate}" />
+							</fmt:message>
+							<br>
+							<c:choose>
+								<c:when test="${releaseMarksSendEmails}">
+									<fmt:message key="gradebook.monitor.releasemarks.scheduled.send.emails" />
+								</c:when>
+								<c:otherwise>
+									<fmt:message key="gradebook.monitor.releasemarks.scheduled.not.send.emails" />
+								</c:otherwise>
+							</c:choose>
+						</p>
+					</c:otherwise>
+				</c:choose>
+			</div>
+			<div class="col-5"></div>
+		</div>
+	</div>
+</div>
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r90a77f339c6f42a9e05ddbbd3c8ad2c8a0697c0a -r6582c67f62fe86aeb15f5b7e21b54a82952ec3d3
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 90a77f339c6f42a9e05ddbbd3c8ad2c8a0697c0a)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 6582c67f62fe86aeb15f5b7e21b54a82952ec3d3)
@@ -79,15 +79,14 @@
 }
 
 .component-sidebar .lesson-properties {
-	width: 0;
+	visibility: hidden;
 	height: 100%;
 	padding-left: 2rem;
 	text-align: left;
-	transition: all .3s ease;
 }
 
 .component-sidebar .lesson-properties.active {
-	width: 100%;
+	visibility: visible;
 }
 
 .component-sidebar .lesson-properties #lessonDetails {
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -re3931b3fb440adbb62e0ab4112df71f620050066 -r6582c67f62fe86aeb15f5b7e21b54a82952ec3d3
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision e3931b3fb440adbb62e0ab4112df71f620050066)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 6582c67f62fe86aeb15f5b7e21b54a82952ec3d3)
@@ -76,7 +76,6 @@
 		$('.lesson-properties').toggleClass('active');
 		$('.component-sidebar').toggleClass('expanded');
 	});
-	
 	$('#load-sequence-tab-btn').click(function(){
 		loadTab('sequence', this);
 	});
@@ -2497,11 +2496,18 @@
 	                           actions: { del: "fa-times" },
 	                           form: { del: "fa-times" }
 	                       })
+		$.extend(true, $.jgrid.icons.fontAwesome, {
+			common : "fa-solid"
+		});
 	});
 	*/
-	
-	$.extend(true, $.jgrid.icons.fontAwesome, {
-		common : "fa-solid"
+	$.extend(true, $.jgrid.guiStyles.bootstrap4, {
+		pager : {
+			pagerSelect : 'form-control-select'
+		},
+		searchToolbar : {
+			clearButton : 'btn btn-sm'
+		}
 	});
 }