Index: lams_admin/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_admin/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_admin/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_admin/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_admin/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_admin/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_admin/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_admin/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_admin/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_admin/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_admin/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_admin/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_admin/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_admin/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_admin/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_admin/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_admin/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_admin/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_admin/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_gradebook/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_gradebook/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_gradebook/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_gradebook/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_gradebook/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_gradebook/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_gradebook/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_gradebook/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_gradebook/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_gradebook/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_gradebook/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_gradebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_gradebook/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_gradebook/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_gradebook/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_gradebook/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_gradebook/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_gradebook/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_gradebook/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_learning/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_learning/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_learning/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_learning/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_learning/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_learning/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_learning/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_learning/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_learning/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_learning/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_learning/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_learning/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_learning/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_learning/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_learning/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_learning/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_learning/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_learning/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_learning/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_monitoring/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_monitoring/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_monitoring/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_monitoring/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_monitoring/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_monitoring/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_monitoring/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_monitoring/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_monitoring/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_monitoring/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_monitoring/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_monitoring/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_monitoring/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_monitoring/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_monitoring/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_monitoring/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_monitoring/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_monitoring/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_monitoring/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_assessment/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_assessment/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_assessment/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_assessment/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_assessment/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_assessment/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_assessment/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_assessment/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_assessment/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_assessment/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_assessment/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_assessment/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_assessment/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -r25fa7a462f907084b2a8aa550082d70994d66609 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
+++ lams_tool_assessment/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_assessment/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_assessment/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_assessment/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_assessment/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_assessment/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_chat/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_chat/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_chat/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_chat/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_chat/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_chat/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_chat/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_chat/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_chat/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_chat/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_chat/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_chat/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_chat/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_chat/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_chat/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_chat/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_chat/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_chat/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_chat/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_daco/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_daco/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_daco/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_daco/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_daco/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_daco/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_daco/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_daco/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_daco/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_daco/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_daco/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_daco/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_daco/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_daco/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_daco/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_daco/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_daco/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_daco/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_daco/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_doku/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_doku/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_doku/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_doku/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_doku/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_doku/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_doku/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_doku/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_doku/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_doku/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_doku/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_doku/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_doku/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_doku/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_doku/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_doku/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_doku/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_doku/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_doku/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_forum/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_forum/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_forum/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_forum/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_forum/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_forum/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_forum/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_forum/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_forum/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_forum/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_forum/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_forum/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_forum/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_forum/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_forum/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_forum/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_forum/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_forum/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_forum/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_gmap/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_gmap/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_gmap/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_gmap/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_gmap/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_gmap/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_gmap/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_gmap/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_gmap/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_gmap/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_gmap/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_gmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_gmap/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_gmap/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_gmap/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_gmap/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_gmap/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_gmap/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_gmap/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_images/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_images/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_images/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_images/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_images/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_images/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_images/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r32e877132f7e519d92b99f234e69b78b9a11b142 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 32e877132f7e519d92b99f234e69b78b9a11b142)
+++ lams_tool_images/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -55,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -78,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -91,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_images/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_images/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_images/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_images/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_images/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_images/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_images/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_images/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_images/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_imscc/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_imscc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_imscc/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_imscc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_imscc/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_imscc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_imscc/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_imscc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_imscc/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_imscc/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_imscc/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_imscc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_imscc/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_imscc/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_imscc/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_imscc/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_imscc/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_imscc/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_imscc/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_lamc/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_lamc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_lamc/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_lamc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_lamc/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_lamc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_lamc/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_lamc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_lamc/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_lamc/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_lamc/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_lamc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_lamc/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_lamc/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_lamc/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_lamc/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_lamc/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_lamc/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_lamc/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_laqa/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_laqa/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_laqa/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_laqa/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_laqa/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_laqa/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_laqa/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_laqa/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_laqa/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_laqa/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_laqa/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_laqa/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_laqa/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_laqa/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_laqa/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_larsrc/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -r06770d77acb444693664d588e5d2e8570adb96aa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
+++ lams_tool_larsrc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -51,42 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="card">
-        <div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="card-title">
-	    		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
-	    				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          			${not empty accordionTitle?accordionTitle:"Comments"}
-          		</button>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_larsrc/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_larsrc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_larsrc/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r06770d77acb444693664d588e5d2e8570adb96aa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
+++ lams_tool_larsrc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -55,18 +55,18 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
 				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
