Index: lams_central/web/css/components.scss
===================================================================
diff -u -r6866da235d682d74f883afdd01e00e92d16a13eb -r4262c80621f1eb846aa075a52f824091abbc218a
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
@@ -563,6 +563,20 @@
 	border: 0;
 }
 
+.ltable>div:first-child {
+	border-top: 1px solid #ddd;
+    background-color: rgba(var(--bs-light-rgb), 1);
+    font-style: italic;
+    color: initial !important;
+}
+.ltable>.row {
+	border-bottom: 2px solid var(--bs-gray-200);
+	padding: 0.5rem;
+}
+.ltable.table-sm>.row {
+	padding: 0.25rem;
+}
+
 /* jqGrid text wrapping */
 .ui-jqgrid tr.jqgrow td, .ui-jqgrid tr.ui-subgrid td {
 	white-space:normal !important;
Index: lams_learning/web/discussion/learner.jsp
===================================================================
diff -u -r47dddf6db4afaba99d8f3f88fc50b16df9251a76 -r4262c80621f1eb846aa075a52f824091abbc218a
--- lams_learning/web/discussion/learner.jsp	(.../learner.jsp)	(revision 47dddf6db4afaba99d8f3f88fc50b16df9251a76)
+++ lams_learning/web/discussion/learner.jsp	(.../learner.jsp)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
@@ -1,7 +1,6 @@
 <%@include file="/common/taglibs.jsp"%>
 
 <style>
-	
 	#discussion-sentiment-widget {
 	  /* The main widget sticks to right browser edge */
 	  position: fixed;
@@ -11,7 +10,7 @@
 	  width: 40px;
 	}	
 	
-	#discussion-sentiment-widget .panel-title a {
+	#discussion-sentiment-widget .card-title a {
 		/* Underlining the link in title does not look nice*/
 		text-decoration: none !important;
 	}
@@ -21,14 +20,7 @@
 		display: none;
 	}
 	
-	#discussion-sentiment-widget th {
-		/* Table headers feels better this way */
-		text-align: center;
-		font-weight: bold;
-		font-style: normal;
-	}
-	
-	#discussion-sentiment-widget td {
+	#discussion-sentiment-widget .row:not(:first-child) {
 		/* Cells are clickable */
 		cursor: pointer;
 	}
