Index: lams_learning/web/discussion/monitor5.jsp
===================================================================
diff -u -r7a1a9b453d15b75fbdbd78906aa7ced81f4c711e -rfc63987bf348f0821378370cd71e6b933129edfd
--- lams_learning/web/discussion/monitor5.jsp	(.../monitor5.jsp)	(revision 7a1a9b453d15b75fbdbd78906aa7ced81f4c711e)
+++ lams_learning/web/discussion/monitor5.jsp	(.../monitor5.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
@@ -239,12 +239,16 @@
 	       	 </fmt:message>
 	       	)
      	</div>
-     	<div class="btn btn-secondary discussion-sentiment-start-button" onClick="javascript:startDiscussionSentiment(${param.toolQuestionUid}, '${param.burningQuestionUid}', true)">
+     	<button type="button" class="btn btn-sm btn-light discussion-sentiment-start-button" 
+     			onClick="startDiscussionSentiment(${param.toolQuestionUid}, '${param.burningQuestionUid}', true)">
+     		<i class="fa-solid fa-circle-play me-1"></i>
 			<fmt:message key="label.discussion.restart"/>
-		</div>
-  		<div class="btn btn-secondary discussion-sentiment-stop-button" onClick="javascript:stopDiscussionSentiment(${param.toolQuestionUid}, '${param.burningQuestionUid}')">
+		</button>
+  		<button type="button" class="btn btn-sm btn-light discussion-sentiment-stop-button" 
+  				onClick="stopDiscussionSentiment(${param.toolQuestionUid}, '${param.burningQuestionUid}')">
+  			<i class="fa-solid fa-circle-stop me-1"></i>
 			<fmt:message key="label.discussion.stop"/>
-		</div>
+		</button>
     </div>
 
     <div id="discussion-sentiment-chart-card-content-${idSuffix}" class="card-body container-fluid">
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -ref06ef8b2241d001150ff320dc5637eec903894d -rfc63987bf348f0821378370cd71e6b933129edfd
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision ef06ef8b2241d001150ff320dc5637eec903894d)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
@@ -507,7 +507,7 @@
 				</div>
 			</header>
 
-			<div class="tab-content pt-2">
+			<div class="tab-content mt-3">
 
 			</div>
 		</div>
@@ -819,8 +819,12 @@
 				<div class="modal-body">
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">Cancel</button>
-					<button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">Confirm</button>
+					<button type="button" class="btn btn-secondary" id="confirmationDialogCancelButton">
+						<fmt:message key='label.cancel'/>
+					</button>
+					<button type="button" class="btn btn-primary" id="confirmationDialogConfirmButton">
+						<fmt:message key='label.confirm'/>
+					</button>
 				</div>
 			</div>
 		</div>
Index: lams_monitoring/web/tblmonitor/aes.jsp
===================================================================
diff -u -r468931509b9788c750a5f9aae7ac973659a63178 -rfc63987bf348f0821378370cd71e6b933129edfd
--- lams_monitoring/web/tblmonitor/aes.jsp	(.../aes.jsp)	(revision 468931509b9788c750a5f9aae7ac973659a63178)
+++ lams_monitoring/web/tblmonitor/aes.jsp	(.../aes.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
@@ -1,5 +1,5 @@
 <%@ include file="/taglibs.jsp"%>
-<% pageContext.setAttribute("newLineChar", "\r\n"); %>
+<c:set var="newLineChar" value="<%= \"\r\n\" %>" />
 
 <style>
 	#aes-tab .nav-tabs .nav-item {
@@ -54,18 +54,13 @@
 				nav.removeClass('active');
 			}
 		});
-
 	}
-	
 </script>
-<div id="aes-tab" class="container-fluid">
-	<div class="row">
-		<div class="col-10 offset-1 text-center">
-			<h3>
-				<fmt:message key="label.aes.questions.marks"/>
-			</h3>
-		</div>
-	</div>
+
+<div id="aes-tab" class="container-main ms-4">
+	<h3>
+		<fmt:message key="label.aes.questions.marks"/>
+	</h3>
 	
 	<ul class="nav nav-tabs">
 		<c:forEach var="aeToolContentId" items="${aeToolContentIds}" varStatus="status">