@@ -78,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -91,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
 </lams:PageLearner>
Index: lams_tool_larsrc/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_larsrc/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_larsrc/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_larsrc/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_larsrc/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_larsrc/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_larsrc/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_larsrc/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_larsrc/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_leader/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_leader/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_leader/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_leader/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_leader/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_leader/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_leader/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_leader/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_leader/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_leader/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_leader/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_leader/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_leader/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_leader/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_leader/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_leader/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_leader/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_leader/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_leader/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_mindmap/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_mindmap/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_mindmap/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_mindmap/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_mindmap/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_mindmap/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_mindmap/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_mindmap/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_mindmap/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_mindmap/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_mindmap/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_mindmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_mindmap/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_mindmap/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_mindmap/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_mindmap/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_mindmap/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_mindmap/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_mindmap/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_nb/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_nb/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_nb/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_nb/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_nb/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_nb/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_nb/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_nb/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_nb/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_nb/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_nb/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_nb/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_nb/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_nb/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_nb/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_nb/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_nb/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_notebook/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_notebook/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_notebook/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_notebook/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_notebook/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_notebook/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_notebook/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_notebook/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_notebook/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_notebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_notebook/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_notebook/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_notebook/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_notebook/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_notebook/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_notebook/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_notebook/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_pixlr/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_pixlr/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_pixlr/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_pixlr/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_pixlr/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_pixlr/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_pixlr/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_pixlr/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_pixlr/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_pixlr/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_pixlr/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_pixlr/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_pixlr/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_pixlr/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_pixlr/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_pixlr/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_pixlr/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_pixlr/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_pixlr/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_preview/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_preview/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_preview/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_preview/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_preview/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_preview/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_preview/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_preview/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_preview/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_preview/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_preview/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_preview/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_preview/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_preview/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_preview/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_preview/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_preview/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_preview/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_preview/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_sbmt/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_sbmt/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_sbmt/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_sbmt/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_sbmt/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_sbmt/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_sbmt/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_sbmt/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_sbmt/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_sbmt/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_sbmt/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_sbmt/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_sbmt/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_sbmt/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_sbmt/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_sbmt/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_sbmt/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_scratchie/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_scratchie/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_scratchie/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_scratchie/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_scratchie/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_scratchie/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_scratchie/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_scratchie/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_scratchie/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_scratchie/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_scratchie/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_scratchie/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_scratchie/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_scratchie/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_scratchie/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_scratchie/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_scratchie/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scratchie/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_scratchie/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_scribe/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_scribe/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_scribe/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_scribe/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_scribe/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_scribe/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_scribe/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_scribe/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_scribe/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_scribe/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_scribe/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_scribe/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_scribe/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_scribe/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_scribe/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_scribe/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_scribe/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_scribe/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_scribe/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_spreadsheet/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_spreadsheet/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_spreadsheet/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_survey/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_survey/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_survey/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_survey/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_survey/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_survey/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_survey/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_survey/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_survey/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_survey/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_survey/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_survey/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_survey/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_survey/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_survey/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_survey/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_survey/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_survey/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_survey/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_task/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_task/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_task/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_task/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_task/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_task/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_task/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_task/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_task/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_task/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_task/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_task/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_task/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_task/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_task/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_task/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_task/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_task/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_task/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_vote/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_vote/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_vote/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_vote/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_vote/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_vote/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_vote/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_vote/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_vote/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_vote/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_vote/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_vote/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_vote/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_vote/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_vote/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_vote/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_vote/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_vote/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_vote/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_whiteboard/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_whiteboard/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_whiteboard/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_whiteboard/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_whiteboard/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_whiteboard/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_whiteboard/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_whiteboard/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_whiteboard/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_whiteboard/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_whiteboard/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_whiteboard/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_whiteboard/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_whiteboard/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_whiteboard/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_whiteboard/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_wiki/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_wiki/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_wiki/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_wiki/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_wiki/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_wiki/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_wiki/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_wiki/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_wiki/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_wiki/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_wiki/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_wiki/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_wiki/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_wiki/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_wiki/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_wiki/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_wiki/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_wiki/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_wiki/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_tool_zoom/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_zoom/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_tool_zoom/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_zoom/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_tool_zoom/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_zoom/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_tool_zoom/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_zoom/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_zoom/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_zoom/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_tool_zoom/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_zoom/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_tool_zoom/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_zoom/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_tool_zoom/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_tool_zoom/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_tool_zoom/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_tool_zoom/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_zoom/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>
 
