Index: lams_central/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -r52f7b0418f89acf6b26f507511e3815020ae432c -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_central/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 52f7b0418f89acf6b26f507511e3815020ae432c)
+++ lams_central/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow-sm mt-5">
+<div class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -52,7 +52,7 @@
 			</p>
 
 			<c:if test="${isEditButtonEnabled}">
-				<div class="mt-2">
+				<div class="mt-2 float-end">
 					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
Index: lams_central/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -386,6 +386,10 @@
        <path>/WEB-INF/tags/StyledRating.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>StyledRating5</name>
+       <path>/WEB-INF/tags/StyledRating5.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>Switch</name>
        <path>/WEB-INF/tags/Switch.tag</path>
    	</tag-file>
Index: lams_central/web/css/components.scss
===================================================================
diff -u -r4262c80621f1eb846aa075a52f824091abbc218a -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 4262c80621f1eb846aa075a52f824091abbc218a)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -479,6 +479,7 @@
 	border-radius: 2.8rem;
 	overflow: hidden;
 	background-color: var(--bs-white);
+	margin: 0.25rem;
 }
 
 .component-page-wrapper button.no-decoration {
@@ -497,7 +498,7 @@
 
 .component-page-wrapper .component-page-content {
 	min-height: 100%;
-	padding: 1rem 2rem 3rem 2rem;
+	padding: 1rem 2rem 2rem 2rem;
 	transition: all .3s ease;
 	vertical-align: top;
 }
@@ -606,6 +607,18 @@
 	font-size: smaller;
 }
 
