Index: lams_monitoring/web/WEB-INF/tags/Input.tag
===================================================================
diff -u -rcef0d9bb2b10841da2f2f948dcfd261f6ed7d644 -r1a86d65e1c3e0253797a97185a97a93be476340e
--- lams_monitoring/web/WEB-INF/tags/Input.tag	(.../Input.tag)	(revision cef0d9bb2b10841da2f2f948dcfd261f6ed7d644)
+++ lams_monitoring/web/WEB-INF/tags/Input.tag	(.../Input.tag)	(revision 1a86d65e1c3e0253797a97185a97a93be476340e)
@@ -13,6 +13,7 @@
 <%@ attribute name="labelKey" required="true" rtexprvalue="true" %>
 
 <%@ attribute name="inputCellClass" required="false" rtexprvalue="true" %>
+<%@ attribute name="iconClass" required="false" rtexprvalue="true" %>
 <%@ attribute name="labelCellSize" required="false" rtexprvalue="true" %>
 <%@ attribute name="tooltipKey" required="false" rtexprvalue="true" %>
 <%@ attribute name="tooltipDescriptionKey" required="false" rtexprvalue="true" %>
@@ -22,6 +23,9 @@
 
 <div class="form-group row">
 	<label class="col-sm-${labelCellSize} col-form-label" for="${id}">
+		<c:if test="${not empty iconClass}">
+			<i class="${iconClass}"></i>
+		</c:if>
 		<fmt:message key="${labelKey}" />
 		
 		<c:if test="${not empty tooltipKey}">
Index: lams_monitoring/web/WEB-INF/tags/Switch.tag
===================================================================
diff -u -rcef0d9bb2b10841da2f2f948dcfd261f6ed7d644 -r1a86d65e1c3e0253797a97185a97a93be476340e
--- lams_monitoring/web/WEB-INF/tags/Switch.tag	(.../Switch.tag)	(revision cef0d9bb2b10841da2f2f948dcfd261f6ed7d644)
+++ lams_monitoring/web/WEB-INF/tags/Switch.tag	(.../Switch.tag)	(revision 1a86d65e1c3e0253797a97185a97a93be476340e)
@@ -11,13 +11,15 @@
 <%@ taglib uri="tags-lams" prefix="lams" %>
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
 
-<%@ attribute name="name" required="true" rtexprvalue="true" %>
+
 <%@ attribute name="labelKey" required="true" rtexprvalue="true" %>
 
+<%@ attribute name="name" required="false" rtexprvalue="true" %>
 <%@ attribute name="checked" required="false" rtexprvalue="true" %>
 <%@ attribute name="id" required="false" rtexprvalue="true" %>
 <%@ attribute name="useSpringForm" required="false" rtexprvalue="true" %>
 <%@ attribute name="inputCellClass" required="false" rtexprvalue="true" %>
+<%@ attribute name="iconClass" required="false" rtexprvalue="true" %>
 <%@ attribute name="tooltipKey" required="false" rtexprvalue="true" %>
 <%@ attribute name="tooltipDescriptionKey" required="false" rtexprvalue="true" %>
 
@@ -26,13 +28,17 @@
 <c:set var="useSpringForm" value="${empty useSpringForm ? false : useSpringForm}" />
 
 <lams:Input id="${id}" labelKey="${labelKey}" inputCellClass="d-flex justify-content-end switch switch-sm ${inputCellClass}"
-		    tooltipKey="${tooltipKey}" tooltipDescriptionKey="${tooltipDescriptionKey}" >
+			iconClass="${iconClass}" tooltipKey="${tooltipKey}" tooltipDescriptionKey="${tooltipDescriptionKey}">
     <c:choose>
    		<c:when test="${useSpringForm}">
    			<form:checkbox path="${name}" id="${id}" cssClass="switch" />
    		</c:when>
    		<c:otherwise>
