Index: lams_central/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r572226a47e63b49ca60f35de579ec230feaa409a -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_central/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 572226a47e63b49ca60f35de579ec230feaa409a)
+++ lams_central/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -79,6 +79,16 @@
 				</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>
@@ -92,16 +102,6 @@
 				</buttun>
 			</div>
 		</form:form>
-		
-		<!-- 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" />
-			</c:if>
-		</c:if>
 	</div>
 
 </lams:PageLearner>
Index: lams_central/web/css/bootstrap5.custom.scss
===================================================================
diff -u -r8ab1c658eca81a42d7f21d0067bff04c15f70c38 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_central/web/css/bootstrap5.custom.scss	(.../bootstrap5.custom.scss)	(revision 8ab1c658eca81a42d7f21d0067bff04c15f70c38)
+++ lams_central/web/css/bootstrap5.custom.scss	(.../bootstrap5.custom.scss)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -6,11 +6,20 @@
 $green: #018847; /* rgb(1, 136, 71) */
 $red: #D73961; /* rgb(215, 57, 97) */
 
-$enable-shadows:              true !default;
-$enable-negative-margins:     true !default;
+$enable-shadows:              true;
+$enable-negative-margins:     true;
 
 @import "bootstrap/bootstrap.scss";
 
 :root {
 	--lams-background-gray: #e0e0e0; /* rgb(224, 224, 224) */
 }
+
+#container-main {
+    @extend .container-lg;
+}
+
+.btn-secondary-darker {
+	@extend .btn-secondary;
+	background-color: shade-color($secondary, 20%);
+}
\ No newline at end of file
Index: lams_central/web/css/components.scss
===================================================================
diff -u -r572226a47e63b49ca60f35de579ec230feaa409a -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 572226a47e63b49ca60f35de579ec230feaa409a)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -1,5 +1,4 @@
-@use "bootstrap5.custom.scss";
-@import "_lams_variables.scss"; 
+@import "_lams_variables.scss";
 
 /* For Boostrap 3 & 5 compability */
 .img-responsive {
@@ -69,10 +68,6 @@
 	background-color: var(--lams-background-gray);
 }
 
-body.component #container-main {
-    @extend .container-lg;
-}
-
 body.component .btn-success,
 body.component .btn-success:hover {
 	color: #fff;
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r8ab1c658eca81a42d7f21d0067bff04c15f70c38 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 8ab1c658eca81a42d7f21d0067bff04c15f70c38)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -133,7 +133,7 @@
     flex-direction: row-reverse;
 }
 
-.activity-bottom-buttons button, .activity-bottom-buttons a, button.btn {
+.activity-bottom-buttons button, .activity-bottom-buttons a, button.btn:not(.no-shadow) {
     box-shadow: 0px 3px 6px var(--bs-gray-400);
 }
 
@@ -242,7 +242,7 @@
     padding: 1rem;
 	color: #fff !important; //.text-bg-secondary
     background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; //.text-bg-secondary
-    --bs-bg-opacity: 0.8;
+    
 }
 
 .instructions {
Index: lams_tool_larsrc/src/java/org/lamsfoundation/lams/tool/rsrc/ResourceConstants.java
===================================================================
diff -u -r5a2704204eda443d4fb54e97babed70b9d71ee60 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/src/java/org/lamsfoundation/lams/tool/rsrc/ResourceConstants.java	(.../ResourceConstants.java)	(revision 5a2704204eda443d4fb54e97babed70b9d71ee60)
+++ lams_tool_larsrc/src/java/org/lamsfoundation/lams/tool/rsrc/ResourceConstants.java	(.../ResourceConstants.java)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -39,13 +39,6 @@
 
     public static final short RESOURCE_TYPE_WEBSITE = 3;
 
-    // for action forward name
-    public static final String SUCCESS = "success";
-
-    public static final String ERROR = "error";
-
-    public static final String DEFINE_LATER = "definelater";
-
     // for parameters' name
     public static final String PARAM_TOOL_CONTENT_ID = "toolContentID";
 
Index: lams_tool_larsrc/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdd51078148f6ee1a3b5308e63db60cce139244a2 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dd51078148f6ee1a3b5308e63db60cce139244a2)
+++ lams_tool_larsrc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -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_larsrc/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u -rcaeb1e13c1ca119f520f63cd1f8702eaff739aa0 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision caeb1e13c1ca119f520f63cd1f8702eaff739aa0)
+++ lams_tool_larsrc/web/WEB-INF/tags/Comments.tag	(.../Comments.tag)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -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>
@@ -52,15 +52,16 @@
 
 <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>
+    <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="panel-collapse collapse collapseComments"
+        <div id="collapseComments-${toolSessionId}-${toolItemId}" class="card-collapse collapse collapseComments"
         	 role="tabpanel" aria-labelledby="headingComments-${toolSessionId}-${toolItemId}" aria-expanded="false" style="">
 </c:if>
 
@@ -74,7 +75,7 @@
 
 <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}';
+	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}">
Index: lams_tool_larsrc/web/WEB-INF/tags/Notebook.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_larsrc/web/WEB-INF/tags/Notebook.tag	(.../Notebook.tag)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -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" />
@@ -65,7 +68,7 @@
 		
 		<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">