+.component-page-wrapper .collapsable-icon-left button[data-bs-toggle="collapse"]:after {
+	font-family: FontAwesome;
+	content: "\f078";
+	float: left;
+	color: #6c757d;
+	margin-right: .5rem;
+}
+
+.component-page-wrapper .collapsable-icon-left button.collapsed:after {
+	content: "\f054";
+}
+
 /* Unused or used in assessment rewritten authoring */
 /*
 
@@ -732,19 +745,7 @@
 	color: #3C42E0;
 }
 
-.component-page-wrapper .collapsable-icon-left:after {
-	font-family: FontAwesome;
-	content: "\f078";
-	float: left;
-	color: #6c757d;
-	margin-right: .5rem;
-}
 
-.component-page-wrapper .collapsable-icon-left.collapsed:after {
-	content: "\f054";
-}
-
-
 .banner-box-col {
 	box-shadow: 0px 20px 20px #2E384D1A;
 	background-color: #fff;
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -rd182bd3afaf9cdadbe01a5a91589efd765a50bc6 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision d182bd3afaf9cdadbe01a5a91589efd765a50bc6)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -235,7 +235,7 @@
     margin-bottom: 2rem;
 }
 
-.lcard .card-header {
+.lcard>.card-header {
     border-top-left-radius: 1.25rem;
     border-top-right-radius: 0rem;
     font-size: 1.3rem;
Index: lams_tool_preview/web/WEB-INF/tags/StyledRating5.tag
===================================================================
diff -u
--- lams_tool_preview/web/WEB-INF/tags/StyledRating5.tag	(revision 0)
+++ lams_tool_preview/web/WEB-INF/tags/StyledRating5.tag	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -0,0 +1,570 @@
+<%
+	/**
+	 * StyledRating.tag
+	 *	Author: Andrey Balan
+	 *	Description: Shows the results of a styled rating. Does not allow for update.
+	 */
+%>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="criteriaRatings" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.StyledCriteriaRatingDTO" %>
+<%@ attribute name="showJustification" required="true" %>
+<%@ attribute name="alwaysShowAverage" required="true" %>
+<%@ attribute name="rubricsPivotView" required="false" %>
+<%@ attribute name="rubricsInBetweenColumns" required="false" %>
+
+<c:if test="${empty rubricsPivotView}">
+	<c:set var="rubricsPivotView" value="false" />
+</c:if>
+<c:if test="${empty rubricsInBetweenColumns}">
+	<c:set var="rubricsInBetweenColumns" value="false" />
+</c:if>
+
+<!-- On the results page, set to true for current users summary at the bottom, set to false "other users results".
+When true, hides the names and groups the comments.  -->
+<%@ attribute name="currentUserDisplay" required="true" %>
+
+<c:choose>
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 0}">
+
+		<table class="tablesorter">
+			<thead>
+			<tr>
+				<c:if test="${not currentUserDisplay}">
+					<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" >
+						<fmt:message key="label.user.name" />
+					</th>
+				</c:if>
+				<th class="comment">
+					<fmt:message key="label.comment" />
+				</th>
+			</tr>
+			</thead>
+			<tbody>
+
+			<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+				<c:if test="${ not empty rating.comment }">
+					<tr>
+						<c:if test="${not currentUserDisplay}">
+							<td>
+								<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
+							</td>
+						</c:if>
+						<td>
+							<c:out value="${rating.comment}" escapeXml="false"/>
+						</td>
+					</tr>
+				</c:if>
+			</c:forEach>
+			</tbody>
+		</table>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 1}">
+
+		<c:choose>
+			<c:when test="${not currentUserDisplay}">
+				<table class="tablesorter jRating">
+					<thead>
+					<tr>
+						<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" >
+							<fmt:message key="label.user.name" />
+						</th>
+						<th class="rating text-center ">
+							<fmt:message key="label.rating" />
+						</th>
+						<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+							<th class="comment">
+								<fmt:message key="label.comment" />
+							</th>
+						</c:if>
+					</tr>
+					</thead>
+					<tbody>
+					<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+						<c:if test="${not empty rating.averageRating}">
+							<tr>
+								<td>
+									<lams:Portrait userId="${rating.itemId}"/>
+									<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/></span>
+								</td>
+								
+								<td class="rating">
+									<div class="rating-stars-holder text-center center-block">
+										<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+										<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}">
+										</div>
+										<c:set var="userRating">${rating.userRating}</c:set>
+										<div class="rating-stars-caption" id="rating-stars-caption-${objectId}">
+											<c:choose>
+												<c:when test="${empty userRating}">
+													<fmt:message key="label.not.rated"></fmt:message>
+												</c:when>
+												<c:otherwise>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${userRating}</span></fmt:param></fmt:message>
+												</c:otherwise>
+											</c:choose>
+											<br/>
+											<fmt:message key="label.avg.rating">
+												<fmt:param><span id="average-rating-${objectId}">${rating.averageRating}</span></fmt:param>
+												<fmt:param><span id="number-of-votes-${objectId}">${rating.numberOfVotes}</span></fmt:param>
+											</fmt:message>
+										</div>
+									</div>
+								</td>
+								
+								<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+									<td>
+										<c:out value="${rating.comment}" escapeXml="false"/>
+									</td>
+								</c:if>
+							</tr>
+						</c:if>
+					</c:forEach>
+					</tbody>
+				</table>
+			</c:when>
+
+			<c:otherwise>
+				<table class="tablesorter" width="100%">
+					<tbody>
+					<c:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+						<c:if test="${status.first && not empty rating.averageRating}">
+							<tr>
+								<td class="rating">
+									<div class="rating-stars-holder text-center center-block">
+										<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+										<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}"></div>
+										<div class="rating-stars-caption" id="rating-stars-caption-${objectId}">
+											<fmt:message key="label.avg.rating">
+												<fmt:param><span id="average-rating-${objectId}">${rating.averageRating}</span></fmt:param>
+												<fmt:param><span id="number-of-votes-${objectId}">${rating.numberOfVotes}</span></fmt:param>
+											</fmt:message>
+										</div>
+								</td>
+							</tr>
+						</c:if>
+						<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+							<tr>
+								<td>
+									<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+								</td>
+							</tr>
+						</c:if>
+					</c:forEach>
+					</tbody>
+				</table>
+			</c:otherwise>
+		</c:choose>
+
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 2}">
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.rankings"/>&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.rankings.shown.in.brackets"/>
+				</c:if>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item"><strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
+							</c:choose>
+							:</strong>
+							&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+							<span class="portrait-sm-lineheight">&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+		</div>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 3}">
+		<div class="card-body">
+			<div class="fst-italic mb-2">
+				<fmt:message key="label.learning.average.marks"/>
+				&nbsp;
+				<c:if test="${not currentUserDisplay}">
+					<fmt:message key="label.learning.your.marks.shown.in.brackets"/>
+				</c:if>
+			</div>
+			
+			<ul class="list-group">
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}">
+					<c:if test="${alwaysShowAverage || not empty rating.averageRating }">
+						<li class="list-group-item">
+							<strong>
+							<c:choose>
+								<c:when test="${empty rating.averageRating}">-</c:when>
+								<c:otherwise>${rating.averageRating}</c:otherwise>
+							</c:choose>
+							:
+							</strong>
+							
+							&nbsp;
+							<c:if test="${not currentUserDisplay}">
+								<lams:Portrait userId="${rating.itemId}"/>
+							</c:if>
+							<span class="portrait-sm-lineheight">
+								&nbsp;<c:out value="${rating.itemDescription}" escapeXml="false"/>&nbsp;
+							</span>
+							<c:if test="${not currentUserDisplay && not empty rating.userRating}">
+								(${rating.userRating})
+							</c:if>
+						</li>
+					</c:if>
+				</c:forEach>
+			</ul>
+			
+			<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
+				<div class="fst-italic mt-2">
+					<fmt:message key="label.learning.your.justification"/>
+				</div>
+				<lams:out value="${criteriaRatings.justificationComment}" />
+			</c:if>
+		</div>
+	</c:when>
+
+	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
+		<style>
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
+				text-decoration: none;
+			}
+
+			.rubrics-user-card .collapsable-icon-left button:after {
+				margin-top: 6px;
+			}
+
+			.rubrics-table.standard-view .row:first-child {
+				background-color: initial !important;
+			}
+
+			.rubrics-table.standard-view .rubrics-table-header {
+				font-style: normal;
+				font-weight: bold;
+			}
+
+			.rubrics-table.standard-view .col:first-child {
+				font-weight: bold;
+			}
+
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
+				cursor: pointer;
+				text-align: center;
+			}
+
+			.rubrics-table.pivot-view .rubrics-table-header {
+				font-style: normal;
+				text-align: center;
+			}
+			.rubrics-table.pivot-view .row .col:first-child {
+				font-weight: bold;
+			}
+
+			.column-header-span {
+				font-style: italic;
+			}
+			
+			.rubrics-user-card .collapsable-icon-left button, .collapsable-icon-left button:after,
+			.rubrics-row-card .collapsable-icon-left button, .collapsable-icon-left button:after {
+				color: inherit !important;
+			}
+			
+			.rubrics-table .col.text-bg-success {
+				font-weight: bold;
+				line-height: 40px;
+				margin: -0.5em 0;
+			}
+
+			.rubrics-table .rubrics-rating-cell {
+				border-top: none;
+
+			}
+			.rubrics-rating-count {
+				text-align: right;
+			}
+
+			.rubrics-rating-count > .badge {
+				color: gray;
+				background-color: white;
+				font-size: large;
+			}
+
+			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+				margin-top: 10px;
+			}
+
+			.rubrics-table .rubrics-description-cell {
+				border-bottom: none;
+			}
+		</style>
+
+		<c:choose>
+			<c:when test="${currentUserDisplay}">
+				<div class="ltable table-sm rubrics-table standard-view">
+					<div class="row rubrics-table-header">
+						<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+						<div class="col"></div>
+						<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
+							<div class="col">
+								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
+							</div>
+							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+								<div class="col">
+									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
+								</div>
+							</c:if>
+						</c:forEach>
+						<div class="col text-center"><fmt:message key="label.average" /></div>
+					</div>
+					
+					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+
+						<div class="row align-items-center g-0">
+							<div class="col">
+								<c:out value="${criteria.title}" escapeXml="false" />
+							</div>
+
+							<%-- These variables are for counting average rating for the given row --%>
+							<c:set var="rowRateCount" value="0" />
+							<c:set var="rowRateValue" value="0" />
+							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+
+								<%-- Check if any other learner rated this learner for this column --%>
+								<c:set var="rateCount" value="0" />
+								<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+									<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == columnOrderId.count ? 1 : 0)}" />
+								</c:forEach>
+								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
+								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
+
+								<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>">
+									<c:out value="${column.name}" escapeXml="false" />
+									
+									<c:if test="${rateCount > 0}">
+										<%-- learners see just how many rates they got from other learners --%>
+										<div class="rubrics-rating-count">
+											<span class="badge">x&nbsp;${rateCount}</span>
+										</div>
+
+										<%-- teachers see also who gave the rating --%>
+										<c:if test="${showJustification}">
+											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+												<c:if test="${ratingDto.userRating == columnOrderId.count}">
+													<div class="rubrics-rating-learner">
+														<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+														&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+													</div>
+												</c:if>
+											</c:forEach>
+										</c:if>
+									</c:if>
+								</div>
+
+								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
+									<%-- Check if any other learner rated this learner for this 0.5 column --%>
+									<c:set var="rateCount" value="0" />
+									<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+										<c:set var="rateCount" value="${rateCount + (ratingDto.userRating == (columnOrderId.count + 0.5) ? 1 : 0)}" />
+									</c:forEach>
+									<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
+									<c:set var="rowRateValue" value="${rowRateValue + rateCount * (columnOrderId.count + 0.5)}" />
+
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>">
+										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+										
+										<c:if test="${rateCount > 0}">
+											<%-- learners see just how many rates they got from other learners --%>
+											<div class="rubrics-rating-count">
+												<span class="badge">x&nbsp;${rateCount}</span>
+											</div>
+
+											<%-- teachers see also who gave the rating --%>
+											<c:if test="${showJustification}">
+												<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+													<c:if test="${ratingDto.userRating == (columnOrderId.count + 0.5)}">
+														<div class="rubrics-rating-learner">
+															<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+															&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+														</div>
+													</c:if>
+												</c:forEach>
+											</c:if>
+										</c:if>
+									</div>
+								</c:if>
+							</c:forEach>
+
+							<%-- Cell with average rating --%>
+							<div class="col text-center">
+								<c:choose>
+									<c:when test="${rowRateCount == 0}">
+										-
+									</c:when>
+									<c:otherwise>
+										<fmt:formatNumber value="${rowRateValue / rowRateCount}" type="number" maxFractionDigits="2" />
+									</c:otherwise>
+								</c:choose>
+							</div>
+						</div>
+					</c:forEach>
+				</div>
+			</c:when>
+			
+			<c:when test="${rubricsPivotView}">
+				<div id="rubrics-row-cards" role="tablist" aria-multiselectable="true">
+						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+					<c:set var="columnHeaders" value="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" />
+					<c:set var="columnHeaderCount" value="${fn:length(columnHeaders)}" />
+
+					<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary" role="tab" id="heading${criteria.ratingCriteriaId}">
+						       	<span class="card-title collapsable-icon-left">
+						       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}"
+									   aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
+										<%-- Criterion "row" --%>
+										<c:out value="${criteria.title}" escapeXml="false" />
+									</button>
+								</span>
+							</div>
+
+							<div id="collapse${criteria.ratingCriteriaId}" class="collapse"
+								 	role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
+								<div class="ltable rubrics-table pivot-view">
+									<div class="row rubrics-table-header m-0">
+										<%-- Learner profile pictures and names --%>
+										<div class="col"></div>
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+											<div class="col">
+												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
+												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
+											</div>
+										</c:forEach>
+									</div>
+
+									<c:forEach items="${columnHeaders}" varStatus="columnStatus">
+										<c:set var="columnHeader" value="${columnHeaders[columnHeaderCount - columnStatus.count]}" />
+										<div class="row align-items-center m-0">
+											<div class="col">
+													<%-- Criterion "column" --%>
+												<span class="column-header-span"><c:out value="${columnHeader}" escapeXml="false"/></span><br>
+													<%-- Criterion "cell" --%>
+												<c:out value="${criteria.rubricsColumns[columnHeaderCount - columnStatus.count].name}" escapeXml="false" />
+											</div>
+											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index)}">text-bg-success</c:if>'>
+													${columnHeaderCount - columnStatus.index}
+												</div>
+											</c:forEach>
+										</div>
+										
+										<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+											<div class="row align-items-center m-0">
+												<div class="col">
+													<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+												</div>
+												<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
+													<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">text-bg-success</c:if>'>
+														${columnHeaderCount - columnStatus.index - 0.5}
+													</div>
+												</c:forEach>
+											</div>
+										</c:if>
+									</c:forEach>
+								</div>
+							</div>
+						</div>
+
+					</c:forEach>
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+
+				<div id="rubrics-user-cards-${criteriaGroupId}" role="tablist" aria-multiselectable="true">
+					<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+					<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+
+					<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+						       	<span class="card-title collapsable-icon-left">
+						       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									   data-parent="#rubrics-users-panels-${criteriaGroupId}">
+										<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+										&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+									</button>
+								</span>
+							</div>
+
+							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="collapse"
+									 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+								<div class="ltable rubrics-table mb-0 standard-view">
+									<div class="row rubrics-table-header m-0">
+											<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+										<div class="col"></div>
+										<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
+											<div class="col">
+												(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
+											</div>
+											<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
+												<div class="col">
+													<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
+												</div>
+											</c:if>
+										</c:forEach>
+									</div>
+									
+									<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+										<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+										<div class="row m-0">
+											<div class="col">
+												<c:out value="${criteria.title}" escapeXml="false" />
+											</div>
+											<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">text-bg-success</c:if>'>
+													<c:out value="${column.name}" escapeXml="false" />
+												</div>
+												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
+													<div class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">text-bg-success</c:if>'>
+														<i><fmt:message key="label.rating.rubrics.in.between" /></i>
+													</div>
+												</c:if>
+											</c:forEach>
+										</div>
+									</c:forEach>
+								</div>
+							</div>
+						</div>
+					</c:forEach>
+				</div>
+			</c:otherwise>
+		</c:choose>
+	</c:when>
+</c:choose>
Index: lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -386,6 +386,10 @@
        <path>/WEB-INF/tags/StyledRating.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>StyledRating5</name>
+       <path>/WEB-INF/tags/StyledRating5.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>Switch</name>
        <path>/WEB-INF/tags/Switch.tag</path>
    	</tag-file>
Index: lams_tool_preview/web/includes/css/learning.scss
===================================================================
diff -u -rb745384874257ea8327d82156fec0455e4232ad6 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/includes/css/learning.scss	(.../learning.scss)	(revision b745384874257ea8327d82156fec0455e4232ad6)
+++ lams_tool_preview/web/includes/css/learning.scss	(.../learning.scss)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -56,11 +56,7 @@
 }
 
 .divrankx {
-    width: 300px;
-    height: 30px;
-    margin: 5px;
     padding: 5px;
-    border: $border-thin-default;
 }
 
 .divrankxlabel {
@@ -69,10 +65,15 @@
     padding: 5px;
 }
 
-.draggable {
-	width: 290px;
-}
 .email-button {
 	margin: 2px;
 	font-size: $font-size-small !important; // force it to be small or the jqgrid setting will override
 }
