Index: lams_central/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_central/web/WEB-INF/tags/TSTable5.tag	(.../TSTable5.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_central/web/WEB-INF/tags/TSTable5.tag	(.../TSTable5.tag)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -6,7 +6,6 @@
 <%@ attribute name="dataId" required="false" rtexprvalue="true"%>
 <%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
 <%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
-<%@ attribute name="test" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty tableClass}">
 	<c:set var="tableClass" value="tablesorter" />
@@ -19,6 +18,7 @@
 <c:if test="${empty dataId}">
 	<c:set var="dataId" value="" />
 </c:if>
+<c:set var="uniqueId"><%=java.util.UUID.randomUUID()%></c:set>
 
 <table class="${tableClass}" ${dataId}>
 	<thead>
@@ -28,23 +28,32 @@
 	</thead>
 	<tfoot>
 		<tr>
-	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
-	        <button type="button" class="btn btn-secondary btn-sm rounded first" title="First"><i class="fa fa-step-backward"></i></button>
-	        <button type="button" class="btn btn-secondary btn-sm rounded prev" title="Previous"><i class="fa fa-backward"></i></button>
-	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-	        <button type="button" class="btn btn-secondary btn-sm rounded next" title="Next"><i class="fa fa-forward"></i></button>
-	        <button type="button" class="btn btn-secondary btn-sm rounded last" title="Last"><i class="fa fa-step-forward"></i></button>
-	        <select class="pagesize form-select" title="Select page size">
-	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
-	      		<option selected="selected" value="10">10</option>
-	      		<option value="20">20</option>
-	      		<option value="30">30</option>
-	      		<option value="40">40</option>
-	      		<option value="50">50</option>
-	      		<option value="100">100</option>
-	        </select>
-	      </th>
-	    </tr>
+			<th colspan="${numColumns}" class="${pagerClass} text-center">
+				<button type="button" class="btn btn-secondary btn-sm rounded first" title="First">
+					<i class="fa fa-step-backward"></i>
+				</button>
+				<button type="button" class="btn btn-secondary btn-sm rounded prev" title="Previous">
+					<i class="fa fa-backward"></i>
+				</button> 
+				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+				<button type="button" class="btn btn-secondary btn-sm rounded next" title="Next">
+					<i class="fa fa-forward"></i>
+				</button>
+				<button type="button" class="btn btn-secondary btn-sm rounded last" title="Last">
+					<i class="fa fa-step-forward"></i>
+				</button>
+				
+				<label for="${uniqueId}" class="visually-hidden">Select page size</label>
+				<select class="pagesize form-select" title="Select page size" id="${uniqueId}">
+					<option selected="selected" value="10">10</option>
+					<option value="20">20</option>
+					<option value="30">30</option>
+					<option value="40">40</option>
+					<option value="50">50</option>
+					<option value="100">100</option>
+				</select>
+			</th>
+		</tr>
 	</tfoot>
 	<tbody>
 	</tbody>
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -349,4 +349,18 @@
 }
 .btn-icon-next:after {
   content: "\f101";
+}
+
+.sbox {
+  border-bottom: 2px solid $gray-lighter;
+  border-radius: 0px;
+}
+.sbox-body {
+  padding: 5px;
+}
+.sbox-heading {
+  padding: 3px 5px;
+  border-bottom: 1px solid $gray-lighter;
+  border-top-right-radius: $border-radius-small;
+  border-top-left-radius: $border-radius-small;
 }
\ No newline at end of file
Index: lams_tool_laqa/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r97b9227e4f759db2510bc57ef24be3a3ef714bfc -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_tool_laqa/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 97b9227e4f759db2510bc57ef24be3a3ef714bfc)
+++ lams_tool_laqa/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -114,6 +114,7 @@
 label.end.questions = End of the questions.
 label.lockWhenFinished = Lock when finished
 label.learner.answer = Show answers from other learners