@@ -102,4 +105,4 @@
 		<!-- End comments -->
 	</c:if>
 
-</lams:PageLearner>
\ No newline at end of file
+</lams:PageLearner>
Index: lams_tool_larsrc/web/pages/itemreview/itemContent.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/pages/itemreview/itemContent.jsp	(.../itemContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_larsrc/web/pages/itemreview/itemContent.jsp	(.../itemContent.jsp)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -1,25 +1,4 @@
 <!DOCTYPE html>
-<%-- 
-Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
-License Information: http://lamsfoundation.org/licensing/lams/2.0/
-
-  This program is free software; you can redistribute it and/or modify
-  it under the terms of the GNU General Public License version 2 as
-  published by the Free Software Foundation.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  GNU General Public License for more details.
-
-  You should have received a copy of the GNU General Public License
-  along with this program; if not, write to the Free Software
-  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
-  USA
-
-  http://www.gnu.org/licenses/gpl.txt 
---%>
-
 <%@ include file="/common/taglibs.jsp" %>
 <%@ page import="org.lamsfoundation.lams.tool.rsrc.ResourceConstants"%>
 
@@ -29,7 +8,6 @@
 
 <script>
 	$(document).ready(function(){
-
 		<c:if test="${sessionMap.rateItems}">
 			initializeJRating();
 		</c:if>
@@ -39,11 +17,11 @@
 			panel = $('#item-content-${itemUid}');
 
 		if (isDownload) {
-			$('.download-button', panel).removeClass('hidden');
+			$('.download-button', panel).removeClass('d-none');
 			return;
    		}
    		if (isPage) {
-   			$('.iframe-open-button', panel).removeClass('hidden');
+   			$('.iframe-open-button', panel).removeClass('d-none');
    	   		return;
    	   	}
    		
@@ -55,7 +33,7 @@
 		    jsonpCallback: 'iframelyCallback${itemUid}',
 		    contentType: "application/json; charset=utf-8",
 		    error: function (xhr, status, error) {
-			    $('.embedded-open-button', panel).removeClass('btn-secondary hidden btn-sm float-end').addClass('btn-primary');
+			    $('.embedded-open-button', panel).removeClass('d-none btn-sm float-end');
 		        console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
 		    }
 		});
@@ -68,32 +46,35 @@
 	
 <div id="item-content-${itemUid}" class="item-content">
 	<c:if test="${not empty instructions}">
-		<div class="item-instructions">
+		<div class="instructions">
 			<c:out value="${instructions}" escapeXml="false" />
 		</div>
 	</c:if>
 	
 	<div class="content-panel">
-	
-		<div class="text-center">
-			<a href="<c:url value='${resourceItemReviewUrl}' />&preferDownload=true" class="download-button hidden btn btn-primary">
+		<div class="float-end">
+			<a href="<c:url value='${resourceItemReviewUrl}' />&preferDownload=true" class="download-button d-none btn btn-secondary">
+				<i class="fa-solid fa-download" aria-hidden="true"></i>
 				<fmt:message key="label.download" />
 			</a>
-			<a href="${resourceItemReviewUrl}" target="_blank" class="embedded-open-button hidden btn btn-secondary btn-sm float-end">
+			<a href="${resourceItemReviewUrl}" target="_blank" class="embedded-open-button d-none btn btn-secondary btn-sm float-end">
 				<i class="fa fa-external-link" aria-hidden="true"></i>
 				<fmt:message key="open.in.new.window" />
 			</a>
-			<a href="<c:url value='${resourceItemReviewUrl}'/>" target="_blank" class="iframe-open-button hidden btn btn-secondary btn-sm float-end">
+			<a href="<c:url value='${resourceItemReviewUrl}'/>" target="_blank" class="iframe-open-button d-none btn btn-secondary btn-sm float-end">
 				<i class="fa fa-external-link" aria-hidden="true"></i>
 				<fmt:message key="open.in.new.window" />
 			</a>
 		</div>
 
-		<a title="<fmt:message key='open.in.new.window' />" class="embedded-title" href="${resourceItemReviewUrl}"  target="_blank"   ></a>&nbsp;&nbsp;
-		<i title="<fmt:message key='open.in.new.window' />" class="new-window-icon fa fa-1 hidden fa-external-link" aria-hidden="true"></i>
+		<a title="<fmt:message key='open.in.new.window' />"
+			class="embedded-title" href="${resourceItemReviewUrl}"
+			target="_blank"></a>
+		&nbsp;&nbsp; 
+		<i title="<fmt:message key='open.in.new.window' />" class="new-window-icon fa fa-1 d-none fa-external-link" aria-hidden="true"></i>
 		<div class="embedded-description"></div>
-		<div class="embedded-content">
 		
+		<div class="embedded-content">
 			<c:if test="${isDisplayableImage}">
 				<div class="embedded-file">
 					<img src="<c:url value='${resourceItemReviewUrl}' />&preferDownload=false" />
@@ -113,9 +94,8 @@
 				<iframe src="<c:url value='${resourceItemReviewUrl}'/>"></iframe>
 			</c:if>		
 		</div>
-
 	</div>
-	<hr>
+
 	<c:if test="${mode eq 'learner' or mode eq 'author'}">
 		<c:if test="${sessionMap.rateItems && allowRating}">
 			<lams:Rating5 itemRatingDto="${ratingDTO}" 
@@ -126,7 +106,7 @@
 			<c:set var="accordianTitle"><fmt:message key="label.comments"/></c:set>
 			<lams:Comments toolSessionId="${toolSessionID}" toolSignature="<%=ResourceConstants.TOOL_SIGNATURE%>"
 						  embedInAccordian="true" accordionTitle="${accordianTitle}" mode="${mode}" toolItemId="${itemUid}"
-						  readOnly="${finishedLock}"/>	
+						  readOnly="${finishedLock}" bootstrap5="true"/>	
 		</c:if>
 	</c:if>	
 </div>
Index: lams_tool_larsrc/web/pages/learning/addfile.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/pages/learning/addfile.jsp	(.../addfile.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_larsrc/web/pages/learning/addfile.jsp	(.../addfile.jsp)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -7,48 +7,49 @@
 <c:set var="EXE_FILE_TYPES"><%=Configuration.get(ConfigurationKeys.EXE_EXTENSIONS)%></c:set>
 
 <!-- Add a File Form-->
-<div class="panel panel-default">
-	<div class="panel-heading panel-title">
+<div class="card lcard">
+	<div class="card-header">
 		<fmt:message key="label.learning.new.file" />
 	</div>
-	<div class="panel-body">
+	<div class="card-body">
 	
 	<lams:errors/>
 	
 	<form:form action="saveOrUpdateItem.do" method="post" modelAttribute="resourceItemForm" id="resourceItemForm" focus="title">
-	
 		<form:hidden path="itemType" id="itemType" />
 		<form:hidden path="mode" id="mode"/>
 		<form:hidden path="sessionMapID"/>
 	
 		<div class="mb-3">
 	    	<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>:
-			<form:input path="title" class="form-control" tabindex="1" id="resourcetitle"/>
+			<form:input path="title" class="form-control" />
 	  	</div>	
 		<div class="mb-3">
-	    	<label for="instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
-			<lams:CKEditor id="instructions" value="" contentFolderID="${learnerContentFolder}"></lams:CKEditor>
+	    	<div id="instructions-label">
+	    		<fmt:message key="label.authoring.basic.instruction" />
+	    	</div>
+			<lams:CKEditor id="instructions-ckeditor" value="" contentFolderID="${learnerContentFolder}"
+				ariaLabelledby="instructions-label"></lams:CKEditor>
 	  	</div>	
 	  	
 		<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId" value="${resourceItemForm.tmpFileUploadId}" />
 		<div id="image-upload-area" class="mt-4"></div>
 		
 		<lams:WaitingSpinner id="itemAttachmentArea_Busy"/>	
 		<div id="buttons" class="float-end mt-2">
-	 		<button name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-secondary" id="cancelButton">
+	 		<button type="button" name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-secondary" id="cancelButton">
+	 			<i class="fa fa-cancel"></i>
 				<fmt:message key="button.cancel" />
 			</button>&nbsp;
 			<button type="submit" class="btn btn-sm btn-secondary btn-disable-on-submit" id="submitButton">
+				<i class="fa fa-plus"></i>
 			 	<fmt:message key="button.add" />
 			</button>
 		</div>
-	
 	</form:form>
 	
 	<script type="text/javascript">
-	
-		var LAMS_URL = '<lams:LAMSURL/>',
-			UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>',
+		var UPLOAD_FILE_LARGE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_LARGE_MAX_SIZE}"/>',
 			// convert Java syntax to JSON
 	       EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
 		   EXE_FILE_ERROR = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.attachment.executable"/></spring:escapeBody>';
@@ -87,9 +88,8 @@
 				errorPlacement: function(error, element) {
 			       error.insertAfter(element);
 			    }
-			});	
+		});	
 	</script>
 	
