Index: lams_central/web/includes/javascript/dialog5.js
===================================================================
diff -u -r7344842c444056d9b34ef71feb165946dd4f64ae -r96fa77f6ac962b79c72f302c22bb068c854bdcb8
--- lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision 7344842c444056d9b34ef71feb165946dd4f64ae)
+++ lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision 96fa77f6ac962b79c72f302c22bb068c854bdcb8)
@@ -120,10 +120,13 @@
 	
 	dialog.modal({
 		'keyboard' : false,
-		'backdrop' : initParams.modal ? 'static' : false,
-		'show' : initParams.autoOpen
+		'backdrop' : initParams.modal ? 'static' : false
 	});
 	
+	if (initParams.autoOpen) {
+		dialog.modal('show');
+	}
+	
 	if (!initParams.modal) {
 		// make the dialog non-modal
 		dialog.on('shown.bs.modal', function(){
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -rbc986e10699fd7248e802d6c31450681eff897bb -r96fa77f6ac962b79c72f302c22bb068c854bdcb8
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision bc986e10699fd7248e802d6c31450681eff897bb)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 96fa77f6ac962b79c72f302c22bb068c854bdcb8)
@@ -845,6 +845,51 @@
   overflow: auto;
 }
 
+.dialogContainer .dialogSearchPhraseClear {
+	visibility: hidden;
+	padding-top: 11px;
+	cursor: pointer;
+}
+
+.ui-front {
+	z-index: 1100;
+}
+
+.ui-front.ui-autocomplete {
+	border-radius: 0 0 5px 5px;
+}
+
+.dialogContainer .navCell i {
+	cursor: pointer;
+}
+
+.dialogContainer .dialogListItem {
+	padding: 3px 0 3px 5px;
+    cursor: pointer;
+}
+
+.dialogContainer .dialogListItem .portrait-sm {
+	margin: 3px 0 -4px 0;
+}
+
+.dialogContainer .dialogListItem  .portrait-sm-lineheight {
+	margin-left: 5px;	
+}
+
+.dialogContainer .dialogListItem .portrait-sm + .portrait-sm-lineheight {
+	display: inline-block;
+	margin-top: 3px;
+} 
+.dialogContainer .dialogListItem.dialogListItemSelected {
+    background-color: #5898d0 !important;
+    color: white !important;
+}
+
+.dialogContainer .bottom-buttons {
+	float: right;
+	margin-bottom: 5px;
+}
+
 /********** CANVAS STYLES **********/
 
 #canvas-container {
@@ -997,112 +1042,112 @@
 	cursor: pointer;
 }
 