+label.other.learners.answers = Answers from other learners
 label.show.names = Show names of other learners
 warning.empty.answers = One or more question(s) are not answered.  Do you want to continue anyway?
 label.on = On
Index: lams_tool_laqa/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_tool_laqa/web/WEB-INF/tags/TSTable5.tag	(.../TSTable5.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_laqa/web/WEB-INF/tags/TSTable5.tag	(.../TSTable5.tag)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -6,7 +6,6 @@
 <%@ attribute name="dataId" required="false" rtexprvalue="true"%>
 <%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
 <%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
-<%@ attribute name="test" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty tableClass}">
 	<c:set var="tableClass" value="tablesorter" />
@@ -19,6 +18,7 @@
 <c:if test="${empty dataId}">
 	<c:set var="dataId" value="" />
 </c:if>
+<c:set var="uniqueId"><%=java.util.UUID.randomUUID()%></c:set>
 
 <table class="${tableClass}" ${dataId}>
 	<thead>
@@ -28,23 +28,32 @@
 	</thead>
 	<tfoot>
 		<tr>
-	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
-	        <button type="button" class="btn btn-secondary btn-sm rounded first" title="First"><i class="fa fa-step-backward"></i></button>
-	        <button type="button" class="btn btn-secondary btn-sm rounded prev" title="Previous"><i class="fa fa-backward"></i></button>
-	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-	        <button type="button" class="btn btn-secondary btn-sm rounded next" title="Next"><i class="fa fa-forward"></i></button>
-	        <button type="button" class="btn btn-secondary btn-sm rounded last" title="Last"><i class="fa fa-step-forward"></i></button>
-	        <select class="pagesize form-select" title="Select page size">
-	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
-	      		<option selected="selected" value="10">10</option>
-	      		<option value="20">20</option>
-	      		<option value="30">30</option>
-	      		<option value="40">40</option>
-	      		<option value="50">50</option>
-	      		<option value="100">100</option>
-	        </select>
-	      </th>
-	    </tr>
+			<th colspan="${numColumns}" class="${pagerClass} text-center">
+				<button type="button" class="btn btn-secondary btn-sm rounded first" title="First">
+					<i class="fa fa-step-backward"></i>
+				</button>
+				<button type="button" class="btn btn-secondary btn-sm rounded prev" title="Previous">
+					<i class="fa fa-backward"></i>
+				</button> 
+				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+				<button type="button" class="btn btn-secondary btn-sm rounded next" title="Next">
+					<i class="fa fa-forward"></i>
+				</button>
+				<button type="button" class="btn btn-secondary btn-sm rounded last" title="Last">
+					<i class="fa fa-step-forward"></i>
+				</button>
+				
+				<label for="${uniqueId}" class="visually-hidden">Select page size</label>
+				<select class="pagesize form-select" title="Select page size" id="${uniqueId}">
+					<option selected="selected" value="10">10</option>
+					<option value="20">20</option>
+					<option value="30">30</option>
+					<option value="40">40</option>
+					<option value="50">50</option>
+					<option value="100">100</option>
+				</select>
+			</th>
+		</tr>
 	</tfoot>
 	<tbody>
 	</tbody>
Index: lams_tool_laqa/web/learning/AnswersContent.jsp
===================================================================
diff -u -r06e23148d7117850d0cac691eccb07f2d3b13e79 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_tool_laqa/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 06e23148d7117850d0cac691eccb07f2d3b13e79)
+++ lams_tool_laqa/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -15,7 +15,6 @@
 <lams:PageLearner title="${generalLearnerFlowDTO.activityTitle}" toolSessionID="${sessionMap.toolSessionID}" >
 
 	<style media="screen,projection" type="text/css">
