Index: lams_central/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -r25fa7a462f907084b2a8aa550082d70994d66609 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_central/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
+++ lams_central/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -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_central/web/css/_jquery.jRating_base.scss
===================================================================
diff -u -r6866da235d682d74f883afdd01e00e92d16a13eb -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_central/web/css/_jquery.jRating_base.scss	(.../_jquery.jRating_base.scss)	(revision 6866da235d682d74f883afdd01e00e92d16a13eb)
+++ lams_central/web/css/_jquery.jRating_base.scss	(.../_jquery.jRating_base.scss)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -26,6 +26,9 @@
 	left:0;
 	z-index:3;
 }
+.rating-stars-disabled .jStar {
+	cursor: initial !important;
+}
 
 /** P containing the rate informations **/
 p.jRatingInfos {
Index: lams_learning/web/css/components-learner.scss
===================================================================
diff -u -r7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 7f1d981e3b4b708e15c8cd5bc1cfcf740cec666f)
+++ lams_learning/web/css/components-learner.scss	(.../components-learner.scss)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -133,7 +133,7 @@
     flex-direction: row-reverse;
 }
 
-.activity-bottom-buttons button, .activity-bottom-buttons a  {
+.activity-bottom-buttons button, .activity-bottom-buttons a, button.btn {
     box-shadow: 0px 3px 6px var(--bs-gray-400);
 }
 
@@ -312,12 +312,12 @@
 	font-size: medium;
 }
 
-.div-hover .row {
+.div-hover>div {
 	align-items: center;
 	border-top: 1px solid #ddd;
 	padding: 12px;
 }
-.div-hover .row:hover{
+.div-hover>div:hover{
 	background-color: var(--bs-gray-200);
 }
 
Index: lams_tool_assessment/web/includes/css/assessment.scss
===================================================================
diff -u -rd43d1e67bb589b4f565a222a3f33ea17debc68a7 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision d43d1e67bb589b4f565a222a3f33ea17debc68a7)
+++ lams_tool_assessment/web/includes/css/assessment.scss	(.../assessment.scss)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -122,10 +122,6 @@
     border-radius: 10px
 }
 
-button.btn{
-	box-shadow: 0px 3px 6px var(--bs-gray-400);
-}
-
 .div-hover {
     border-bottom: 1px solid #ddd;
 }
Index: lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/controller/AuthoringController.java
===================================================================
diff -u -r2de8f805211b6433aff4efd6fa9275a1b9933033 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/controller/AuthoringController.java	(.../AuthoringController.java)	(revision 2de8f805211b6433aff4efd6fa9275a1b9933033)
+++ lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/controller/AuthoringController.java	(.../AuthoringController.java)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -352,8 +352,9 @@
 	request.setAttribute("saveUsingLearningAction", saveUsingLearningAction);
 
 	imageGalleryItemForm.setTmpFileUploadId(FileUtil.generateTmpFileUploadId());