Index: lams_monitoring/web/tblmonitor/teams.jsp
===================================================================
diff -u -re0dbd6beaeea905447bd9a87cd23272c4cfee853 -rfc63987bf348f0821378370cd71e6b933129edfd
--- lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision e0dbd6beaeea905447bd9a87cd23272c4cfee853)
+++ lams_monitoring/web/tblmonitor/teams.jsp	(.../teams.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
@@ -3,7 +3,6 @@
 <c:set var="ALPHABET_CAPITAL_LETTERS" value="${fn:split('A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z', ',')}" scope="request"/>
 
 <style>
-
 	#tbl-teams-tab-content .card-header,
 	#tbl-teams-tab-content a.card-title,
 	#tbl-teams-tab-content a.ira-modal-link,
@@ -263,41 +262,38 @@
 	}
 </script>
 
-
-<div id="tbl-teams-tab-content" class="container-fluid">
+<div id="tbl-teams-tab-content" class="container-main ms-4">
 	<!-- Tables -->
+	<div class="float-end">
+		<c:if test="${not empty groupsSetupUrl}">
+			<a href="<lams:LAMSURL/>${groupsSetupUrl}" class="btn btn-secondary">
+				<i class="fa fa-people-group me-1"></i>
+				<fmt:message key="label.teams.setup"/>
+			</a>
+		</c:if>
+	</div>
+	<h3 id="tbl-teams-tab-title">
+		<fmt:message key="label.students.teams"/>
+	</h3>
+	
+	<c:if test="${not empty chartNamesDataset}">
+		<canvas id="summary-chart" class="mt-3"></canvas>
+	</c:if>
 
-	<div class="row">
-		<div class="col-10 offset-1">
-			<div class="float-end">
-				<c:if test="${not empty groupsSetupUrl}">
-					<a href="<lams:LAMSURL/>${groupsSetupUrl}" class="btn btn-secondary">
-						<fmt:message key="label.teams.setup"/>
-					</a>
-				</c:if>
-			</div>
-			<h3 id="tbl-teams-tab-title" class="text-right">
-				<fmt:message key="label.students.teams"/>
-			</h3>
+	<div class="lcard mt-5 mb-3">
+		<div class="card-header" id="heading-all-learners">
+	        <span class="card-title collapsable-icon-left">
+	       		<button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" data-bs-target="#collapse-0" 
+						aria-expanded="true" aria-controls="collapse-0">
+					<fmt:message key="label.ira.tra.summary"/>
+				</button>
+			</span>
 		</div>
-	</div>
-	<div class="row">
-		<div class="col-10 offset-1">
-			<c:if test="${not empty chartNamesDataset}">
-				<canvas id="summary-chart" class="mt-3"></canvas>
-			</c:if>
 
-			<div class="card mt-5 mb-3">
-				<h5 class="card-header" data-bs-toggle="collapse" data-bs-target="#collapse-0">
-					<a class="text-decoration-none">
-						<fmt:message key="label.ira.tra.summary"/>
-					</a>
-					</h4>
-
-					<div id="collapse-0" class="card-body collapse show">
-						<div class="table-responsive">
-							<table class="table table-hover table-condensed">
-								<thead>
+		<div id="collapse-0" class="card-body collapse show">
+			<div class="table-responsive">
+				<table class="table table-hover table-condensed">
+							<thead>
 								<tr>
 									<th style="width: 30%">
 										<fmt:message key="label.teams"/>
@@ -321,14 +317,16 @@
 										</c:if>
 									</c:if>
 								</tr>
-								</thead>
+							</thead>
 
-								<tbody>
+							<tbody>
 								<c:forEach var="groupDto" items="${groupDtos}">
