Index: lams_admin/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_admin/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_admin/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_admin/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_admin/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_admin/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_admin/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_admin/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_admin/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_admin/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_admin/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_admin/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_admin/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_admin/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_admin/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_gradebook/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_gradebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_gradebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_gradebook/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_gradebook/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_gradebook/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_gradebook/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_gradebook/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_gradebook/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_gradebook/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_gradebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_gradebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_gradebook/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_gradebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_gradebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_learning/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_learning/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_learning/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_learning/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_learning/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_learning/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_learning/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_learning/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_learning/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_learning/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_learning/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_learning/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_learning/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_learning/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_learning/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_monitoring/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_monitoring/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_monitoring/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_monitoring/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_monitoring/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_monitoring/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_monitoring/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_monitoring/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_monitoring/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_monitoring/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_monitoring/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_monitoring/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_monitoring/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_assessment/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_assessment/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_assessment/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_assessment/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_assessment/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_assessment/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_assessment/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_assessment/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_assessment/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_assessment/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_assessment/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_assessment/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_chat/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_chat/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_chat/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_chat/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_chat/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_chat/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_chat/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_chat/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_chat/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_chat/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_chat/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_chat/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_daco/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_daco/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_daco/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_daco/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_daco/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_daco/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_daco/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_daco/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_daco/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_daco/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_daco/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_daco/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_doku/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_doku/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_doku/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_doku/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_doku/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_doku/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_doku/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_doku/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_doku/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_doku/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_doku/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_doku/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_doku/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_doku/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_doku/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_forum/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_forum/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_forum/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_forum/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_forum/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_forum/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_forum/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_forum/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_forum/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_forum/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_forum/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_forum/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_gmap/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_gmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_gmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_gmap/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_gmap/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_gmap/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_gmap/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_gmap/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_gmap/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_gmap/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_gmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_gmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_images/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_images/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_images/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_images/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_images/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_images/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_images/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_images/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_images/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_images/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_images/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_images/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_images/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_imscc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_imscc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_imscc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_imscc/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_imscc/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_imscc/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_imscc/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_imscc/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_imscc/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_imscc/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_imscc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_imscc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_imscc/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_imscc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_imscc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_lamc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_lamc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_lamc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_lamc/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_lamc/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_lamc/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_lamc/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_lamc/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_lamc/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_lamc/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_lamc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_lamc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_laqa/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_laqa/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_laqa/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_laqa/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_laqa/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_laqa/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_laqa/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_laqa/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_laqa/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_laqa/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_laqa/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_laqa/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_larsrc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_larsrc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_larsrc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_larsrc/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_larsrc/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_larsrc/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_larsrc/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_larsrc/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_larsrc/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_larsrc/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_larsrc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_larsrc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_larsrc/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_larsrc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_larsrc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_leader/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_leader/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_leader/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_leader/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_leader/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_leader/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_leader/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_leader/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_leader/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_leader/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_leader/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_leader/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_mindmap/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_mindmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_mindmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_mindmap/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_mindmap/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_mindmap/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_mindmap/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_mindmap/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_mindmap/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_mindmap/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_mindmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_mindmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_mindmap/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_mindmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_mindmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_nb/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_nb/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_nb/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_nb/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_nb/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_nb/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_nb/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_nb/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_nb/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_nb/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_nb/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_nb/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_notebook/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_notebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_notebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_notebook/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_notebook/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_notebook/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_notebook/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_notebook/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_notebook/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_notebook/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_notebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_notebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_notebook/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_notebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_notebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_pixlr/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_pixlr/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_pixlr/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_pixlr/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_pixlr/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_pixlr/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_pixlr/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_pixlr/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_pixlr/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_pixlr/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_pixlr/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_pixlr/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_preview/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_preview/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_preview/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_preview/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_preview/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_preview/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_preview/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_preview/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_preview/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_preview/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_preview/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_sbmt/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_sbmt/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_sbmt/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_sbmt/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_sbmt/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_sbmt/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_sbmt/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_sbmt/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_sbmt/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_sbmt/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_sbmt/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_sbmt/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_scratchie/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scratchie/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_scratchie/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_scratchie/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scratchie/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_scratchie/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_scratchie/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scratchie/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_scratchie/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_scratchie/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scratchie/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_scratchie/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_scribe/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scribe/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_scribe/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_scribe/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scribe/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_scribe/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_scribe/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scribe/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_scribe/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_scribe/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scribe/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_scribe/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_spreadsheet/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_spreadsheet/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_spreadsheet/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_spreadsheet/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_survey/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_survey/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_survey/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_survey/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_survey/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_survey/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_survey/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_survey/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_survey/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_survey/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_survey/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_survey/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_task/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_task/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_task/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_task/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_task/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_task/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_task/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_task/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_task/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_task/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_task/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_task/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_task/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_task/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_task/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_vote/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_vote/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_vote/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_vote/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_vote/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_vote/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_vote/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_vote/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_vote/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_vote/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_vote/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_vote/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_vote/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_vote/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_vote/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_whiteboard/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_whiteboard/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_whiteboard/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_whiteboard/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_whiteboard/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_whiteboard/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_whiteboard/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_whiteboard/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_whiteboard/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_whiteboard/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_whiteboard/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_whiteboard/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_wiki/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_wiki/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_wiki/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_wiki/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_wiki/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_wiki/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_wiki/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_wiki/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_wiki/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_wiki/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_wiki/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_wiki/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_wiki/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_wiki/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_wiki/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_zoom/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_zoom/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_tool_zoom/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_zoom/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_zoom/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_tool_zoom/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_tool_zoom/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_zoom/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_zoom/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_tool_zoom/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_zoom/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_zoom/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_tool_zoom/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_tool_zoom/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_tool_zoom/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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_www/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r876e644c066e81c2721ffa085fd12f386e2f3bb6 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_www/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 876e644c066e81c2721ffa085fd12f386e2f3bb6)
+++ lams_www/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -48,7 +48,7 @@
 		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
 	</c:if>
 