+
+#no-users-info {
+	display: none;
+}
+
+.tablesorter {
+	margin-bottom: 0px;
+}
\ No newline at end of file
Index: lams_tool_preview/web/pages/learning/comment.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/comment.jsp	(.../comment.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/comment.jsp	(.../comment.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,14 +1,13 @@
+<c:set var="maxRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.maximumRates}"/>
+<c:set var="minRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.minimumRates}"/>
+
+<!-- ********************  CSS ********************** -->
 	<lams:css suffix="jquery.jRating"/>
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.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/learning.css'/>">
-	<style media="screen,projection" type="text/css">
-		#no-users-info {display: none;}
-	</style>
 
-	<c:set var="maxRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.maximumRates}"/>
-	<c:set var="minRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.minimumRates}"/>
-
+<!-- ********************  javascript ********************** -->
 	<script type="text/javascript">
 		//var for jquery.jRating.js
 		var pathToImageFolder = "${lams}images/css/";
@@ -18,7 +17,6 @@
 		MIN_RATES = 0, // only applies to stars
 		MAX_RATINGS_FOR_ITEM = 0, // only applies to stars
 		COUNT_RATED_ITEMS = 0, // only applies to stars
-		LAMS_URL = '${lams}',
 		COMMENTS_MIN_WORDS_LIMIT = ${criteriaRatings.ratingCriteria.commentsMinWordsLimit},
 		COMMENT_TEXTAREA_TIP_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.comment.textarea.tip"/></spring:escapeBody>',
 		WARN_COMMENTS_IS_BLANK_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="warning.comment.blank"/></spring:escapeBody>',
@@ -31,16 +29,13 @@
 			commentsOnOtherPages = ${countRatedItems};
 			numCommentsOnPage = 0;
 	</script>
-	
 	<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter-widgets.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/rating.js" type="text/javascript" ></script> 	
 	<script src="${lams}includes/javascript/portrait.js" type="text/javascript" ></script>
-	
 	<script type="text/javascript">
-
 	$(document).ready(function(){
 
 		$(".tablesorter").tablesorter({
@@ -221,9 +216,7 @@
 	}
 	</c:if>
 
-	
 	function submitEntry(next, skipNumberValidation){	
-
 		hideButtons();
 		if (!skipNumberValidation && (numCommentsOnPage + commentsOnOtherPages < ${minRates})) {
 			alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.rate.limits.reminder.min"/></spring:escapeBody>'.replace('{0}',${minRates}) );
@@ -291,10 +284,9 @@
 	}
     </script>
 
-		<!-- Rating limits info -->
-		<c:if test="${minRates ne 0 || maxRates ne 0}">
-		
-			<lams:Alert type="info" id="rate-limits-reminder" close="false">
+	<!-- Rating limits info -->
+	<c:if test="${minRates ne 0 || maxRates ne 0}">	
+		<lams:Alert5 type="info" id="rate-limits-reminder" close="false">
 				<c:choose>
 					<c:when test="${rateAllUsers > 0}">
 						<fmt:message key="label.rate.all.users"></fmt:message>
@@ -327,10 +319,14 @@
 						<fmt:param value="<span id='count-rated-items'>${countRatedItems}</span>"/>
 					</fmt:message>
 				</span>
-			</lams:Alert>
-				
-		</c:if>
-		
+		</lams:Alert5>
+	</c:if>
+	
+<div class="card lcard">
+	<div class="card-header text-bg-secondary">
+		<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true" />
+	</div>
+
 	<form action="<c:url value="/learning/submitComments.do?"/>" method="get" id="editForm">
 		<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
 		<input type="hidden" name="toolContentId" value="${peerreview.contentId}"/>
@@ -345,9 +341,9 @@
 				<fmt:message key="label.comment" />
 			</th>
 		</lams:TSTable5>
-
 	</form>
 								
-	<div id="no-users-info">
+	<div id="no-users-info" class="alert alert-warning">
 		<fmt:message key="label.no.users" />
 	</div>
+</div>
\ No newline at end of file
Index: lams_tool_preview/web/pages/learning/hedging.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/hedging.jsp	(.../hedging.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/hedging.jsp	(.../hedging.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,5 +1,4 @@
-	<script type="text/javascript">
-	
+<script type="text/javascript">	
 		var currentMark = 0;
 		
 		$(document).ready(function(){
@@ -65,35 +64,46 @@
 		function cancel() {
 			document.location.href='<c:url value="/learning/refresh.do?sessionMapID=${sessionMapID}"/>';
 		}
-    </script>
+</script>
 
-	<form action="<c:url value="/learning/submitRankingHedging.do?"/>" method="post" id="editForm">
-
-		<c:if test="${notcomplete}">
-			<lams:Alert type="danger" id="warn-assign-more" close="true">
-				<fmt:message key="error.assign.marks"><fmt:param>${criteriaRatings.ratingCriteria.maxRating}</fmt:param></fmt:message>
-			</lams:Alert>
-		</c:if>
-		<span id="instructions"><strong><fmt:message key="label.assign.marks">
+<c:if test="${notcomplete}">
+	<lams:Alert5 type="danger" id="warn-assign-more" close="true">
+		<fmt:message key="error.assign.marks">
 			<fmt:param>${criteriaRatings.ratingCriteria.maxRating}</fmt:param>
-			<fmt:param><span id="totalMark">0</span></fmt:param>
-			</fmt:message></strong>
-		</span>
+		</fmt:message>
+	</lams:Alert5>
+</c:if>
 
-		<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
-		<input type="hidden" name="toolContentId" value="${toolContentId}"/>
-		<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
-		<input type="hidden" name="next" id="next" value=""/>
+<lams:Alert5 type="info" id="assign-mark-info" close="false">
+	<fmt:message key="label.assign.marks">
+		<fmt:param>${criteriaRatings.ratingCriteria.maxRating}</fmt:param>
+		<fmt:param>
+			<span id="totalMark">0</span>
+		</fmt:param>
+	</fmt:message>
+</lams:Alert5>
 
+<form action="<c:url value="/learning/submitRankingHedging.do?"/>" method="post" id="editForm">
+	<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
+	<input type="hidden" name="toolContentId" value="${toolContentId}"/>
+	<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
+	<input type="hidden" name="next" id="next" value=""/>
+		
+	<div class="card lcard">
+		<div class="card-header text-bg-secondary">
+			<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true" />
+		</div>
+
 		<div class="table-responsive">
-			<table class="table table-hover table-sm">
+			<div class="div-hover">
 				<c:forEach var="ratingDto" items="${criteriaRatings.ratingDtos}">
-				<tr>
-					<td>
-						<lams:Portrait userId="${ratingDto.itemId}"/><span class="portrait-sm-lineheight">${ratingDto.itemDescription}</span>
-						
-					</td>
-					<td style="width: 100px;">
+				<div class="row">
+					<div class="col">
+						<lams:Portrait userId="${ratingDto.itemId}"/>
+						<span class="portrait-sm-lineheight ms-2">${ratingDto.itemDescription}</span>
+					</div>
+					
+					<div style="width: 100px;">
 						<c:choose>
 						<c:when test="${finishedLock}">
 							${ratingDto.userRating}
@@ -109,25 +119,30 @@
 							</select>
 						</c:otherwise>
 						</c:choose>
-					</td>
-				</tr>
+					</div>
+				</div>
 				</c:forEach>
-			</table>
+			</div>
 		</div>
 
 		<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
-			<div class="mb-3">
-			<h4><label for="justify" class="mt-2"><fmt:message key="label.justify.hedging.marks" /></label></h4>
-			<c:choose>
-			<c:when test="${finishedLock}">
-				<span>${criteriaRatings.justificationComment}</span>
-			</c:when>
-			<c:otherwise>
-				<textarea id="justify" name="justify" rows="4" cols="60" class="mark-hedging-select form-control" onblur="updateMark()">${criteriaRatings.justificationComment}</textarea>
-			</c:otherwise>
-			</c:choose>
+			<div class="m-3">
+				<div>
+					<label for="justify" class="fst-italic">
+						<fmt:message key="label.justify.hedging.marks" />
+					</label>
+				</div>
+				<c:choose>
+					<c:when test="${finishedLock}">
+						<span>${criteriaRatings.justificationComment}</span>
+					</c:when>
+					<c:otherwise>
+						<textarea id="justify" name="justify" rows="4" cols="60"
+							class="mark-hedging-select form-control" onblur="updateMark()">${criteriaRatings.justificationComment}</textarea>
+					</c:otherwise>
+				</c:choose>
 			</div>
 		</c:if>
-	
-	</form>
+	</div>
+</form>
 		
Index: lams_tool_preview/web/pages/learning/learning.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -3,7 +3,6 @@
 <%@ page import="org.lamsfoundation.lams.rating.model.RatingCriteria" %>
 
 <c:set var="lams"><lams:LAMSURL/></c:set>
-
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="mode" value="${sessionMap.mode}" />
 <c:set var="peerreview" value="${sessionMap.peerreview}" />
@@ -16,7 +15,6 @@
 <c:set var="isRanking" value="<%=RatingCriteria.RATING_STYLE_RANKING%>"/>
 <c:set var="isHedging" value="<%=RatingCriteria.RATING_STYLE_HEDGING%>"/>
 <c:set var="isRubrics" value="<%=RatingCriteria.RATING_STYLE_RUBRICS%>"/>
-
 <c:choose>
 	<c:when test="${peerreview.showRatingsLeftForUser || peerreview.reflectOnActivity}">
 		<c:set var="finishButtonLabel"><fmt:message key="label.continue" /></c:set>
@@ -29,23 +27,18 @@
 	</c:otherwise>
 </c:choose>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	
-	<lams:css/>
+<lams:PageLearner title="${peerreview.title}" toolSessionID="${toolSessionId}">
+	<!-- ********************  CSS ********************** -->
 	<link rel="stylesheet" href="<lams:WebAppURL/>/includes/css/learning.css">
 	
+	<!-- ********************  javascript ********************** -->
 	<lams:JSImport src="includes/javascript/common.js" />
-	<script src="${lams}includes/javascript/jquery.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/bootstrap.min.js" type="text/javascript"></script>
-	
 	<script type="text/javascript">
 		function hideButtons() {
-			$("#buttonNextPrevDiv").css("visibility", "hidden");
+			$("#buttonNextPrevDiv button").prop('disabled', true);
 		}	
 		function showButtons() {
-			$("#buttonNextPrevDiv").css("visibility", "visible");
+			$("#buttonNextPrevDiv button").prop('disabled', false);
 		}	
 
  		function finishSession(){
@@ -71,12 +64,11 @@
 			hideButtons();
 			document.location.href='<c:url value="/learning/nextPrev.do?sessionMapID=${sessionMapID}&criteriaId=${criteriaRatings.ratingCriteria.ratingCriteriaId}&next='+next+'"/>';
 		}
-     </script>
-</lams:head>
-<body class="stripes">
-	<lams:Page type="learner" title="${peerreview.title}">
+	</script>
+
+	<div class="container-lg">
 		<c:if test="${sessionMap.lockOnFinish and mode != 'teacher'}">
-			<lams:Alert type="danger" id="warn-lock" close="false">
+			<lams:Alert5 type="danger" id="warn-lock" close="false">
 				<c:choose>
 					<c:when test="${sessionMap.userFinished}">
 						<fmt:message key="message.activityLocked"/>
@@ -85,98 +77,93 @@
 						<fmt:message key="message.warnLockOnFinish" ><fmt:param>${finishButtonLabel}</fmt:param></fmt:message>
 					</c:otherwise>
 				</c:choose>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
-		<div class="panel">
-			<p><c:out value="${peerreview.instructions}" escapeXml="false"/><p>
+		<div id="instructions" class="instructions">
+			<c:out value="${peerreview.instructions}" escapeXml="false" />
+
 			<c:if test="${numCriteria > 1}">
-				<p><fmt:message key="label.step"><fmt:param>${stepNumber}</fmt:param><fmt:param>${numCriteria}</fmt:param></fmt:message></p>
-		 	</c:if> 
+				<div>
+					<fmt:message key="label.step">
+						<fmt:param>${stepNumber}</fmt:param>
+						<fmt:param>${numCriteria}</fmt:param>
+					</fmt:message>
+				</div>
+			</c:if>
 		</div>
-		<div class="panel">
-		<c:choose>
-		<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isComment}">
-			<h4><c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/></h4>
-			<%@ include file="comment.jsp" %>
-		</c:when>
-		<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isStar}">
-			<h4><c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/></h4>
-			<%@ include file="star.jsp" %>
-		</c:when>
-		<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isRanking}">
-			<h4><c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/></h4>
+		
 			<c:choose>
-			<c:when test="${rateAllUsers > 0}">
-			<%@ include file="rankall.jsp" %>
-			</c:when>
-			<c:otherwise>
-			<%@ include file="ranking.jsp" %>
-			</c:otherwise>
-			</c:choose>		
-		</c:when>
-		<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isHedging}">
-			<h4><c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/></h4>
-			<%@ include file="hedging.jsp" %>
-		</c:when>
-		<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isRubrics}">
-			<c:choose>
-				<c:when test="${peerreview.rubricsView eq 2}">
-					<%@ include file="rubricsPivot.jsp" %>
+				<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isComment}">					
+					<%@ include file="comment.jsp"%>
 				</c:when>
-				<c:otherwise>
-					<%@ include file="rubrics.jsp" %>
-				</c:otherwise>
+				
+				<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isStar}">
+					<%@ include file="star.jsp"%>
+				</c:when>
+				
+				<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isRanking}">
+					<c:choose>
+						<c:when test="${rateAllUsers > 0}">
+							<%@ include file="rankall.jsp"%>
+						</c:when>
+						<c:otherwise>
+							<%@ include file="ranking.jsp"%>
+						</c:otherwise>
+					</c:choose>
+				</c:when>
+				
+				<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isHedging}">
+					<%@ include file="hedging.jsp"%>
+				</c:when>
+				
+				<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == isRubrics}">
+					<c:choose>
+						<c:when test="${peerreview.rubricsView eq 2}">
+							<%@ include file="rubricsPivot.jsp"%>
+						</c:when>
+						<c:otherwise>
+							<%@ include file="rubrics.jsp"%>
+						</c:otherwise>
+					</c:choose>
+				</c:when>
 			</c:choose>