+	</div>
 </div>
-</div>
-
Index: lams_tool_larsrc/web/pages/learning/addurl.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/pages/learning/addurl.jsp	(.../addurl.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_larsrc/web/pages/learning/addurl.jsp	(.../addurl.jsp)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -1,57 +1,60 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <!-- Add a URL Form-->
-<div class="panel panel-default">
-	<div class="panel-heading panel-title">
+<div class="card lcard">
+	<div class="card-header">
 		<fmt:message key="label.learning.new.url" />
 	</div>
-	<div class="panel-body">
-
+	
+	<div class="card-body">
 		<lams:errors/>
 
 		<form:form action="saveOrUpdateItem.do" method="post" modelAttribute="resourceItemForm" id="resourceItemForm" focus="title">
-
 			<form:hidden path="itemType" id="itemType" />
 			<form:hidden path="mode" id="mode"/>
 			<form:hidden path="sessionMapID"/>
 
 			<div class="mb-3" id="addurl">
 				<label for="url"><fmt:message key="label.authoring.basic.resource.url.input" /></label>
-				<form:input path="url" cssClass="form-control" tabindex="2" id="url"/>
+				<form:input path="url" cssClass="form-control" id="url"/>
 			</div>
 
-			<div id="preview-panel" class="panel panel-default hidden">
-				<div class="panel-heading panel-title">
+			<div id="preview-panel" class="card lcard d-none">
+				<div class="card-header">
 					<fmt:message key="label.authoring.basic.resource.preview" />
 				</div>
-				<div id="item-content-0" class="panel-body item-content">
+				<div id="item-content-0" class="card-body item-content">
 					<div class="content-panel">
 						<h3  class="embedded-title"></h3>
-						<h5  class="embedded-description"></h5>
+						<h4  class="embedded-description"></h4>
 						<div class="embedded-content"></div>
 					</div>
 				</div>
 			</div>
 
 			<div class="mb-3">
 				<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>:
-				<form:input path="title" tabindex="1" cssClass="form-control"/>
+				<form:input path="title" cssClass="form-control"/>
 			</div>
 
 			<div class="mb-3">
-				<label for="instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
-				<lams:CKEditor id="instructions" value="" contentFolderID="${learnerContentFolder}"></lams:CKEditor>
+		    	<div id="instructions-label">
+		    		<fmt:message key="label.authoring.basic.instruction" />
+		    	</div>
+				<lams:CKEditor id="instructions-ckeditor" value="" contentFolderID="${learnerContentFolder}"
+					ariaLabelledby="instructions-label"></lams:CKEditor>
 			</div>
 
 			<div id="buttons" class="float-end" >
-				<button name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-secondary" id="cancelButton">
+				<button type="button" name="goback" onclick="javascript:cancel()" class="btn btn-sm btn-secondary" id="cancelButton">
+					<i class="fa fa-cancel"></i>
 					<fmt:message key="button.cancel" />
 				</button>&nbsp;
 				<button type="submit" class="btn btn-sm btn-secondary btn-disable-on-submit" id="submitButton">
+					<i class="fa fa-plus"></i>
 					<fmt:message key="button.add" />
 				</button>
 			</div>
-
 		</form:form>
 
 		<script type="text/javascript">
@@ -71,7 +74,7 @@
 							jsonpCallback: 'iframelyCallback0',
 							contentType: "application/json; charset=utf-8",
 							error: function (xhr, status, error) {
-								$('#addresource #preview-panel').addClass('hidden');
+								$('#addresource #preview-panel').addClass('d-none');
 
 								console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
 							}
@@ -105,6 +108,5 @@
 				},
 			});
 		</script>