-	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<%--  only have sidebar in learner main window, not in popup windows --%>
 	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
 	
 		<%-- Links placed in body instead of head. Ugly, but it works. --%>
@@ -215,21 +215,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -379,10 +364,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_www/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_www/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_www/web/WEB-INF/tags/Page5.tag	(.../Page5.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -217,21 +217,6 @@
 							} else if ( showControlBar == 2 ) {
 								$('#navcontent').addClass('navcontent');
 							}
-							
-							var presenceEnabledPatch = result.presenceEnabledPatch;
-							var presenceImEnabled = result.presenceImEnabled;
-							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
-								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
-										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
-								<c:if test="${not usePanel}">
-								presenceURL = presenceURL + "&reloadBootstrap=true";
-								</c:if>
-								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
-									if ( status == "error" ) {
-										alert("Unable to load IM: " + xhr.status);
-									} 
-								});
-							}
 
 							initWebsocket('commandWebsocket', LEARNING_URL.replace('http', 'ws')
 									+ 'commandWebsocket?lessonID=' + lessonId,
@@ -381,10 +366,6 @@
 					<jsp:doBody />
 				</c:otherwise>
 				</c:choose>						
-				<%--  only have sidebar and presence in learner --%>
-				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
-					<div id="presenceEnabledPatchDiv"></div>
-				</c:if>
 			</div>
 				</div>
 			</div>
Index: lams_www/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_www/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_www/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -1,28 +1,30 @@
-<%
-	/**
-	 * Rating.tag
-	 *	Author: Andrey Balan
-	 *	Description: Shows rating stars widget
-	 */
-%>
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
 <%@ 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="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="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
 
 <%-- Optional attribute --%>
-<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
-<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %><%-- i.e. user has rating/comment rights but rating/comment should be disabled --%>
+<%@ attribute name="isDisplayOnly" required="false" rtexprvalue="true" %><%-- i.e. user has no rating/comment rights  --%>
 <%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
 <%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
 <%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="starsRateLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="postCommentButtonLabel" required="false" rtexprvalue="true" %>
 <%@ attribute name="hideCriteriaTitle" required="false" rtexprvalue="true" %>
 <%@ attribute name="showComments" required="false" rtexprvalue="true" %>
 <%@ attribute name="showAllComments" required="false" rtexprvalue="true" %>
@@ -34,8 +36,8 @@
 <c:if test="${empty disabled}">
 	<c:set var="disabled" value="false" scope="request"/>
 </c:if>
-<c:if test="${empty isItemAuthoredByUser}">
-	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+<c:if test="${empty isDisplayOnly}">
+	<c:set var="isDisplayOnly" value="false" scope="request"/>
 </c:if>
 <c:if test="${empty maxRates}">
 	<c:set var="maxRates" value="0" scope="request"/>
@@ -52,6 +54,12 @@
 <c:if test="${empty minNumberWordsLabel}">
 	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
 </c:if>
+<c:if test="${empty starsRateLabel}">
+	<c:set var="starsRateLabel" value="label.stars.rate" scope="request"/>
+</c:if>
+<c:if test="${empty postCommentButtonLabel}">
+	<c:set var="postCommentButtonLabel" value="button.post.comment" scope="request"/>
+</c:if>
 <c:if test="${empty hideCriteriaName}">
 	<c:set var="hideCriteriaTitle" value="false" scope="request"/>
 </c:if>
@@ -82,140 +90,168 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-	<div class="rating-stars-holder text-center center-block">
+<div class="starability-holder">
 
-		<c:set var="hasStartedRating" value="false"/>
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
-			<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
-		</c:forEach>
-		<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
-
-		<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
-			<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
-			<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaRatedByUser" value='${criteriaDto.userRating != ""}'/>
+		<c:set var="isWidgetDisabled" value="${disabled || isDisplayOnly || ((maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating) || (isCriteriaRatedByUser && !allowRetries)}"/>
+		<c:set var="dataRating">
 			<c:choose>
-				<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-					<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:when test='${isDisplayOnly || isCriteriaRatedByUser}'>
+					<fmt:formatNumber value="${criteriaDto.averageRating-(criteriaDto.averageRating%1)}" pattern="#"></fmt:formatNumber>
+					${isWidgetDisabled && (criteriaDto.averageRating%1) >= 0.5 ? '.5' : ''}
 				</c:when>
 				<c:otherwise>
-					<c:set var="ratingStarsClass" value="rating-stars"/>
+					0
 				</c:otherwise>
 			</c:choose>
-
+		</c:set>
+		<c:set var="legend">
 			<c:if test="${not hideCriteriaTitle}">
-				<strong>
-						${criteriaDto.ratingCriteria.title}
-				</strong>
+				<legend class="text-muted fw-bold">
+					${criteriaDto.ratingCriteria.title}
+				</legend>
 			</c:if>
+		</c:set>
 
-			<c:choose>
-				<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
-					<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
-				</c:when>
-				<c:otherwise>
-					<c:set var="ratingDataAverage" value="0"/>
-				</c:otherwise>
-			</c:choose>
-
-			<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
-			</div>
-
-			<c:choose>
-				<c:when test="${isItemAuthoredByUser}">
-					<div class="rating-stars-caption">
-						<fmt:message key="${averageRatingLabel}" >
-							<fmt:param>
-								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
-							</fmt:param>
-							<fmt:param>
-								${criteriaDto.numberOfVotes}
-							</fmt:param>
-						</fmt:message>
-					</div>
-				</c:when>
-
-				<c:otherwise>
-					<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
-						 <c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
-					>
-						<fmt:message key="${yourRatingLabel}" >
-							<fmt:param>
+		<c:choose>
+			<c:when test='${isWidgetDisabled}'>
+				${legend}
+			
+				<div class="starability starability-result" data-rating="${dataRating}">
+					Rated: ${dataRating} stars
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<fieldset class="starability starability-grow starability-new" data-average="${dataRating}" data-id="${objectId}" aria-label="<fmt:message key="${starsRateLabel}"/>">
+					${legend}
+					
+					<input type="radio" id="${objectId}-0" class="input-no-rate" name="${objectId}" value="0" aria-label="No rating." 
+							${dataRating == 0? 'checked' : ''}/>
+					
+					<input type="radio" id="${objectId}-1" name="${objectId}" value="1" 
+							${dataRating == 1? 'checked' : ''}/>
+					<label for="${objectId}-1" title="Terrible">1 star</label>
+					
+					<input type="radio" id="${objectId}-2" name="${objectId}" value="2" 
+							${dataRating == 2? 'checked' : ''}/>
+					<label for="${objectId}-2" title="Not good">2 stars</label>
+					
+					<input type="radio" id="${objectId}-3" name="${objectId}" value="3" 
+							${dataRating == 3? 'checked' : ''}/>
+					<label for="${objectId}-3" title="Average">3 stars</label>
+					
+					<input type="radio" id="${objectId}-4" name="${objectId}" value="4" 
+							${dataRating == 4? 'checked' : ''}/>
+					<label for="${objectId}-4" title="Very good">4 stars</label>
+					
+					<input type="radio" id="${objectId}-5" name="${objectId}" value="5" 
+							${dataRating == 5? 'checked' : ''}/>
+					<label for="${objectId}-5" title="Amazing">5 stars</label>
+					
+					<span class="starability-focus-ring"></span>
+				</fieldset>
+			</c:otherwise>
+		</c:choose>
+			
+		<c:choose>
+			<c:when test="${isDisplayOnly}">
+				<div class="starability-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="starability-caption" id="starability-caption-${objectId}"
+					<c:if test="${!isCriteriaRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
 							<span id="user-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
+						</fmt:param>			
+						<fmt:param>
 							<span id="average-rating-${objectId}">
 								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
 							</span>
-							</fmt:param>
-							<fmt:param>
-								<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
-							</fmt:param>
-						</fmt:message>
-					</div>
-
-				</c:otherwise>
-			</c:choose>
-
-		</c:forEach>
-
-	</div>
-
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
 </div>
+</div>
 
 <%--Comments area---------------------------------------%>
 <c:if test="${isCommentsEnabled}">
 	<div id="comments-area-${itemRatingDto.itemId}">
 		<c:choose>
-			<c:when test='${isItemAuthoredByUser or (showAllComments and not empty commentLeftByUser)}'>
+			<c:when test='${isDisplayOnly or (showAllComments and not empty commentLeftByUser)}'>
 				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
 					<div class="rating-comment">
 						<c:out value="${comment.comment}" escapeXml="false" />
 					</div>
 				</c:forEach>
 			</c:when>
-
+			
 			<c:when test='${not empty commentLeftByUser}'>
 				<div class="rating-comment">
 					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
 				</div>
 			</c:when>
-
+			
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
-
+			
 					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
-
-						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+						<lams:Alert5 type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</lams:Alert>
+						</lams:Alert5>
 					</c:if>
-
-					<div class="row">
-						<div class="col-xs-12 col-sm-10">
-							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}"
-									  class="form-control comment-textarea"
-									  placeholder="<fmt:message key="label.comment.textarea.tip"/>"></textarea>
+				
+					<div class="d-flex align-items-center">
+						<div class="flex-grow-1">
+							<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" class="form-control comment-textarea"
+									placeholder="<fmt:message key="label.rating.textarea.tip"/>"
+									aria-label="<fmt:message key="label.rating.textarea.tip"/>"></textarea>
 						</div>