-
-	return "pages/authoring/parts/addimage";
+	
+	boolean bootstrap5 = WebUtil.readBooleanParam(request, "bootstrap5", false); 
+	return "pages/authoring/parts/addimage" + (bootstrap5 ? "5" : "");
     }
 
     /**
Index: lams_tool_images/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rc1757980eef39ff24a57df7e3366be5b21c0abae -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision c1757980eef39ff24a57df7e3366be5b21c0abae)
+++ lams_tool_images/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -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_images/web/includes/css/imageGallery.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/web/includes/css/imageGallery.scss	(.../imageGallery.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_images/web/includes/css/imageGallery.scss	(.../imageGallery.scss)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -29,4 +29,11 @@
    display: block; 
    height: 0; 
    clear: both;
+}
+
+#favourite-button {
+	margin-bottom: 1rem;
+}
+.fotorama__caption {
+	opacity: 70%;
 }
\ No newline at end of file
Index: lams_tool_images/web/includes/javascript/uploadImageLearning.js
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/web/includes/javascript/uploadImageLearning.js	(.../uploadImageLearning.js)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_images/web/includes/javascript/uploadImageLearning.js	(.../uploadImageLearning.js)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -5,11 +5,11 @@
         
 function hideMessage(){
 	$("#new-image-input-area").hide();
-    $("#manage-image-buttons").show();
+    $("#manage-image-buttons, #favourite-button").show();
 }
 
 function newImageInit(newImageInitUrl) {
 	showMessage(newImageInitUrl);
-	$("#manage-image-buttons").fadeOut();
+	$("#manage-image-buttons, #favourite-button").fadeOut();
 	$("html, body").animate({ scrollTop: $(document).height() }, "slow");
 }
Index: lams_tool_images/web/pages/authoring/parts/addimage.jsp
===================================================================
diff -u -r49b072598933566cedd795667351678071f03004 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/web/pages/authoring/parts/addimage.jsp	(.../addimage.jsp)	(revision 49b072598933566cedd795667351678071f03004)
+++ lams_tool_images/web/pages/authoring/parts/addimage.jsp	(.../addimage.jsp)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -28,17 +28,17 @@
 			    <label for="file-title">
 			    	<fmt:message key="label.authoring.basic.resource.title.input"/>
 			    </label>
-			    <input type="text" name="title" value="${imageGalleryItemForm.title}" class="form-control input-sm" id="file-title" tabindex="1" maxlength="255"/>
+			    <input type="text" name="title" value="${imageGalleryItemForm.title}" class="form-control input-sm" id="file-title" maxlength="255"/>
 			</div>
 		
 			<div class="form-group">
-				<label for="description">
+				<label for="${saveUsingLearningAction ? 'description__lamstextarea' : 'description'}">
 					<fmt:message key="label.authoring.basic.resource.description.input" />
 				</label>
 
 				<c:choose>
 					<c:when test="${saveUsingLearningAction}">
-						<lams:textarea rows="5" tabindex="2" class="text-area form-control" name="description"></lams:textarea>
+						<lams:textarea rows="5" class="text-area form-control" name="description"></lams:textarea>
 					</c:when>
 					<c:otherwise>
 						<lams:CKEditor id="description" value="${imageGalleryItemForm.description}" width="99%" 
Index: lams_tool_images/web/pages/authoring/parts/addimage5.jsp
===================================================================
diff -u
--- lams_tool_images/web/pages/authoring/parts/addimage5.jsp	(revision 0)
+++ lams_tool_images/web/pages/authoring/parts/addimage5.jsp	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -0,0 +1,72 @@
+<%@ include file="/common/taglibs.jsp"%>
+<c:choose>
+	<c:when test="${saveUsingLearningAction}">
+		<c:set var="FORM_ACTION" value="../learning/saveNewImage.do"/>
+	</c:when>
+	<c:otherwise>
+		<c:set var="FORM_ACTION" value="saveOrUpdateImage.do"/>
+	</c:otherwise>
+</c:choose>
+
+<c:set var="csrfToken"><csrf:token/></c:set>
+<form:form action="${FORM_ACTION}?${csrfToken}" method="post" modelAttribute="imageGalleryItemForm" id="imageGalleryItemForm">
+	<c:set var="sessionMap"	value="${sessionScope[imageGalleryForm.sessionMapID]}" />
+	
+	<div class="card lcard">
+		<div class="card-header">
+			<fmt:message key="label.authoring.basic.add.image" />
+		</div>
+			
+		<div class="card-body">
+			<lams:errors/>
+			<form:hidden path="sessionMapID" />
+			<form:hidden path="imageIndex" />
+	
+			<div class="mb-3">
+			    <label for="file-title">
+			    	<fmt:message key="label.authoring.basic.resource.title.input"/>
+			    </label>
+			    <input type="text" name="title" value="${imageGalleryItemForm.title}" class="form-control input-sm" id="file-title" maxlength="255"/>
+			</div>
+		
+			<div class="mb-3">
+				<label for="${saveUsingLearningAction ? 'description__lamstextarea' : 'description'}">
+					<fmt:message key="label.authoring.basic.resource.description.input" />
+				</label>
+
+				<c:choose>
+					<c:when test="${saveUsingLearningAction}">
+						<lams:textarea rows="5" class="text-area form-control" name="description"></lams:textarea>
+					</c:when>
+					<c:otherwise>
+						<lams:CKEditor id="description" value="${imageGalleryItemForm.description}" width="99%" 
+							contentFolderID="${sessionMap.imageGalleryForm.contentFolderID}" 
+							resizeParentFrameName="new-image-input-area" />
+					</c:otherwise>
+				</c:choose>
+			</div>
+				
+			<div class="mb-3">
+				<c:set var="itemAttachment" value="${imageGalleryItemForm}"/>
+				<div id="itemAttachmentArea">
+					<%@ include file="/pages/authoring/parts/imagefile.jsp"%>
+				</div>
+			</div>
+	
+			<div class="text-center" style="display:none" id="itemAttachmentArea_Busy">
+				<i class="fa fa-refresh fa-spin fa-2x fa-fw text-primary"></i>
+			</div>
+		
+			<div id="uploadButtons" class="mt-3 float-end">
+			    <button type="button" onclick="javascript:cancelImageGalleryItem()" class="btn btn-sm btn-secondary me-2">
+					<i class="fa fa-cancel me-1"></i> <fmt:message key="label.cancel" /> 
+				</button>
+				<button type="button" id="addImageBtn" onclick="javascript:submitImageGalleryItem()" class="btn btn-sm btn-secondary button-add-item">
+					<i class="fa fa-upload me-1"></i> <fmt:message key="label.authoring.basic.add.image" /> 
+				</button>
+			</div>
+			
+		</div>
+	</div>
+
+</form:form>
Index: lams_tool_images/web/pages/learning/learning.jsp
===================================================================
diff -u -r51787e125e5356a3558da7a1443a329f1565ee47 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 51787e125e5356a3558da7a1443a329f1565ee47)
+++ lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -4,6 +4,7 @@
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 <%@ page import="org.lamsfoundation.lams.util.FileUtil" %>
 
+<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}" />
@@ -19,26 +20,17 @@
 	</c:otherwise>
 </c:choose>
 <c:set var="ALLOWED_EXTENSIONS_IMAGE"><%=FileUtil.ALLOWED_EXTENSIONS_IMAGE%></c:set>
+<c:set var="mode" value="${sessionMap.mode}" />
+<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
+<c:set var="imageGallery" value="${sessionMap.imageGallery}" />
+<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
+<c:set var="mediumImageDimensions" value="${sessionMap.mediumImageDimensions}" />
+<c:set var="thumbnailImageDimensions" value="${empty sessionMap.thumbnailImageDimensions ? 100 : sessionMap.thumbnailImageDimensions}" />
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
 
-<lams:html>
-<lams:head>
-	<title>
-		<fmt:message key="label.learning.title" />
-	</title>
-	<%@ include file="/common/header.jsp"%>
-
-	<c:set var="mode" value="${sessionMap.mode}" />
-	<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
-	<c:set var="imageGallery" value="${sessionMap.imageGallery}" />
-	<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
-	<c:set var="mediumImageDimensions" value="${sessionMap.mediumImageDimensions}" />
-	<c:set var="thumbnailImageDimensions" value="${empty sessionMap.thumbnailImageDimensions ? 100 : sessionMap.thumbnailImageDimensions}" />
-	<c:set var="language"><lams:user property="localeLanguage"/></c:set>
-
+<lams:PageLearner title="${imageGallery.title}" toolSessionID="${toolSessionID}" >
 	<link rel="stylesheet" type="text/css" href="<lams:WebAppURL/>/includes/css/fotorama.css"/>
 	<link href="<lams:WebAppURL/>includes/css/imageGallery.css" rel="stylesheet" type="text/css">
-	
     <lams:css suffix="jquery.jRating"/>
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager5.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css">
@@ -52,8 +44,8 @@
 		var UPLOAD_ALLOWED_EXTENSIONS = JSON.parse("[" + "${ALLOWED_EXTENSIONS_IMAGE}".replace(/\.\w+/g, '"$&"') + "]");
 		var LABEL_ITEM_BLANK = '<fmt:message key="error.resource.item.file.blank"/>';
 	</script>
+	<lams:JSImport src="includes/javascript/imageGallerycommon.js" relative="true" />
 	<lams:JSImport src="includes/javascript/imageGalleryitem.js" relative="true" />
-	
 	<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
 	<c:choose>
 		<c:when test="${language eq 'es'}">
@@ -66,13 +58,10 @@
 			<script type="text/javascript" src="${lams}includes/javascript/uppy/el_GR.min.js"></script>
 		</c:when>
 	</c:choose>
-	
 	<lams:JSImport src="includes/javascript/uploadImageLearning.js" relative="true" />
     <lams:JSImport src="includes/javascript/upload.js" />
  	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
  	<lams:JSImport src="includes/javascript/fotorama.js" relative="true" />
- 	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-		
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${toolSessionID}', '', finishSession);
 	
@@ -98,22 +87,18 @@
 					thumbwidth: 80,//${thumbnailImageDimensions},
 					thumbheight: 80,//${thumbnailImageDimensions},
 				    data: [
-						<c:forEach var="image" items="${sessionMap.imageGalleryList}" varStatus="status">
-							<c:set var="description"><div><span class="caption-description">${image.descriptionEscaped}</span></c:set>
-							<c:if test="${!image.createByAuthor && (image.createBy != null)}">
-								<c:set var="portrait"><div class="me-2"><lams:Portrait userId="${image.createBy.userId}"/></div></c:set>
-								<c:set var="portrait">${fn:replace(portrait, "'", "\\'")}</c:set> <%-- escape the url --%>
-								<c:set var="imageAddedBy"><div class="caption-description"><fmt:message key="label.learning.added.by" />&nbsp;<c:out value="${image.createBy.firstName} ${image.createBy.lastName}" escapeXml="true"/></div></c:set>
-								<c:set var="description"><table><tr><td>${portrait}</td><td>${description}${imageAddedBy}</td></tr></table></c:set>
-							</c:if>					
-						
+						<c:forEach var="image" items="${sessionMap.imageGalleryList}" varStatus="status">						
 							{
 								img: "<lams:WebAppURL />download/?uuid=${image.mediumFileDisplayUuid}&preferDownload=false",
 								full: "<lams:WebAppURL />download/?uuid=${image.originalFileDisplayUuid}&preferDownload=false",
 								id: '${image.uid}', // Custom anchor is used with the hash:true option.
-								caption: '<div class="caption-heading">${image.titleEscaped}</div>'
-									+ '${description}'
-									+'</div>',
+								caption:'<div class="card-subheader">${image.titleEscaped}</div>' +
+										'<div>${image.descriptionEscaped}</div>'										
+										<c:if test="${!image.createByAuthor && (image.createBy != null)}">
+											<c:set var="portrait"><lams:Portrait userId="${image.createBy.userId}"/></c:set>
+											<c:set var="portrait">${fn:replace(portrait, "'", "\\'")}</c:set> <%-- escape the url --%>
+											+ '<div class="fst-italic"><fmt:message key="label.learning.added.by" /> <span class="mx-2">${portrait}</span><c:out value="${image.createBy.firstName} ${image.createBy.lastName}" escapeXml="true"/></div>'
+										</c:if>
 								//html: $('selector'), // ...or '<div>123</div>'. Custom HTML inside the frame.
 								//fit: 'cover' // Override the global fit option.
 								//any: 'Any data relative to the frame you want to store'
@@ -155,21 +140,17 @@
 					sessionMapID: "${sessionMapID}"
 				}
 			);
-		}
-				
+		}	
     </script>
-</lams:head>
-<body class="stripes">
-	 <lams:Page type="learner" title="${imageGallery.title}">
-
+	<div class="container-lg">
+	
 		<%--Advanced settings and notices-----------------------------------%>
-
-		<div class="panel">
+		<div id="instructions" class="instructions">
 			<c:out value="${imageGallery.instructions}" escapeXml="false"/>
 		</div>
 		
 		<c:if test="${sessionMap.lockOnFinish and mode != 'teacher'}">
-			<lams:Alert type="danger" id="lock-on-finish" close="false">
+			<lams:Alert5 type="danger" id="lock-on-finish" close="false">
 				<c:choose>
 					<c:when test="${sessionMap.userFinished}">
 						<fmt:message key="message.activityLocked" />
@@ -178,12 +159,11 @@
 						<fmt:message key="message.warnLockOnFinish" />
 					</c:otherwise>
 				</c:choose>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 		
 		<c:if test="${imageGallery.allowRank && (imageGallery.minimumRates ne 0 || imageGallery.maximumRates ne 0)}">
-		
-			<lams:Alert type="info" id="rating-limits" close="false">
+			<lams:Alert5 type="info" id="rating-limits" close="false">
 				<c:choose>
 					<c:when test="${imageGallery.minimumRates ne 0 and imageGallery.maximumRates ne 0}">
 						<fmt:message key="label.rate.limits.reminder">
@@ -209,8 +189,7 @@
 				<fmt:message key="label.rate.limits.topic.reminder">
 					<fmt:param value="<span id='count-rated-items'>${sessionMap.countRatedItems}</span>"/>
 				</fmt:message>
-			</lams:Alert>
-			
+			</lams:Alert5>
 		</c:if>
 		
 		<lams:errors/>
@@ -230,77 +209,40 @@
 		<%--Reflection--------------------------------------------------%>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="panel panel-default mt-2">
-				<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>
-				
-					<div class="panel">
-						<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>
-					</div>
-
-					<c:if test="${mode != 'teacher'}">
-						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-secondary float-start">
-							<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>
 		
 		<%--Bottom buttons-------------------------------------------%>
 
 		<c:if test="${mode != 'teacher'}">
-			<div id="learner-submit" class="mt-2"
+			<div class="activity-bottom-buttons" id="learner-submit"
 				<c:if test="${imageGallery.minimumRates ne 0 && empty sessionMap.currentImage}">style="display:none;"</c:if>
 			>
 				<c:choose>
 					<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<button name="FinishButton" onclick="return continueReflect()" class="btn btn-primary float-end" >
+						<button type="button" name="FinishButton" onclick="return continueReflect()" class="btn btn-primary na">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:when>
 					<c:otherwise>
-						<a href="#nogo" name="FinishButton" id="finishButton" class="btn btn-primary float-end" >
-							<span class="na">
-								<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>
-						</a>
+						<button type="button" name="FinishButton" id="finishButton" class="btn btn-primary na" >
+							<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>
+						</button>
 					</c:otherwise>
 				</c:choose>
 			</div>
 		</c:if>	
 
-	</lams:Page>
-	<%--closes lams:Page--%>
-
-	<div id="footer"></div>
-	<%--closes footer--%>
-
-</body>
-</lams:html>
\ No newline at end of file
+	</div>
+</lams:PageLearner>
Index: lams_tool_images/web/pages/learning/notebook.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_images/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -3,65 +3,10 @@
 <c:set var="sessionMapID" value="${param.sessionMapID}" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
-	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', submitForm);
-	
-		function disableFinishButton() {
-			document.getElementById("finishButton").disabled = true;
-		}
-		
-		function submitForm(){
-			var f = document.getElementById('reflectionForm');
-			f.submit();
-		}
-	</script>
-</lams:head>
-<body class="stripes">
-	<lams:Page type="learner" title="${sessionMap.title}" formID="reflectionForm">
-		
-		<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" modelAttribute="reflectionForm" id="reflectionForm">
-			<form:hidden path="userID" />
-			<form:hidden path="sessionMapID" />
-
-			<lams:errors/>
-
-			<p>
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-			</p>
-
-			<textarea id="focused" rows="5" name="entryText" class="form-control"></textarea>
-
-			<a href="#nogo" class="btn btn-primary mt-2 float-end" id="finishButton"">
-				<div class="na"> 
-					<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>
-				</div>
-			</a>
+<lams:Notebook title="${sessionMap.title}"
+	toolSessionID="${sessionMap.toolSessionID}"
+	instructions="${sessionMap.reflectInstructions}"
+	isNextActivityButtonSupported="true"
+	isLastActivity="${sessionMap.isLastActivity}" 
+	notebookLabelKey="label.monitoring.summary.title.reflection"/>
 				
-		</form:form>
-	
-		<div id="footer">
-		</div>
-		<!--closes footer-->
-	
-	</lams:Page>
-
-	<script type="text/javascript">
-		window.onload = function() {
-			document.getElementById("focused").focus();
-		}
-	</script>
-</body>
-</lams:html>
Index: lams_tool_images/web/pages/learning/parts/commentsarea.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r8de3eaa9202afa22c16447d5236943cbe4749eb1
--- lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision 8de3eaa9202afa22c16447d5236943cbe4749eb1)
@@ -10,6 +10,11 @@
 <c:set var="finishedLock" value="${sessionMap.finishedLock}" />
 <c:set var="isImageSelected" value="${not empty sessionMap.currentImage}" />
 <c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
+<style>
+	#new-image-input-area {
+		clear: both;
+	}
+</style>
 
 <lams:JSImport src="includes/javascript/common.js" />
 <c:if test="${isImageSelected}">
@@ -23,7 +28,6 @@
 		COMMENTS_MIN_WORDS_LIMIT = ${sessionMap.commentsMinWordsLimit},
 		MAX_RATES = ${imageGallery.maximumRates},
 		MIN_RATES = ${imageGallery.minimumRates},
-		LAMS_URL = '${lams}',
 		COUNT_RATED_ITEMS = ${sessionMap.countRatedItems},
 		COMMENT_TEXTAREA_TIP_LABEL = '<fmt:message key="label.comment.textarea.tip"/>',
 		WARN_COMMENTS_IS_BLANK_LABEL = '<fmt:message key="error.resource.image.comment.blank"/>',
@@ -62,11 +66,9 @@
 	<%--Ranking area---------------------------------------%>
 	
 	<c:if test="${imageGallery.allowRank && isImageSelected}">
-		
 		<lams:Rating5 itemRatingDto="${sessionMap.itemRatingDto}" disabled="${finishedLock}" isItemAuthoredByUser="${sessionMap.isAuthor}"
 				maxRates="${imageGallery.maximumRates}" countRatedItems="${sessionMap.countRatedItems}"
 				minNumberWordsLabel="label.minimum.number.words" />
-		<br><br>
 	</c:if>
 
 	<div id="extra-controls">
@@ -78,7 +80,7 @@
 					<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
 					<input type="hidden" name="imageUid" value="${sessionMap.currentImage.uid}"/>
 
-					<div class="form-check mt-2 me-0">
+					<div id="favourite-button" class="form-check float-end">
 						<input type="checkbox" name="vote" class="form-check-input" id="voting-form-checkbox" 
 								<c:if test="${finishedLock}">disabled="disabled"</c:if>	
 								<c:if test="${sessionMap.isVoted}">checked="checked"</c:if>	
@@ -100,22 +102,22 @@
 			
 			<%--"Check for new", "Add new image" and "Delete" buttons---------------%>
 				
-			<div id="manage-image-buttons" class="btn-group" role="group">	
+			<div id="manage-image-buttons" class="btn-group" role="group" aria-label="Control buttons">	
 				<c:if test="${imageGallery.allowShareImages}">
-					<button onclick="return checkNew()" class="btn btn-sm btn-secondary" id="check-for-new-button"> 
-						<i class="fa fa-refresh"></i> <fmt:message key="label.check.for.new" /> 
+					<button onclick="return checkNew()" class="btn btn-sm btn-outline-secondary" id="check-for-new-button"> 
+						<i class="fa fa-refresh me-1"></i> <fmt:message key="label.check.for.new" /> 
 					</button>
 								
 					<c:if test="${not finishedLock}">
-						<button onclick="javascript:newImageInit('<lams:WebAppURL />authoring/newImageInit.do?sessionMapID=${sessionMapID}&saveUsingLearningAction=true');"
-								class="btn btn-secondary btn-sm" id="add-new-image-button">  
-							<i class="fa fa-upload"></i> <fmt:message key="label.learning.add.new.image" />
+						<button onclick="javascript:newImageInit('<lams:WebAppURL />authoring/newImageInit.do?sessionMapID=${sessionMapID}&bootstrap5=true&saveUsingLearningAction=true');"
+								class="btn btn-outline-secondary btn-sm" id="add-new-image-button">  
+							<i class="fa fa-upload me-1"></i> <fmt:message key="label.learning.add.new.image" />
 						</button>
 					</c:if>
 					
 					<c:if test="${sessionMap.isAuthor}">
-						<button href="#nogo" onclick="return deleteImage(${sessionMap.currentImage.uid});" class="btn btn-secondary btn-sm" id="delete-button"> 
-							<i class="fa fa-trash"></i> <fmt:message key="label.learning.delete.image" /> 
+						<button href="#nogo" onclick="return deleteImage(${sessionMap.currentImage.uid});" class="btn btn-outline-secondary btn-sm" id="delete-button"> 
+							<i class="fa fa-trash me-1"></i> <fmt:message key="label.learning.delete.image" /> 
 						</button>
 					</c:if>
 				</c:if>