Index: lams_tool_mindmap/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r97b9227e4f759db2510bc57ef24be3a3ef714bfc -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 97b9227e4f759db2510bc57ef24be3a3ef714bfc)
+++ lams_tool_mindmap/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -131,3 +131,7 @@
 label.gallery.walk.state.finished = finished
 label.gallery.walk.state.learner.edit.enabled = , learners can modify answers
 button.print = Print
+label.background.color = Background color of an idea
+label.enter.full.screen = Enter full screen
+label.exit.full.screen = Exit full screen
+
Index: lams_tool_mindmap/src/java/org/lamsfoundation/lams/tool/mindmap/web/controller/LearningController.java
===================================================================
diff -u -r561bb65551f1a629adc974c1fb2d48e42e764115 -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/src/java/org/lamsfoundation/lams/tool/mindmap/web/controller/LearningController.java	(.../LearningController.java)	(revision 561bb65551f1a629adc974c1fb2d48e42e764115)
+++ lams_tool_mindmap/src/java/org/lamsfoundation/lams/tool/mindmap/web/controller/LearningController.java	(.../LearningController.java)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -568,7 +568,7 @@
 	// Reflection
 	NotebookEntry entry = mindmapService.getEntry(mindmapUser.getEntryUID());
 	if (entry != null) {
-	    request.setAttribute("reflectEntry", entry.getEntry());
+	    learningForm.setEntryText(entry.getEntry());
 	}
 
 	request.setAttribute(AttributeNames.ATTR_IS_LAST_ACTIVITY,
Index: lams_tool_mindmap/web/common/mapjs.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/web/common/mapjs.jsp	(.../mapjs.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_mindmap/web/common/mapjs.jsp	(.../mapjs.jsp)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -8,9 +8,14 @@
 <%-- <script src="${tool}includes/javascript/mapjs/main.js"></script> --%>
 <%-- <script src="${tool}includes/javascript/mapjs/underscore-min.js"></script> --%>
 <%-- <script src="${tool}includes/javascript/fullscreen.js"></script> --%>
+<style>
+	/* hack to display tooltip even when input is disabled */
+	#background-color[disabled], [data-bs-toggle="tooltip"].disabled {
+	    pointer-events: auto !important;
+	}
+</style>
 
 <script type="text/javascript">
-
 	var initialActionId = null,  // multiuser request tracking
 		lastActionId = null, 	// multiuser request tracking
 		// Requests already processed:
@@ -425,61 +430,113 @@
 </c:if>
 </script>	
 
-	<div class="full-screen-content-div">
+<div class="full-screen-content-div">
 	<div class="full-screen-flex-div">
-	<div class="full-screen-main-div">
-	
-	<c:if test="${contentEditable and (mode == 'learner' || mode == 'author')}">
-		<div>
-		<c:if test="${not multiMode}">
-			<div class="hint"><fmt:message key="label.your.mindmap.saved.every.minute"/><lams:WaitingSpinner id="spinnerArea_Busy" showInline="true"/></div>
-		</c:if>
-		</div>
-	</c:if>	
+		<div class="full-screen-main-div">
 
-	<div id="mindmap-controls">
-	
-		<!-- Color picker & expand buttons must be outside the next div or it can't float on top of the mindmap. The float is done in javascript. -->
-		<div style="display:inline" role="group">
-        <a href="#" class="btn btn-secondary btn-sm full-screen-launch-button float-end ms-1" id="expand" onclick="javascript:launchIntoFullscreen(this)"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a> 
-        <a href="#" class="btn btn-secondary btn-sm full-screen-exit-button float-end ms-1" id="shrink" onclick="javascript:exitFullscreen()" style="display: none;"><i class="fa fa-compress" aria-hidden="true"></i></a> 
-		
-		<c:if test="${param.allowPrinting}">
-			<a href="#" class="btn btn-secondary btn-sm float-end ms-1" id="print" onclick="javascript:showPrintView()"
-			   title="<fmt:message key='button.print'/>"><i class="fa fa-print" aria-hidden="true"></i></a> 
-		</c:if>
-		
-		<input type="text" id="background-color" class='updateStyle form-control form-control-sm' data-mm-target-property='background' size="7" width="180px">
+			<c:if test="${contentEditable and (mode == 'learner' || mode == 'author') and not multiMode}">
+				<div class="alert alert-secondary" role="alert">
+					<fmt:message key="label.your.mindmap.saved.every.minute" />
+					<lams:WaitingSpinner id="spinnerArea_Busy" showInline="true" />
+				</div>
+			</c:if>
 
-		</div>
-		 
-		<div>
-			<div class="btn-group btn-group-sm" role="group">
-			<a href="#" class="resetView btn btn-secondary btn-sm"><fmt:message key='label.zoom'/>:</a>
-			<a href="#" class="resetView btn btn-secondary btn-sm"><fmt:message key='label.zoom.reset'/></a>
-			<a href="#" class="scaleUp btn btn-secondary btn-sm" title="<fmt:message key='label.zoom.increase'/>"><i class="fa fa-lg fa-search-plus"></i></a>
-			<a href="#" class="scaleDown btn btn-secondary btn-sm" title="<fmt:message key='label.zoom.decrease'/>"><i class="fa fa-lg fa-search-minus"></i></a>
+			<div id="mindmap-controls">
+
+				<!-- Color picker & expand buttons must be outside the next div or it can't float on top of the mindmap. The float is done in javascript. -->
+				<div style="display: inline" role="group">
+					<button type="button" class="btn btn-secondary btn-sm full-screen-launch-button float-end ms-1" id="expand"
+						onclick="javascript:launchIntoFullscreen(this)"
+						data-bs-toggle="tooltip" data-bs-original-title="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.enter.full.screen' /></spring:escapeBody>"
+						aria-label="<fmt:message key='label.enter.full.screen' />"						
+					> 
+						<i class="fa-solid fa-maximize" aria-hidden="true"></i>
+					</button> 
+					
+					<button type="button" class="btn btn-secondary btn-sm full-screen-exit-button float-end ms-1" id="shrink"
+						onclick="javascript:exitFullscreen()" style="display: none;"
+						title="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.exit.full.screen' /></spring:escapeBody>"
+						aria-label="<fmt:message key='label.exit.full.screen' />"
+					> 
+						<i class="fa fa-compress" aria-hidden="true"></i>
+					</button>
+
+					<c:if test="${param.allowPrinting}">
+						<button type="button" class="btn btn-secondary btn-sm float-end ms-1" id="print" onclick="javascript:showPrintView()"
+							title="<fmt:message key='button.print'/>"
+						>
+							<i class="fa fa-print" aria-hidden="true"></i>
+						</button>
+					</c:if>
+
+					<input type="text" id="background-color" class='updateStyle btn btn-secondary btn-sm' 
+						data-mm-target-property='background' size="7" width="180px" 
+						data-bs-toggle="tooltip" data-bs-original-title="<spring:escapeBody javaScriptEscape='true'><fmt:message key='label.background.color' /></spring:escapeBody>"
+						aria-label="<fmt:message key='label.background.color' />"
+					>
+				</div>
+
+				<div>
+					<div class="btn-group mt-1" role="group">
+						<button type="button" class="resetView btn btn-secondary btn-sm">
+							<fmt:message key='label.zoom' />:<fmt:message key='label.zoom.reset' />							
+						</button> 
+						<button type="button" class="scaleUp btn btn-secondary btn-sm"
+							title="<fmt:message key='label.zoom.increase'/>"
+						>
+							<i class="fa fa-lg fa-search-plus"></i>
+						</button> 
+						<button type="button" class="scaleDown btn btn-secondary btn-sm"
+							title="<fmt:message key='label.zoom.decrease'/>"
+						>
+							<i class="fa fa-lg fa-search-minus"></i>
+						</button>
+					</div>
+
+					<div style="display: inline-block" role="group" class="btn-group mt-1">
+						<button type="button" class="toggleCollapse btn btn-secondary btn-sm"
+							title="<fmt:message key='label.expand.collapse.idea'/>"
+						>
+							<i class="fa fa-lg fa-navicon"></i>
+							<span class="d-none d-sm-inline">&nbsp;
+								<fmt:message key='label.expand.collapse.idea'/>
+							</span>
+						</button>
+						<c:if test="${contentEditable}">
+							<button type="button" class="addSubIdea btn btn-secondary btn-sm" title="<fmt:message key='label.add.idea'/>">
+								<i class="fa-regular fa-lg fa-square-plus"></i>
+								<span class="d-none d-sm-inline">
+									&nbsp;
+									<fmt:message key='label.add.idea' />
+								</span>
+							</button>
+							<button type="button" class="editNode btn btn-secondary btn-sm" title="<fmt:message key='label.edit.idea.text'/>">
+								<i class="fa-regular fa-lg fa-pen-to-square"></i>
+								<span class="d-none d-sm-inline">
+									&nbsp;
+									<fmt:message key='label.edit.idea.text' />
+								</span>
+							</button>
+							<button type="button" class="removeSubIdea btn btn-secondary btn-sm" title="<fmt:message key='label.delete.idea'/>">
+								<i class="fa-regular fa-lg fa-trash-can"></i>
+								<span class="d-none d-sm-inline">
+									&nbsp;
+									<fmt:message key='label.delete.idea' />
+								</span>
+							</button>
+							<%-- Not yet implemented in back end  --%>
+							<%-- 		<input type="button" data-mm-action="export-image" value="Export To Image"/>  --%>
+							<%--  		<input type="button" class="insertRoot" value="add root node">  --%>
+							<%-- 		<input type="button" class="makeSelectedNodeRoot" value="make root">  --%>
+						</c:if>
+					</div>
+				</div>
 			</div>
-			
-			<div style="display:inline-block" role="group">
-		 	<a href="#" class="toggleCollapse btn btn-secondary btn-sm" title="<fmt:message key='label.expand.collapse.idea'/>"><i class="fa fa-lg fa-navicon"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.expand.collapse.idea'/></span></a>
-		<c:if test="${contentEditable}">
-			<a href="#" class="addSubIdea btn btn-secondary btn-sm" title="<fmt:message key='label.add.idea'/>"><i class="fa fa-lg fa-plus-square-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.add.idea'/></span></a>
-			<a href="#" class="editNode btn btn-secondary btn-sm" title="<fmt:message key='label.edit.idea.text'/>"><i class="fa fa-lg fa-pencil-square-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.edit.idea.text'/></span></a>		
-			<a href="#" class="removeSubIdea btn btn-secondary btn-sm" title="<fmt:message key='label.delete.idea'/>"><i class="fa fa-lg fa-trash-o"></i><span class="d-none d-sm-block">&nbsp;<fmt:message key='label.delete.idea'/></span></a>
-	<%-- Not yet implemented in back end  --%> 
-	<%-- 		<input type="button" data-mm-action="export-image" value="Export To Image"/>  --%> 
-	<%--  		<input type="button" class="insertRoot" value="add root node">  --%> 
-	<%-- 		<input type="button" class="makeSelectedNodeRoot" value="make root">  --%> 
-	 	</c:if>
-	 		</div>
- 		</div>
-	</div>
 
- 	<div id="mindmap-container"></div>
- 	<style id="themecss">
-	</style>
-	
+			<div id="mindmap-container"></div>
+			<style id="themecss">
+			</style>
+
+		</div>
 	</div>
-	</div>
-	</div>
+</div>
Index: lams_tool_mindmap/web/common/taglibs.jsp
===================================================================
diff -u -r9cbba0026b9584b2e4bcba57f0d5a8510bdb5846 -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/web/common/taglibs.jsp	(.../taglibs.jsp)	(revision 9cbba0026b9584b2e4bcba57f0d5a8510bdb5846)
+++ lams_tool_mindmap/web/common/taglibs.jsp	(.../taglibs.jsp)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -3,4 +3,5 @@
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %> 
Index: lams_tool_mindmap/web/pages/learning/galleryWalk.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/web/pages/learning/galleryWalk.jsp	(.../galleryWalk.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_mindmap/web/pages/learning/galleryWalk.jsp	(.../galleryWalk.jsp)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -3,34 +3,15 @@
 <c:set var="lams"><lams:LAMSURL/></c:set>
 <c:set var="tool"><lams:WebAppURL/></c:set>
 	
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
+<lams:PageLearner title="${mindmapDTO.title}" toolSessionID="${toolSessionID}" >
 	
-	<lams:css/>
 	<lams:css suffix="jquery.jRating"/>
-	
 	<style>
 		#gallery-walk-rating-table {
 			width: 60%;
 			margin: 50px auto;
-			border-bottom: 1px solid #ddd;
 		}
 		
-		#gallery-walk-rating-table th {
-			font-weight: bold;
-			font-style: normal;
-			text-align: center;
-		}
-		
-		#gallery-walk-rating-table td {
-			text-align: center;
-		}
-		
-		#gallery-walk-rating-table th:first-child, #gallery-walk-rating-table td:first-child {
-			text-align: right;
-		}
-		
 		.gallery-walk-rating-comment-container {
 			width: 60%;
 			margin: auto;
@@ -52,9 +33,6 @@
 	</style>
 	
 	<lams:JSImport src="includes/javascript/common.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
 	<script type="text/javascript">
 			//var for jquery.jRating.js
 		var pathToImageFolder = "${lams}images/css/",
@@ -63,7 +41,6 @@
 			YOUR_RATING_LABEL = '<fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message>',
 			MAX_RATES = 0,
 			MIN_RATES = 0,
-			LAMS_URL = '${lams}',
 			COUNT_RATED_ITEMS = true,
 			COMMENTS_MIN_WORDS_LIMIT = 0,
 			COMMENT_TEXTAREA_TIP_LABEL = '<fmt:message key="label.comment.textarea.tip"/>',
@@ -72,10 +49,12 @@
 			SESSION_ID = ${toolSessionID};
 			
 		checkNextGateActivity('finish-button', '${toolSessionID}', '', finishSession);
+
+		$(document).ready(function(){
+			$('[data-bs-toggle="tooltip"]').each((i, el) => {
+				new bootstrap.Tooltip($(el))
+			});
 			
-	    $(document).ready(function(){
-			$('[data-bs-toggle="tooltip"]').bootstrapTooltip();
-			
 			// show mindmaps only on Group expand
 			$('.mindmap-collapse').on('show.bs.collapse', function(){
 				var mindmap = $('.mindmap-frame', this);
@@ -95,52 +74,51 @@
 		}
 	</script>
 	<lams:JSImport src="includes/javascript/rating.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-	
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>	
 	<%@ include file="websocket.jsp"%>	
-</lams:head>
-<body class="stripes">
 
-<lams:Page type="learner" title="${mindmapDTO.title}" style="">
-
+<div id="container-main">
 	<lams:errors/>
 	
-	<p><c:out value="${mindmapDTO.instructions}" escapeXml="false" /></p>
-	
-	<c:if test="${not empty mindmapDTO.galleryWalkInstructions}">
-		<hr>
-		<p><c:out value="${mindmapDTO.galleryWalkInstructions}" escapeXml="false" /></p>
-	</c:if>
+	<div id="instructions" class="instructions">
+		<c:out value="${mindmapDTO.instructions}" escapeXml="false" />
 		
+		<c:if test="${not empty mindmapDTO.galleryWalkInstructions}">
+			<div class="mt-3">
+				<c:out value="${mindmapDTO.galleryWalkInstructions}" escapeXml="false" />
+			</div>
+		</c:if>
+	</div>
+
 	<c:if test="${mindmapDTO.galleryWalkFinished and not mindmapDTO.galleryWalkReadOnly}">
-		<h4 class="text-center mt-4">
+		<div class="text-center my-3 card-subheader">
 			<fmt:message key="label.gallery.walk.ratings.header" />
-		</h4>
-		<table id="gallery-walk-rating-table" class="table table-hover table-sm">
-		  <thead class="table-light">
-		    <tr>
-		      <th scope="col"><fmt:message key="monitoring.label.group" /></th>
-		      <th scope="col"><fmt:message key="label.rating" /></th>
-		    </tr>
-		  </thead>
-		  <tbody>
+		</div>
+		
+		<div id="gallery-walk-rating-table" class="ltable table-sm">
+			<div class="row table-lightx">
+		    	<div class="col"><fmt:message key="monitoring.label.group" /></div>
+		    	<div class="col text-center"><fmt:message key="label.rating" /></div>
+			</div>
+		  
 			<c:forEach var="mindmapSession" items="${mindmapDTO.sessionDTOs}">
-				<tr>
-					<td>${mindmapSession.sessionName}</td>
-					<td>
+				<div class="row">
+					<div class="col">
+						${mindmapSession.sessionName}
+					</div>
+					<div class="col">
 						<lams:Rating5 itemRatingDto="${mindmapSession.itemRatingDto}" 
 									 isItemAuthoredByUser="true"
 									 hideCriteriaTitle="true" />
-					</td>
-				</tr>
+					</div>
+				</div>
 			</c:forEach>
-		  </tbody>
-		</table>
+		</div>
 	</c:if>
 	
-	<h4 class="text-center mt-4">
+	<div class="text-center my-3 card-subheader">
 		<fmt:message key="label.gallery.walk" />
-	</h4>
+	</div>
 	
 	<c:if test="${mode == 'author'}">
 		<lams:Alert5 type="info" id="gallery-walk-preview-info" close="false">
@@ -149,10 +127,10 @@
 	</c:if>
 
 	<c:forEach var="mindmapSession" items="${mindmapDTO.sessionDTOs}" varStatus="status">
-	    <div class="panel panel-default">
-	       <div class="panel-heading" role="tab" id="heading${mindmapSession.sessionID}">
-	       	<span class="panel-title collapsable-icon-left">
-	       		<button type="button" class="btn btn-secondary collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${mindmapSession.sessionID}" 
+	    <div class="card lcard">
+	       <div class="card-header" id="heading${mindmapSession.sessionID}">
+	       	<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${mindmapSession.sessionID}" 
 						aria-expanded="false" aria-controls="collapse${mindmapSession.sessionID}"
 				>
 					<c:choose>
@@ -167,8 +145,8 @@
 			</span>
 	       </div>
 	       
-	       <div id="collapse${mindmapSession.sessionID}" class="panel-collapse collapse mindmap-collapse" 
-	       	    role="tabpanel" aria-labelledby="heading${mindmapSession.sessionID}">
+	       <div id="collapse${mindmapSession.sessionID}" class="card-body panel-collapse collapse mindmap-collapse" 
+	       	    aria-labelledby="heading${mindmapSession.sessionID}">
 				<%-- Do not show rating to own group before Gallery Walk is finished --%>
 	       	    <c:if test="${not mindmapDTO.galleryWalkReadOnly and (mindmapDTO.galleryWalkFinished or mode == 'teacher' or toolSessionID != mindmapSession.sessionID)}">
 	       	    	<div class="gallery-walk-rating-comment-container">
@@ -188,8 +166,8 @@
 		<div class="activity-bottom-buttons">
 			<c:choose>
 				<c:when test="${not mindmapDTO.galleryWalkFinished}">
-					<button data-bs-toggle="tooltip" 
-							class="btn btn-primary ${mode == 'author' ? '' : 'disabled'}"
+					<button type="button" data-bs-toggle="tooltip" 
+							class="btn btn-primary na ${mode == 'author' ? '' : 'disabled'}"
 							<c:choose>
 								<c:when test="${mode == 'author'}">
 									title="<fmt:message key='label.gallery.walk.wait.finish.preview' />"
@@ -203,15 +181,16 @@
 						<fmt:message key="button.continue" />
 					</button>
 				</c:when>
+				
 				<c:when test="${reflectOnActivity and not finishedActivity}">
-					<button name="FinishButton" id="finish-button"
-							onclick="return continueReflect()" class="btn btn-primary">
+					<button type="button" name="FinishButton" id="finish-button"
+							onclick="return continueReflect()" class="btn btn-primary na">
 						<fmt:message key="button.continue" />
 					</button>
 				</c:when>
+				
 				<c:otherwise>
-					<a href="#nogo" name="FinishButton" id="finish-button" class="btn btn-primary na">
-						<span class="nextActivity">
+					<button type="button" name="FinishButton" id="finish-button" class="btn btn-primary na">
 							<c:choose>
 			 					<c:when test="${sessionMap.isLastActivity}">
 			 						<fmt:message key="button.submit" />
@@ -220,12 +199,10 @@
 			 		 				<fmt:message key="button.finish" />
 			 					</c:otherwise>
 			 				</c:choose>
-						</span>
-					</a>
+					</button>
 				</c:otherwise>
 			</c:choose>
 		</div>
 	</c:if>
-</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_mindmap/web/pages/learning/mindmap.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/web/pages/learning/mindmap.jsp	(.../mindmap.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_mindmap/web/pages/learning/mindmap.jsp	(.../mindmap.jsp)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -1,158 +1,136 @@
 <!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>
-		<c:set var="lams"><lams:LAMSURL /></c:set>
-		<c:set var="tool"><lams:WebAppURL /></c:set>
-	<lams:head>  
-		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
-		<title>
-			<fmt:message key="activity.title" />
-		</title>
-		<lams:css/>
+<lams:PageLearner title="${mindmapDTO.title}" toolSessionID="${learningForm.toolSessionID}" >
+	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.minicolors.css"></link>
+	<link rel="stylesheet" type="text/css" href="${tool}includes/css/mapjs.css"></link>
+	<link rel="stylesheet" type="text/css" href="${tool}includes/css/mindmap.css"></link>
 	
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-		<lams:JSImport src="includes/javascript/common.js" />
+	<lams:JSImport src="includes/javascript/common.js" />
+	<script src="${lams}includes/javascript/jquery.minicolors.min.js"></script>
+	<script src="${lams}includes/javascript/fullscreen.js"></script>
+	<script src="${tool}includes/javascript/jquery.timer.js"></script>
+	<script src="${tool}includes/javascript/mapjs/main.js"></script>
+	<script src="${tool}includes/javascript/mapjs/underscore-min.js"></script>
+	<script type="text/javascript">
+		checkNextGateActivity('finishButton', '${learningForm.toolSessionID}', '', submitForm);
 		
-		<link rel="stylesheet" type="text/css" href="${lams}css/jquery.minicolors.css"></link>
-		<link rel="stylesheet" type="text/css" href="${tool}includes/css/mapjs.css"></link>
-		<link rel="stylesheet" type="text/css" href="${tool}includes/css/mindmap.css"></link>
-		
-		<script src="${lams}includes/javascript/jquery.minicolors.min.js"></script>
-		<script src="${lams}includes/javascript/fullscreen.js"></script>
-		<script src="${tool}includes/javascript/jquery.timer.js"></script>
-		<script src="${tool}includes/javascript/mapjs/main.js"></script>
-		<script src="${tool}includes/javascript/mapjs/underscore-min.js"></script>
-		
-		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-		<script type="text/javascript">
-			checkNextGateActivity('finishButton', '${learningForm.toolSessionID}', '', submitForm);
-		
-			var mode = "${mode}";		// learner, teacher, ...
+		var mode = "${mode}";		// learner, teacher, ...
 			
-			function disableButtons() {
-				$("#finishButton, #continueButton").attr("disabled", true);
-				// show the waiting area during the upload
-				$("#spinnerArea_Busy").show();
-			}
+		function disableButtons() {
+			$("#finishButton, #continueButton").attr("disabled", true);
+			// show the waiting area during the upload
+			$("#spinnerArea_Busy").show();
+		}
 		
-			function enableButtons() {
-				$("#spinnerArea_Busy").hide();
-				$("#finishButton, #continueButton").removeAttr("disabled");
-			}
+		function enableButtons() {
+			$("#spinnerArea_Busy").hide();
+			$("#finishButton, #continueButton").removeAttr("disabled");
+		}
 		
-			function submitForm() {
-				var mindmapContent = document.getElementById("mindmapContent");
-				mindmapContent.value = JSON.stringify(contentAggregate);
-		 	 	var f = document.getElementById('learningForm');
-		 		f.submit();
-			}
+		function submitForm() {
+			var mindmapContent = document.getElementById("mindmapContent");
+			mindmapContent.value = JSON.stringify(contentAggregate);
+		 	var f = document.getElementById('learningForm');
+			f.submit();
+		}
 
-			$(document).ready(function(){
-				$('[data-bs-toggle="tooltip"]').bootstrapTooltip();
+		$(document).ready(function() {
+			$('[data-bs-toggle="tooltip"]').each((i, el) => {
+				new bootstrap.Tooltip($(el))
 			});
-		</script>
+		});
+	</script>	
+	<%@ include file="websocket.jsp"%>
 		
-		<%@ include file="websocket.jsp"%>		
-	</lams:head>
-
-	<body class="stripes">
-		
+	<div id="container-main">
 		<form:form action="${reflectOnActivity ? 'reflect.do' : 'finishActivity.do'}" method="post" onsubmit="return false;" modelAttribute="learningForm" id="learningForm">
 			<input type="hidden" name="userId" value="${userIdParam}" />
+			<input type="hidden" name="userUid" value="${userUid}" />
 			<input type="hidden" name="toolContentId" value="${toolContentID}" />
 			<form:hidden path="toolSessionID" />
 			<form:hidden path="mindmapContent" id="mindmapContent" />
-		
-			<lams:Page type="learner" title="${mindmapDTO.title}" hideProgressBar="${isMonitor}" formID="learningForm">
-			
-				<%--Advanced settings and notices-----------------------------------%>
 				
-				<div class="panel">
-					<c:out value="${mindmapDTO.instructions}" escapeXml="false"/>
-				</div>
+			<div id="instructions" class="instructions">
+				<c:out value="${mindmapDTO.instructions}" escapeXml="false"/>
+			</div>
 			
-				<c:if test="${mindmapDTO.lockOnFinish and  mode != 'teacher' }">
-					<lams:Alert type="danger" id="lock-on-finish" close="false">
-						<c:choose>
-							<c:when test="${finishedActivity}">
-								<fmt:message key="message.activityLocked" />
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="message.warnLockOnFinish" />
-							</c:otherwise>
-						</c:choose>
-					</lams:Alert>
-				</c:if>
-				
-				 <c:if test="${not empty submissionDeadline && (mode == 'author' || mode == 'learner')}">
-					 <lams:Alert id="submission-deadline" close="true" type="info">
-					  	<fmt:message key="authoring.info.teacher.set.restriction" >
-					  		<fmt:param><lams:Date value="${submissionDeadline}" /></fmt:param>
-					  	</fmt:message>
-					 </lams:Alert>
-				 </c:if>
+			<%--Advanced settings and notices-----------------------------------%>
 			
-				&nbsp;
+			<c:if test="${mindmapDTO.lockOnFinish and  mode != 'teacher' }">
+				<lams:Alert5 type="danger" id="lock-on-finish" close="false">
+					<c:choose>
+						<c:when test="${finishedActivity}">
+							<fmt:message key="message.activityLocked" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="message.warnLockOnFinish" />
+						</c:otherwise>
+					</c:choose>
+				</lams:Alert5>
+			</c:if>
 				
-				<%--MindMup -----------------------------------%>
-				<%@ include file="/common/mapjs.jsp"%>
-		 		<%-- End MindMup -----------------------------------%>
+			 <c:if test="${not empty submissionDeadline && (mode == 'author' || mode == 'learner')}">
+				 <lams:Alert5 id="submission-deadline" close="true" type="info">
+				  	<fmt:message key="authoring.info.teacher.set.restriction" >
+				  		<fmt:param><lams:Date value="${submissionDeadline}" /></fmt:param>
+				  	</fmt:message>
+				 </lams:Alert5>
+			 </c:if>
+				
+			<%--MindMup -----------------------------------%>
+			<%@ include file="/common/mapjs.jsp"%>
 		 		
-				<div class="activity-bottom-buttons">
+			<div class="activity-bottom-buttons">
 					<c:choose>
 						<c:when test="${isMonitor}">
-							<button class="btn btn-primary" name="backButton" onclick="history.go(-1)">
+							<button type="button" class="btn btn-primary" name="backButton" onclick="history.go(-1)">
 								<fmt:message key="button.back"/>
 							</button>
 						</c:when>
 					
 						<c:otherwise>
 							<c:choose>
 								<c:when test="${mindmapDTO.galleryWalkEnabled}">
-									<button data-bs-toggle="tooltip" 
-											class="btn btn-primary ${mode == 'author' ? '' : 'disabled'}"
-											<c:choose>
-												<c:when test="${mode == 'author'}">
-													title="<fmt:message key='label.gallery.walk.wait.start.preview' />"
-													onClick="javascript:location.href = location.href + '&galleryWalk=forceStart'"
-												</c:when>
-												<c:otherwise>
-													title="<fmt:message key='label.gallery.walk.wait.start' />"
-												</c:otherwise>
-											</c:choose>
-										>
+									<button type="button" data-bs-toggle="tooltip" class="btn btn-primary na ${mode == 'author' ? '' : 'disabled'}"
+										<c:choose>
+											<c:when test="${mode == 'author'}">
+												title="<fmt:message key='label.gallery.walk.wait.start.preview' />"
+												onClick="javascript:location.href = location.href + '&galleryWalk=forceStart'"
+											</c:when>
+											<c:otherwise>
+												title="<fmt:message key='label.gallery.walk.wait.start' />"
+											</c:otherwise>
+										</c:choose>
+									>
 										<fmt:message key="button.continue" />
 									</button>
 								</c:when>
+								
 								<c:when test="${reflectOnActivity}">
-									<a href="javascript:submitForm();" class="btn btn-primary" id="continueButton">
+									<button type="button" onclick="javascript:submitForm();" class="btn btn-primary na" id="continueButton">
 										   <span class="nextActivity"><fmt:message key="button.continue"/></span>
-									</a>
+									</button>
 								</c:when>
 				
 								<c:otherwise>
-									<button type="button" class="btn btn-primary" id="finishButton">
-										<span class="na">
-											<c:choose>
-							 					<c:when test="${isLastActivity}">
-							 						<fmt:message key="button.submit" />
-							 					</c:when>
-							 					<c:otherwise>
-							 		 				<fmt:message key="button.finish" />
-							 					</c:otherwise>
-							 				</c:choose>
-									 	</span>
+									<button type="button" class="btn btn-primary na" id="finishButton">
+										<c:choose>
+							 				<c:when test="${isLastActivity}">
+							 					<fmt:message key="button.submit" />
+							 				</c:when>
+							 				<c:otherwise>
+							 					<fmt:message key="button.finish" />
+							 				</c:otherwise>
+							 			</c:choose>
 									</button>
 								</c:otherwise>
 							</c:choose>
 						</c:otherwise>
 					</c:choose>
-				</div>
-		
-			</lams:Page>
-		</form:form>
-		<div class="footer"></div>					
-	</body>
-</lams:html>
\ No newline at end of file
+			</div>
+		</form:form>				
+	</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_tool_mindmap/web/pages/learning/reflect.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/web/pages/learning/reflect.jsp	(.../reflect.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_mindmap/web/pages/learning/reflect.jsp	(.../reflect.jsp)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -1,79 +1,16 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 
-	<lams:html>
-		<c:set var="lams"> <lams:LAMSURL /> </c:set>
-		<c:set var="tool"> 	<lams:WebAppURL />	</c:set>
-	
-	<lams:head>  
-		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
-		<title>
-			<fmt:message key="activity.title" />
-		</title>
-		<lams:css/>
-	
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-		<lams:JSImport src="includes/javascript/common.js" />
-		<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
-		<script type="text/javascript">
-			checkNextGateActivity('finishButton', '${learningForm.toolSessionID}', '', submitForm);
+<lams:Notebook title="${reflectTitle}"
+	toolSessionID="${learningForm.toolSessionID}"
+	instructions="${reflectInstructions}"
+	formActionUrl="finishActivity.do"
+	formModelAttribute="learningForm"
+	hiddenInputs="toolSessionID,mindmapContent,mode"
+	notebookLabelKey="label.notebookEntry"
+	isNextActivityButtonSupported="true"
+	isLastActivity="${isLastActivity}"
+	finishButtonLabelKey="button.submit"
+	nextActivityButtonLabelKey="button.finish"/>
 		
-			function disableFinishButton() {
-				document.getElementById("finishButton").disabled = true;
-			}
-			function submitForm(){
-		 		var f = document.getElementById('learningForm');
-				f.submit();
-		 	}
-			$(document).ready(function() {
-				document.getElementById("focused").focus();
-			});
-		</script>
-	</lams:head>
-
-	<body class="stripes">
-		<lams:Page type="learner" title="${reflectTitle}" formID="learningForm">
-		<form:form action="finishActivity.do" method="post" onsubmit="disableFinishButton();" modelAttribute="learningForm" id="learningForm">
-			<form:hidden path="toolSessionID" />
-			<form:hidden path="mindmapContent" id="mindmapContent" />
-			<form:hidden path="mode" />
-		
-			<div class="panel">
-				<lams:out value="${reflectInstructions}" escapeHtml="true"/>
-			</div>
-			
-			<c:choose>
-				<c:when test="${contentEditable}">
-					<textarea rows="5" name="entryText" class="form-control" id="focused">${reflectEntry}</textarea>
-				</c:when>
-			
-				<c:otherwise>
-					<p>
-						<c:out value="${reflectEntry}" escapeXml="false" />
-					</p>
-				</c:otherwise>
-			</c:choose>
-			
-			<div class="activity-bottom-buttons">
-				<button type="button" class="btn btn-primary" id="finishButton">
-					<span class="na">
-						<c:choose>
-							<c:when test="${isLastActivity}">
-								<fmt:message key="button.submit" />
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="button.finish" />
-							</c:otherwise>
-						</c:choose>
-					</span>
-				</button>
-			</div>
-	
-		</form:form>
-	</lams:Page>
-		<div class="footer">
-		</div>					
-	</body>
-</lams:html>
\ No newline at end of file
+	
\ No newline at end of file
Index: lams_tool_mindmap/web/pages/learning/singleMindmap.jsp
===================================================================
diff -u -r844ffaca6d7137f02508f94278df450891baa480 -rba4898999f40be22618e9225a8d02361cf7c4a0f
--- lams_tool_mindmap/web/pages/learning/singleMindmap.jsp	(.../singleMindmap.jsp)	(revision 844ffaca6d7137f02508f94278df450891baa480)
+++ lams_tool_mindmap/web/pages/learning/singleMindmap.jsp	(.../singleMindmap.jsp)	(revision ba4898999f40be22618e9225a8d02361cf7c4a0f)
@@ -16,9 +16,13 @@
 				<c:if test="${not empty currentMindmapUser}">
 					&nbsp;<fmt:message key='node.learner.label'/>&nbsp;"<c:out value="${currentMindmapUser}" />"
 				</c:if>
-				</title>
+			</title>
 		</c:if>
-		<lams:css/>
+		
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>learning/css/components-learner.css">
 		<link rel="stylesheet" type="text/css" href="${lams}css/jquery.minicolors.css"></link>
 		<link rel="stylesheet" type="text/css" href="${tool}includes/css/mapjs.css"></link>
 		<link rel="stylesheet" type="text/css" href="${tool}includes/css/mindmap.css"></link>
@@ -60,8 +64,8 @@
 			</c:otherwise>
 		</c:choose>
 
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 		<script src="${lams}includes/javascript/jquery.minicolors.min.js"></script>
 		<script src="${lams}includes/javascript/fullscreen.js"></script>
 		<script src="${tool}includes/javascript/jquery.timer.js"></script>