-
 		div.growlUI h1, div.growlUI h2 {
 			color: white;
 			margin: 5px 5px 5px 0px;
@@ -66,44 +65,42 @@
 				<lams:errors5/>
 			</div>
 
-			<div id="questions" aria-label="<fmt:message key='label.questions'/>">
+			<div id="questions">
 				<c:choose>
 					<c:when test="${(generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential') && hasEditRight}">
 						<c:if test="${generalLearnerFlowDTO.totalQuestionCount != 1}">
 							<c:if test="${generalLearnerFlowDTO.initialScreen == 'true'}">
-								<p>
+								<lams:Alert5 type="info" id="feedback-seq" close="false">
 									<fmt:message key="label.feedback.seq" />&nbsp;
 									<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
 									<fmt:message key="label.questions.simple" />
-								</p>
+								</lams:Alert5>
 							</c:if>
 						</c:if>
 
 						<c:if test="${generalLearnerFlowDTO.initialScreen != 'true'}">
-							<p>
+							<lams:Alert5 type="info" id="questions-remaining" close="false">
 								<fmt:message key="label.questions.remaining" />&nbsp;
 								<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
-							</p>
+							</lams:Alert5>
 						</c:if>
 
 						<jsp:include page="/learning/SequentialAnswersContent.jsp" />
 					</c:when>
 
 					<c:otherwise>
 						<c:if test="${generalLearnerFlowDTO.totalQuestionCount != 1}">
-							<p>
-								<fmt:message key="label.feedback.combined" />&nbsp;<c:out
-									value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;<fmt:message key="label.questions.simple" />
-							</p>
+							<lams:Alert5 type="info" id="feedback-combined" close="false">
+								<fmt:message key="label.feedback.combined" />&nbsp;
+								<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
+								<fmt:message key="label.questions.simple" />
+							</lams:Alert5>
 						</c:if>
 
 						<jsp:include page="/learning/CombinedAnswersContent.jsp" />
 					</c:otherwise>
 				</c:choose>
 			</div>
-
-
-
 		</form:form>
 	</div>
 
Index: lams_tool_laqa/web/learning/CombinedAnswersContent.jsp
===================================================================
diff -u -r2d222c70de889ebe48b8ffd4feed1a03e5db3972 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_tool_laqa/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision 2d222c70de889ebe48b8ffd4feed1a03e5db3972)
+++ lams_tool_laqa/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -7,7 +7,7 @@
 
 		<c:if test="${questionEntry.key == answerEntry.key}">
 
-			<div class="card lcard mt-4" id="question<c:out value='${questionEntry.key}' />" aria-label="question">
+			<div class="card lcard mt-4" id="question<c:out value='${questionEntry.key}' />">
 				<div class="card-header">
 					<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() !=1}"><c:out value="${questionEntry.key}" />. </c:if>  <c:out value="${questionEntry.value.name}" escapeXml="false" />
 				</div>
@@ -29,13 +29,14 @@
 							<fmt:message key="label.words.required" />&nbsp;<span id="words-required-${questionEntry.key}"></span>
 						</span>
 						</c:if>
-
 					</div>
 
 					<div class="my-2" id="answerResponse">
 						<c:choose>
 							<c:when test="${hasEditRight}">
-								<label id="yourAnswer" class="d-none"><fmt:message key="label.learning.yourAnswer" /></label>
+								<label class="visually-hidden" for="answer${questionEntry.key}">
+									<fmt:message key="label.learning.yourAnswer" />
+								</label>
 								<c:set var="placeholder"><fmt:message key="label.learning.yourAnswer" />...</c:set>
 								<div data-sequence-id="${questionEntry.key}"
 									 data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
@@ -52,7 +53,7 @@
 
 										<c:otherwise>
 											<lams:textarea name="answer${questionEntry.key}"
-														   id="answer${questionEntry.key}" rows="5" placeholder="${placeholder}" aria-labelledby="yourAnswer"
+														   id="answer${questionEntry.key}" rows="5" placeholder="${placeholder}"
 														   class="form-control"><c:out value='${answerEntry.value}' escapeXml='false' /></lams:textarea>
 										</c:otherwise>
 									</c:choose>