@@ -38,7 +30,7 @@
 	// This method is called when monitor stops discussion via stopLearner.jsp and on server error
 	function stopDiscussionSentimentLearnerWidget(){
 		var discussionSentimentContent = $('#discussion-sentiment-widget-content');
-		if (discussionSentimentContent.hasClass('in')){
+		if (discussionSentimentContent.hasClass('show')){
 			// if the widget is expanded, collapse it and then remove it
 			discussionSentimentContent.data('remove', true).collapse('hide');
 		} else {
@@ -50,8 +42,8 @@
 	function selectDiscussionSentimentOption(selectedOption, autoExpand, autoCollapse) {
 		// clear other cells
 		var discussionSentimentContent = $('#discussion-sentiment-widget-content'),
-			isExpanded = discussionSentimentContent.hasClass('in');
-		$('td', discussionSentimentContent).removeClass('selected warning success');
+			isExpanded = discussionSentimentContent.hasClass('show');
+		$('.clickable', discussionSentimentContent).removeClass('selected text-bg-warning text-bg-success');
 
 		if (!selectedOption) {
 			if (autoExpand && !isExpanded) {
@@ -66,7 +58,7 @@
 		
 		// highlight the successfuly selected cell
 		var selectedCell = $('#discussion-sentiment-widget-option-cell-' + selectedOption, discussionSentimentContent).addClass('selected');
-		selectedCell.addClass(selectedCell.hasClass('discussion-sentiment-widget-option-stay') ? 'warning' : 'success');
+		selectedCell.addClass(selectedCell.hasClass('discussion-sentiment-widget-option-stay') ? 'text-bg-warning' : 'text-bg-success');
 		
 		if (!autoCollapse) {
 			return;
@@ -91,7 +83,7 @@
 				.on('hidden.bs.collapse', function () {
 					// leave just the discussion icon
 					$('#discussion-sentiment-widget-title', discussionSentimentWidget).hide();
-					$('.panel-heading', discussionSentimentWidget).removeClass('collapsable-icon-left');
+					$('.card-header', discussionSentimentWidget).removeClass('collapsable-icon-left');
 					
 					discussionSentimentWidget.animate({
 						width: '40px'
@@ -114,13 +106,13 @@
 						width: '300px'
 					}, function(){
 						$('#discussion-sentiment-widget-title', discussionSentimentWidget).show();
-						$('.panel-heading', discussionSentimentWidget).addClass('collapsable-icon-left');
+						$('.card-header', discussionSentimentWidget).addClass('collapsable-icon-left');
 						content.css('visibility', 'visible');
 					});
 				});
 
 		// cells are clickable
-		$('#discussion-sentiment-widget-content td', discussionSentimentWidget).click(function(){
+		$('#discussion-sentiment-widget-content .clickable', discussionSentimentWidget).click(function(){
 			var selectedCell = $(this),
 				selectedOption = selectedCell.data('optionNumber');
 			$.ajax({
@@ -150,42 +142,45 @@
 	});
 </script>
 
-<div class="panel panel-default" >
-	<div class="panel-heading"
-		 id="discussion-sentiment-widget-heading">
-       	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#discussion-sentiment-widget-content"
-	    	   aria-expanded="false" aria-controls="discussion-sentiment-widget-content" >
-	    	   <i class="fa fa-comments"></i>
-	    	   <span id="discussion-sentiment-widget-title"><fmt:message key="label.discussion.header" /></span>
-	       	</a>
-     	</span>
-    </div>
+<div class="card lcard" >
+	<div class="card-header text-bg-secondary" id="discussion-sentiment-widget-heading">
+		<span class="card-title">
+			<button type="button" data-bs-toggle="collapse" 
+				class="btn btn-light collapsed"
+				data-bs-target="#discussion-sentiment-widget-content"> 
+				<i class="fa fa-comments"></i> 
+				<span id="discussion-sentiment-widget-title"> 
+					<fmt:message key="label.discussion.header" />
+				</span>
+			</button>
+		</span>
+	</div>
 
-    <div id="discussion-sentiment-widget-content" class="panel-collapse collapse" role="tabpanel"
+	<div id="discussion-sentiment-widget-content" class="collapse" role="tabpanel"
        	 aria-labelledby="discussion-sentiment-widget-heading">
-       	 <table class="table table-bordered table-condensed">
-	       	 <tr>
-	       	 	<th class="discussion-sentiment-widget-option-stay warning">
+       	 <div class="ltable table-responsive">
+	       	 <div class="row">
+	       	 	<div class="discussion-sentiment-widget-option-stay text-bg-warning col">
 	       	 		<fmt:message key="label.discussion.stay.header" />
-	       	 	</th>
-	       	 	<th class="discussion-sentiment-widget-option-move success">
+	       	 	</div>
+	       	 	<div class="discussion-sentiment-widget-option-move text-bg-success col">
 	       	 		<fmt:message key="label.discussion.move.header" />
-	       	 	</th>
-	       	 </tr>
+	       	 	</div>
+	       	 </div>
+	       	 
 	       	 <c:forEach begin="1" end="4" var="optionNumber">
-		       	 <tr>
-		       	 	<td id="discussion-sentiment-widget-option-cell-${optionNumber}" class="discussion-sentiment-widget-option-stay"
+		       	 <div class="row">
+		       	 	<div id="discussion-sentiment-widget-option-cell-${optionNumber}" class="discussion-sentiment-widget-option-stay col clickable"
 		       	 		data-option-number="${optionNumber}">
 		       	 		<fmt:message key="label.discussion.stay.option.${optionNumber}" />
-		       	 	</td>
+		       	 	</div>
 		       	 	<%-- Stay options start from 1, Move options start from 11 --%>
-		       	 	<td id="discussion-sentiment-widget-option-cell-${10 + optionNumber}" class="discussion-sentiment-widget-option-move"
+		       	 	<div id="discussion-sentiment-widget-option-cell-${10 + optionNumber}" class="discussion-sentiment-widget-option-move col clickable"
 		       	 		data-option-number="${10 + optionNumber}">
 		       	 		<fmt:message key="label.discussion.move.option.${10 + optionNumber}" />
-		       	 	</td>
-		       	 </tr>
+		       	 	</div>
+		       	 </div>
 	       	 </c:forEach>
-       	 </table>
+       	 </div>
 	</div>
 </div>
\ No newline at end of file
Index: lams_tool_assessment/web/includes/css/assessment.scss
===================================================================
diff -u -rd182bd3afaf9cdadbe01a5a91589efd765a50bc6 -r4262c80621f1eb846aa075a52f824091abbc218a
--- lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision d182bd3afaf9cdadbe01a5a91589efd765a50bc6)
+++ lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
@@ -138,20 +138,6 @@
     padding: 12px 0 !important;
 }
 
-.div-table>div:first-child {
-	border-top: 1px solid #ddd;
-    background-color: rgba(var(--bs-light-rgb), 1);
-    font-style: italic;
-    color: initial !important;
-}
-.div-table>.row {
-	border-bottom: 2px solid var(--bs-gray-200);
-	padding: 0.5rem;
-}
-.div-table.table-sm>.row {
-	padding: 0.25rem;
-}
-
 /*----------slider----------------*/
 
 .bootstrap-slider input[type="range"] {
Index: lams_tool_assessment/web/pages/learning/results/allquestions.jsp
===================================================================
diff -u -ra84ec757c6b5b37c202866c5ae1b10937142875f -r4262c80621f1eb846aa075a52f824091abbc218a
--- lams_tool_assessment/web/pages/learning/results/allquestions.jsp	(.../allquestions.jsp)	(revision a84ec757c6b5b37c202866c5ae1b10937142875f)
+++ lams_tool_assessment/web/pages/learning/results/allquestions.jsp	(.../allquestions.jsp)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
@@ -246,7 +246,7 @@
 							<fmt:message key="label.answer.justification" />
 						</div>
 
-						<div class="div-table table-responsive table-sm mb-2">
+						<div class="ltable table-responsive table-sm mb-2">
 							<div class="row">
 								<div class="w-25">
 									<fmt:message key="monitoring.label.group" />
Index: lams_tool_assessment/web/pages/learning/results/essay.jsp
===================================================================
diff -u -ra84ec757c6b5b37c202866c5ae1b10937142875f -r4262c80621f1eb846aa075a52f824091abbc218a
--- lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision a84ec757c6b5b37c202866c5ae1b10937142875f)
+++ lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
@@ -20,7 +20,7 @@
 		<fmt:message key="label.learning.summary.other.team.answers"/>
 	</div>
 	
-	<div class="table-responsive table-sm div-table mt-2" id="rating-table-${question.uid}">
+	<div class="table-responsive table-sm ltable mt-2" id="rating-table-${question.uid}">
 		<div class="row">
 			<div class="w-25">
 				<fmt:message key="monitoring.label.group" />
Index: lams_tool_assessment/web/pages/learning/results/historyresponses.jsp
===================================================================
diff -u -ra84ec757c6b5b37c202866c5ae1b10937142875f -r4262c80621f1eb846aa075a52f824091abbc218a
--- lams_tool_assessment/web/pages/learning/results/historyresponses.jsp	(.../historyresponses.jsp)	(revision a84ec757c6b5b37c202866c5ae1b10937142875f)
+++ lams_tool_assessment/web/pages/learning/results/historyresponses.jsp	(.../historyresponses.jsp)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
@@ -5,7 +5,7 @@
 		<fmt:message key="label.learning.question.summary.history.responces" />
 	</div>
 
-	<div class="table-responsive table-sm div-table">
+	<div class="table-responsive table-sm ltable">
 			<div class="row">
 				<div style="width: 70px">
 					#