-
 									<tr>
 										<td>
-											<a href="#teams-panel-${groupDto.groupID}"><c:out value="${groupDto.groupName}" /></a>
+											<c:out value="${groupDto.groupName}" />										
+											<a href="#teams-panel-${groupDto.groupID}" class="btn btn-sm btn-light ms-1">
+												<i class="fa-regular fa-hand-point-down"></i>
+											</a>
 										</td>
 
 										<c:if test="${isIraAvailable}">
@@ -356,7 +354,6 @@
 										</c:if>
 
 										<c:if test="${isScratchieAvailable}">
-
 											<td class="text-center">
 												<c:choose>
 													<c:when test="${empty groupDto.traCorrectAnswerCount}">
@@ -451,23 +448,28 @@
 										</c:if>
 									</tr>
 								</c:if>
-								</tbody>
-							</table>
-						</div>
-					</div>
+							</tbody>
+				</table>
 			</div>
+		</div>
+	</div>
 
-			<div id="question-results-panel"></div>
+	<div id="question-results-panel"></div>
 
-			<c:forEach var="groupDto" items="${groupDtos}">
-				<div class="card mb-3" id="teams-panel-${groupDto.groupID}" tabindex="0">
-					<h5 class="card-header" data-bs-toggle="collapse" data-bs-target="#collapse-${groupDto.groupID}">
-						<a class="text-decoration-none" id="group-name-${groupDto.groupID}">
+	<c:forEach var="groupDto" items="${groupDtos}">
+		<div class="lcard mb-3" id="teams-panel-${groupDto.groupID}">
+			<div class="card-header" id="heading-all-learners">
+		        <span class="card-title collapsable-icon-left">
+		       		<button type="button" class="btn btn-secondary-darker no-shadow" data-bs-toggle="collapse" data-bs-target="#collapse-${groupDto.groupID}" 
+							aria-expanded="true" aria-controls="collapse-${groupDto.groupID}">
+						<span id="group-name-${groupDto.groupID}">
 							<c:out value="${groupDto.groupName}" />
-						</a>
-					</h5>
-
-					<div id="collapse-${groupDto.groupID}" class="card-body collapse show">
+						</span>
+					</button>
+				</span>
+			</div>
+	
+			<div id="collapse-${groupDto.groupID}" class="card-body collapse show p-2">
 						<c:if test="${isScratchieAvailable}">
 							<c:choose>
 								<c:when test="${empty groupDto.traCorrectAnswerCount}">
@@ -518,7 +520,6 @@
 									<c:set var="lowestCorrectAnswerCountPercentDelta" value="${groupDto.lowestCorrectAnswerCountPercentDelta}" />
 
 									<c:forEach var="userDto" items="${groupDto.userList}">
-
 										<tr>
 											<td>
 												<c:choose>
@@ -620,8 +621,7 @@
 						</c:if>
 
 						<!-- Change leader and Compare buttons -->
-						<div class="row">
-							<div class="col-xs-12 col-md-12 col-lg-12">
+						<div class="clearfix">
 								<c:if test="${isIraAvailable and isScratchieAvailable and not empty groupDto.userList and not empty groupDto.traCorrectAnswerCount}">
 									<button href="#" data-bs-toggle="modal" data-bs-target="#comparison-modal" type="button" class="btn btn-sm btn-secondary float-end"
 											data-ira-scores="
@@ -641,28 +641,22 @@
 								<c:if test="${not empty leaderselectionToolActivityId and not empty groupDto.userList}">
 									<button onClick="javascript:showChangeLeaderModal(${groupDto.groupID})" type="button"
 											class="btn btn-sm btn-secondary float-end me-2">
+										<i class="fa-solid fa-user-pen me-1"></i>
 										<fmt:message key="label.change.leader"/>
 									</button>
 								</c:if>
-							</div>
 						</div>
 						<!-- End change leader -->