Index: lams_tool_laqa/web/learning/IndividualLearnerResults.jsp
===================================================================
diff -u -r2d222c70de889ebe48b8ffd4feed1a03e5db3972 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_tool_laqa/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision 2d222c70de889ebe48b8ffd4feed1a03e5db3972)
+++ lams_tool_laqa/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -3,15 +3,12 @@
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.sessionMapID]}" />
 
 <lams:PageLearner title="${generalLearnerFlowDTO.activityTitle}" toolSessionID="${qaLearningForm.toolSessionID}" >
-
-
 	<div class="container-lg">
-		<h1>sessionid <c:out value="${qaLearningForm.toolSessionID}"></c:out></h1>
+		
 		<!-- form needs to be outside page so that the form bean can be picked up by Page tag. -->
 		<form:form action="/lams/tool/laqa11/learning/learning.do" method="POST" modelAttribute="qaLearningForm" target="_self">
 
 			<!--  Announcements and advanced settings -->
-
 			<c:if test="${generalLearnerFlowDTO.noReeditAllowed}">
 				<lams:Alert5 type="danger" id="noRedosAllowed" close="false">
 					<fmt:message key="label.noredo.enabled" />
@@ -81,17 +78,14 @@
 
 					</div>
 				</div>
-
-
 			</c:forEach>
 
 			<hr class="msg-hr" />
 
 			<div class="activity-bottom-buttons">
-
 				<c:if test="${generalLearnerFlowDTO.showOtherAnswers}">
 					<button name="viewAllResults" type="button" onclick="submitMethod('storeAllResults');"
-							class="btn btn-primary mx-2">
+							class="btn btn-primary na mx-2">
 						<fmt:message key="label.allResponses" />
 					</button>
 				</c:if>
@@ -112,21 +106,19 @@
 
 					<c:if test="${generalLearnerFlowDTO.reflection == 'true'}">
 						<button name="forwardtoReflection" type="button" onclick="javascript:submitMethod('storeAllResults');"
-								class="btn btn-primary">
+								class="btn btn-primary na">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:if>
 				</c:if>
 
 				<c:if test="${!generalLearnerFlowDTO.noReeditAllowed}">
-					<button type="button" name="redoQuestions" class="btn btn-primary mx-2"
+					<button type="button" name="redoQuestions" class="btn btn-secondary btn-icon-return me-2"
 							onclick="submitMethod('redoQuestions');">
 						<fmt:message key="label.redo" />
 					</button>
 				</c:if>
 			</div>
-
-
 		</form:form>
 	</div>
 	<!-- end form -->
Index: lams_tool_laqa/web/learning/LearnerRep.jsp
===================================================================
diff -u -r51787e125e5356a3558da7a1443a329f1565ee47 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision 51787e125e5356a3558da7a1443a329f1565ee47)
+++ lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
+<c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.sessionMapID]}" />
 <c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
 <c:set var="mode" value="${sessionMap.mode}" />
@@ -15,7 +13,7 @@
 <lams:PageLearner title="${generalLearnerFlowDTO.activityTitle}" toolSessionID="${sessionMap.toolSessionID}" >
 
 	<lams:css suffix="jquery.jRating"/>
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css">
+
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager5.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css">
 	<link rel="stylesheet" href="<lams:WebAppURL/>includes/css/qalearning.css">