-
 	</div>
 </div>
\ No newline at end of file
Index: lams_tool_larsrc/web/pages/learning/learning.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_larsrc/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -1,127 +1,117 @@
 <!DOCTYPE html>
-
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<%-- param has higher level for request attribute --%>
+<c:if test="${not empty param.sessionMapID}">
+	<c:set var="sessionMapID" value="${param.sessionMapID}" />
+</c:if>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="mode" value="${sessionMap.mode}" />
+<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
+<c:set var="resource" value="${sessionMap.resource}" />
+<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
+<c:set var="userID"><lams:user property="userID"/></c:set>
+<c:set var="delConfirmMsgKey" value="del.confirmation" scope="request"/>
+		
 <%-- If you change this file, remember to update the copy made for CNG-36 --%>
 
-<%@ include file="/common/taglibs.jsp"%>
-<lams:html>
-	<lams:head>
-		<title><fmt:message key="label.learning.title" />
-		</title>
-		<%@ include file="/common/header.jsp"%>
+<lams:PageLearner title="${resource.title}" toolSessionID="${toolSessionID}" >
 
-		<lams:css suffix="jquery.jRating"/>
-		<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
-		<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
-		<style media="screen,projection" type="text/css">
-			.item-panel {
-				margin: 15px;
-			}
+	<lams:css suffix="jquery.jRating"/>
+	<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
+	<link href="${lams}css/uppy.custom.css" rel="stylesheet" type="text/css" />
+	<style media="screen,projection" type="text/css">
+		.item-card {
+			margin-bottom: 20px;
+		}
+		
+		.item-content {
+			padding: 5px;
+		}
+		
+		.embedded-title {
+			clear: both;
+			font-weight: 500;
+			font-size: larger;
+		}
+		
+		.embedded-description {
+			padding: 0.5em;
+		}
+		
+		.embedded-file {
+			text-align: center;
+			margin: auto;
+		}
+		
+		.embedded-file img {
+			max-width: 800px;
+		}
+		
+		.embedded-file video {
+			width: 100%;
+		}
+		
+		.embedded-file embed {
+			width: 100%;
+			min-height: 500px;
+		}
+		
+		.embedded-content iframe {
+			border: 0;
+			width: 100%;
+			height: 100%;
+		}
+		
+		.delete-item-button {
+			margin-left: 5px;
+			cursor: pointer;
+		}
+		
+		.commentFrame {
+			padding: 10px;
+		}
+		
+		.activity-bottom-buttons {
+			clear: both;
+		}
+		
+		#addresource {
+		    clear: both;
+		}
+	</style>
 