-
-
-					</div>
-				</div>
-			</c:forEach>
-
+			</div>
 		</div>
-		<div class="col-2"></div>
-	</div>
+	</c:forEach>
 </div>
 
 <!-- modal chart -->
 <div class="modal fade" id="comparison-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 	<div class="modal-dialog">
 		<div class="modal-content">
-			<div class="modal-header">
+			<div class="modal-header text-bg-warning">
 				<h4 class="modal-title" id="exampleModalLabel">
 					<fmt:message key="label.bar.chart"/>
 				</h4>
@@ -682,7 +676,7 @@
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 
-			<div class="modal-header">
+			<div class="modal-header text-bg-warning">
 				<div class="modal-title">
 					<h4>
 						<fmt:message key="label.ira.responses.for"/>: <span id="ira-user-name-label"></span>
@@ -697,6 +691,7 @@
 
 			<div class="modal-footer">
 				<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
+					<i class="fa fa-check fa-lg me-1"></i>
 					<fmt:message key="button.ok"/>
 				</a>
 			</div>
@@ -711,7 +706,7 @@
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 
-			<div class="modal-header">
+			<div class="modal-header text-bg-warning">
 				<div class="modal-title">
 					<h4>
 						<fmt:message key="label.tra.responses.for"/>: <span id="tra-user-name-label"></span>
@@ -728,6 +723,7 @@
 
 			<div class="modal-footer">
 				<a href="#" data-bs-dismiss="modal" class="btn btn-primary">
+					<i class="fa fa-check fa-lg me-1"></i>
 					<fmt:message key="button.ok"/>
 				</a>
 			</div>
@@ -739,4 +735,4 @@
 
 <!-- container for Change Leader modals -->
 <div id="change-leader-modals">
-</div>
\ No newline at end of file
+</div>
Index: lams_monitoring/web/tblmonitor/teamsQuestionResults.jsp
===================================================================
diff -u -r8ba5fc977a902ebf0d18050ad8defcbd96be9548 -rfc63987bf348f0821378370cd71e6b933129edfd
--- lams_monitoring/web/tblmonitor/teamsQuestionResults.jsp	(.../teamsQuestionResults.jsp)	(revision 8ba5fc977a902ebf0d18050ad8defcbd96be9548)
+++ lams_monitoring/web/tblmonitor/teamsQuestionResults.jsp	(.../teamsQuestionResults.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
@@ -1,9 +1,8 @@
 <%@ include file="/taglibs.jsp"%>
-
 <c:set var="ALPHABET" value="${fn:split('a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z', ',')}" scope="request"/>
 <c:set var="ALPHABET_CAPITAL_LETTERS" value="${fn:split('A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z', ',')}" scope="request"/>
 
-<div class="card mb-3" tabindex="0" id="">
+<div class="card mb-3">
 	<h5 class="card-header" data-bs-toggle="collapse" data-bs-target="#collapse-question-results">
 		<a class="text-decoration-none">
 			<fmt:message key="label.monitoring.teams.question.results" />
@@ -100,4 +99,4 @@
 			</table>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
Index: lams_monitoring/web/tblmonitor/teamsQuestionResultsCell.jsp
===================================================================
diff -u -r8ba5fc977a902ebf0d18050ad8defcbd96be9548 -rfc63987bf348f0821378370cd71e6b933129edfd
--- lams_monitoring/web/tblmonitor/teamsQuestionResultsCell.jsp	(.../teamsQuestionResultsCell.jsp)	(revision 8ba5fc977a902ebf0d18050ad8defcbd96be9548)
+++ lams_monitoring/web/tblmonitor/teamsQuestionResultsCell.jsp	(.../teamsQuestionResultsCell.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
@@ -1,6 +1,5 @@
 <%@ include file="/taglibs.jsp"%>
 
-
 <c:set var="highlightClass" value="" />
 <c:if test="${isHighlight}">
 	<c:set var="highlightClass">
@@ -20,4 +19,4 @@
 			-
 		</c:otherwise>
 	</c:choose>
-</td>
\ No newline at end of file
+</td>
Index: lams_monitoring/web/timeLimit.jsp
===================================================================
diff -u -rbbdddbe61d1b08c08a0dbae70d8d19bdfe357307 -rfc63987bf348f0821378370cd71e6b933129edfd
--- lams_monitoring/web/timeLimit.jsp	(.../timeLimit.jsp)	(revision bbdddbe61d1b08c08a0dbae70d8d19bdfe357307)
+++ lams_monitoring/web/timeLimit.jsp	(.../timeLimit.jsp)	(revision fc63987bf348f0821378370cd71e6b933129edfd)
@@ -5,8 +5,14 @@
 		color: #FF3333 !important;
 	}
 
-	#time-limit-table .btn-success {
-		color: var(--bs-white);
+	#time-limit-table { 
+		.btn-success {
+			color: var(--bs-white);
+		}
+		
+		.no-border-bottom {
+			border-bottom: none !important;
+		}
 	}
 
 	#time-limit-widget {