@@ -26,13 +24,12 @@
 		}
 
 		.other-users-responses {
-			margin: 0 -15px -35px -15px;
+			margin-bottom: -15px;
 		}
 
 		.add-comment {
 			margin-left: 10px;
 			float: left !important;
-			margin-top: auto;
 		}
 
 		.comment-textarea {
@@ -71,7 +68,6 @@
 
 		<!-- Rating limits info -->
 		<c:if test="${generalLearnerFlowDTO.allowRateAnswers && (qaContent.minimumRates ne 0 || qaContent.maximumRates ne 0)}">
-
 			<lams:Alert5 id="rating-info" type="info" close="true">
 				<c:choose>
 					<c:when test="${qaContent.minimumRates ne 0 and qaContent.maximumRates ne 0}">
@@ -108,20 +104,19 @@
 		<!-- Questions and answers -->
 		<c:forEach var="question" items="${generalLearnerFlowDTO.questions}" varStatus="status">
 
-			<div class="panel panel-default">
-				<div class="panel-heading panel-title">
+			<div class="card lcard">
+				<div class="card-header text-bg-secondary">
 					<c:if test="${generalLearnerFlowDTO.questions.size() != 1}">${status.count}.&nbsp;</c:if>
 					<c:out value="${question.qbQuestion.name}" escapeXml="false" />
+					
+					<div class="font-size-init">
+						<c:out value="${question.qbQuestion.description}" escapeXml="false" />
+					</div>
 				</div>
 
-				<div class="panel-body">
-					<c:if test="${not empty question.qbQuestion.description}">
-						<div class="panel">
-							<c:out value="${question.qbQuestion.description}" escapeXml="false" />
-						</div>
-					</c:if>
-
-						<%--User own responses---------------------------------------%>
+				<div class="card-body">
+						
+					<%--User own responses---------------------------------------%>
 					<c:set var="userResponse" value="${question.userResponse}"/>
 					<c:if test="${userResponse != null}">
 						<div class="row g-0">
@@ -130,23 +125,30 @@
 							<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
 								<c:set var="splitRow" value="col-12 col-sm-9 col-md-10 col-lg-10" />
 							</c:if>
+							
 							<div class="${splitRow}">
 								<div class="sbox">
-									<div class="sbox-heading bg-warning">
-										<div class="float-start me-2"><lams:Portrait userId="${userResponse.qaQueUser.queUsrId}"/></div>
+									<div class="sbox-heading bg-warning bg-opacity-50">
+										<div class="float-start me-2">
+											<lams:Portrait userId="${userResponse.qaQueUser.queUsrId}"/>
+										</div>
 										<span><c:out value="${userResponse.qaQueUser.fullname}" /></span>
-										<br><span style="font-size: smaller"><lams:Date value="${userResponse.attemptTime}" timeago="true"/></span>
+										<br>
+										<span style="font-size: smaller">
+											<lams:Date value="${userResponse.attemptTime}" timeago="true"/>
+										</span>
 									</div>
 									<div class="sbox-body">
 										<c:out value="${userResponse.answer}" escapeXml="false" />
 									</div>
 								</div>
 							</div>
+							
 							<c:if test="${generalLearnerFlowDTO.allowRateAnswers}">
 								<div class="col-12 col-sm-3 col-md-2 col-lg-2 rate-answers-area">
-									<h4 class="text-center">
+									<div class="text-center fs-4">
 										<fmt:message key="label.learning.rating" />
-									</h4>
+									</div>
 									<lams:Rating5 itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
 												 maxRates="${qaContent.maximumRates}" />
 								</div>
@@ -157,7 +159,7 @@
 					<!-- Others users' responses -->
 					<c:if test="${generalLearnerFlowDTO.showOtherAnswers}">
 						<c:if test="${isCommentsEnabled && sessionMap.commentsMinWordsLimit != 0}">
-							<lams:Alert5 id="rating-comment-info" type="info" close="false" >
+							<lams:Alert5 id="rating-comment-info-${status.count}" type="info" close="false" >
 								<fmt:message key="label.comment.minimum.number.words">
 									<fmt:param>: ${sessionMap.commentsMinWordsLimit}</fmt:param>
 								</fmt:message>
@@ -176,27 +178,32 @@
 							</c:otherwise>
 						</c:choose>
 
-						<div class="other-users-responses">
-							<lams:TSTable5 numColumns="${numColumns}" dataId='data-question-uid="${question.uid}"' >
-								<thead>
-								<tr>
-									<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer" /></th>
-									<c:choose>
-										<c:when test="${generalLearnerFlowDTO.allowRateAnswers}">
-											<th title="<fmt:message key='label.sort.by.rating'/>"><fmt:message key="label.learning.rating" /></th>
-										</c:when>
-										<c:otherwise>
-											<th style="display:none;"></th>
-										</c:otherwise>
-									</c:choose>
-									<c:if test="${isCommentsEnabled}">
-										<th><fmt:message key="label.comment" /></th>
-									</c:if>
-								</tr>
-								</thead>
-								<tbody>
-
-								</tbody>
+						<div class="other-users-responses mt-4">
+							<div class="fst-italic mb-2">
+								<fmt:message key="label.other.learners.answers" />
+							</div>
+						
+							<lams:TSTable5 numColumns="${numColumns}" dataId='data-question-uid="${question.uid}"' tableClass="tablesorter jRating">
+								<th title="<fmt:message key='label.sort.by.answer'/>">
+									<fmt:message key="label.learning.answer" />
+								</th>
+									
+								<c:choose>
+									<c:when test="${generalLearnerFlowDTO.allowRateAnswers}">
+										<th title="<fmt:message key='label.sort.by.rating'/>">
+											<fmt:message key="label.learning.rating" />
+										</th>
+									</c:when>
+									<c:otherwise>
+										<!-- <th style="display:none;"></th> -->
+									</c:otherwise>
+								</c:choose>
+									
+								<c:if test="${isCommentsEnabled}">
+									<th>
+										<fmt:message key="label.comment" />
+									</th>
+								</c:if>
 							</lams:TSTable5>
 						</div>
 					</c:if>
@@ -209,51 +216,20 @@
 
 		<!-- reflections -->
 		<c:if test="${generalLearnerFlowDTO.reflection == 'true' && generalLearnerFlowDTO.isLearnerFinished}">
-
-			<div class="panel panel-default mt-2">
-				<div class="panel-heading panel-title">
-					<fmt:message key="label.reflection" />
-				</div>
-				<div class="panel-body">
-					<div class="reflectionInstructions">
-						<lams:out value="${generalLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
-					</div>
-					<div class="panel">
-						<lams:out value="${qaLearningForm.entryText}" escapeHtml="true" />
-					</div>
-
-					<c:if test="${hasEditRight && mode != 'teacher'}">
-						<button name="forwardtoReflection" type="button" class="btn btn-secondary float-start"
-								onclick="submitMethod('forwardtoReflection');">
-							<fmt:message key="label.edit" />
-						</button>
-					</c:if>
-				</div>
-			</div>
-
+			<lams:NotebookReedit
+				reflectInstructions="${generalLearnerFlowDTO.reflectionSubject}"
+				reflectEntry="${qaLearningForm.entryText}"
+				isEditButtonEnabled="${hasEditRight && mode != 'teacher'}"
+				notebookHeaderLabelKey="label.reflection"/>
 		</c:if>
 
 		<!-- buttons -->
 		<c:if test="${mode != 'teacher'}">
 			<div class="activity-bottom-buttons" id="learner-submit">
-				<c:if test="${!generalLearnerFlowDTO.isLearnerFinished}">
-					<button type="button" class="btn btn-secondary btn-icon-refresh float-start"
-							onclick="refreshPage('${qaLearningForm.refreshAnswers}');">
-						<fmt:message key="label.refresh" />
-					</button>
-				</c:if>
-
-				<c:if test="${(generalLearnerFlowDTO.lockWhenFinished != 'true') && hasEditRight && !generalLearnerFlowDTO.noReeditAllowed}">
-					<button name="redoQuestions" type="button" class="btn btn-secondary float-start"
-							onclick="submitMethod('redoQuestions');">
-						<fmt:message key="label.redo" />
-					</button>
-				</c:if>
-
 				<c:choose>
 					<c:when test="${(generalLearnerFlowDTO.reflection == 'true') && hasEditRight && !generalLearnerFlowDTO.isLearnerFinished}">
 						<button type="button" name="forwardtoReflection" onclick="javascript:submitMethod('forwardtoReflection');"
-								class="btn btn-primary">
+								class="btn btn-primary na">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:when>
@@ -271,9 +247,22 @@
 						</button>
 					</c:when>
 				</c:choose>
+
+				<c:if test="${(generalLearnerFlowDTO.lockWhenFinished != 'true') && hasEditRight && !generalLearnerFlowDTO.noReeditAllowed}">
+					<button name="redoQuestions" type="button" class="btn btn-secondary btn-icon-return me-2"
+							onclick="submitMethod('redoQuestions');">
+						<fmt:message key="label.redo" />
+					</button>
+				</c:if>
+				
+				<c:if test="${!generalLearnerFlowDTO.isLearnerFinished}">
+					<button type="button" class="btn btn-secondary btn-icon-refresh me-2"
+							onclick="refreshPage('${qaLearningForm.refreshAnswers}');">
+						<fmt:message key="label.refresh" />
+					</button>
+				</c:if>
 			</div>
 		</c:if>
-
 	</form:form>
 
 	<script type="text/javascript">
@@ -355,7 +344,7 @@
 									rows += definePortraitMiniHeader(userData["portraitId"], userData["userID"], '${lams}',
 											${qaContent.useSelectLeaderToolOuput} ? userData["sessionName"] : userData["userName"],
 											'<time class="timeago" title="' + userData["attemptTime"] + '" datetime="' + userData["timeAgo"] + '"></time>',
-											false, "sbox-heading bg-warning")
+											false, "sbox-heading bg-warning bg-opacity-50")
 								}
 
 								rows += 	'<div class="user-answer">';