-			.item-content {
-				padding: 5px;
-			}
-
-			.item-instructions {
-				margin-bottom: 15px;
-				padding-bottom: 10px;
-				border-bottom: 1px solid #ddd;
-			}
-
-			.embedded-title {
-				clear: both;
-				font-weight: 500;
-				font-size: larger;
-			}
-
-			.embedded-description {
-				padding: 0.5em;
-			}
-
-			.embedded-file {
-				text-align: center;
-				margin: auto;
-			}
-
-			.embedded-file img {
-				max-width: 800px;
-			}
-
-			.embedded-file video {
-				width: 100%;
-			}
-
-			.embedded-file embed {
-				width: 100%;
-				min-height: 500px;
-			}
-
-			.embedded-content iframe {
-				border: 0;
-				width: 100%;
-				height: 100%;
-			}
-
-			.delete-item-button {
-				margin-left: 5px;
-				cursor: pointer;
-			}
-
-			.commentFrame {
-				padding: 10px;
-			}
-		</style>
-
-		<%-- param has higher level for request attribute --%>
-		<c:if test="${not empty param.sessionMapID}">
-			<c:set var="sessionMapID" value="${param.sessionMapID}" />
-		</c:if>
-
-		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-
-		<c:set var="mode" value="${sessionMap.mode}" />
-		<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
-		<c:set var="resource" value="${sessionMap.resource}" />
-		<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
-		<c:set var="userID"><lams:user property="userID"/></c:set>
-		<c:set var="delConfirmMsgKey" value="del.confirmation" scope="request"/>
-
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.validate.js"></script>
-
-		<c:set var="language"><lams:user property="localeLanguage"/></c:set>
-		<script src="${lams}includes/javascript/uppy/uppy.min.js"></script>
-		<c:choose>
-			<c:when test="${language eq 'es'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'fr'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
-			</c:when>
-			<c:when test="${language eq 'el'}">
-				<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
-			</c:when>
-		</c:choose>
-
-		<c:if test="${sessionMap.rateItems}">
-			<script>
-				var pathToImageFolder = "${lams}images/css/",
-						LAMS_URL = '${lams}',
-						MAX_RATES = MAX_RATINGS_FOR_ITEM = MIN_RATES = COUNT_RATED_ITEMS = 0, // no restrictions
-						COMMENTS_MIN_WORDS_LIMIT = 0, // comments not used,
-						COMMENT_TEXTAREA_TIP_LABEL = WARN_COMMENTS_IS_BLANK_LABEL = WARN_MIN_NUMBER_WORDS_LABEL = '',
-						AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
-						YOUR_RATING_LABEL =
-								'<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message></spring:escapeBody>',
-						ALLOW_RERATE = true,
-						SESSION_ID = ${toolSessionID};
-
-			</script>
-			<lams:JSImport src="includes/javascript/rating.js" />
-			<script src="${lams}includes/javascript/jquery.jRating.js"></script>
-		</c:if>
-
-		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-		<lams:JSImport src="includes/javascript/rsrcembed.js" relative="true" />
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.validate.js"></script>
+	<c:set var="language"><lams:user property="localeLanguage"/></c:set>
+	<script src="${lams}includes/javascript/uppy/uppy.min.js"></script>
+	<c:choose>
+		<c:when test="${language eq 'es'}">
+			<script type="text/javascript" src="${lams}includes/javascript/uppy/es_ES.min.js"></script>
+		</c:when>
+		<c:when test="${language eq 'fr'}">
+			<script type="text/javascript" src="${lams}includes/javascript/uppy/fr_FR.min.js"></script>
+		</c:when>
+		<c:when test="${language eq 'el'}">
+			<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
+		</c:when>
+	</c:choose>
+	<c:if test="${sessionMap.rateItems}">
 		<script>
+			var pathToImageFolder = "${lams}images/css/",
+				MAX_RATES = MAX_RATINGS_FOR_ITEM = MIN_RATES = COUNT_RATED_ITEMS = 0, // no restrictions
+				COMMENTS_MIN_WORDS_LIMIT = 0, // comments not used,
+				COMMENT_TEXTAREA_TIP_LABEL = WARN_COMMENTS_IS_BLANK_LABEL = WARN_MIN_NUMBER_WORDS_LABEL = '',
+				AVG_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message></spring:escapeBody>',
+				YOUR_RATING_LABEL = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message></spring:escapeBody>',
+				ALLOW_RERATE = true,
+				SESSION_ID = ${toolSessionID};
+		</script>
+		<lams:JSImport src="includes/javascript/rating.js" />
+		<script src="${lams}includes/javascript/jquery.jRating.js"></script>
+	</c:if>
+	<lams:JSImport src="includes/javascript/rsrccommon.js" relative="true" />
+	<lams:JSImport src="includes/javascript/rsrcembed.js" relative="true" />
+	<script>
 			checkNextGateActivity('finishButton', '${toolSessionID}', '', finishSession);
 
 			let itemsComplete = ${itemsComplete};
@@ -190,7 +180,7 @@
 
 						let heading = $('#heading' + itemUid);
 						$('.complete-item-button', heading).remove();
-						$('.icon-complete', heading).removeClass('hidden');
+						$('.icon-complete', heading).removeClass('d-none');
 					}
 				});
 			}