-		</c:when>
-		</c:choose>		
-		</div>
-	
-		<c:choose>	
-			<c:when test="${finishedLock || mode == 'teacher'}">
-				<c:set var="method">nextPrev</c:set>
-			</c:when>
-			<c:otherwise>
-				<c:set var="method">submitEntry</c:set>
-			</c:otherwise>
-		</c:choose>
 
-		<div class="mt-2" id="buttondiv">
-		
-		<div class="float-start">		
-			<button type="button" id="refreshButton" class="btn btn-secondary" onclick="javascript:refresh();">
+		<div class="activity-bottom-buttons">
+			<div id="buttonNextPrevDiv">
+				<c:choose>	
+					<c:when test="${finishedLock || mode == 'teacher'}">
+						<c:set var="method">nextPrev</c:set>
+					</c:when>
+					<c:otherwise>
+						<c:set var="method">submitEntry</c:set>
+					</c:otherwise>
+				</c:choose>
+				
+				<c:if test="${stepNumber > 1}">
+					<button type="button" id="prevButton" class="btn btn-secondary btn-icon-previous me-1" onclick="javascript:${method}(false);">
+						<fmt:message key="label.previous"/>
+					</button>
+				</c:if>
+				
+				<c:choose>
+					<c:when test="${stepNumber == numCriteria}">
+						<button type="button" id="finishButton" class="btn btn-primary btn-icon-next" onclick="javascript:${method}(true);">
+							${finishButtonLabel}
+						</button>
+					</c:when>
+					<c:otherwise>
+						<button type="button" id="finishButton" class="btn btn-primary btn-icon-next" onclick="javascript:${method}(true);">
+							<fmt:message key="label.next"/>
+						</button>
+					</c:otherwise>
+				</c:choose>
+			</div>
+						
+			<button type="button" id="refreshButton" class="btn btn-secondary btn-icon-refresh me-4" onclick="javascript:refresh();">
 				<fmt:message key="label.refresh"/>
 			</button>
-		</div>
-		
-		<div class="activity-bottom-buttons" id="buttonNextPrevDiv">		
-			<c:if test="${stepNumber > 1}">
-				<button type="button" id="prevButton" class="btn btn-secondary" onclick="javascript:${method}(false);">
-					<fmt:message key="label.previous"/>
-				</button>
-			</c:if>
-			
-			<c:choose>
-				<c:when test="${stepNumber == numCriteria}">
-					<button type="button" id="finishButton" class="btn btn-primary" onclick="javascript:${method}(true);">
-						${finishButtonLabel}
-					</button>
-				</c:when>
-				<c:otherwise>
-					<button type="button" id="finishButton" class="btn btn-primary" onclick="javascript:${method}(true);">
-						<fmt:message key="label.next"/>
-					</button>
-				</c:otherwise>
-			</c:choose>
-		</div>
-		</div>				
+		</div>			
 	
-	</lams:Page>
-	<!--closes content-->
-
-	<div id="footer">
 	</div>