@@ -455,12 +444,12 @@
 
 											//show comments textarea and a submit button
 										} else if (! (IS_DISABLED || usesRatings && MAX_RATES>0 && countRatedItems >= MAX_RATES && !hasStartedRating)) {
-											rows += '<div id="add-comment-area-' + itemId + '">';
-											rows +=		'<textarea class="form-control comment-textarea" name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;"><fmt:message key="label.comment.textarea.tip"/></textarea>';
-
-											rows += 	'<div class="button add-comment add-comment-new" data-item-id="'+ itemId +'" data-comment-criteria-id="'+ commentsCriteriaId +'">';
-											rows += 	'</div>';
-											rows += '</div>';
+											rows += '<div id="add-comment-area-' + itemId + '">' +
+														'<textarea class="form-control comment-textarea" name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;" placeholder="<fmt:message key="label.comment.textarea.tip"/>" aria-label="<fmt:message key="label.comment.textarea.tip"/>"></textarea>' +
+													 	'<button type="button" class="btn btn-success btn-sm add-comment add-comment-new" data-item-id="'+ itemId +'" data-comment-criteria-id="'+ commentsCriteriaId +'" aria-label="submit">' +
+														 	'<i class="fa fa-check fa-lg"></i>' + 
+														 '</button>' +
+													'</div>';
 										}
 									}
 