@@ -212,7 +202,7 @@
 			// there is no item ID yet, so just use 0
 			function iframelyCallback0(response) {
 				if (!response || !response.html) {
-					$('#addresource #preview-panel').addClass('hidden');
+					$('#addresource #preview-panel').addClass('d-none');
 					return;
 				}
 
@@ -221,7 +211,7 @@
 				}
 
 				iframelyCallback(0, response);
-				$('#addresource #preview-panel').removeClass('hidden');
+				$('#addresource #preview-panel').removeClass('d-none');
 			}
 
 			function gotoFile(){
@@ -268,12 +258,10 @@
 					});
 				}
 			}
-		</script>
-	</lams:head>
-	<body class="stripes">
+	</script>
+	
+	<div id="container-main">
 
-	<lams:Page type="learner" title="${resource.title}">
-
 		<!--  Warnings -->
 		<c:if test="${sessionMap.lockOnFinish and mode != 'teacher' and (resource.allowAddFiles or resource.allowAddUrls) }">
 			<lams:Alert5 type="danger" id="warn-lock" close="false">
@@ -289,54 +277,28 @@
 		</c:if>
 
 		<c:if test="${resource.miniViewResourceNumber > 0}">
-			<lams:Alert5 type="info" id="warn-numResources" close="false">${resource.miniViewNumberStr}</lams:Alert5>
+			<lams:Alert5 type="info" id="warn-numResources" close="false">
+				${resource.miniViewNumberStr}
+			</lams:Alert5>
 		</c:if>
 
 		<lams:errors/>
 
 		<!--  Instructions -->
-		<c:out value="${resource.instructions}" escapeXml="false"/>
+		<div id="instructions" class="instructions">
+			<c:out value="${resource.instructions}" escapeXml="false"/>
+		</div>
 
 		<!-- Resources to View -->
-		<div class="panel panel-default">
-			<div class="panel-heading panel-title">
-				<fmt:message key="label.resoruce.to.review" />
+		<div class="card-subheader">
+			<fmt:message key="label.resoruce.to.review" />
+		</div>
 
-				<!--  Panel button bar controlling refresh and adding items -->
-				<div class="btn-group float-end">
-					<c:if test="${mode != 'teacher'}">
-						<a href="#" onclick="javascript:return checkNew()" type="button" class="btn btn-sm btn-secondary">
-							<i class="fa fa-xm fa-refresh"></i> <fmt:message key="label.check.for.new" /></a>
-					</c:if>
-					<c:if test="${not finishedLock}">
-						<c:choose>
-							<c:when test="${resource.allowAddFiles && resource.allowAddUrls}">
-								<a href="#" onclick="javascript:gotoURL()" type="button" class="btn btn-sm btn-secondary">
-									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.url.input" /></a>
-								<a href="#" onclick="javascript:gotoFile()" type="button" class="btn btn-sm btn-secondary">
-									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.file.input" /></a>
-							</c:when>
-
-							<c:when test="${resource.allowAddFiles && !resource.allowAddUrls}">
-								<a href="#" onclick="javascript:gotoFile()" type="button" class="btn btn-sm btn-secondary">
-									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.file.input" /></a>
-							</c:when>
-
-							<c:when test="${!resource.allowAddFiles && resource.allowAddUrls}">
-								<a href="#" onclick="javascript:gotoURL()" type="button" class="btn btn-sm btn-secondary">
-									<i class="fa fa-xm fa-plus"></i> <fmt:message key="label.authoring.basic.resource.url.input" /></a>
-							</c:when>
-						</c:choose>
-					</c:if>
-				</div>
-				<!--  End panel button bar -->
-			</div>
-
-			<c:forEach var="item" items="${sessionMap.resourceList}">
-				<div class="item-panel panel panel-default" >
-					<div class="panel-heading" id="heading${item.uid}">
-			        	<span class="panel-title collapsable-icon-left">
-				        	<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${item.uid}"
+		<c:forEach var="item" items="${sessionMap.resourceList}">
+			<div class="item-card card lcard" >
+				<div class="card-header" id="heading${item.uid}">
+			        	<span class="card-title collapsable-icon-left">
+				        	<button type="button" class="btn btn-secondary-darker no-shadow collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${item.uid}"
 							   aria-expanded="false" aria-controls="collapse${item.uid}" 
 							>
 								<c:out value="${item.title}" escapeXml="true"/>
@@ -349,78 +311,89 @@
 						<div class="float-end">
 							<c:choose>
 								<c:when test="${item.complete}">
-									<i class="fa fa-check-circle icon-complete" style="font-size: 1.5em;color: green;" title='<fmt:message key="label.completed" />'></i>
+									<i class="fa fa-check-circle text-bg-success icon-complete" style="font-size: 1.1em;color: green;" title='<fmt:message key="label.completed" />'></i>
 								</c:when>
 								<c:when test="${not finishedLock}">
-									<i class="fa fa-check-circle icon-complete hidden" style="font-size: 1.5em;color: green;" title='<fmt:message key="label.completed" />'></i>
+									<i class="fa fa-check-circle icon-complete d-none" style="font-size: 1.5em;color: green;" title='<fmt:message key="label.completed" />'></i>
 									<button type="button" onClick="javascript:completeItem(${item.uid})"