-			<input type="checkbox" class="switch" name="${name}" id="${id}" ${checked ? ' checked' : ''}>
+			<input type="checkbox" class="switch" id="${id}" ${checked ? ' checked' : ''}
+				<c:if test="${not empty name}">
+					name="${name}"
+				</c:if>
+			>
    		</c:otherwise>
    	</c:choose>
 	
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r0566214ac49eed87e266c749887a82c1bacb7f4f -r1a86d65e1c3e0253797a97185a97a93be476340e
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 0566214ac49eed87e266c749887a82c1bacb7f4f)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 1a86d65e1c3e0253797a97185a97a93be476340e)
@@ -95,14 +95,17 @@
 .component-sidebar .lesson-properties #lessonDetails {
 	opacity: 0;
 	transition: opacity 0 linear 0;
-	
 }
 
 .component-sidebar .lesson-properties.active #lessonDetails {
 	opacity: 1;
 	transition: opacity .3s ease .3s;
 }
 
+.component-sidebar .lesson-properties #lessonDetails .btn {
+	width: 75%;
+}
+
 .component-sidebar .lesson-properties #gradebookOnCompleteButton {
 	margin-top: 1rem;
 }
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -r0566214ac49eed87e266c749887a82c1bacb7f4f -r1a86d65e1c3e0253797a97185a97a93be476340e
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 0566214ac49eed87e266c749887a82c1bacb7f4f)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 1a86d65e1c3e0253797a97185a97a93be476340e)
@@ -86,26 +86,26 @@
  */
 function initLessonTab(){
 	// sets presence availability. buttons may be temporarily disable by the tour.
-	$('#presenceButton').click(function(){
-		var checked = $(this).toggleClass('btn-success').hasClass('btn-success');
-		var data = {
-			'presenceAvailable' : checked,
-			'lessonID'      : lessonId
-		};
+	$('#presenceButton').change(function(){
+		var checked = $(this).prop('checked'),
+			data = {
+				'presenceAvailable' : checked,
+				'lessonID'      : lessonId
+			};
 		data[csrfTokenName] = csrfTokenValue;
 		$.ajax({
 			url : LAMS_URL + 'monitoring/monitoring/presenceAvailable.do',
 			type : 'POST',
 			cache : false,
 			data : data, 
 			success : function() {
-				updatePresenceAvailableCount();
+				// updatePresenceAvailableCount();
 				if (checked) {
-					$('#imButton').show();
-					$('#imButton').prop('disabled', false);
+					$('#imButtonWrapper').show();
 					alert(LABELS.LESSON_PRESENCE_ENABLE_ALERT);
 				} else {
-					$('#imButton').removeClass('btn-success').hide();
+					$('#imButtonWrapper, #openImButton').hide();
+					$('#imButton').prop('checked', false);
 					alert(LABELS.LESSON_PRESENCE_DISABLE_ALERT);
 				}
 			}
@@ -114,11 +114,11 @@
 	
 	// sets instant messaging availability
 	$('#imButton').click(function(){
-		var checked = $(this).toggleClass('btn-success').hasClass('btn-success');
-		var data = {
-			'presenceImAvailable' : checked,
-			'lessonID'      : lessonId
-		};
+		var checked = $(this).prop('checked'),
+			data = {
+				'presenceImAvailable' : checked,
+				'lessonID'      : lessonId
+			};
 		data[csrfTokenName] = csrfTokenValue;
 		$.ajax({
 			url : LAMS_URL + 'monitoring/monitoring/presenceImAvailable.do',
@@ -247,9 +247,9 @@
 	$("#emaildatePicker").datetimepicker();
 
 	// sets gradebook on complete functionality
-	$('#gradebookOnCompleteButton').click(function(){
-		var checked = $(this).toggleClass('btn-success').hasClass('btn-success');
-		var data = {
+	$('#gradebookOnCompleteButton').change(function(){
+		var checked = $(this).prop('checked'),
+			data = {
 			'gradebookOnComplete' : checked,
 			'lessonID'      : lessonId
 		};
@@ -535,12 +535,12 @@
 			$('#lesson-instructions').html(response.lessonInstructions);
 		}
 	});
-	
+	 
 	drawChart('pie', 'chartDiv',
 			  LAMS_URL + 'monitoring/monitoring/getLessonChartData.do?lessonID=' + lessonId,
 			  true);
 	
-	updatePresenceAvailableCount();
+	// updatePresenceAvailableCount();
 }
 
 function checkScheduleDate(startDateString, endDateString) {
@@ -646,9 +646,9 @@
 	}, false, true);
 }
 
-
+/*
 function updatePresenceAvailableCount(){
-	var checked = $('#presenceButton').hasClass('btn-success'),
+	var checked = $('#presenceButton').prop('checked');
 		counter = $('#presenceCounter');
 	if (checked) {
 		$.ajax({
@@ -666,8 +666,8 @@
 		counter.hide();
 	}
 }
+*/
 
-
 function updateContributeActivities(contributeActivities) {
 	let requiredTasksPanel = $('#required-tasks'),
 		requiredTasksContent = $('#required-tasks-content', requiredTasksPanel);
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -r7ecadc30076e09aa7a50a2c495344c56622f5105 -r1a86d65e1c3e0253797a97185a97a93be476340e
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 7ecadc30076e09aa7a50a2c495344c56622f5105)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 1a86d65e1c3e0253797a97185a97a93be476340e)
@@ -328,42 +328,30 @@
 									<i class="fa fa-sm fa-info"></i>
 									<span class="hidden-xs"><fmt:message key="label.lesson.introduction"/></span>
 								</button>
-							</c:if>							  
-
-							<button id="gradebookOnCompleteButton" class="btn btn-sm btn-primary
-								<c:if test="${lesson.gradebookOnComplete}">
-									btn-success
-								</c:if>
-								">
-								<i class="fa fa-sm fa-list-ol"></i><span class="hidden-xs">&nbsp;<fmt:message key="label.display.activity.scores"/></span> 
-								</button>
+							</c:if>			
+											   
+							<lams:Switch id="gradebookOnCompleteButton" checked="${lesson.gradebookOnComplete}"
+								labelKey="label.display.activity.scores" iconClass="fa fa-sm fa-list-ol" />
 						</div>
-							
 					</dd>
 
 					<!-- IM & Presence -->
 					<dt><fmt:message key="lesson.im"/>:</dt>
 					<dd>
-						<button id="presenceButton" class="btn btn-primary btn-sm
-							<c:if test="${lesson.learnerPresenceAvailable}">
-								btn-success
-							</c:if>
-							"><i class="fa fa-sm fa-wifi"></i>
-							<span class="hidden-xs"><fmt:message key="lesson.presence"/></span> 
-							<span id="presenceCounter" class="badge">0</span>
-						</button>
-
-						<button id="imButton" class="btn btn-primary btn-sm
-							<c:if test="${lesson.learnerImAvailable}">
-								btn-success
-							</c:if>
-							"
+						
+						<lams:Switch id="presenceButton" checked="${lesson.learnerPresenceAvailable}"
+							labelKey="lesson.presence" iconClass="fa fa-sm fa-wifi"	/>
+						
+						<!-- <span id="presenceCounter" class="badge">0</span> -->
+	
+						<div id="imButtonWrapper"
 							<c:if test="${not lesson.learnerPresenceAvailable}">
 								style="display: none"
 							</c:if>
-						><i class="fa fa-sm fa-comments-o"></i>
-						 <span class="hidden-xs"><fmt:message key="lesson.im"/></span>
-						</button>
+							>
+							<lams:Switch id="imButton" checked="${lesson.learnerImAvailable}"
+								labelKey="lesson.im" iconClass="fa fa-sm fa-comments"	/>
+						</div>
 						
 						<button id="openImButton" class="btn btn-primary btn-sm"
 							<c:if test="${not lesson.learnerImAvailable}">