Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r68269a828ae6d64b280d367eb78a17f2dd7543c0 -r10df78ce6b0f3c72a5ab1d8e17510c08211c36f8
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 68269a828ae6d64b280d367eb78a17f2dd7543c0)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 10df78ce6b0f3c72a5ab1d8e17510c08211c36f8)
@@ -18,6 +18,10 @@
 	border-width: 3px;
 }
 
+#confirmationDialog {
+	z-index: calc(var(--bs-modal-zindex) + 1);
+}
+
 .monitoring-page-wrapper {
 	position: relative;
 	font-family: mont-regular, sans-serif;
@@ -886,6 +890,7 @@
 .dialogContainer .dialogListItem {
 	height: 3rem;
 	border-color: var(--bs-gray-300);
+	border-bottom-width: 2px;
     cursor: pointer;
 }
 
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rf5fa910456cca31846e2c1a097bb4ab750a345ab -r10df78ce6b0f3c72a5ab1d8e17510c08211c36f8
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision f5fa910456cca31846e2c1a097bb4ab750a345ab)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 10df78ce6b0f3c72a5ab1d8e17510c08211c36f8)
@@ -792,7 +792,7 @@
  */
 function getSelectedClassUserList(containerId) {
 	var list = [];
-	$('#' + containerId).children('div.dialogListItem').each(function(){
+	$('#' + containerId).children('tr.dialogListItem').each(function(){
 		if ($('input:checked', this).length > 0){
 			list.push($(this).attr('userId'));
 		}
@@ -1213,7 +1213,7 @@
 	
 	$('#learnerGroupDialogViewButton', learnerGroupDialogContents).click(function() {
 		var dialog = $('#learnerGroupDialog'),
-			selectedLearner = $('.dialogList div.dialogListItemSelected', dialog);
+			selectedLearner = $('.dialogList .dialogListItemSelected', dialog);
 		if (selectedLearner.length == 1) {
 			// open pop up with user progress in the given activity
 			openPopUp(selectedLearner.attr('viewUrl'), "LearnActivity", popupHeight, popupWidth, true);
@@ -1222,7 +1222,7 @@
 	
 	$('#learnerGroupDialogEmailButton', learnerGroupDialogContents).click(function() {
 		var dialog = $('#learnerGroupDialog'),
-			selectedLearner = $('.dialogList div.dialogListItemSelected', dialog);
+			selectedLearner = $('.dialogList .dialogListItemSelected', dialog);
 		if (selectedLearner.length == 1) {
 			showEmailDialog(selectedLearner.attr('userId'));
 		}
@@ -1239,7 +1239,6 @@
 	var learnerGroupDialog = showDialog('learnerGroupDialog',{
 			'autoOpen'  : false,
 			'width'     : 450,
-			'height'	: Math.max(450, Math.min(700, dialogWindow.height() - 30)),
 			'resizable' : true,
 			'open'      : function(){
 				// until operator selects an user, buttons remain disabled
@@ -2191,7 +2190,7 @@
 function fillClassList(role, disableCreator) {
 	var dialog = $('#classDialog'),
 		table = $('#class' + role + 'Table', dialog),
-		list = $('.dialogList', table).empty(),
+		list = $('.dialogTable', table).empty(),
 		searchPhrase = role == 'Learner' ? $('.dialogSearchPhrase', table).val().trim() : null,
 		ajaxProperties = dialog.data(role + 'AjaxProperties'),
 		users = null,
@@ -2240,13 +2239,15 @@
 	    		editClassMember($(this));
 	      }),
 	    		
-	      userDiv = $('<div />').attr({
+	      userRow = $('<tr />').attr({
 				'userId'  : user.id
 				})
 	          .addClass('dialogListItem')
-			  .prepend($('<label />').addClass('form-check-label').attr('for', checkboxId).text(getLearnerDisplayName(user)))
-		      .prepend(checkbox)
-		      .appendTo(list);
+			  .appendTo(list);
+		
+		$('<td />').append(checkbox).appendTo(userRow);
+		$('<td />').append($('<label />').addClass('form-check-label').attr('for', checkboxId).text(getLearnerDisplayName(user)))
+				   .appendTo(userRow);
 	    	
 		if (user.classMember) {
 			checkbox.prop('checked', 'checked');
@@ -2257,14 +2258,7 @@
 		}
 		
 		if (disableCreator && user.lessonCreator) {
-			userDiv.addClass('dialogListItemDisabled');
-		} else {
-			userDiv.click(function(event){
-				if (event.target == this && !checkbox.is(':disabled')) {
-		    		checkbox.prop('checked', checkbox.is(':checked') ? null : 'checked');
-		    		checkbox.change();
-		    	}
-		    })
+			userRow.addClass('dialogListItemDisabled');
 		}
 	});	
 }
@@ -2275,8 +2269,8 @@
 function editClassMember(userCheckbox){
 	var data={ 
 		'lessonID' : lessonId,
-		'userID'   : userCheckbox.parent().attr('userId'),
-		'role'     : userCheckbox.closest('table').is('#classMonitorTable') ? 'MONITOR' : 'LEARNER',
+		'userID'   : userCheckbox.closest('.dialogListItem').attr('userId'),
+		'role'     : userCheckbox.closest('table.dialogTable').is('#classMonitorTable') ? 'MONITOR' : 'LEARNER',
 		'add'      : userCheckbox.is(':checked')
 	};
 	data[csrfTokenName] = csrfTokenValue;
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -r10df78ce6b0f3c72a5ab1d8e17510c08211c36f8
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision b7c92dbcfdb0469dbc0144190a201757f398e529)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 10df78ce6b0f3c72a5ab1d8e17510c08211c36f8)
@@ -576,44 +576,58 @@
 							</div>
 						</td>
 						<td>
-							<span class="dialogSearchPhraseClear fa-solid fa-circle-xmark"
-								  onClick="javascript:classClearSearchPhrase()"
-								  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
-							></span>
+							<button class="btn btn-xs btn-secondary dialogSearchPhraseClear" 
+									onClick="javascript:classClearSearchPhrase()"
+									title="<fmt:message key='learners.search.phrase.clear.tooltip' />">
+								<i class="fa-solid fa-fw fa-xmark"></i>
+							</button>
 						</td>
 					</tr>
 					<tr>
-						<td class="navCell pageMinus10Cell"
-							title="<fmt:message key='learner.group.backward.10'/>"
-							onClick="javascript:sortClassList('Learner', -10)">
+						<td class="navCell pageMinus10Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Learner', -10)"
+									title="<fmt:message key='learner.group.backward.10'/>">
 								<i class="fa-solid fa-fw fa-step-backward"></i>
+							</button>
+								
 						</td>
-						<td class="navCell pageMinus1Cell"
-							title="<fmt:message key='learner.group.backward.1'/>"
-							onClick="javascript:sortClassList('Learner', -1)">
+						<td class="navCell pageMinus1Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Learner', -1)"
+									title="<fmt:message key='learner.group.backward.1'/>">
 								<i class="fa-solid fa-fw fa-backward"></i>
+							</button>
 						</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:sortClassList('Learner', 1)">
+						<td class="navCell pagePlus1Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Learner', 1)"
+									title="<fmt:message key='learner.group.forward.1'/>">
 								<i class="fa-solid fa-fw fa-forward"></i>
+							</button>
 						</td>
-						<td class="navCell pagePlus10Cell" 
-							title="<fmt:message key='learner.group.forward.10'/>"
-							onClick="javascript:sortClassList('Learner', 10)">
+						<td class="navCell pagePlus10Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Learner', 10)"
+									title="<fmt:message key='learner.group.forward.10'/>">
 								<i class="fa-solid fa-fw fa-step-forward"></i>
+							</button>
 						</td>
-						<td class="navCell sortCell" 
-							title="<fmt:message key='learner.group.sort.button'/>" 
-							onClick="javascript:sortClassList('Learner')">
+						<td class="navCell sortCell" role="button">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Learner')"
+									title="<fmt:message key='learner.group.sort.button'/>">
 								<i class="fa-solid fa-fw fa-caret-down"></i>
+							</button>
 						</td>
 					</tr>
 					<tr>
-						<td class="dialogList" colspan="6"></td>
+						<td colspan="6">
+							<table class="dialogTable table table-condensed table-hover"></table>
+						</td>
 					</tr>
 					<tr>
 						<td colspan="6">
@@ -636,37 +650,50 @@
 						<td id="classMonitorSearchRow" colspan="6">&nbsp;</td>
 					</tr>
 					<tr>
-						<td class="navCell pageMinus10Cell"
-							title="<fmt:message key='learner.group.backward.10'/>"
-							onClick="javascript:sortClassList('Monitor', -10)">
-								<i class="fa-solid fa-step-backward"></i>
+						<td class="navCell pageMinus10Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Monitor', -10)"
+									title="<fmt:message key='learner.group.backward.10'/>">
+								<i class="fa-solid fa-fw fa-step-backward"></i>
+							</button>
+								
 						</td>
-						<td class="navCell pageMinus1Cell"
-							title="<fmt:message key='learner.group.backward.1'/>"
-							onClick="javascript:sortClassList('Monitor', -1)">
-								<i class="fa-solid fa-backward"></i>
+						<td class="navCell pageMinus1Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Monitor', -1)"
+									title="<fmt:message key='learner.group.backward.1'/>">
+								<i class="fa-solid fa-fw fa-backward"></i>
+							</button>
 						</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:sortClassList('Monitor', 1)">
-								<i class="fa-solid fa-forward"></i>
+						<td class="navCell pagePlus1Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Monitor', 1)"
+									title="<fmt:message key='learner.group.forward.1'/>">
+								<i class="fa-solid fa-fw fa-forward"></i>
+							</button>
 						</td>
-						<td class="navCell pagePlus10Cell" 
-							title="<fmt:message key='learner.group.forward.10'/>"
-							onClick="javascript:sortClassList('Monitor', 10)">
-								<i class="fa-solid fa-step-forward"></i>
+						<td class="navCell pagePlus10Cell">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Monitor', 10)"
+									title="<fmt:message key='learner.group.forward.10'/>">
+								<i class="fa-solid fa-fw fa-step-forward"></i>
+							</button>
 						</td>
-						<td class="navCell sortCell" 
-							title="<fmt:message key='learner.group.sort.button'/>" 
-							onClick="javascript:sortClassList('Monitor')">
-								<i class="fa-solid fa-caret-down"></i>
+						<td class="navCell sortCell" role="button">
+							<button class="btn btn-xs btn-secondary" 
+									onClick="javascript:sortClassList('Monitor')"
+									title="<fmt:message key='learner.group.sort.button'/>">
+								<i class="fa-solid fa-fw fa-caret-down"></i>
+							</button>
 						</td>
 					</tr>
 					<tr>
-						<td class="dialogList" colspan="6"></td>
+						<td colspan="6">
+							<table class="dialogTable table table-condensed table-hover"></table>
+						</td>
 					</tr>
 					<tr>
 						<td colspan="6"></td>