@@ -500,6 +489,11 @@
 				submitMethod('refreshAllResults');
 			}
 		}
+		
+		function continueReflect() {
+			submitMethod('forwardtoReflection');
+		}
+		
 		function submitMethod(actionMethod) {
 			document.forms.qaLearningForm.action=actionMethod+".do";
 			document.forms.qaLearningForm.submit();
Index: lams_tool_laqa/web/learning/SequentialAnswersContent.jsp
===================================================================
diff -u -r2d222c70de889ebe48b8ffd4feed1a03e5db3972 -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f
--- lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision 2d222c70de889ebe48b8ffd4feed1a03e5db3972)
+++ lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
@@ -8,7 +8,7 @@
 
 	<c:if test="${questionEntry.key == generalLearnerFlowDTO.currentQuestionIndex}">
 		
-		<div class="card lcard mt-4" id="question<c:out value='${questionEntry.key}' />" aria-label="question">
+		<div class="card lcard mt-4" id="question<c:out value='${questionEntry.key}' />">
 			<div class="card-header">
 				<div class="card-title">
 					<c:if test="${generalLearnerFlowDTO.mapQuestionContentLearner.size() != 1}"><c:out value="${questionEntry.key}" />.&nbsp;</c:if> <c:out value="${questionEntry.value.name}" escapeXml="false" />