-						<div class="col-xs-12 col-sm-2">
-							<button class="btn btn-primary add-comment add-comment-new" style=""
+						<div>
+							<button class="btn btn-secondary btn-sm add-comment add-comment-new ms-2"
 									data-item-id="${itemRatingDto.itemId}"
 									data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}"
 									data-show-all-comments="${showAllComments}"
-									data-refresh-on-submit="${refreshOnComment}">
-								<i class="fa fa-check"></i>
+									data-refresh-on-submit="${refreshOnComment}"
+									aria-label="<fmt:message key="${postCommentButtonLabel}"/>">
+								<i class="fa-solid fa-paper-plane"></i>
 							</button>
 						</div>
 					</div>
-
-				</div>
+				</div>			
 			</c:when>
 		</c:choose>
-
-	</div>
-</c:if>
\ No newline at end of file
+	</div>	
+</c:if>
Index: lams_www/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_www/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_www/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -91,20 +91,28 @@
 						<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>
+									<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">
+									<div class="starability-holder">
 										<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:set var="dataRating">
+											<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+											${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+										</c:set>
+										<div class="starability starability-result" data-rating="${dataRating}">
+											Rated: ${dataRating} stars
+										</div>
+										
+										<div class="starability-caption" id="starability-caption-${objectId}">
 											<c:choose>
-												<c:when test="${empty userRating}">
+												<c:when test="${empty rating.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>
+													<fmt:message key="label.you.gave.rating"><fmt:param><span id="user-rating-${objectId}">${rating.userRating}</span></fmt:param></fmt:message>
 												</c:otherwise>
 											</c:choose>
 											<br/>
@@ -113,7 +121,9 @@
 												<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"/>
@@ -127,140 +137,175 @@
 			</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:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="starability-holder">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<c:set var="dataRating">
+									<fmt:formatNumber value="${rating.averageRating-(rating.averageRating%1)}" pattern="#"></fmt:formatNumber>
+									${(rating.averageRating%1) >= 0.5 ? '.5' : ''}
+								</c:set>
+								<div class="starability starability-result" data-rating="${dataRating}">
+									Rated: ${dataRating} stars
+								</div>
+								
+								<div class="starability-caption" id="starability-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
 	</c:when>
 
 	<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
+			</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}">
-		<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>
-		<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>
+		<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>
-			</c:forEach>
-		</ul>
-		<c:if test="${showJustification && criteriaRatings.ratingCriteria.commentsEnabled}">
-			<fmt:message key="label.learning.your.justification"/>&nbsp;
-			<div class="rating-comment"><lams:out value="${criteriaRatings.justificationComment}" /></div>
-		</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}">
-
-		<%-- Some styles for the table and results --%>
 		<style>