Index: lams_www/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_www/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -14,9 +14,13 @@
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
 <%@ attribute name="method" required="false" rtexprvalue="true"%>
 <%@ attribute name="maxWords" required="false" rtexprvalue="true"%>
+<%@ attribute name="isRequired" required="false" rtexprvalue="true"%>
+<c:if test="${empty isRequired}">
+	<c:set var="isRequired" value="false" />
+</c:if>
+<%-- Either "ariaLabel" or "ariaLabelledby" attribute is required for proper support of ARIA --%>
 <%@ attribute name="ariaLabel" required="false" rtexprvalue="true"%>
 <%@ attribute name="ariaLabelledby" required="false" rtexprvalue="true"%>
-<%@ attribute name="ariaRequired" required="false" rtexprvalue="true"%>
 
 <c:if test="${empty method}">
 	<c:set var="method" value="inline" />
@@ -52,9 +56,7 @@
 
 <textarea id="${id}" name="${id}"
 	style="display: none; visibility: hidden; height: 0px;"
-	<c:if test="${not empty ariaLabel}">aria-label="${ariaLabel}"</c:if>
-	<c:if test="${not empty ariaLabelledby}">aria-labelledby="${ariaLabelledby}"</c:if>
-	aria-required="${ariaRequired}" aria-multiline="true">${fixedValue}</textarea>
+	>${fixedValue}</textarea>
 
 <c:if test="${not empty placeholder}">
 		<label for="${id}" class="cke-label-floating">${placeholder}</label>
@@ -100,7 +102,14 @@
 				filebrowserImageBrowseLinkUrl : "${ckEditorBasePath}filemanager/browser/default/browser.html?Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashBrowseUrl     : "${ckEditorBasePath}filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector&CurrentFolder=/" + contentFolderID + "/",
 				filebrowserFlashUploadUrl     : "${ckEditorBasePath}filemanager/upload/simpleuploader?Type=Flash&CurrentFolder=/" + contentFolderID + "/",
-				contentFolderID				  : contentFolderID
+				contentFolderID				  : contentFolderID,
+				isRequired					  : ${isRequired},
+				<c:if test="${not empty ariaLabel}">
+					ariaLabel      			  : "${ariaLabel}",
+				</c:if>
+				<c:if test="${not empty ariaLabelledby}">
+					ariaLabelledby      	  : "${ariaLabelledby}",
+				</c:if>
 		};
 		
 		if (maxWords > 0) {
@@ -114,8 +123,6 @@
 			});
 		}
 
