Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -rbfa7dfb5557d54767b137652b34dd89c13fb1227 -r1837cd06ffdcf89f041b90ce3582951ff326ae4f
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision bfa7dfb5557d54767b137652b34dd89c13fb1227)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 1837cd06ffdcf89f041b90ce3582951ff326ae4f)
@@ -824,7 +824,28 @@
 	background-color: #1AD9B2 !important;
 }
 
+.monitoring-page-wrapper #sequenceSearchPhraseContainer {
+	width: 20rem;
+}
 
+.monitoring-page-wrapper #sequenceSearchPhrase {
+	width: 15rem;
+} 
+
+.monitoring-page-wrapper #sequenceSearchPhraseClearIcon {
+	display: none;
+}
+
+body.component .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait {
+	display: flex;
+	justify-content: space-between;
+	padding: 5px;
+}
+
+body.component .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait > p {
+	padding-top: 10px;
+}
+
 .dialogContainer {
   display: none;
   -webkit-overflow-scrolling: touch !important;
@@ -906,6 +927,8 @@
 	height: calc(100% - 10px);
 }
 
+
+
 /********** CANVAS STYLES **********/
 
 #canvas-container {
@@ -1009,32 +1032,6 @@
 	display: none;
 }
 
-#canvas-container .topButtonsContainer #sequenceSearchPhrase {
-	float: right;
-	margin: 6px 5px 5px 0;
-}
-
-#canvas-container .topButtonsContainer #sequenceSearchPhraseIcon {
-	float: right;
-	margin: 9px 7px 5px 0;
-}
-
-#canvas-container .topButtonsContainer #sequenceSearchPhraseClear {
-	float: right;
-	cursor: pointer;
-	margin: 9px 25px 5px 0;
-	visibility: hidden;
-}
-
-#canvas-container .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait {
-	display: flex;
-	justify-content: space-between;
-}
-
-#canvas-container .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait>p {
-	padding-top: 10px;
-}
-
 #canvas-container img#sequenceSearchedLearnerHighlighter {
 	position: absolute;
 	display: none;
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -r5e9fc57b2fde4a487da7c72f6de7e286bc4ae6ee -r1837cd06ffdcf89f041b90ce3582951ff326ae4f
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 5e9fc57b2fde4a487da7c72f6de7e286bc4ae6ee)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 1837cd06ffdcf89f041b90ce3582951ff326ae4f)
@@ -1240,7 +1240,9 @@
 				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);
+					this.portrait = definePortrait(valueParts[1], this.value, STYLE_SMALL, true, LAMS_URL);
+					this.rawLabel = this.label;
+					this.label += this.portrait;
 				}
 			});
 		},
@@ -1264,7 +1266,7 @@
 		},
 		'select' : function(event, ui){
 			// put the learner first name, last name and login into the box
-			$(this).val(ui.item.label);
+			$(this).val(ui.item.rawLabel);
 			// mark the learner's ID and make him highlighted after the refresh
 			sequenceSearchedLearner = ui.item.value;
 			updateSequenceTab();
@@ -2130,7 +2132,9 @@
  */
 function highlightSearchedLearner(icon) {
 	// show the "clear" button
-	$('#sequenceSearchPhraseClear').css('visibility', 'visible');
+	$('#sequenceSearchPhraseButton').prop('disabled', false);
+	$('#sequenceSearchPhraseIcon').hide();
+	$('#sequenceSearchPhraseClearIcon').show();
 	
 	// border and z-index are manipulated via CSS
 	icon.addClass('learner-searched');
@@ -2154,7 +2158,9 @@
  */
 function sequenceClearSearchPhrase(refresh){
 	$('#sequenceSearchPhrase').val('');
-	$('#sequenceSearchPhraseClear').css('visibility', 'hidden');
+	$('#sequenceSearchPhraseButton').prop('disabled', true);
+	$('#sequenceSearchPhraseClearIcon').hide();
+	$('#sequenceSearchPhraseIcon').show();
 	$('#sequenceSearchedLearnerHighlighter').hide();
 	sequenceSearchedLearner = null;
 	if (refresh) {
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -r6978e5aaea15f2205f5b09d50b1df65ba925ed76 -r1837cd06ffdcf89f041b90ce3582951ff326ae4f
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 6978e5aaea15f2205f5b09d50b1df65ba925ed76)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 1837cd06ffdcf89f041b90ce3582951ff326ae4f)
@@ -427,10 +427,13 @@
 				<p id="lesson-name">Lesson Name</p>
 			</div>
 			<div class="top-menu">
-				<form>
-					<input type="text" name="" placeholder="Search Student">
-					<img src="<lams:LAMSURL/>images/components/search.svg" alt="#" />
-				</form>
+				<div id="sequenceSearchPhraseContainer" class="input-group">
+					<input id="sequenceSearchPhrase" type="text" class="form-control" placeholder="Search Student">
+				    <button id="sequenceSearchPhraseButton" class="btn bg-white opacity-100" type="button" disabled onClick="javascript:sequenceClearSearchPhrase(true)">
+				    	<i id="sequenceSearchPhraseIcon" class="fa-solid fa-fw fa-magnifying-glass"></i>
+				    	<i id="sequenceSearchPhraseClearIcon" class="fa-solid fa-fw fa-xmark"></i>
+				    </button>
+				</div>
 				<!-- 
 				<div class="top-menu-btn component-menu-btn">
 					<a href="#" onClick="javscript:refreshMonitor()"><img src="<lams:LAMSURL/>images/components/icon2.svg" alt="#" /></a>