@@ -36,7 +42,7 @@
 	}
 
 	#time-limit-widget #time-limit-widget-content > div button {
-		width: 70%;
+		width: 85%;
 	}
 
 	#time-limit-widget #absolute-time-limit-widget-value {
@@ -327,8 +333,7 @@
 			counters = $('<div />').attr('id', 'absolute-time-limit-panel-counter')
 					.addClass('absolute-time-limit-counter')
 					.appendTo('#absolute-time-limit-panel-value')
-					.add(
-							$('<div />').attr('id', 'absolute-time-limit-widget-counter')
+					.add($('<div />').attr('id', 'absolute-time-limit-widget-counter')
 									.addClass('absolute-time-limit-counter')
 									.appendTo('#absolute-time-limit-widget-value'))
 					.countdown({
@@ -362,7 +367,7 @@
 								expiredHideContainers.hide();
 							}
 						},
-						expiryText : '<span class="countdown-timeout"><spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.time.limit.expired" /></spring:escapeBody></span>'
+						expiryText : '<span class="text-bg-danger p-1 mt-4"><spring:escapeBody javaScriptEscape='true'><fmt:message key="label.monitoring.time.limit.expired" /></spring:escapeBody></span>'
 					});
 		} else {
 			// if counter is paused, we can not adjust time, so resume it for a moment
@@ -508,7 +513,7 @@
 		if (expand && !timeLimitContent.hasClass('show')){
 			if (immediateExpand) {
 				timeLimitContent.addClass('show');
-				timeLimitWidget.css('width', '200px');
+				timeLimitWidget.css('width', '240px');
 			} else {
 				timeLimitContent.collapse('show');
 			}
@@ -533,24 +538,21 @@
 <c:set var="relativeTimeLimitEnabled" value="${param.relativeTimeLimit != 0}" />
 
 <div class="card mt-4" id="time-limit-panel">
-	<div class="card-header">
+	<div class="card-header text-bg-secondary">
        	<span class="card-title">
        		<fmt:message key="label.monitoring.time.limit"/>
      	</span>
 	</div>
 	<div class="card-body">
 		<table id="time-limit-table" class="table align-middle">
 			<tr>
-				<td colspan="6"><h4><fmt:message key="label.monitoring.time.limit.relative"/></h4>
+				<td colspan="6" class="no-border-bottom">
+					<h4><fmt:message key="label.monitoring.time.limit.relative"/></h4>
 					<p><fmt:message key="label.monitoring.time.limit.relative.desc"/></p>
 				</td>
 			</tr>
 			<tr>
 				<td>
-					<span id="relative-time-limit-value"><c:out value="${param.relativeTimeLimit}" /></span>&nbsp;
-					<fmt:message key="label.monitoring.time.limit.minutes"/>
-				</td>
-				<td class="text-center">
 					<div id="relative-time-limit-enabled" class="text-success ${relativeTimeLimitEnabled ? '' : 'd-none'}">
 						<fmt:message key="label.monitoring.time.limit.enabled"/>
 					</div>
@@ -559,119 +561,125 @@
 					</div>
 				</td>
 				<td class="text-center">
+					<span id="relative-time-limit-value"><c:out value="${param.relativeTimeLimit}" /></span>&nbsp;
+					<fmt:message key="label.monitoring.time.limit.minutes"/>
+				</td>
+				<td class="text-center">
 					<button id="relative-time-limit-start" class="btn btn-success ${relativeTimeLimitEnabled ? 'd-none' : ''}"
 							onClick="updateTimeLimit('relative', true)" disabled>
+						<i class="fa-solid fa-circle-play me-1"></i>
 						<fmt:message key="label.monitoring.time.limit.start"/>
 					</button>
 					<button id="relative-time-limit-cancel" class="btn btn-danger ${relativeTimeLimitEnabled ? '' : 'd-none'}"
 							onClick="updateTimeLimit('relative', false)">
+						<i class="fa-solid fa-circle-stop me-1"></i>
 						<fmt:message key="label.monitoring.time.limit.cancel"/>
 					</button>
 				</td>
 				<td>
 					<!-- Finish now button at absolute time limit row -->
 				</td>
 				<td class="text-center">
-					<button class="btn btn-secondary mb-1"
-							onClick="updateTimeLimit('relative', null, 1)">
+					<button class="btn btn-light mb-1" onClick="updateTimeLimit('relative', null, 1)">
 						<fmt:message key="label.monitoring.time.limit.plus.minute.1"/>
 					</button>
-					<button class="btn btn-secondary mb-1"
-							onClick="updateTimeLimit('relative', null, 5)">
+					<button class="btn btn-light mb-1" onClick="updateTimeLimit('relative', null, 5)">
 						<fmt:message key="label.monitoring.time.limit.plus.minute.5"/>
 					</button>
 				</td>
 				<td class="text-center">
-					<button class="btn btn-secondary mb-1"
-							onClick="updateTimeLimit('relative', null, -5)">
+					<button class="btn btn-light mb-1" onClick="updateTimeLimit('relative', null, -5)">
 						<fmt:message key="label.monitoring.time.limit.minus.minute.5"/>
 					</button>
-					<button class="btn btn-secondary mb-1"
-							onClick="updateTimeLimit('relative', null, -1)">
+					<button class="btn btn-light mb-1" onClick="updateTimeLimit('relative', null, -1)">
 						<fmt:message key="label.monitoring.time.limit.minus.minute.1"/>
 					</button>
 				</td>
 			</tr>
 			<tr>
-				<td colspan="6" class="pt-3"><h4><fmt:message key="label.monitoring.time.limit.absolute"/></h4>
+				<td colspan="6" class="no-border-bottom pt-3">
+					<h4><fmt:message key="label.monitoring.time.limit.absolute"/></h4>
 					<p><fmt:message key="label.monitoring.time.limit.absolute.desc"/></p>
 				</td>
 			</tr>
 			<tr>
 				<td id="absolute-time-limit-panel-value" class="absolute-time-limit-value">
-					<c:if test="${param.absoluteTimeLimit > 0}">
-						<span id="absolute-time-limit-await-trigger-value">
-							<c:out value="${param.absoluteTimeLimit}"/>&nbsp;
-							<fmt:message key="label.monitoring.time.limit.minutes"/>
-						</span>
-					</c:if>
-				</td>
-				<td class="text-center">
 					<div id="absolute-time-limit-enabled" class="text-success ${absoluteTimeLimitEnabled ? '' : 'd-none'}">
 						<fmt:message key="label.monitoring.time.limit.enabled"/>
 					</div>
 					<div id="absolute-time-limit-disabled"
-						 class="text-danger ${absoluteTimeLimitEnabled or param.absoluteTimeLimit != 0 ? 'd-none' : ''}">
+						 	class="text-danger ${absoluteTimeLimitEnabled or param.absoluteTimeLimit != 0 ? 'd-none' : ''}">
 						<fmt:message key="label.monitoring.time.limit.disabled"/>
 					</div>
 					<div id="absolute-time-limit-await-trigger"
-						 class="${absoluteTimeLimitEnabled or param.absoluteTimeLimit eq 0 ? 'd-none' : ''}">
+						 	class="${absoluteTimeLimitEnabled or param.absoluteTimeLimit eq 0 ? 'd-none' : ''}">
 						<fmt:message key="label.monitoring.time.limit.absolute.await.trigger"/>
 					</div>
 				</td>
 				<td class="text-center">
+					<c:if test="${param.absoluteTimeLimit > 0}">
+						<span id="absolute-time-limit-await-trigger-value">
+							<c:out value="${param.absoluteTimeLimit}"/>&nbsp;
+							<fmt:message key="label.monitoring.time.limit.minutes"/>
+						</span>
+					</c:if>
+				</td>
+				<td class="text-center">
 					<button id="absolute-time-limit-start" class="btn btn-success
-						${absoluteTimeLimitEnabled or param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
+							${absoluteTimeLimitEnabled or param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
 							onClick="updateTimeLimit('absolute', true)" disabled>
+						<i class="fa-solid fa-circle-play me-1"></i>
 						<fmt:message key="label.monitoring.time.limit.start"/>
 					</button>
 					<button id="absolute-time-limit-cancel" class="btn btn-danger
 							${absoluteTimeLimitEnabled or param.absoluteTimeLimit > 0 ? '' : 'd-none'}"
 							onClick="updateTimeLimit('absolute', false)">
+						<i class="fa-solid fa-circle-stop me-1"></i>
 						<fmt:message key="label.monitoring.time.limit.cancel"/>
 					</button>
 				</td>
 				<td class="text-center">
-					<button id="absolute-time-limit-finish-now" class="btn btn-warning"
+					<button id="absolute-time-limit-finish-now" class="btn btn-danger"
 							onClick="timeLimitFinishNow()"
 							title="<fmt:message key="label.monitoring.time.limit.finish.now.tooltip" />">
+						<i class="fa-solid fa-power-off me-1"></i>
 						<fmt:message key="label.monitoring.time.limit.finish.now"/>
 					</button>
 				</td>
 				<td class="text-center">
-					<button class="btn btn-secondary mb-1 absolute-time-limit-stepper
-								   ${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
+					<button class="btn btn-light mb-1 absolute-time-limit-stepper
+							${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
 							onClick="updateTimeLimit('absolute', null, 1)">
 						<fmt:message key="label.monitoring.time.limit.plus.minute.1"/>
 					</button>
-					<button class="btn btn-secondary mb-1 absolute-time-limit-stepper
-								   ${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
+					<button class="btn btn-light mb-1 absolute-time-limit-stepper
+							${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
 							onClick="updateTimeLimit('absolute', null, 5)">
 						<fmt:message key="label.monitoring.time.limit.plus.minute.5"/>
 					</button>
 				</td>
 				<td class="text-center">
-					<button class="btn btn-secondary mb-1 absolute-time-limit-stepper
-								   ${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
+					<button class="btn btn-light mb-1 absolute-time-limit-stepper
+							${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
 							onClick="updateTimeLimit('absolute', null, -5)">
 						<fmt:message key="label.monitoring.time.limit.minus.minute.5"/>
 					</button>
-					<button class="btn btn-secondary mb-1 absolute-time-limit-stepper
-								   ${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
+					<button class="btn btn-light mb-1 absolute-time-limit-stepper
+							${param.absoluteTimeLimit != 0 ? 'd-none' : ''}"
 							onClick="updateTimeLimit('absolute', null, -1)">
 						<fmt:message key="label.monitoring.time.limit.minus.minute.1"/>
 					</button>
 				</td>
 			</tr>
 
 			<tr>
-				<td colspan="6" class="pt-3">
+				<td colspan="6" class="no-border-bottom pt-3">
 					<h4><fmt:message key="label.monitoring.time.limit.individual"/></h4>
 					<p><fmt:message key="label.monitoring.time.limit.individual.desc"/></p>
 				</td>
 			</tr>
 			<tr>
-				<td colspan="3">
+				<td colspan="3" class="no-border-bottom">
 					<div class="input-group">
 						<input id="individual-time-limit-autocomplete" type="text" class="form-control border-end-0"
 							   placeholder='<fmt:message key="label.monitoring.time.limit.individual.placeholder" />'>
@@ -680,7 +688,7 @@
 					    </span>
 					</div>
 				</td>
-				<td colspan="3"></td>
+				<td colspan="3" class="no-border-bottom"></td>
 			</tr>
 
 			<tr id="individual-time-limit-template-row" class="d-none">
@@ -693,28 +701,29 @@
 				<td class="text-center">
 					<button id="individual-time-limit-cancel" class="btn btn-danger"
 							onClick="updateTimeLimit.call(this, 'individual', false)">
+						<i class="fa-solid fa-circle-stop me-1"></i>
 						<fmt:message key="label.monitoring.time.limit.cancel"/>
 					</button>
 				</td>
 				<td>
 					<!-- Finish now button at absolute time limit row -->
 				</td>
 				<td class="text-center">
-					<button class="btn btn-secondary"
+					<button class="btn btn-btn-light"
 							onClick="updateTimeLimit.call(this, 'individual', null, 1)">
 						<fmt:message key="label.monitoring.time.limit.plus.minute.1"/>
 					</button>
-					<button class="btn btn-secondary"
+					<button class="btn btn-light"
 							onClick="updateTimeLimit.call(this, 'individual', null, 5)">
 						<fmt:message key="label.monitoring.time.limit.plus.minute.5"/>
 					</button>
 				</td>
 				<td class="text-center">
-					<button class="btn btn-secondary"
+					<button class="btn btn-light"
 							onClick="updateTimeLimit.call(this, 'individual', null, -5)">
 						<fmt:message key="label.monitoring.time.limit.minus.minute.5"/>
 					</button>
-					<button class="btn btn-secondary"
+					<button class="btn btn-light"
 							onClick="updateTimeLimit.call(this, 'individual', null, -1)">
 						<fmt:message key="label.monitoring.time.limit.minus.minute.1"/>
 					</button>
@@ -736,22 +745,21 @@
 
 	<div id="time-limit-widget-content" class="collapse card-body" role="tabpanel" aria-labelledby="time-limit-widget-heading">
 		<div class="expired-hide-container">
-			<button class="btn btn-sm btn-success" id="time-limit-widget-add-1-minute"
-					onClick="updateTimeLimit('absolute', null, 1)">
+			<button class="btn btn-sm btn-success" id="time-limit-widget-add-1-minute" onClick="updateTimeLimit('absolute', null, 1)">
 				<fmt:message key="label.monitoring.time.limit.plus.minute.1"/>
 			</button>
 		</div>
 
 		<div class="expired-hide-container">
-			<button class="btn btn-sm btn-danger"
-					onClick="updateTimeLimit('absolute', false)">
+			<button class="btn btn-sm btn-danger" onClick="updateTimeLimit('absolute', false)">
+				<i class="fa-solid fa-circle-stop me-1"></i>
 				<fmt:message key="label.monitoring.time.limit.cancel"/>
 			</button>
 		</div>
 
 		<div>
-			<button class="btn btn-sm btn-secondary"
-					onClick="scrollToTimeLimitPanel()">
+			<button class="btn btn-sm btn-secondary" onClick="scrollToTimeLimitPanel()">
+				<i class="fa-solid fa-gear me-1"></i>
 				<fmt:message key="label.monitoring.time.limit.show.controls"/>
 			</button>
 		</div>