Index: lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/MonitoringController.java
===================================================================
diff -u -r918a4d770ceef452f8dd7f2b91f3061ed83b5d7b -r636f9ba7fe62388aa283bda7a815315001834596
--- lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/MonitoringController.java	(.../MonitoringController.java)	(revision 918a4d770ceef452f8dd7f2b91f3061ed83b5d7b)
+++ lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/MonitoringController.java	(.../MonitoringController.java)	(revision 636f9ba7fe62388aa283bda7a815315001834596)
@@ -1418,7 +1418,8 @@
 	for (User user : users) {
 	    ObjectNode userJSON = JsonNodeFactory.instance.objectNode();
 	    userJSON.put("label", user.getFirstName() + " " + user.getLastName() + " " + user.getLogin());
-	    userJSON.put("value", user.getUserId());
+	    userJSON.put("value",
+		    user.getUserId() + (user.getPortraitUuid() == null ? "" : "_" + user.getPortraitUuid().toString()));
 
 	    responseJSON.add(userJSON);
 	}
Index: lams_monitoring/web/css/_monitorLesson_base.scss
===================================================================
diff -u -r0d54fb2115b353bfc618685ce50c08afa8cd669a -r636f9ba7fe62388aa283bda7a815315001834596
--- lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision 0d54fb2115b353bfc618685ce50c08afa8cd669a)
+++ lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision 636f9ba7fe62388aa283bda7a815315001834596)
@@ -392,6 +392,15 @@
 	visibility: hidden;
 }
 
+.ui-menu-item-wrapper.autocomplete-menu-item-with-portrait {
+	display: flex;
+	justify-content: space-between;
+}
+
+.ui-menu-item-wrapper.autocomplete-menu-item-with-portrait > p {
+	padding-top : 10px;
+}
+
 img#sequenceSearchedLearnerHighlighter {
 	position: absolute;
 	display: none;
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r0d54fb2115b353bfc618685ce50c08afa8cd669a -r636f9ba7fe62388aa283bda7a815315001834596
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 0d54fb2115b353bfc618685ce50c08afa8cd669a)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 636f9ba7fe62388aa283bda7a815315001834596)
@@ -1043,6 +1043,35 @@
 	$("#sequenceSearchPhrase").autocomplete( {
 		'source' : LAMS_URL + "monitoring/monitoring/autocomplete.do?scope=lesson&lessonID=" + lessonId,
 		'delay'  : 700,
+		'response' : function(event, ui) {
+			$.each(ui.content, function(){
+				// only add portrait if user has got one
+				let valueParts = this.value.split('_');
+				if (valueParts.length > 1) {
+					this.value = valueParts[0];
+					// portrait div will be added as text, then in open() function below we fix it
+					this.label += definePortrait(valueParts[1], this.value, STYLE_SMALL, true, LAMS_URL);
+				}
+			});
+		},
+		'open'   : function(event, ui) {
+			$('.ui-menu-item-wrapper', $(this).autocomplete( "widget" )).each(function(){
+				let menuItem = $(this);
+				// portrait, if exists, was added as text; now we make it proper html
+				menuItem.html(menuItem.text());
+				let portrait = menuItem.children('div');
+				if (portrait.length == 0) {
+					// no portrait, nothing to do
+					return;
+				}
+				// rearrange item contents
+				portrait.detach();
+				let label = $('<p />').text(menuItem.text());
+				// this extra class makes it a flex box
+				menuItem.empty().addClass('autocomplete-menu-item-with-portrait');
+				menuItem.append(label).append(portrait);
+			});
+		},
 		'select' : function(event, ui){
 			// put the learner first name, last name and login into the box
 			$(this).val(ui.item.label);
@@ -2117,8 +2146,8 @@
 function initLearnersTab() {
 	// search for users with the term the Monitor entered
 	$("#learnersSearchPhrase").autocomplete( {
-		'source' : LAMS_URL + "monitoring/monitoring/autocomplete.do?scope=lesson&lessonID=" + lessonId,
-		'delay'  : 700,
+		'source'   : LAMS_URL + "monitoring/monitoring/autocomplete.do?scope=lesson&lessonID=" + lessonId,
+		'delay'    : 700,
 		'select' : function(event, ui){
 		    // learner's ID in ui.item.value is not used here
 			$(this).val(ui.item.label);