-											class="complete-item-button btn btn-sm btn-secondary">
+											class="complete-item-button btn btn-sm btn-success no-shadow">
+										<i class="fa-solid fa-check" aria-hidden="true"></i>
 										<fmt:message key='label.finish' />
 									</button>
 								</c:when>
 							</c:choose>
 
-
 							<c:if test="${not finishedLock && !item.createByAuthor && userID == item.createBy.userId}">
-								<i class="fa fa-trash delete-item-button" style="color: red;"
+								<span role="button" class="fa fa-trash delete-item-button" style="color: red;"
 								   title="<fmt:message key="label.delete" />"
-								   onclick="hideItem(${item.uid})"></i>
+								   aria-label="<spring:escapeBody javaScriptEscape='true'><fmt:message key="label.delete" /></spring:escapeBody>
+								   onclick="hideItem(${item.uid})"></span>
 							</c:if>
 						</div>
-					</div>
-
-					<div id="collapse${item.uid}" data-item-uid="${item.uid}" class="item-collapse panel-collapse collapse"
-						 role="tabpanel" aria-labelledby="heading${item.uid}"></div>
 				</div>
-			</c:forEach>
+
+				<div id="collapse${item.uid}" data-item-uid="${item.uid}" class="item-collapse card-collapse collapse"
+					 role="tabpanel" aria-labelledby="heading${item.uid}"></div>
+			</div>
+		</c:forEach>
+
+		<!--  Card button bar controlling refresh and adding items -->
+		<div class="btn-group float-end my-3">
+			<c:if test="${mode != 'teacher'}">
+				<button onclick="javascript:return checkNew()" type="button" class="btn btn-secondary"> 
+					<i class="fa fa-refresh"></i> 
+					<fmt:message key="label.check.for.new" />
+				</button>
+			</c:if>
+			<c:if test="${not finishedLock}">
+				<c:choose>
+					<c:when test="${resource.allowAddFiles && resource.allowAddUrls}">
+						<button onclick="javascript:gotoURL()" type="button" class="btn btn-secondary"> 
+							<i class="fa fa-plus"></i>
+							<fmt:message key="label.authoring.basic.resource.url.input" />
+						</button>
+						<button onclick="javascript:gotoFile()" type="button" class="btn btn-secondary"> 
+							<i class="fa fa-plus"></i>
+							<fmt:message key="label.authoring.basic.resource.file.input" />
+						</button>
+					</c:when>
+
+					<c:when test="${resource.allowAddFiles && !resource.allowAddUrls}">
+						<button onclick="javascript:gotoFile()" type="button" class="btn btn-secondary"> 
+							<i class="fa fa-plus"></i>
+							<fmt:message key="label.authoring.basic.resource.file.input" />
+						</button>
+					</c:when>
+
+					<c:when test="${!resource.allowAddFiles && resource.allowAddUrls}">
+						<button onclick="javascript:gotoURL()" type="button" class="btn btn-secondary"> 
+							<i class="fa fa-plus"></i>
+							<fmt:message key="label.authoring.basic.resource.url.input" />
+						</button>
+					</c:when>
+				</c:choose>
+			</c:if>
 		</div>
-		<!--  End Resources to View -->
 
 		<!-- Add a URL/File Form-->
 		<div id="addresource">
 		</div>
 
 		<!-- Reflection -->
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="panel panel-default">
-				<div class="panel-heading panel-title">
-					<fmt:message key="title.reflection" />
-				</div>
-				<div class="panel-body">
-					<div class="reflectionInstructions">
-						<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-					</div>
-
-					<c:choose>
-						<c:when test="${empty sessionMap.reflectEntry}">
-							<p>
-								<em>
-									<fmt:message key="message.no.reflection.available" />
-								</em>
-							</p>
-						</c:when>
-						<c:otherwise>
-							<p>
-								<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-							</p>
-						</c:otherwise>
-					</c:choose>
-
-					<c:if test="${mode != 'teacher'}">
-						<button onclick="return continueReflect()" class="btn btn-sm btn-secondary mt-2 btn-disable-on-submit">
-							<fmt:message key="label.edit" />
-						</button>
-					</c:if>
-				</div>
-			</div>
+			<lams:NotebookReedit
+				reflectInstructions="${sessionMap.reflectInstructions}"
+				reflectEntry="${sessionMap.reflectEntry}"
+				isEditButtonEnabled="${mode != 'teacher'}"
+				notebookHeaderLabelKey="title.reflection"/>
 		</c:if>
-		<!-- End Reflection -->
-
+		
+		<!-- Finish buttons -->
 		<c:if test="${mode != 'teacher' && sessionMap.hasCompletedMinNumber}">
 			<div class="activity-bottom-buttons">
 				<c:choose>
 					<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-primary btn-disable-on-submit">
+						<button type="button" name="FinishButton" onclick="return continueReflect()" class="btn btn-primary na btn-disable-on-submit">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:when>
@@ -442,6 +415,5 @@
 			</div>
 		</c:if>
 