-	<!--closes footer-->
-
-</body>
-</lams:html>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_preview/web/pages/learning/learningHiddenUser.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/learningHiddenUser.jsp	(.../learningHiddenUser.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/learningHiddenUser.jsp	(.../learningHiddenUser.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,46 +1,28 @@
 <!DOCTYPE html>
 <%@include file="/common/taglibs.jsp"%>
 
-<lams:html>
-<lams:head>
-	<%@ include file="/common/header.jsp"%>
-	<meta http-equiv="refresh" content="60">
-	
+<fmt:message var="title" key='activity.title'/>
+<lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="60">
 	<script type="text/javascript">
-
  		function finishSession(){
  			document.getElementById("finishButton").disabled = true;
 			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
-			return false;
 		}
- 		
      </script>
-</lams:head>
-
-<body class="stripes">
-
-	<c:set scope="request" var="title">
-		<fmt:message key="activity.title" />
-	</c:set>
-	<lams:Page type="learner" title="${title}">
 	
+	<div class="container-lg">
 		<lams:Alert5 type="info" id="removed-user-info" close="false">
 			<fmt:message key="label.removed.user.warning" />
 		</lams:Alert5>
 		
 		<div class="activity-bottom-buttons">
-			<a href="javascript:location.reload(true);"	class="btn btn-secondary">
+			<button type="button" onclick="javascript:location.reload(true);" class="btn btn-secondary btn-icon-refresh">
 				<fmt:message key="button.try.again" />
-			</a>
+			</button>
 		
-			<a href="#nogo" path="FinishButton" id="finishButton" onclick="return finishSession()" class="btn btn-primary na">
+			<button type="button" name="FinishButton" id="finishButton" onclick="finishSession()" class="btn btn-primary na">
 				<fmt:message key="label.finished" />
-			</a>
+			</button>
 		</div>
-		
-	</lams:Page>
-	
-	<div id="footer"></div>
-
-</body>
-</lams:html>
+	</div>
+</lams:PageLearner>
Index: lams_tool_preview/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_preview/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,69 +1,12 @@
-<%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
-
+<%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMapID" value="${param.sessionMapID}" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" />
-	</title>
-	<%@ include file="/common/header.jsp"%>
-		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${sessionMap.toolSessionId}', '', submitForm);
-		
-		function disableFinishButton() {
-			document.getElementById("finishButton").disabled = true;
-		}
-		
-		function submitForm(){
-			var f = document.getElementById('reflectionForm');
-			f.submit();
-		}
-	</script>
-</lams:head>
-<body class="stripes">
 
-	<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" modelAttribute="reflectionForm">
-		<form:hidden path="userID" />
-		<form:hidden path="sessionMapID" />
-
-		<lams:Page type="learner" title="${sessionMap.title}">
-
-			<lams:errors/>
-
-			<p>
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-			</p>
-			
-			<form:textarea id="focused" rows="5" path="entryText" cssClass="form-control"></form:textarea>
-
-			<div class="activity-bottom-buttons">
-				<a href="#nogo" class="btn btn-primary na" id="finishButton">
-					<c:choose>
-						<c:when test="${sessionMap.isLastActivity}">
-							<fmt:message key="label.finish" />
-						</c:when>					
-						<c:otherwise>
-							<fmt:message key="label.finished" />
-						</c:otherwise>
-					</c:choose>
-				</a>
-			</div>
-			
-		</lams:Page>
-	</form:form>
-
-	<div id="footer">
-	</div>
-	<!--closes footer-->
-
-<script type="text/javascript">
-	window.onload = function() {
-		document.getElementById("focused").focus();
-	}
-</script>
-
-</body>
-</lams:html>
\ No newline at end of file
+<lams:Notebook title="${sessionMap.title}"
+	toolSessionID="${sessionMap.toolSessionId}"
+	instructions="${sessionMap.reflectInstructions}"
+	formActionUrl="submitReflection.do"
+	isNextActivityButtonSupported="true"
+	finishButtonLabelKey="label.finish"
+	notebookLabelKey="title.reflection"/>
\ No newline at end of file
Fisheye: Tag a08fb689e1bb174869cb981d301b204d2f573590 refers to a dead (removed) revision in file `lams_tool_preview/web/pages/learning/notebookdisplay.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_preview/web/pages/learning/rankall.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/rankall.jsp	(.../rankall.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/rankall.jsp	(.../rankall.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,8 +1,5 @@
-	<script type="text/javascript" src="${lams}includes/javascript/interact.min.js"></script>
-	<lams:JSImport src="includes/javascript/ranking.js" relative="true" />
-
 	<%-- Build up the divs now and the ordering, then include the divs in the body and trigger the ordering in document.ready --%>
-	<c:choose>
+<c:choose>
 	<c:when test="${finishedLock}">
 		<c:set var="rowdrop"></c:set>
 		<c:set var="itemdrop"></c:set>
@@ -11,21 +8,26 @@
 		<c:set var="rowdrop">dropzone</c:set>
 		<c:set var="itemdrop">item draggable</c:set>
 	</c:otherwise>
-	</c:choose>
+</c:choose>
 	
-	<c:set var="itemDivs"></c:set>
-	<c:set var="javascriptReady"></c:set>	
-	<c:forEach var="ratingDto" items="${criteriaRatings.ratingDtos}">
-		<c:set var="itemDivs">${itemDivs} <div id="item${ratingDto.itemId}" class="${itemdrop}">${ratingDto.itemDescription}</div></c:set>
-		<c:if test="${ratingDto.userRating > 0}">
-			<c:set var="javascriptReady">${javascriptReady} rankedArray[${ratingDto.userRating}]='item${ratingDto.itemId}';</c:set>		
-		</c:if>
-	</c:forEach>
-	
-	<script type="text/javascript">
+<c:set var="itemDivs"></c:set>
+<c:set var="javascriptReady"></c:set>	
+<c:forEach var="ratingDto" items="${criteriaRatings.ratingDtos}">
+	<c:set var="itemDivs">
+		${itemDivs} 
+		<li id="item${ratingDto.itemId}" class="${itemdrop} list-group-item">
+			${ratingDto.itemDescription}
+		</li>
+	</c:set>
+	<c:if test="${ratingDto.userRating > 0}">
+		<c:set var="javascriptReady">${javascriptReady} rankedArray[${ratingDto.userRating}]='item${ratingDto.itemId}';</c:set>		
+	</c:if>
+</c:forEach>
 
+<script type="text/javascript" src="${lams}includes/javascript/interact.min.js"></script>
+<lams:JSImport src="includes/javascript/ranking.js" relative="true" />
+<script type="text/javascript">
 		var learners;
-		
 		$(document).ready(function(){
 			
 			var rankedArray = new Array();
@@ -50,7 +52,6 @@
 
 		});
 		
-
 		function testButtons() {
 			if ( learners.children.length == 0 ) {
 				showButtons();
@@ -60,10 +61,13 @@
 		}
 		
 		function updateAddLabel() {
-			if ( learners.children == undefined || learners.children.length == 0  ) {
-		    	$('#lastEntry').html('<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.alllearnersadded"/></spring:escapeBody>');
-			} else {
-				$('#lastEntry').html('<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.addlearnerhere"/></spring:escapeBody>');
+			const label = ( learners.children == undefined || learners.children.length == 0  ) ?
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.alllearnersadded"/></spring:escapeBody>' :
+					'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.addlearnerhere"/></spring:escapeBody>';						 
+		    $('#lastEntry').html(label);
+
+		    if ( learners.children == undefined || learners.children.length == 0  ) {
+		    	$('#lastEntry').toggleClass("text-muted text-success").effect("highlight", {}, 3000);
 			}
 		}
 			
@@ -121,36 +125,48 @@
 		function cancel() {
 			document.location.href='<c:url value="/learning/refresh.do?sessionMapID=${sessionMapID}"/>';
 		}
+</script>
 
-    </script>
+<c:if test="${notcomplete}">
+	<lams:Alert5 type="danger" id="warn-assign-rankAll" close="true">
+		<fmt:message key="error.assign.rankAll" />
+	</lams:Alert5>
+</c:if>
+<lams:Alert5 type="info" id="info-assign-rankAll" close="false">
+	<fmt:message key="label.assign.rankAll"/>
+</lams:Alert5>
 
-	<form action="<c:url value="/learning/submitRankingHedging.do?"/>" method="get" id="editForm">
+<form action="<c:url value="/learning/submitRankingHedging.do?"/>" method="get" id="editForm">
+	<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
+	<input type="hidden" name="toolContentId" value="${toolContentId}"/>
+	<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
+	<input type="hidden" name="next" id="next" value=""/>
+	
+	<div class="card lcard">
+		<div class="card-header text-bg-secondary">
+			<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true" />
+		</div>
 
-		<c:if test="${notcomplete}">
-			<span class="alert"><fmt:message key="error.assign.rankAll"/></span><br/>
-		</c:if>
-		<span id="instructions"><strong><fmt:message key="label.assign.rankAll">
-			</fmt:message></strong>
-		</span>
-
-		<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
-		<input type="hidden" name="toolContentId" value="${toolContentId}"/>
-		<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
-		<input type="hidden" name="next" id="next" value=""/>
-
-		<div class="row mt-2">
+		<div class="row m-2 mb-4">
 			<div class="col-sm-6">
-				<strong><fmt:message key="label.ranked"></fmt:message></strong>
-				<div id="ranked"><div id="lastEntry" class="${rowdrop}" style="padding-top:10px;padding-bottom:10px"><fmt:message key="label.addlearnerhere"></fmt:message></div></div>
+				<strong><fmt:message key="label.ranked"/></strong>
+				
+				<ul id="ranked" class="list-group mt-2">
+					<div id="lastEntry" class="${rowdrop} text-muted" style="padding-top:10px;padding-bottom:10px">
+						<fmt:message key="label.addlearnerhere"/>
+					</div>
+				</ul>
 			</div>
 			
 			<div class="col-sm-6">
-				<div  class="${rowdrop}" id="unranked"><strong><fmt:message key="label.unranked"></fmt:message></strong></div>
-				<div id="learners">
-					${itemDivs}
+				<div class="${rowdrop} fw-bold" id="unranked">
+					<fmt:message key="label.unranked"/>
 				</div>
+				
+				<ul id="learners" class="list-group mt-2">
+					${itemDivs}
+				</ul>
 			</div>
 		</div>
-	
-		</form>
-		
+	</div>
+</form>
Index: lams_tool_preview/web/pages/learning/ranking.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/ranking.jsp	(.../ranking.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/ranking.jsp	(.../ranking.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,8 +1,5 @@
-	<script type="text/javascript" src="${lams}includes/javascript/interact.min.js"></script>
-	<lams:JSImport src="includes/javascript/ranking.js" relative="true" />
-
-	<%-- Build up the divs now and the ordering, then include the divs in the body and trigger the ordering in document.ready --%>
-	<c:choose>
+<%-- Build up the divs now and the ordering, then include the divs in the body and trigger the ordering in document.ready --%>
+<c:choose>
 	<c:when test="${finishedLock}">
 		<c:set var="rowdrop"></c:set>
 		<c:set var="itemdrop"></c:set>
@@ -11,23 +8,28 @@
 		<c:set var="rowdrop">dropzone</c:set>
 		<c:set var="itemdrop">draggable</c:set>
 	</c:otherwise>
-	</c:choose>
+</c:choose>
 	
-	<c:set var="itemDivs"></c:set>
-	<c:set var="javascriptReady"></c:set>	
-	<c:forEach var="ratingDto" items="${criteriaRatings.ratingDtos}">
-		<c:set var="itemDivs">${itemDivs} <div id="item${ratingDto.itemId}" class="${itemdrop}">${ratingDto.itemDescription}</div></c:set>
-		<c:set var="javascriptReady">${javascriptReady} setRanking('${ratingDto.itemDescription}', ${ratingDto.itemId}, '${ratingDto.userRating}');</c:set>		
-	</c:forEach>
-	
-	<script type="text/javascript">
+<c:set var="itemDivs"></c:set>
+<c:set var="javascriptReady"></c:set>	
+<c:forEach var="ratingDto" items="${criteriaRatings.ratingDtos}">
+	<c:set var="itemDivs">
+		${itemDivs} 
+		<li id="item${ratingDto.itemId}" class="${itemdrop} list-group-item">
+			${ratingDto.itemDescription}
+		</li>
+	</c:set>
+	<c:set var="javascriptReady">${javascriptReady} setRanking('${ratingDto.itemDescription}', ${ratingDto.itemId}, '${ratingDto.userRating}');</c:set>		
+</c:forEach>
 
+<script type="text/javascript" src="${lams}includes/javascript/interact.min.js"></script>
+<lams:JSImport src="includes/javascript/ranking.js" relative="true" />
+<script type="text/javascript">
 		$(document).ready(function(){
 			${javascriptReady}
 			
 			testButtons();
 		});
-		
 
 		function doDrop(event) {
 	    	var theTarget = event.target;
@@ -48,6 +50,7 @@
 				    }
 			    } 
 			    theTarget.appendChild(newChild);
+			    $(theTarget).effect("highlight", {}, 2000);
 	    	}
 	    	removeClassWithHighlight(newChild, 'can-drop');
 		    resetXY(newChild);
@@ -131,42 +134,54 @@
 		function cancel() {
 			document.location.href='<c:url value="/learning/refresh.do?sessionMapID=${sessionMapID}"/>';
 		}
-		
+</script>
 
-    </script>
+<c:if test="${notcomplete}">
+	<lams:Alert5 type="info" id="warn-assign-more" close="true">
+		<fmt:message key="error.assign.ranks">
+			<fmt:param>${criteriaRatings.ratingCriteria.maxRating}</fmt:param>
+		</fmt:message>
+	</lams:Alert5>
+</c:if>
 
-	<form action="<c:url value="/learning/submitRankingHedging.do?"/>" method="get" id="editForm">
+<lams:Alert5 type="info" id="warn-assign-ranks" close="true">
+	<fmt:message key="label.assign.ranks">
+		<fmt:param>${criteriaRatings.ratingCriteria.maxRating}</fmt:param>
+	</fmt:message>
+</lams:Alert5>
 
-		<c:if test="${notcomplete}">
-			<lams:Alert type="info"  id="warn-assign-more" close="true">
-				<fmt:message key="error.assign.ranks"><fmt:param>${criteriaRatings.ratingCriteria.maxRating}</fmt:param></fmt:message>
-			</lams:Alert>
-		</c:if>
-		<span id="instructions"><strong><fmt:message key="label.assign.ranks">
-			<fmt:param>${criteriaRatings.ratingCriteria.maxRating}</fmt:param>
-			</fmt:message></strong>
-		</span>
+<form action="<c:url value="/learning/submitRankingHedging.do?"/>" method="get" id="editForm">
+	<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
+	<input type="hidden" name="toolContentId" value="${toolContentId}"/>
+	<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
+	<input type="hidden" name="next" id="next" value=""/>
 
-		<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
-		<input type="hidden" name="toolContentId" value="${toolContentId}"/>
-		<input type="hidden" name="criteriaId" value="${criteriaRatings.ratingCriteria.ratingCriteriaId}"/>
-		<input type="hidden" name="next" id="next" value=""/>
+	<div class="card lcard">
+		<div class="card-header text-bg-secondary">
+			<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true" />
+		</div>
+		
+		<div class="row m-3 mb-4" id="drag-area">
+			<ul class="col-sm-6 list-group">
+				<strong><fmt:message key="label.ranked"/></strong>
 
-		<div class="row mt-2" id="drag-area">
-			<div class="col-sm-6">
-				<strong><fmt:message key="label.ranked"></fmt:message></strong>
 				<c:forEach begin="1" end="${criteriaRatings.ratingCriteria.maxRating}" var="index">
-					<div class="row"><div class="col-sm-1 divrankxlabel">${index}:</div><div class="col-sm-5 divrankx ${rowdrop}" id="divrank${index}" ></div></div>
+					<div class="row text-bg-success mt-2 ms-0">
+						<div class="col-sm-1 divrankxlabel">${index}:</div>
+						<div class="col-sm-10 divrankx ${rowdrop}" id="divrank${index}"></div>
+					</div>
 				</c:forEach>
-			</div>
+			</ul>
 			
 			<div class="col-sm-6">
-				<div class="${rowdrop}" id="unranked"><strong><fmt:message key="label.unranked"></fmt:message></strong></div>
-				<div id="learners">
-					${itemDivs}
+				<div class="${rowdrop} fw-bold" id="unranked">
+					<fmt:message key="label.unranked"/>
 				</div>
+				<ul id="learners" class="list-group mt-2">
+					${itemDivs}
+				</ul>
 			</div>
 		</div>
+	</div>
+</form>
 		
-	</form>
-		
Index: lams_tool_preview/web/pages/learning/results.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:if test="${not empty param.sessionMapID}">
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
 </c:if>
@@ -11,17 +12,15 @@
 <c:set var="finishedLock" value="${sessionMap.finishedLock}" />
 <c:set var="isCommentsEnabled" value="${sessionMap.isCommentsEnabled}" />
 <c:set var="finishImmediately" value="${peerreview.lockWhenFinished and not peerreview.showRatingsLeftByUser and not peerreview.showRatingsLeftForUser and not peerreview.reflectOnActivity}" />
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" />
-	</title>
-	<%@ include file="/common/header.jsp"%>
 
+<lams:PageLearner title="${peerreview.title}" toolSessionID="${toolSessionId}">
+	<!-- ********************  CSS ********************** -->
 	<lams:css suffix="jquery.jRating"/>
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.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/learning.css">
 
+	<!-- ********************  javascript ********************** -->
 	<script type="text/javascript">
 		//var for jquery.jRating.js
 		var pathToImageFolder = "${lams}images/css/";
@@ -32,19 +31,17 @@
 		COMMENTS_MIN_WORDS_LIMIT = 0,
 		MAX_RATINGS_FOR_ITEM = 0,
 		LIMIT_BY_CRITERIA = "true";
-		LAMS_URL = '${lams}',
 		COUNT_RATED_ITEMS = 0,
 		COMMENT_TEXTAREA_TIP_LABEL = '<fmt:message key="label.comment.textarea.tip"/>',
 		WARN_COMMENTS_IS_BLANK_LABEL = '<fmt:message key="warning.comment.blank"/>',
 		WARN_MIN_NUMBER_WORDS_LABEL = "<fmt:message key="warning.minimum.number.words"><fmt:param value="${criteriaRatings.ratingCriteria.commentsMinWordsLimit}"/></fmt:message>";
 	</script>
-	<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.tablesorter-widgets.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/common.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/rating.js" type="text/javascript" ></script>	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
+	<lams:JSImport src="includes/javascript/jquery.jRating.js" />
+	<lams:JSImport src="includes/javascript/jquery.tablesorter.js" />
+	<lams:JSImport src="includes/javascript/jquery.tablesorter-widgets.js" />
+	<lams:JSImport src="includes/javascript/jquery.tablesorter-pager.js" />
+	<lams:JSImport src="includes/javascript/common.js" />
+	<lams:JSImport src="includes/javascript/rating.js" />
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${toolSessionId}', '', finishSession);
 	
@@ -85,15 +82,11 @@
 		function redoRatings(){
 			document.location.href='<c:url value="/learning/start.do?toolSessionID=${toolSessionId}&mode=${mode}&isRedo=true"/>';
 		}
-
     </script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${peerreview.title}">
-
+<div class="container-lg">
 	<c:if test="${sessionMap.lockOnFinish and mode != 'teacher'}">
-		<lams:Alert type="danger" id="warn-lock" close="false">
+		<lams:Alert5 type="danger" id="warn-lock" close="false">
 			<c:choose>
 				<c:when test="${sessionMap.userFinished}">
 					<fmt:message key="message.activityLocked"/>
@@ -102,92 +95,90 @@
 					<fmt:message key="message.warnLockOnFinish" ><fmt:param><fmt:message key="label.finished" /></fmt:param></fmt:message>
 				</c:otherwise>
 			</c:choose>
-		</lams:Alert>
+		</lams:Alert5>
 	</c:if>
 
-	<c:if test="${peerreview.showRatingsLeftByUser}">
-
-		<c:if test="${not empty allCriteriaRatings}">
+	<c:if test="${peerreview.showRatingsLeftByUser and not empty allCriteriaRatings}">
 		<c:forEach var="criteriaRatings" items="${allCriteriaRatings}" varStatus="status">
-			<div class="panel panel-default">
-			<c:if test="${not criteriaRatings.ratingCriteria.rubricsStyleRating}">
-				<div class="panel-heading panel-title">
-					<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/>
-				</div>
-			</c:if>
-			<div class="panel-body">
-			<lams:StyledRating criteriaRatings="${criteriaRatings}" showJustification="true" alwaysShowAverage="false"
-							   currentUserDisplay="false" rubricsInBetweenColumns="${peerreview.rubricsInBetweenColumns}"
-							   rubricsPivotView="${peerreview.rubricsView eq 2}" />
+			<div class="card lcard">
+				<c:if test="${not criteriaRatings.ratingCriteria.rubricsStyleRating}">
+					<div class="card-header text-bg-secondary">
+						<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/>
+					</div>
+				</c:if>
+				
+				<lams:StyledRating5 criteriaRatings="${criteriaRatings}" showJustification="true" alwaysShowAverage="false"
+					   currentUserDisplay="false" rubricsInBetweenColumns="${peerreview.rubricsInBetweenColumns}"
+					   rubricsPivotView="${peerreview.rubricsView eq 2}" />
 			</div>
-			</div>
 		</c:forEach>
-		</c:if>
 	</c:if>
 	
 	<c:if test="${peerreview.showRatingsLeftForUser}">
+		<div class="card lcard">
+			<div class="card-header text-bg-secondary">
+				<fmt:message key="label.ratings.by.others" />
+			</div>
+			
+			<div class="card-body">
+				<lams:Alert5 type="info" id="warn-lock" close="false">
+					<fmt:message key="label.no.ratings.out.of.possible.ratings" ><fmt:param>${numberRatings}</fmt:param><fmt:param>${numberPotentialRatings}</fmt:param></fmt:message>
+				</lams:Alert5>
 
-		<div class="panel panel-default">
-		<div class="panel-heading panel-title">
-			<fmt:message key="label.ratings.by.others" />
+				<c:forEach var="criteriaRatings" items="${userRatings}" varStatus="status">
+					<div class="card mb-3">
+					<c:if test="${not criteriaRatings.ratingCriteria.rubricsStyleRating}">
+						<div class="card-header">
+							<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/>
+						</div>
+					</c:if>
+					
+					<div class="card-body">
+			 		<lams:StyledRating5 criteriaRatings="${criteriaRatings}" showJustification="false" alwaysShowAverage="true"
+			 						   currentUserDisplay="true" rubricsInBetweenColumns="${peerreview.rubricsInBetweenColumns}" />
+			 		</div>
+			 		</div>
+				</c:forEach>
+			</div>
 		</div>
-		<div class="panel-body">
-		
-			<lams:Alert type="info" id="warn-lock" close="false">
-				<fmt:message key="label.no.ratings.out.of.possible.ratings" ><fmt:param>${numberRatings}</fmt:param><fmt:param>${numberPotentialRatings}</fmt:param></fmt:message>
-			</lams:Alert>
-		
-			<c:forEach var="criteriaRatings" items="${userRatings}" varStatus="status">
-				<c:if test="${not criteriaRatings.ratingCriteria.rubricsStyleRating}">
-					<h4><c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true"/></h4>
-				</c:if>
-		 		<lams:StyledRating criteriaRatings="${criteriaRatings}" showJustification="false" alwaysShowAverage="true"
-		 						   currentUserDisplay="true" rubricsInBetweenColumns="${peerreview.rubricsInBetweenColumns}" />
-			</c:forEach>
-		</div>
-		</div>
 	</c:if>
 				
 	<!-- Reflection -->
 	<c:if test="${sessionMap.reflectOn and not empty sessionMap.reflectEntry}">
-		<%@ include file="notebookdisplay.jsp"%>
+		<lams:NotebookReedit
+			reflectInstructions="${sessionMap.reflectInstructions}"
+			reflectEntry="${sessionMap.reflectEntry}"
+			isEditButtonEnabled="${mode != 'teacher'}"
+			notebookHeaderLabelKey="title.reflection"/>
 	</c:if>
-	<!-- End Reflection -->
 
-	<c:if test="${!peerreview.lockWhenFinished}">
-		<a href="#nogo" class="btn btn-secondary mt-2 float-start mt-4" onclick="redoRatings();">
-			<fmt:message key="label.redo" />
-		</a>
-	</c:if>	
-
 	<c:if test="${mode != 'teacher'}">
 		<div class="activity-bottom-buttons">
 			<c:choose>			
 				<c:when test="${sessionMap.reflectOn and empty sessionMap.reflectEntry}">
-					<a href="#nogo" id="continueButton" onclick="return continueReflect()" class="btn btn-primary">
+					<button type="button" id="continueButton" onclick="continueReflect()" class="btn btn-primary na">
 						<fmt:message key="label.continue" />
-					</a>
+					</button>
 				</c:when>
 				<c:when test="${sessionMap.isLastActivity}">
-					<a href="#nogo" id="finishButton" class="btn btn-primary na">
+					<button type="button" id="finishButton" class="btn btn-primary na">
 						<fmt:message key="label.finish" />
-					</a>
+					</button>
 				</c:when>		
 				<c:otherwise>
-					<a href="#nogo" id="finishButton" class="btn btn-primary na">
+					<button type="button" id="finishButton" class="btn btn-primary na">
 						<fmt:message key="label.finished" />
-					</a>
+					</button>
 				</c:otherwise>
 			</c:choose>
+
+			<c:if test="${!peerreview.lockWhenFinished}">
+				<button type="button" class="btn btn-secondary btn-icon-return me-2" onclick="redoRatings();">
+					<fmt:message key="label.redo" />
+				</button>
+			</c:if>	
 		</div>
 	</c:if>
-
-	</lams:Page>
-	<!--closes content-->
-
-	<div id="footer">
-	</div>
-	<!--closes footer-->
-
-</body>
-</lams:html>
+	
+</div>
+</lams:PageLearner>
Index: lams_tool_preview/web/pages/learning/rubrics.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,38 +1,42 @@
-<style>	
-	.rubrics-user-panel .collapsable-icon-left a {
-		text-decoration: none;
-	}
-	
-	.rubrics-user-panel .collapsable-icon-left a:after {
+<style>
+	.rubrics-user-card .collapsable-icon-left button:after {
 		margin-top: 6px;
 	}
 	
-	.rubrics-table tr:first-child {
+	.rubrics-table .row:first-child {
 		background-color: initial !important;
 	}
 	
-	.rubrics-table th {
-		font-style: normal;
+	.rubrics-table-header {
 		font-weight: bold;
-		}
+	}
 
-	.rubrics-table td:first-child {
+	.rubrics-table .col:first-child {
 		font-weight: bold;
 	}
 	
-	.rubrics-table td:not(:first-child) {
+	.rubrics-table .row:not(.rubrics-table-header) .col:not(:first-child) {
 		cursor: pointer;
 	}
 	
-	.rubrics-table td.bg-success {
+	.rubrics-table .col.text-bg-success {
 		font-weight: bold;
-		font-size: larger;
+		line-height: 40px;
+		margin: -0.5em 0;
 	}
 	
-	.expand-all-button {
+	#expand-all-button {
 		margin-bottom: 15px;
 		float: right;
 	}
+	.rubrics-user-card .collapsable-icon-left button, .collapsable-icon-left button:after {
+		color: inherit !important;
+	}
+	
+	.lcard {
+		margin-bottom: 1.25rem;
+	}
+
 </style>
 
 <script>
@@ -68,7 +72,7 @@
         			alert('<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.rating.rubrics.error.rate" /></spring:escapeBody>');
     				return;
     			}
-    			$(cell).addClass('bg-success').siblings('td').removeClass('bg-success');
+    			$(cell).addClass('text-bg-success').siblings('div').removeClass('text-bg-success');
     			
         		if (rubricsRequireRatings) {
 					$('#finishButton').prop('disabled', isRatingMissing());
@@ -80,89 +84,88 @@
     	});
 	}
 
-	function expandAllRubricsUserPanels(){
-		$('.collapse').collapse('show');
+	function expandAllRubricsUserCards(){
+		var isCollapsing = $("#expand-all-button").hasClass("collapsed") ? "show" : "hide";
+		$("#expand-all-button").toggleClass("collapsed");
+		$('.collapse').collapse(isCollapsing);
 	}
 
 	function isRatingMissing() {
 		let criterionTables = $('.rubrics-table');
-		return $('tbody td.bg-success', criterionTables).length !== $('tbody tr', criterionTables).length
+		return $('.col.text-bg-success', criterionTables).length !== $('.row:not(.rubrics-table-header)', criterionTables).length
 			- criterionTables.length;
 	}
 </script>
-<button class="btn btn-secondary expand-all-button" onClick="javascript:expandAllRubricsUserPanels()">
-	<fmt:message key="label.rating.rubrics.expand.all" />
-</button>
+
+<div class="collapsable-icon-left">
+	<button id="expand-all-button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" onClick="javascript:expandAllRubricsUserCards()">
+		<fmt:message key="label.rating.rubrics.expand.all" />
+	</button>
+</div>
 <div class="clearfix"></div>
 
-<div id="rubrics-user-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="rubrics-user-cards" role="tablist" aria-multiselectable="true">
 	<%-- It is sufficient to take user names and columns from the first row/criterion --%>
 	<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
 
 	<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
 			
-	    <div class="panel panel-default rubrics-user-panel">
-	       <div class="panel-heading" role="tab" id="heading${ratingDto.itemId}">
-	       	<span class="panel-title collapsable-icon-left">
-	       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${ratingDto.itemId}" 
-						aria-expanded="false" aria-controls="collapse${ratingDto.itemId}" data-parent="#rubrics-users-panels"
+	    <div class="card lcard rubrics-user-card mt-2">
+	       <div class="card-header text-bg-secondary" role="tab" id="heading${ratingDto.itemId}">
+	       	<span class="card-title collapsable-icon-left">
+	       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${ratingDto.itemId}" 
+						aria-expanded="false" aria-controls="collapse${ratingDto.itemId}" data-parent="#rubrics-users-cards"
 				>
 					<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
 					&nbsp;
-					<strong>
-						<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
-					</strong>
+					<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
 				</button>
 			</span>
 	       </div>
 	       
-	       <div id="collapse${ratingDto.itemId}" class="panel-collapse collapse" 
-	       	    role="tabpanel" aria-labelledby="heading${ratingDto.itemId}">
-					<table class="table table-hover table-bordered rubrics-table">
-						<tr>
+	       <div id="collapse${ratingDto.itemId}" class="collapse" role="tabpanel" aria-labelledby="heading${ratingDto.itemId}">
+				<div class="ltable rubrics-table mb-0">
+						<div class="row rubrics-table-header m-0">
 							<%-- Each answer column has the same length, all remaining space is take by the question column --%>
-							<th></th>
+							<div class="col"></div>
 							<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" varStatus="columnStatus">
-								<th>
+								<div class="col">
 									(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-								</th>
+								</div>
 								<c:if test="${not columnStatus.last and peerreview.rubricsInBetweenColumns}">
-									<th>
+									<div class="col">
 										<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-									</th>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+						</div>
+						
 						<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
 							<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
-							<tr>
-								<td>
+							<div class="row m-0">
+								<div class="col">
 									<c:out value="${criteria.title}" escapeXml="false" />
-								</td>
+								</div>
 								<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-									<td onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count})"
+									<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count})" role="button"
 										<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-										<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">
-											class="bg-success"
-										</c:if>
+										class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">text-bg-success</c:if>'
 									>
 										<c:out value="${column.name}" escapeXml="false" />	
-									</td>
+									</div>
 									<c:if test="${not columnOrderId.last and peerreview.rubricsInBetweenColumns}">
-										<td onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count + 0.5})"
-											<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-												class="bg-success"
-											</c:if>
+										<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count + 0.5})" role="button"
+											class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">text-bg-success</c:if>'
 										>
 											<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-										</td>
+										</div>
 									</c:if>
 								</c:forEach>
-							</tr>
+							</div>
 						</c:forEach>
-					</table>
+				</div>
 			</div>
 		</div>
 		
 	</c:forEach>
-</div>
+</div>
\ No newline at end of file
Index: lams_tool_preview/web/pages/learning/rubricsPivot.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/rubricsPivot.jsp	(.../rubricsPivot.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/rubricsPivot.jsp	(.../rubricsPivot.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,38 +1,46 @@
-<style>	
-	.rubrics-row-panel .collapsable-icon-left a {
-		text-decoration: none;
-	}
-		
-	.rubrics-table td:not(:first-child) {
+<style>
+	.rubrics-table .row:not(.rubrics-table-header) .col:not(:first-child) {
 		cursor: pointer;
 		text-align: center;
 	}
+	
+	.rubrics-table .row .col:first-child {
+		font-weight: bold;
+	}
 
-	.rubrics-table th {
+	.rubrics-table-header {
 		font-style: normal;
 		text-align: center;
 	}
 	
-	.rubrics-table td.bg-success {
+	.rubrics-table .col.text-bg-success {
 		font-weight: bold;
-		font-size: larger;
+		line-height: 40px;
+		margin: -0.5em 0;
 	}
 	
 	.column-header-span {
 		font-style: italic;
 	}
 
-	.expand-all-button {
+	#expand-all-button {
 		margin-bottom: 15px;
 		float: right;
+	}	
+	.rubrics-row-card .collapsable-icon-left button, .collapsable-icon-left button:after {
+		color: inherit !important;
 	}
+	
+	.lcard {
+		margin-bottom: 1.25rem;
+	}
 </style>
 
 <script>
 	var rubricsRequireRatings = ${peerreview.rubricsRequireRatings};
 	
 	$(document).ready(function(){
-		$('#rubrics-row-panels').closest('.container').addClass('container-fluid').removeClass('container');
+		$('#rubrics-row-cards').closest('.container').addClass('container-fluid').removeClass('container');
 		if (rubricsRequireRatings){
 			$('#finishButton').prop('disabled', isRatingMissing());
 		}
@@ -64,10 +72,10 @@
     			}
     			let row = $(cell).parent(),
     				columnIndex = row.children().index(cell);
-    			$(cell).closest('tbody').children('tr').each(function(){
-        			$(this).children('td').eq(columnIndex).removeClass('bg-success');
+    			$(cell).closest('.ltable').children('.row').each(function(){
+        			$(this).children('.col').eq(columnIndex).removeClass('text-bg-success');
         		});
-        		$(cell).addClass('bg-success');
+        		$(cell).addClass('text-bg-success');
 
         		if (rubricsRequireRatings) {
 					$('#finishButton').prop('disabled', isRatingMissing());
@@ -79,22 +87,27 @@
     	});
 	}
 
-	function expandAllRubricsPanels(){
-		$('.collapse').collapse('show');
+	function expandAllRubricsCards(){
+		var isCollapsing = $("#expand-all-button").hasClass("collapsed") ? "show" : "hide";
+		$("#expand-all-button").toggleClass("collapsed");
+		$('.collapse').collapse(isCollapsing);
 	}
 
 	function isRatingMissing() {
 		let criterionTables = $('.rubrics-table');
-		return $('tbody td.bg-success', criterionTables).length !== $('thead th', criterionTables).length 
+		return $('.text-bg-success', criterionTables).length !== $('.rubrics-table-header .col', criterionTables).length 
 			- criterionTables.length;
 	}
 </script>
-<button class="btn btn-secondary expand-all-button" onClick="javascript:expandAllRubricsPanels()">
-	<fmt:message key="label.rating.rubrics.expand.all" />
-</button>
+
+<div class="collapsable-icon-left">
+	<button id="expand-all-button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" onClick="javascript:expandAllRubricsCards()">
+		<fmt:message key="label.rating.rubrics.expand.all" />
+	</button>
+</div>
 <div class="clearfix"></div>
 
-<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+<div id="rubrics-row-cards" role="tablist" aria-multiselectable="true">
 	<%-- It is sufficient to take user names and columns from the first row/criterion --%>
 	<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
 	<c:set var="columnHeaders" value="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" />
@@ -103,77 +116,70 @@
 	<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
 		<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
 		
-	    <div class="panel panel-default rubrics-row-panel">
-	       <div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-	       	<span class="panel-title collapsable-icon-left" style="font-size:larger">
-	       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}" 
-						aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels"
+	    <div class="lcard card rubrics-row-card">
+	       <div class="card-header text-bg-secondary" role="tab" id="heading${criteria.ratingCriteriaId}">
+	       	<span class="card-title collapsable-icon-left">
+	       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}" 
+						aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-cards"
 				>
 					<%-- Criterion "row" --%>
 					<c:out value="${criteria.title}" escapeXml="false" />
 				</button>
 			</span>
 	       </div>
 	       
-	       <div id="collapse${criteria.ratingCriteriaId}" class="panel-collapse collapse" 
-	       	    role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
-					<table class="table table-hover table-bordered rubrics-table">
-						<thead>
-							<tr>
-								<%-- Learner profile pictures and names --%>
-								<th></th>
-								<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
-									<th>
-										<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
-										<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-									</th>
-								</c:forEach>
-							</tr>
-						</thead>
+	       <div id="collapse${criteria.ratingCriteriaId}" class="collapse" 
+	       	    	role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
+				<div class="ltable rubrics-table">
+					<div class="row rubrics-table-header m-0">
+						<%-- Learner profile pictures and names --%>
+						<div class="col"></div>
+						<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+							<div class="col">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
+								<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
+							</div>
+						</c:forEach>
+					</div>
 						
-						<tbody>
 							<c:forEach items="${columnHeaders}" varStatus="columnStatus">
 								<c:set var="columnHeader" value="${columnHeaders[columnHeaderCount - columnStatus.count]}" />
-								<tr>
-									<td>
+								<div class="row align-items-center m-0">
+									<div class="col">
 										<%-- Criterion "column" --%>
 										<c:if test="${not empty columnHeader}">
 										<span class="column-header-span"><c:out value="${columnHeader}" escapeXml="false"/></span><br>
 										</c:if>
 										<%-- Criterion "cell" --%>
 										<c:out value="${criteria.rubricsColumns[columnHeaderCount - columnStatus.count].name}" escapeXml="false" />	
-									</td>
+									</div>
 									<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
 										
-										<td onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index})"
+										<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index})" role="button"
 											<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-											<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index)}">
-												class="bg-success"
-											</c:if>
+											 class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index)}">text-bg-success</c:if>'
 										>
 											${columnHeaderCount - columnStatus.index}
-										</td>
+										</div>
 									</c:forEach>
-								</tr>
+								</div>
+								
 								<c:if test="${not columnStatus.last and peerreview.rubricsInBetweenColumns}">
-									<tr>
-										<td>
+									<div class="row align-items-center m-0">
+										<div class="col">
 											<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-										</td>
+										</div>
 										<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
-											<td onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index - 0.5})"
-												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-													class="bg-success"
-												</c:if>
+											<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index - 0.5})" role="button"
+												 class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">text-bg-success</c:if>'
 											>
 												${columnHeaderCount - columnStatus.index - 0.5}
-											</td>
+											</div>
 										</c:forEach>
-									</tr>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tbody>
-					</table>
+				</div>
 			</div>
 		</div>
 		
Index: lams_tool_preview/web/pages/learning/star.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -ra08fb689e1bb174869cb981d301b204d2f573590
--- lams_tool_preview/web/pages/learning/star.jsp	(.../star.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_preview/web/pages/learning/star.jsp	(.../star.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
@@ -1,14 +1,14 @@
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="maxRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.maximumRates}"/>
+<c:set var="minRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.minimumRates}"/>
+
+<!-- ********************  CSS ********************** -->
 	<lams:css suffix="jquery.jRating"/>
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
-	<style media="screen,projection" type="text/css">
-		#no-users-info {display: none;}
-	</style>
+	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager5.css">
+	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css">
 
-	<c:set var="maxRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.maximumRates}"/>
-	<c:set var="minRates" value="${rateAllUsers > 0 ? rateAllUsers : criteriaRatings.ratingCriteria.minimumRates}"/>
-	
-	<script type="text/javascript">
+<!-- ********************  javascript ********************** -->	
+<script type="text/javascript">
 		//var for jquery.jRating.js
 		var pathToImageFolder = "${lams}images/css/";
 
@@ -18,30 +18,25 @@
 		COMMENTS_MIN_WORDS_LIMIT = ${criteriaRatings.ratingCriteria.commentsMinWordsLimit},
 		MAX_RATINGS_FOR_ITEM = ${peerreview.maximumRatesPerUser},
 		LIMIT_BY_CRITERIA = "true";
-		LAMS_URL = '${lams}',
 		COUNT_RATED_ITEMS = ${criteriaRatings.countRatedItems},
 		COMMENT_TEXTAREA_TIP_LABEL = '<spring:escapeBody javaScriptEscape="true">:message key="label.comment.textarea.tip"/></spring:escapeBody>',
 		WARN_COMMENTS_IS_BLANK_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="warning.comment.blank"/></spring:escapeBody>',
 		WARN_MIN_NUMBER_WORDS_LABEL = "<spring:escapeBody javaScriptEscape='true'><fmt:message key='warning.minimum.number.words'><fmt:param value='${criteriaRatings.ratingCriteria.commentsMinWordsLimit}'/></fmt:message></spring:escapeBody>",
 		ALLOW_RERATE = true,
 		SESSION_ID = ${toolSessionId};
-	</script>
+</script>
 	<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter-widgets.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/rating.js" type="text/javascript" ></script> 	
 	<script src="${lams}includes/javascript/portrait.js" type="text/javascript" ></script>
-	
-	<script type="text/javascript">
-	
+<script type="text/javascript">	
 	var YOUR_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.you.gave.rating"><fmt:param>@1@</fmt:param></fmt:message></spring:escapeBody>',
 		IS_DISABLED =  ${sessionMap.isDisabled},
 		commentsSaved = true;
 	
-	
-	$(document).ready(function(){
-		
+	$(document).ready(function(){	
 		if ( ${minRates} > 0 && ${criteriaRatings.countRatedItems} < ${minRates}) {
 			hideButtons();
 		}
@@ -179,7 +174,6 @@
 			});
 		});
 	 });
-	
 
 <c:choose>
 <c:when test="${criteriaRatings.ratingCriteria.commentsEnabled}">
@@ -261,12 +255,11 @@
 			showButtons();
 		}
 	}
-    </script>
+</script>
 
-		<!-- Rating limits info -->
-		<c:if test="${rateAllUsers > 0 || criteriaRatings.ratingCriteria.minimumRates ne 0 || criteriaRatings.ratingCriteria.maximumRates ne 0}">
-		
-			<lams:Alert type="info" id="rate-limits-reminder" close="false">
+<!-- Rating limits info -->
+<c:if test="${rateAllUsers > 0 || criteriaRatings.ratingCriteria.minimumRates ne 0 || criteriaRatings.ratingCriteria.maximumRates ne 0}">
+			<lams:Alert5 type="info" id="rate-limits-reminder" close="false">
 				<c:choose>
 					<c:when test="${rateAllUsers > 0}">
 						<fmt:message key="label.rate.all.users"></fmt:message>
@@ -297,17 +290,20 @@
 				<fmt:message key="label.rate.limits.topic.reminder">
 					<fmt:param value="<span id='count-rated-items'>${criteriaRatings.countRatedItems}</span>"/>
 				</fmt:message>
-			</lams:Alert>
-				
-			
-		</c:if>
+			</lams:Alert5>
+</c:if>
 
-		<c:set var="numColumns" value="2"/>
-		<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
-			<c:set var="numColumns" value="3"/>
-		</c:if>
+<div class="card lcard">
+	<div class="card-header text-bg-secondary">
+		<c:out value="${criteriaRatings.ratingCriteria.title}" escapeXml="true" />
+	</div>
 	
-		<lams:TSTable5 numColumns="${numColumns}">
+	<c:set var="numColumns" value="2"/>
+	<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+		<c:set var="numColumns" value="3"/>
+	</c:if>
+	
+		<lams:TSTable5 numColumns="${numColumns}" tableClass="tablesorter jRating">
 			<th class="username" title="<fmt:message key='label.sort.by.user.name'/>"> 
 				<fmt:message key="label.user.name" />
 			</th>
@@ -324,4 +320,4 @@
 		<div id="no-users-info">
 			<fmt:message key="label.no.users" />
 		</div>
-	
+</div>
\ No newline at end of file