Index: lams_monitoring/web/css/_monitorLesson_base.scss
===================================================================
diff -u -r25bb6171ec374e4b7e6285f69a953e681e99e3eb -r5836e66bf18ae495d83b4a807a9de46fdff49606
--- lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision 25bb6171ec374e4b7e6285f69a953e681e99e3eb)
+++ lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision 5836e66bf18ae495d83b4a807a9de46fdff49606)
@@ -311,23 +311,27 @@
 	height: 100%;
 	overflow: auto;
 }
-
-div#sequenceCanvas div.learner-icon {
-	position : absolute;
+  
+div#sequenceCanvas div.learner-icon, #completedLearnersContainer div.learner-icon {
+	display: inline-block;
 	border-radius : 20px;
 	background-color : #FFFFFF;
 }
+
+#completedLearnersContainer div.learner-icon {
+	margin-right: 10px;
+}
   
-div#sequenceCanvas div.more-learner-icon {
-	position : absolute;
-	border-radius : 20px;
-	cursor: pointer;
-	background-color : #e7e7e7;
+div#sequenceCanvas div.more-learner-icon, #completedLearnersContainer div.more-learner-icon {
+	display: inline-block;
 	width    : 35px;
 	height   : 35px;
 	line-height : 35px;
 	font-size  : 16px;
-	z-index : 108;
+	border-radius : 20px;
+	cursor: pointer;
+	background-color : #e7e7e7;
+	text-align: center;
 }
   
 div#sequenceCanvas .activity-requires-attention {
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r25bb6171ec374e4b7e6285f69a953e681e99e3eb -r5836e66bf18ae495d83b4a807a9de46fdff49606
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 25bb6171ec374e4b7e6285f69a953e681e99e3eb)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 5836e66bf18ae495d83b4a807a9de46fdff49606)
@@ -1565,11 +1565,12 @@
 		activityLeftOffset = learningDesignSvgExternalOffset.left + coord.x - learningDesignSvgInternalLeftOffset + sequenceCanvas.scrollLeft(),
 		activityTopOffset  = learningDesignSvgExternalOffset.top  + coord.y - learningDesignSvgInternalTopOffset + sequenceCanvas.scrollTop();
 		
+		/*
 		if (activity.learners) {
 			activity.learners = [...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners]
 			activity.learnerCount = activity.learners.length;
 	    }
-	
+	*/
 	if (isTool || isGrouping) {
 		if (activity.learnerCount > 0) {
 			// if learners reached the activity, make room for their icons: make activity icon and label smaller and move to top
@@ -1601,11 +1602,12 @@
 				}
 				$(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL))
 					  .css({
+						'position' : 'absolute',
 						'left'     : activityLeftOffset + (learnerIndex * (activity.learnerCount < 5 ? 45 : 20)) - 2 + 'px',
 						'top'      : activityTopOffset  - 60 + 'px',
 						'z-index'  : 100 + learnerIndex
 					  })
-					  .addClass('popover-link new-popover learner-icon')
+					  .addClass('new-popover learner-icon')
 					  .attr({
 						'id'            : 'act' + activity.id + 'learner' + learner.id,
 						'data-id'       : 'popover-' + learner.id,
@@ -1620,8 +1622,10 @@
 				$('<div />')
 					  .attr('id', 'act' + activity.id + 'learnerGroup')
 					  .css({
+						'position' : 'absolute',
 						'left'     : activityLeftOffset + 138 + 'px',
-						'top'      : activityTopOffset  - 60  + 'px'
+						'top'      : activityTopOffset  - 60  + 'px',
+						'z-index'  : 108
 					  })
 					  .addClass('more-learner-icon')
 					  .text('+' + (activity.learnerCount - 7))
@@ -1639,6 +1643,7 @@
 		if (activity.learnerCount > 0) {
 			$('<div />')
 				  .css({
+					'position' : 'absolute',
 					'left'     : activityLeftOffset + 'px',
 					'top'      : activityTopOffset  - 80  + 'px'
 				  })
@@ -1657,6 +1662,7 @@
 		if (activity.learnerCount > 0) {
 			$('<div />')
 				  .css({
+					'position' : 'absolute',
 					'left'     : activityLeftOffset - 20  + 'px',
 					'top'      : activityTopOffset  - 100  + 'px'
 				  })
@@ -1675,6 +1681,7 @@
 		if (activity.learnerCount > 0) {
 			$('<div />')
 				  .css({
+					'position' : 'absolute',
 					'left'     : activityLeftOffset + coord.width - 50 + 'px',
 					'top'      : activityTopOffset  - 98  + 'px'
 				  })
@@ -1796,28 +1803,25 @@
 	if (learners) {
 		// create learner icons, along with handlers
 		$.each(learners, function(learnerIndex, learner){
-			// make an icon for each learner			
-			var activityLearnerId = 'completedlearner'+learner.id;
-			var icon = $('<img />').attr({
-				'id'	   : activityLearnerId,
-				'src' : LAMS_URL + 'images/icons/' 
-				   		+ (learner.id == sequenceSearchedLearner ? 'user_red.png' : 'user.png'),
-				'style'		 : 'cursor : pointer',
-				'class'		 : 'popover-link new-popover',
-				'data-toggle': 'popover',
-				'data-id'	 : 'popover-'+activityLearnerId,
-				'data-fullname': getLearnerDisplayName(learner)
-				})
+			let icon = $(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL))
+				  .addClass('new-popover learner-icon')
+				  .attr({
+					'id'            : 'learner-complete-' + learner.id,
+					'data-id'       : 'popover-' + learner.id,
+					'data-toggle'   : 'popover',
+					'data-portrait' : learner.portraitId,
+					'data-fullname' : getLearnerDisplayName(learner)
+				  })
 				// drag learners to force complete activities
 				  .draggable({
 					'appendTo'    : '#t2',
 					'containment' : '#t2',
 				    'distance'    : 20,
 				    'scroll'      : false,
 				    'cursorAt'	  : {'left' : 10, 'top' : 15},
-					'helper'      : function(event){
+					'helper'      : function(){
 						// copy of the icon for dragging
-						return $('<img />').attr('src', LAMS_URL + 'images/icons/user.png');
+						return icon.clone();
 					},
 					'start' : function(){
 						autoRefreshBlocked = true;
@@ -1832,21 +1836,18 @@
 					}
 				})
 				.appendTo(iconsContainer);
-			if ( learner.portraitId ) {
-				icon.attr('data-portrait', learner.portraitId);
-			} 
 			
 			if (learner.id == sequenceSearchedLearner){
 				highlightSearchedLearner(icon);
 			}
 		});
 		
-		// show a group icon
-		var groupIcon = $('<img />').attr({
-			'src' : LAMS_URL + 'images/icons/group.png',
-			'title'      : LABELS.LEARNER_GROUP_SHOW
-		}).css('cursor', 'pointer').appendTo(iconsContainer);
 		
+		var groupIcon = $('<div />')
+		  .addClass('more-learner-icon')
+		  .text(learnerCount)
+		  .appendTo(iconsContainer);
+
 		dblTap(groupIcon, function(){
 			var ajaxProperties = {
 					url : LAMS_URL + 'monitoring/monitoring/getCurrentLearners.do',