-	</lams:Page>
-	</body>
-</lams:html>
\ No newline at end of file
+	</div>
+</lams:PageLearner>
Index: lams_tool_larsrc/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_larsrc/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -1,66 +1,12 @@
-<%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
-        
-
+<%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMapID" value="${param.sessionMapID}" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" />
-	</title>
-	<%@ include file="/common/header.jsp"%>
-	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', function(){
-			$('#reflectionForm').submit();
-		});
-		
-		function disableFinishButton() {
-			document.getElementById("finishButton").disabled = true;
-		}
-	</script>
-</lams:head>
-<body class="stripes">
+<lams:Notebook title="${sessionMap.title}"
+	toolSessionID="${sessionMap.toolSessionId}"
+	instructions="${sessionMap.reflectInstructions}"
+	isNextActivityButtonSupported="true"
+	isLastActivity="${sessionMap.isLastActivity}"
+	notebookLabelKey="title.reflection"/>
 
-	<lams:Page type="learner" title="${sessionMap.title}">
-	
-	<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" modelAttribute="reflectionForm" id="reflectionForm">
-		<form:hidden path="userID" />
-		<form:hidden path="sessionMapID" />
-
-		<div id="content">
-			<lams:errors/>
-
-			<p>
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-			</p>
-
-			<form:textarea rows="8" path="entryText" id="focused" cssClass="form-control" />
-
-			<div class="activity-bottom-buttons">
-				<button type="submit" class="btn btn-primary na" id="finishButton">
-					<span class="nextActivity">
-						<c:choose>
-		 					<c:when test="${sessionMap.isLastActivity}">
-		 						<fmt:message key="label.submit" />
-		 					</c:when>
-		 					<c:otherwise>
-		 		 				<fmt:message key="label.finished" />
-		 					</c:otherwise>
-		 				</c:choose>
-		 			</span>
-				</button>
-			</div>
-		</div>
-	</form:form>
-
-	<div id="footer">
-	</div>
-	<!--closes footer-->
-
-	</lams:Page>
-	
-</body>
-</lams:html>
Index: lams_tool_larsrc/web/pages/learning/success.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/pages/learning/success.jsp	(.../success.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_larsrc/web/pages/learning/success.jsp	(.../success.jsp)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -1,27 +1,20 @@
 <!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams"><lams:LAMSURL/></c:set>
-<c:set var="tool"><lams:WebAppURL/></c:set>
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
-	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	<c:set var="mode" value="${sessionMap.mode}" />
-	<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
-	
-	<body class="stripes">
-		<!--  If successful reload all the resources and ratings. -->
- 		<script type="text/javascript">
- 			var reqIDVar = new Date();
- 			document.location.href = '<c:url value="/learning/start.do"/>?mode=${mode}&toolSessionID=${toolSessionID}&reqID='+reqIDVar.getTime();	
- 		</script>
-		<div style="align:center">
-			<!--  Should never be seen -->
-			<a href="<c:url value="/learning/start.do"/>?mode=${mode}&toolSessionID=${toolSessionID}" type="button" class="btn btn-primary">
-					<i class="fa fa-xm fa-refresh"></i> <fmt:message key="label.check.for.new" /></a>
-		</div>
-	</body>
-</lams:html>
\ No newline at end of file
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="mode" value="${sessionMap.mode}" />
+<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
+
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${toolSessionID}" >
+	<!--  If successful reload all the resources and ratings. -->
+ 	<script type="text/javascript">
+ 		var reqIDVar = new Date();
+ 		document.location.href = '<c:url value="/learning/start.do"/>?mode=${mode}&toolSessionID=${toolSessionID}&reqID='+reqIDVar.getTime();	
+ 	</script>
+ 	
+	<div style="align:center">
+		<!--  Should never be seen -->
+		<a href="<c:url value="/learning/start.do"/>?mode=${mode}&toolSessionID=${toolSessionID}" type="button" class="btn btn-primary">
+			<i class="fa fa-xm fa-refresh"></i> <fmt:message key="label.check.for.new" />
+		</a>
+	</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_larsrc/web/pages/monitoring/comments.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r06770d77acb444693664d588e5d2e8570adb96aa
--- lams_tool_larsrc/web/pages/monitoring/comments.jsp	(.../comments.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_larsrc/web/pages/monitoring/comments.jsp	(.../comments.jsp)	(revision 06770d77acb444693664d588e5d2e8570adb96aa)
@@ -22,9 +22,11 @@
 
 	<c:set var="title">${requestScope.itemTitle}: <fmt:message key="label.view.comments" /></c:set>
 	<lams:Page title="${title}" type="learner" hideProgressBar="true">
-	
-	<lams:Comments toolSessionId="${requestScope.toolSessionID}" toolSignature="<%=ResourceConstants.TOOL_SIGNATURE%>" mode="${requestScope.mode}"  toolItemId="${requestScope.itemUid}"/>	
-	
+
+		<lams:Comments toolSessionId="${requestScope.toolSessionID}" toolSignature="<%=ResourceConstants.TOOL_SIGNATURE%>"
+			mode="${requestScope.mode}" toolItemId="${requestScope.itemUid}"  bootstrap5="false"
+		/>
+
 	</lams:Page>
 	
 </lams:html>