-			.rubrics-user-panel .collapsable-icon-left a,
-			.rubrics-row-panel .collapsable-icon-left a {
+			.rubrics-user-card .collapsable-icon-left button,
+			.rubrics-row-card .collapsable-icon-left button {
 				text-decoration: none;
 			}
 
-			.rubrics-user-panel .collapsable-icon-left a:after {
+			.rubrics-user-card .collapsable-icon-left button:after {
 				margin-top: 6px;
 			}
 
-			.rubrics-table.standard-view tr:first-child {
+			.rubrics-table.standard-view .row:first-child {
 				background-color: initial !important;
 			}
 
-			.rubrics-table.standard-view th {
+			.rubrics-table.standard-view .rubrics-table-header {
 				font-style: normal;
 				font-weight: bold;
 			}
 
-			.rubrics-table.standard-view td:first-child {
+			.rubrics-table.standard-view .col:first-child {
 				font-weight: bold;
 			}
 
-			.rubrics-table.pivot-view td:not(:first-child) {
+			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
 				text-align: center;
 			}
 
-			.rubrics-table.pivot-view th {
+			.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-table .rubrics-rating-cell .rubrics-rating-count {
+			.rubrics-rating-count {
 				text-align: right;
 			}
 
-			.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -272,32 +317,32 @@
 
 		<c:choose>
 			<c:when test="${currentUserDisplay}">
-
-				<table class="table table-bordered rubrics-table standard-view">
-					<tr>
-							<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
-						<th></th>
+				<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">
-							<th>
+							<div class="col text-center">
 								(${columnStatus.count})&nbsp;<c:out value="${columnHeader}" escapeXml="false"/>
-							</th>
+							</div>
 							<c:if test="${not columnStatus.last and rubricsInBetweenColumns}">
-								<th>
+								<div class="col text-center">
 									<i>(${columnStatus.count + 0.5})&nbsp;<fmt:message key="label.rating.rubrics.in.between" /></i>
-								</th>
+								</div>
 							</c:if>
 						</c:forEach>
-						<th class="col-1 text-center"><fmt:message key="label.average" /></th>
-					</tr>
+						<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}" />
 
-						<tr>
-							<td rowspan="2">
+						<div class="row align-items-center g-0">
+							<div class="col">
 								<c:out value="${criteria.title}" escapeXml="false" />
-							</td>
+							</div>
 
-								<%-- These variables are for counting average rating for the given row --%>
+							<%-- 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">
@@ -310,68 +355,13 @@
 								<c:set var="rowRateCount" value="${rowRateCount + rateCount}" />
 								<c:set var="rowRateValue" value="${rowRateValue + rateCount * columnOrderId.count}" />
 
-								<td class="rubrics-description-cell
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
+								<div class="col text-center rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
 									<c:out value="${column.name}" escapeXml="false" />
-								</td>
-
-								<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)}" />
-
-									<td class="rubrics-description-cell
+									
 									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-										<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-									</td>
-								</c:if>
-
-							</c:forEach>
-
-								<%-- Cell with average rating --%>
-							<td rowspan="2" class="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>
-							</td>
-						</tr>
-						<tr>
-							<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-								<%-- Calculate again because we need the same cell background colour --%>
-								<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>
-
-								<td class="rubrics-rating-cell
-								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-								<c:if test="${rateCount > 0}">
-									bg-success
-								</c:if>
-								"
-								>
-
-									<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>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -386,26 +376,24 @@
 											</c:forEach>
 										</c:if>
 									</c:if>
-								</td>
+								</div>
+
 								<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-									<%-- Calculate again because we need the same cell background colour --%>
+									<%-- 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: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)}" />
 
-									<td class="rubrics-rating-cell
-									<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
-									<c:if test="${rateCount > 0}">
-										bg-success
-									</c:if>
-									"
-									>
-
+									<div class="col rubrics-description-cell <c:if test="${rateCount > 0}">text-bg-success</c:if>  px-1">
+										<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>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -420,168 +408,158 @@
 												</c:forEach>
 											</c:if>
 										</c:if>
-									</td>
+									</div>
 								</c:if>
 							</c:forEach>
-						</tr>
+
+							<%-- 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>
-				</table>
+				</div>
 			</c:when>
+			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-panels" class="panel-group" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- 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="panel panel-default rubrics-row-panel pivot-view">
-							<div class="panel-heading" role="tab" id="heading${criteria.ratingCriteriaId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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" />
-							</a>
-						</span>
+						<div class="lcard card rubrics-row-card pivot-view">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</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 pivot-view">
-									<thead>
-									<tr>
-											<%-- Learner profile pictures and names --%>
-										<th></th>
+							<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">
-											<th>
+											<div class="col">
 												<lams:Portrait userId="${ratingDto.itemId}" hover="false" /><br>
 												<strong><c:out value="${ratingDto.itemDescription}" escapeXml="false"/></strong>
-											</th>
+											</div>
 										</c:forEach>
-									</tr>
-									</thead>
+									</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" --%>
 												<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" />
-											</td>
+											</div>
 											<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-
-												<td
-													<%-- 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>
-												>
-														${columnHeaderCount - columnStatus.index}
-												</td>
+												<%-- 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>
-										</tr>
+										</div>
+										
 										<c:if test="${not columnStatus.last and 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="${criteriaDto.ratingDtos}" varStatus="learnerOrderId">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
-															${columnHeaderCount - columnStatus.index - 0.5}
-													</td>
+													<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>
-											</tr>
+											</div>
 										</c:if>
 									</c:forEach>
-									</tbody>
-								</table>
+								</div>
 							</div>
 						</div>
 
 					</c:forEach>
 				</div>
 			</c:when>
+			
 			<c:otherwise>
-
 				<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
 
-				<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
-						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+				<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="panel panel-default rubrics-user-panel">
-							<div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-				       	<span class="panel-title collapsable-icon-left">
-				       		<a class="collapsed" role="button" data-toggle="collapse" href="#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"/>
-							</a>
-						</span>
+						<div class="card lcard rubrics-user-card">
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn btn-secondary-darker no-shadow 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>
 							</div>
 
-							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse"
-								 role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-								<table class="table table-bordered rubrics-table standard-view">
-									<tr>
+							<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 --%>
-										<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 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
-													<%-- 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>
-												>
+												<%-- 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" />
-												</td>
+												</div>
 												<c:if test="${not columnOrderId.last and rubricsInBetweenColumns}">
-													<td
-															<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">
-																class="bg-success"
-															</c:if>
-													>
+													<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>
-													</td>
+													</div>
 												</c:if>
 											</c:forEach>
-										</tr>
+										</div>
 									</c:forEach>
-								</table>
+								</div>
 							</div>
 						</div>
 					</c:forEach>
 				</div>
 			</c:otherwise>
 		</c:choose>
 	</c:when>
-</c:choose>
\ No newline at end of file
+</c:choose>
Index: lams_www/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r74e39981b5e776f87368242e4881abc1015f490e -rfaa119a6a494bab9b265ba46a597ee3442bb56cd
--- lams_www/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 74e39981b5e776f87368242e4881abc1015f490e)
+++ lams_www/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision faa119a6a494bab9b265ba46a597ee3442bb56cd)
@@ -352,12 +352,8 @@
    	<tag-file>
        <name>Rating</name>
        <path>/WEB-INF/tags/Rating.tag</path>
-   	</tag-file> 
+   	</tag-file>
    	<tag-file>
-       <name>Rating5</name>
-       <path>/WEB-INF/tags/Rating5.tag</path>
-   	</tag-file> 
-   	<tag-file>
    		<name>RestrictedUsageAccordian</name>
    		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
    	</tag-file>
@@ -378,10 +374,6 @@
        <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>