@@ -34,7 +34,10 @@
 				</div>
 
 				<div class="my-2" id="answerResponse">
-					<label id="yourAnswer" class="d-none"><fmt:message key="label.learning.yourAnswer" /></label>
+					<label class="visually-hidden" for="answer">
+						<fmt:message key="label.learning.yourAnswer" />
+					</label>
+					
 					<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
 						data-min-words-limit="${questionEntry.value.minWordsLimit}"
 						<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
@@ -47,7 +50,7 @@
 							</c:when>
 
 							<c:otherwise>
-								<lams:textarea name="answer" id="answer" rows="5" placeholder="${placeholder}" aria-labelledby="yourAnswer" class="form-control">
+								<lams:textarea name="answer" id="answer" rows="5" placeholder="${placeholder}" class="form-control">
 									<c:out value='${generalLearnerFlowDTO.currentAnswer}' escapeXml='false' />
 								</lams:textarea>
 							</c:otherwise>
@@ -58,8 +61,6 @@
 				</div>
 			</div>
 		</div>
-
-		
 	</c:if>
 </c:forEach>
 
@@ -68,47 +69,45 @@
 	<c:choose>
 		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount != 1) }">
+			<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
+					class="btn btn-primary">
+				<fmt:message key="button.done" />
+				&nbsp; <i class="fa fa-arrow-right"></i>
+			</button>
+			
 			<button id="btnGetPrevious" type="button" onclick="javascript:submitMethod('getPreviousQuestion');"
-				class="btn btn-primary float-start mt-2">
-				<i class="fa fa-arrow-left"></i>
+					class="btn btn-secondary me-2">
+				<i class="fa fa-arrow-left"></i>&nbsp; 
 				<fmt:message key="button.getPreviousQuestion" />
 			</button>
-
-			<div class="activity-bottom-buttons">
-				<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
-					class="btn btn-primary mt-3">
-					<fmt:message key="button.done" />
-				</button>
-			</div>
 		</c:when>
 
 		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount == 1) }">
-			<div class="activity-bottom-buttons">
-				<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
-					class="btn btn-primary mt-3">
-					<fmt:message key="button.done" />
-				</button>
-			</div>
+			<button id="btnDone" type="button" onclick="javascript:submitMethod('submitAnswersContent');"
+					class="btn btn-primary na">
+				<fmt:message key="button.done" />
+			</button>
 		</c:when>
 
 		<c:when test="${generalLearnerFlowDTO.currentQuestionIndex != generalLearnerFlowDTO.totalQuestionCount && 
 				 				  generalLearnerFlowDTO.currentQuestionIndex > 1}">
 			<button id="btnGetPrevious" type="button" onclick="javascript:submitMethod('getPreviousQuestion');"
-				class="btn btn-primary float-start mt-2">
+					class="btn btn-secondary me-2">
 				<i class="fa fa-arrow-left"></i>&nbsp;
 				<fmt:message key="button.getPreviousQuestion" />
 			</button>
+			
 			<button id="btnGetNext" type="button" onclick="javascript:submitMethod('getNextQuestion');"
-				class="btn btn-primary mt-2">
+					class="btn btn-primary">
 				<fmt:message key="button.getNextQuestion" />
 				&nbsp; <i class="fa fa-arrow-right"></i>
 			</button>
 		</c:when>
 
 		<c:otherwise>
 			<button id="btnGetNext" type="button" onclick="javascript:submitMethod('getNextQuestion');"
-				class="btn btn-primary mt-2">
+					class="btn btn-primary">
 				<fmt:message key="button.getNextQuestion" />
 				&nbsp; <i class="fa fa-arrow-right"></i>
 			</button>