-		
-
 		instance = CKEDITOR[method](id, configuration);
 		instance.initializeFunction = function(){
 			 initializeCKEditor(id, method, resizeParentFrameName, width, height, toolbarSet, classes, language, displayExpanded, contentFolderID, maxWords);
@@ -125,7 +132,6 @@
 	
 	// run initialisation code
 	initializeCKEditor("${id}", "${method}", "${resizeParentFrameName}", "${width}", "${height}", "${toolbarSet}", "${classes}", "${language}", ${displayExpanded}, "${contentFolderID}", ${empty maxWords or maxWords <= 0 ? 0 : maxWords});
-	
 
 	function reinitializeCKEditorInstances(){
 		for (var instanceId in CKEDITOR.instances){
Index: lams_www/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_www/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -15,8 +15,8 @@
 <%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
 <%@ attribute name="embedInAccordian" required="false" rtexprvalue="true"%>
 <%@ attribute name="accordionTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="bootstrap5" required="false" rtexprvalue="true"%>
 
-
 <c:if test="${empty width}">
 	<c:set var="width" value="100%" />
 </c:if>
@@ -51,41 +51,40 @@
 </c:if>	
 
 <c:if test="${embedInAccordian}">
-<div class="panel-group" id="accordionComments-${toolSessionId}-${toolItemId}" role="tablist" aria-multiselectable="true"> 
-    <div class="panel panel-default">
-        <div class="panel-heading collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
-        	<span class="panel-title">
-	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseComments-${toolSessionId}-${toolItemId}"
-	    		aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
-          	${not empty accordionTitle?accordionTitle:"Comments"}</a>
-      		</span>
-        </div>
-        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="panel-collapse collapse collapseComments"
-        	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
+	<div class="card">
+		<div class="card-header collapsable-icon-left" id="headingComments-${toolSessionId}-${toolItemId}">
+	      	<span class="card-title">
+		   		<button class="collapsed btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments-${toolSessionId}-${toolItemId}"
+		   				aria-expanded="false" aria-controls="collapseComments-${toolSessionId}-${toolItemId}">
+	       			${not empty accordionTitle?accordionTitle:"Comments"}
+	       		</button>
+	    	</span>
+	    </div>
+	    <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
+	    		aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false">
 </c:if>
 
 <div id="commentFrame-${toolSessionId}-${toolItemId}" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
 
 <c:if test="${embedInAccordian}">
 		</div>
 	</div>
-</div>
 </c:if>
 
 <script>
-$(document).ready(function(){
-	var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
-	
-	<c:choose>
-		<c:when test="${embedInAccordian}">
-			$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
-				$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
-				$('.commentFrame', this).load(url);
-			});
-		</c:when>
-		<c:otherwise>
-			$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
-		</c:otherwise>
-	</c:choose>
-});
-</script>
\ No newline at end of file
+	$(document).ready(function(){
+		var url='<lams:LAMSURL/>comments/init.do?externalID=${toolSessionId}&newUI=${bootstrap5}&externalSecondaryID=${toolItemId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}&anonymous=${anonymous}';
+		
+		<c:choose>
+			<c:when test="${embedInAccordian}">
+				$('#collapseComments-${toolSessionId}-${toolItemId}').on('show.bs.collapse', function(){
+					$('.collapseComments').not('#collapseComments-${toolSessionId}-${toolItemId}').collapse('hide').find('.commentFrame').empty();
+					$('.commentFrame', this).load(url);
+				});
+			</c:when>
+			<c:otherwise>
+				$('#commentFrame-${toolSessionId}-${toolItemId}').load(url);
+			</c:otherwise>
+		</c:choose>
+	});
+</script>
Index: lams_www/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_www/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 <fmt:message var="title" key='activity.title'/>
 
 <lams:PageLearner title="${title}" toolSessionID="${toolSessionID}" refresh="${refresh}">
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 type="info" id="define-later-info" close="false">
 			<fmt:message key="${defineLaterLabel}" />
 		</lams:Alert5>
Index: lams_www/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_www/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -7,7 +7,10 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="true" rtexprvalue="true"%>
 <%@ attribute name="instructions" required="true" rtexprvalue="true"%>
-<%@ attribute name="formActionUrl" required="true" rtexprvalue="true"%>
+<%@ attribute name="formActionUrl" required="false" rtexprvalue="true"%>
+<c:if test="${empty formActionUrl}">
+	<c:set var="formActionUrl" value="submitReflection.do" />
+</c:if>
 <%@ attribute name="formModelAttribute" required="false" rtexprvalue="true"%>
 <c:if test="${empty formModelAttribute}">
 	<c:set var="formModelAttribute" value="reflectionForm" />
@@ -52,20 +55,20 @@
 		}
 	</script>
 	
-	<div id="instructions" class="instructions">
-		<lams:out value="${instructions}" escapeHtml="true" />
-	</div>
-
-	<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
-		<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
-			<form:hidden path="${hiddenInput}" />
-		</c:forTokens>	
+	<div id="container-main">
+		<div id="instructions" class="instructions">
+			<lams:out value="${instructions}" escapeHtml="true" />
+		</div>
+	
+		<form:form action="${formActionUrl}" modelAttribute="${formModelAttribute}" method="post" onsubmit="disableFinishButton();" id="reflectionForm">
+			<c:forTokens items="${hiddenInputs}" delims="," var="hiddenInput"> 
+				<form:hidden path="${hiddenInput}" />
+			</c:forTokens>	
+					
+			<lams:errors5/>
 			
-		<lams:errors5/>
-		
-		<div class="container-lg">
 			<div class="card lcard">
-				<div class="card-header lcard-header-button-border">
+				<div class="card-header">
 					<fmt:message key="${notebookLabelKey}" />
 				</div>
 				<div class="card-body mb-3">