-.monitoring-page-wrapper .portrait-sm {
+body.component .portrait-sm {
 	width: 35px;
 	height: 35px;
 	display: inline-block;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
 
-.monitoring-page-wrapper .portrait-md {
+body.component .portrait-md {
 	width: 80px;
 	height: 80px;
 	display: inline-block;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
 
-.monitoring-page-wrapper .portrait-lg {
+body.component .portrait-lg {
 	width: 200px;
 	height: 200px;
 	display: inline-block;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
 
-.monitoring-page-wrapper .portrait-xl {
+body.component .portrait-xl {
 	width: 400px;
 	height: 400px;
 	display: inline-block;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
 
-.monitoring-page-wrapper .portrait-container-sm {
+body.component .portrait-container-sm {
 	height: 38px;
 	margin-top: 3px;
 }
 
-.monitoring-page-wrapper .leader-display {
+body.component .leader-display {
 	margin: 0px;
 }
 
-.monitoring-page-wrapper .leader-display h4 {
+body.component .leader-display h4 {
 	margin-bottom: 0px;
 }
 
-.monitoring-page-wrapper .popover-link {
+body.component .popover-link {
 	color: #337ab7 !important;
 }
 
-.monitoring-page-wrapper .popover-link:hover {
+body.component .popover-link:hover {
 	color: #0E9AEF !important;
 }
 
-.monitoring-page-wrapper .popover-link:focus {
+body.component .popover-link:focus {
 	color: #0E9AEF !important;
 }
 
-.monitoring-page-wrapper .popover-title {
+body.component .popover-title {
 	background-color: #dddddd;
 }
 
-.monitoring-page-wrapper .popover-content-with-portrait {
+body.component .popover-content-with-portrait {
 	min-height: 220px;
 	min-width: 220px;
 }
 
-.monitoring-page-wrapper .portrait-color-0 {
+body.component .portrait-color-0 {
 	color: #001f3f;
 }
 
-.monitoring-page-wrapper .portrait-color-1 {
+body.component .portrait-color-1 {
 	color: #FF851B;
 }
 
-.monitoring-page-wrapper .portrait-color-2 {
+body.component .portrait-color-2 {
 	color: #85144b;
 }
 
-.monitoring-page-wrapper .portrait-color-3 {
+body.component .portrait-color-3 {
 	color: #111111;
 }
 
-.monitoring-page-wrapper .portrait-color-4 {
+body.component .portrait-color-4 {
 	color: #3D9970;
 }
 
-.monitoring-page-wrapper .portrait-color-5 {
+body.component .portrait-color-5 {
 	color: #0074D9;
 }
 
-.monitoring-page-wrapper .portrait-color-6 {
+body.component .portrait-color-6 {
 	color: #FF4136;
 }
 
-.monitoring-page-wrapper .portrait-sm-lineheight {
+body.component .portrait-sm-lineheight {
 	line-height: 32px;
 	vertical-align: top;
 }
 
-.monitoring-page-wrapper .portrait-generic-sm {
+body.component .portrait-generic-sm {
 	display: inline-block;
 	height: 35px;
 	vertical-align: middle;
 }
 
-.monitoring-page-wrapper .portrait-generic-sm:before {
+body.component .portrait-generic-sm:before {
 	content: "\f2be";
 	font-family: FontAwesome;
 	font-style: normal;
@@ -1111,13 +1156,13 @@
 	line-height: 35px;
 }
 
-.monitoring-page-wrapper .portrait-generic-md {
+body.component .portrait-generic-md {
 	display: inline-block;
 	height: 80px;
 	vertical-align: middle;
 }
 
-.monitoring-page-wrapper .portrait-generic-md:before {
+body.component .portrait-generic-md:before {
 	content: "\f2be";
 	font-family: FontAwesome;
 	font-style: normal;
@@ -1126,13 +1171,13 @@
 	line-height: 65px;
 }
 
-.monitoring-page-wrapper .portrait-generic-lg {
+body.component .portrait-generic-lg {
 	display: inline-block;
 	height: 200px;
 	vertical-align: middle;
 }
 
-.monitoring-page-wrapper .portrait-generic-lg:before {
+body.component .portrait-generic-lg:before {
 	content: "\f2be";
 	font-family: FontAwesome;
 	font-style: normal;
@@ -1141,7 +1186,7 @@
 	line-height: 200px;
 }
 
-.monitoring-page-wrapper .portrait-round {
+body.component .portrait-round {
   border-radius: 50%;
 }
 
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -re7566e16cc3fdc8f9d559597618fcecb2c0d52d5 -r96fa77f6ac962b79c72f302c22bb068c854bdcb8
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision e7566e16cc3fdc8f9d559597618fcecb2c0d52d5)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 96fa77f6ac962b79c72f302c22bb068c854bdcb8)
@@ -2442,6 +2442,37 @@
 	});
 }
 
+/**
+ * Clears previous run search for phrase, in Learners tab.
+ */
+function learnersClearSearchPhrase(){
+	$('#learnersSearchPhrase').val('').autocomplete("close");
+	loadLearnerProgressPage(1, '');
+	$('#learnersSearchPhraseClear').hide();
+}
+
+/**
+ * Clears previous run search for phrase, in Edit Class dialog.
+ */
+function classClearSearchPhrase(){
+	var dialog = $('#classDialog');
+	$('.dialogSearchPhrase', dialog).val('').autocomplete("close");
+	dialog.data('LearnerAjaxProperties').data.pageNumber = 1;
+	showClassDialog('Learner');
+	$('.dialogSearchPhraseClear', dialog).css('visibility', 'hidden');
+}
+
+
+/**
+ * Clears previous run search for phrase, in Learner Group dialogs.
+ */
+function learnerGroupClearSearchPhrase(){
+	var dialog = $('#learnerGroupDialog');
+	$('.dialogSearchPhrase', dialog).val('').autocomplete("close");
+	dialog.data('ajaxProperties').data.pageNumber = 1;
+	showLearnerGroupDialog();
+	$('.dialogSearchPhraseClear', dialog).css('visibility', 'hidden');
+}
 //********** GRADEBOOK TAB FUNCTIONS **********
 
 /**
@@ -2538,6 +2569,27 @@
 
 //********** COMMON FUNCTIONS **********
 
+
+// generic function for opening a pop up
+function openPopUp(url, title, h, w, status, forceNewWindow) {
+
+	var width = screen.width;
+	var height = screen.height;
+
+	var left = ((width / 2) - (w / 2));
+	var top = ((height / 2) - (h / 2));
+
+	if (forceNewWindow) {
+		// opens a new window rather than loading content to existing one
+		title += new Date().getTime();
+	}
+
+	window.open(url, title, "HEIGHT=" + h + ",WIDTH=" + w
+			+ ",resizable=yes,scrollbars=yes,status=" + status
+			+ ",menubar=no, toolbar=no"
+			+ ",top=" + top + ",left=" + left);
+}
+
 function isAutoRefreshBlocked(){
 	return autoRefreshBlocked || $('#learnerGroupDialog').hasClass('in');
 }
@@ -2716,7 +2768,7 @@
 	
 	if (!isRefresh) {
 		// show buttons and labels depending on parameters
-		$('span#learnerGroupMultiSelectLabel, button#learnerGroupDialogForceCompleteButton', learnerGroupDialog)
+		$('span#learnerGroupMultiSelectLabel, button#learnerGroupDialogForceCompleteButton, button#learnerGroupDialogForceCompleteAllButton', learnerGroupDialog)
 			.css('display', allowForceComplete ? 'inline' : 'none');
 		$('button#learnerGroupDialogViewButton', learnerGroupDialog)
 			.css('display', allowView ? 'inline' : 'none');
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -re7566e16cc3fdc8f9d559597618fcecb2c0d52d5 -r96fa77f6ac962b79c72f302c22bb068c854bdcb8
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision e7566e16cc3fdc8f9d559597618fcecb2c0d52d5)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 96fa77f6ac962b79c72f302c22bb068c854bdcb8)
@@ -444,18 +444,19 @@
 
 <div id="learnerGroupDialogContents" class="dialogContainer">
 	<span id="learnerGroupMultiSelectLabel"><fmt:message key='learner.group.multi.select'/></span>
-	<table id="listLearners" class="table table-condensed">
+	<table id="listLearners" class="table table-borderless">
 		<tr id="learnerGroupSearchRow">
-			<td>
-				<span class="dialogSearchPhraseIcon fa fa-xs fa-search"
-					  title="<fmt:message key='search.learner.textbox' />"></span>
+			<td colspan="5">
+				<div class="input-group mb-3">
+				  <input type="text" class="form-control dialogSearchPhrase" placeholder="<fmt:message key='search.learner.textbox' />"
+				  		 aria-label="<fmt:message key='search.learner.textbox' />">
+				  <span class="dialogSearchPhraseIcon input-group-text" title="<fmt:message key='search.learner.textbox' />">
+				  		<i class=" fa-solid fa-sm fa-search"></i>
+				  </span>
+				</div>
 			</td>
-			<td colspan="4">
-				<input class="dialogSearchPhrase" 
-					   title="<fmt:message key='search.learner.textbox' />"/>
-			</td>
 			<td>
-				<span class="dialogSearchPhraseClear fa fa-xs fa-times-circle"
+				<span class="dialogSearchPhraseClear fa-solid fa-circle-xmark"
 					  onClick="javascript:learnerGroupClearSearchPhrase()"
 					  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
 				></span>
@@ -465,56 +466,56 @@
 			<td class="navCell pageMinus10Cell"
 				title="<fmt:message key='learner.group.backward.10'/>"
 				onClick="javascript:shiftLearnerGroupList(-10)">
-					<span class="ui-icon ui-icon-seek-prev"></span>
+					<i class="fa-solid fa-step-backward"></i>
 			</td>
 			<td class="navCell pageMinus1Cell"
 				title="<fmt:message key='learner.group.backward.1'/>"
 				onClick="javascript:shiftLearnerGroupList(-1)">
-				<span class="ui-icon ui-icon-arrowthick-1-w"></span>
+					<i class="fa-solid fa-backward"></i>
 			</td>
 			<td class="pageCell"
 				title="<fmt:message key='learners.page'/>">
 			</td>
 			<td class="navCell pagePlus1Cell"
 				title="<fmt:message key='learner.group.forward.1'/>"
 				onClick="javascript:shiftLearnerGroupList(1)">
-					<span class="ui-icon ui-icon-arrowthick-1-e"></span>
+					<i class="fa-solid fa-forward"></i>
 			</td>
 			<td class="navCell pagePlus10Cell" 
 				title="<fmt:message key='learner.group.forward.10'/>"
 				onClick="javascript:shiftLearnerGroupList(10)">
-					<span class="ui-icon ui-icon-seek-next"></span>
+					<i class="fa-solid fa-step-forward"></i>
 			</td>
 			<td class="navCell sortCell" 
 				title="<fmt:message key='learner.group.sort.button'/>" 
 				onClick="javascript:sortLearnerGroupList()">
-					<span class="ui-icon ui-icon-triangle-1-n"></span>
+					<i class="fa-solid fa-caret-down"></i>
 			</td>
 		</tr>
 		<tr>
 			<td colspan="6" class="dialogList"></td>
 		</tr>
 	</table>
-	<div class="btn-group pull-right">
-		<button id="learnerGroupDialogForceCompleteAllButton" class="btn btn-default roffset5 pull-right">
+	<div class="bottom-buttons">
+		<button id="learnerGroupDialogForceCompleteAllButton" class="btn btn-secondary me-2">
 			<span><fmt:message key="button.force.complete.all" /></span>
 		</button>
-		<button id="learnerGroupDialogForceCompleteButton" class="learnerGroupDialogSelectableButton btn btn-default roffset5 pull-right">
+		<button id="learnerGroupDialogForceCompleteButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
 			<span><fmt:message key="button.force.complete" /></span>
 		</button>
-		<br>
-		<button id="learnerGroupDialogCloseButton" class="btn btn-default voffset10 pull-right">
-			<span><fmt:message key="button.close" /></span>
+
+		<button id="learnerGroupDialogViewButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
+			<span><fmt:message key="button.view.learner" /></span>
 		</button>
-		<button id="learnerGroupDialogEmailButton" class="learnerGroupDialogSelectableButton btn btn-default roffset5 voffset10 pull-right">
+		<button id="learnerGroupDialogEmailButton" class="learnerGroupDialogSelectableButton btn btn-secondary me-2">
 			<span><fmt:message key="button.email" /></span>
 		</button>
-		<button id="learnerGroupDialogViewButton" class="learnerGroupDialogSelectableButton btn btn-default roffset5 voffset10 pull-right">
-			<span><fmt:message key="button.view.learner" /></span>
+		<button id="learnerGroupDialogCloseButton" class="btn btn-primary me-2">
+			<span><fmt:message key="button.close" /></span>
 		</button>
 	</div>
 </div>
-	
+
 <div id="classDialogContents" class="dialogContainer">
 	<div id="classDialogTable">
 		<div class="row no-margin">