@@ -75,7 +78,17 @@
 						cssClass="form-control" id="focused" rows="5"></form:textarea>
 				</div>
 			</div>
-	
+		
+			<!-- Comments -->
+			<c:if test="${isNbTool}">
+				<c:if test="${allowComments}">
+					<div class="row g-0"><div class="col-12"></div></div>
+					<lams:Comments toolSessionId="${toolSessionID}"
+								   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
+								   pageSize="10" sortBy="1" bootstrap5="true"/>
+				</c:if>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
 				<button name="finishButton" id="finish-button" class="btn btn-primary na">
 					<c:choose>
@@ -88,18 +101,7 @@
 					</c:choose>
 				</buttun>
 			</div>
-		</div>
-	</form:form>
-	
-	<c:if test="${isNbTool}">
-		<!-- Comments: the extra div counteracts the float -->
-		<c:if test="${allowComments}">
-			<div class="row g-0"><div class="col-12"></div></div>
-			<lams:Comments toolSessionId="${toolSessionID}"
-						   toolSignature="lanb11" likeAndDislike="${likeAndDislike}" readOnly="true"
-						   pageSize="10" sortBy="1" />
-		</c:if>
-		<!-- End comments -->
-	</c:if>
+		</form:form>
+	</div>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_www/web/WEB-INF/tags/NotebookReedit.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_www/web/WEB-INF/tags/NotebookReedit.tag	(.../NotebookReedit.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -28,7 +28,7 @@
 	<c:set var="editNotebookLabelKey" value="label.edit" />
 </c:if>
 
-<div class="card shadow mt-4 mb-4">
+<div id="notebook-reedit" class="card shadow mt-4 mb-4">
 	<div class="card-header">
 		<fmt:message key="${notebookHeaderLabelKey}" />
 	</div>
@@ -53,7 +53,7 @@
 
 			<c:if test="${isEditButtonEnabled}">
 				<div class="mt-2 float-end">
-					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-icon-pen" type="button"
+					<button name="editNotebookButton" id="edit-notebook-button" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-pen" type="button"
 						onclick="continueReflect()">
 						<fmt:message key="${editNotebookLabelKey}" />
 					</button>
Index: lams_www/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_www/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -1,12 +1,12 @@
 <%@ tag body-content="scriptless" %>
-<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
-<%@ attribute name="title" required="false" rtexprvalue="true"%>
-<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
-
 <%@ taglib uri="tags-core" prefix="c" %>
 <%@ taglib uri="tags-fmt" prefix="fmt" %>
 <%@ taglib uri="tags-lams" prefix="lams" %>
 
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
 <c:choose>
@@ -130,11 +130,12 @@
 
             <main class="p-3" id="component-main-content" tabindex="-1">
                 <c:if test="${not empty title}">
-                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                    <h2 class="mb-3">
+                    	<c:out value="${title}" escapeXml="true" />
+                    </h2>
                 </c:if>
-
+				
                 <jsp:doBody/>
-
             </main>
         </div>
     </div>
Index: lams_www/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_www/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -190,11 +190,11 @@
 					<!-- 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">
Index: lams_www/web/WEB-INF/tags/SubmissionDeadline.tag
===================================================================
diff -u -rb682c506270a405ed832364386fa691c9599cbaa -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision b682c506270a405ed832364386fa691c9599cbaa)
+++ lams_www/web/WEB-INF/tags/SubmissionDeadline.tag	(.../SubmissionDeadline.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -50,7 +50,7 @@
 		}
     </script>
 
-	<div class="container-lg">
+	<div id="container-main">
 		<lams:Alert5 id="submission-deadline-alert" close="false" type="danger">
 			<fmt:message key="${deadlineAlertLabelKey}">
 				<fmt:param>
Index: lams_www/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r955865d255f86a5447f729ec1ce573b2b6f94b27
--- lams_www/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_www/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
@@ -33,13 +33,13 @@
 	</c:if>
 </script>
 
-<div class="container-lg">
+<div id="container-main">
 	<lams:Alert5 id="waiting-for-leader-alert" type="info">
 		<fmt:message key="${waitingForLeaderKey}" />
 	</lams:Alert5>
 
 	<div class="card lcard mt-1">
-		<div class="card-header lcard-header-button-border">
+		<div class="card-header">
 			<fmt:message key="label.users.from.group" />
 		</div>