Index: lams_tool_survey/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r97b9227e4f759db2510bc57ef24be3a3ef714bfc -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 97b9227e4f759db2510bc57ef24be3a3ef714bfc)
+++ lams_tool_survey/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -179,3 +179,4 @@
 outcome.authoring.remove.confirm = Are you sure you want to remove this learning outcome?
 outcome.authoring.create.new = [create new]
 message.monitoring.edit.activity.not.editable = Activity cannot longer be edited
+label.your.answers = Your answers
Index: lams_tool_survey/web/WEB-INF/tags/Alert5.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_survey/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -5,6 +5,10 @@
 <%@ attribute name="id" required="false" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="type" required="false" rtexprvalue="true"%>
+<%@ attribute name="isIconDisplayed" required="false" rtexprvalue="true"%>
+<c:if test="${empty isIconDisplayed}">
+	<c:set var="isIconDisplayed" value="true" />
+</c:if>
 
 <c:set var="idName" value="alert-${type}" />
 <c:if test="${not empty id}">
@@ -24,20 +28,26 @@
 	</c:when>
 	<c:when test="${type == 'warning'}">
 		<c:set var="alertType" value="warning" />
-		<c:set var="iconType" value="exclamation-circle" />
+		<c:set var="iconType" value="circle-exclamation" />
 	</c:when>
 </c:choose>
 
 <div class="row justify-content-md-center">
 	<div class="col-md-auto">
 		<div id="${idName}" class="alert alert-${alertType} shadow" role="alert">
-			<c:if test="${not empty title}">
-				<span class="fa fa-${iconType} "></span> <span class="alert-heading fw-bold">${title}</span>
+			<c:if test="${close}">
+				<button type="button" class="btn-close btn-sm float-end ms-4" data-bs-dismiss="alert" aria-label="Close"></button>
+			</c:if>
+				
+			<c:if test="${not empty pageScope.title}">
+				<span class="alert-heading fw-bold">${pageScope.title}</span>
 				<hr>
 			</c:if>
-			<p class="mb-0">
-			<jsp:doBody />
-			</p>
+			
+			<c:if test="${isIconDisplayed}">
+				<i class="fa fa-lg fa-${iconType} text-muted me-1"></i>
+			</c:if>
+			<jsp:doBody />	
 		</div>
 	</div>
-</div>	
\ No newline at end of file
+</div>
Index: lams_tool_survey/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r955865d255f86a5447f729ec1ce573b2b6f94b27 -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
+++ lams_tool_survey/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -6,6 +6,7 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+<%@ attribute name="lessonID" required="false" rtexprvalue="true"%>
 
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
@@ -55,7 +56,9 @@
                 decoderDiv = $('<div />');
 
             $(document).ready(function (){
-                initLearnerPage(${toolSessionID});
+                const toolSessionID = ${empty lessonID ? toolSessionID : 'null'},
+            		lessonID = ${empty lessonID ? 'null' : lessonID};
+                initLearnerPage(toolSessionID, lessonID);
             });
 
             function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
@@ -75,56 +78,75 @@
 
     <body class="component">
     <div class="component-page-wrapper">
-        <nav inert class="component-sidebar" role="navigation dialog"
-             aria-label="Side menu" aria-expanded="false"  aria-modal="true">
-            <button class="sidebar-toggle-button no-decoration" aria-labelledby="progress-bar-title">
-                <i class="fa-solid fa-xmark"></i>
-            </button>
-            <a href="/" title="Return to course page" class="lams-logo">
-                <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="false"/>
-            </a>
+		<div class="offcanvas offcanvas-start" tabindex="-1" id="component-offcanvas" aria-label="Side menu">
+			<div class="offcanvas-body">
+				<button type="button" class="btn-close float-end" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+				
+	            <span class="lams-logo mt-3">
+	                <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="false"/>
+	            </span>
+			
+	            <div id="offcanvas-support-bar" class="offcanvas-bar lcard d-none pb-3">
+	                <div class="offcanvas-title py-3">
+	                	Support activities
+	                </div>
+	                <ul id="support-bar-items" class="progress-bar-items list-group text-start">
+	                </ul>
+	            </div>
+	
+				<div class="offcanvas-bar lcard pb-3">
+		            <div class="offcanvas-title py-3" id="offcanvas-progress-bar-title">
+		            	My progress
+		            </div>
+		            <ul id="progress-bar-items" class="progress-bar-items list-group text-start">
+		            </ul>
+	            </div>
+			</div>
+		</div>
 
-            <div id="support-bar" class="d-none pb-4 w-100">
-                <span class="sidebar-title"><i class="fa-solid fa-toolbox sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="support-bar-title">Support activities</span></span>
-                <ul id="support-bar-items" class="progress-bar-items" role="menu">
-                </ul>
-            </div>
-
-            <span class="sidebar-title"><i class="fa-solid fa-fw fa-bars-progress sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="progress-bar-title">Progress bar</span></span>
-            <ul id="progress-bar-items" class="progress-bar-items w-100" role="menu">
-            </ul>
-        </nav>
-
-        <div class="component-page-content">
+		<div class="component-page-content">
             <a href="#component-main-content" class="visually-hidden-focusable p-2">Skip to main content</a>
 
             <header id="header" class="d-flex justify-content-between" role="banner">
                 <div class="d-flex">
-                    <button class="sidebar-toggle-button no-decoration" accesskey="p" id="hamb"
-                            data-closed-class="fa-bars" data-opened-class="fa-bars-staggered"
-                            aria-labelledby="progress-bar-title" aria-expanded="false">
-                        <i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
-                    </button>
-                    <h1 id="lesson-name"></h1>
+					<button class="no-decoration" id="hamb" type="button" accesskey="p" 
+							data-bs-toggle="offcanvas" data-bs-target="#component-offcanvas"
+							aria-controls="component-offcanvas"
+							aria-labelledby="offcanvas-progress-bar-title"
+							title="Your lesson completion">
+						<i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
+					</button>
+
+                    <h1 id="lesson-name" title="Lesson name"></h1>
                 </div>
+                
                 <div class="top-menu">
-                    <div id="progress-bar-widget" title="Your lesson completion" class="d-none d-sm-none d-md-block">
-                        <div class="row">
-                            <div class="col-6">
+                    <button id="profile-picture" class="no-decoration px-3" type="button"
+                            onclick="javascript:showMyPortraitDialog()" title="Your portrait" >
+                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" alt="Your profile portrait">
+                    </button>
+                    
+                    <button type="button" id="progress-bar-widget" class="no-decoration d-none d-sm-none d-md-block"
+                    		data-bs-toggle="offcanvas" data-bs-target="#component-offcanvas"
+							aria-controls="component-offcanvas"
+							aria-labelledby="offcanvas-progress-bar-title"
+							title="Your lesson completion">
+                        <div class="row m-0">
+                            <div class="col-6 text-start p-0">
                                 Progress
                             </div>
-                            <div class="col-6 text-end" id="progress-bar-widget-value">
+                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">
                             </div>
                         </div>
                         <div class="progress mt-1 mb-2">
                             <div class="progress-bar bg-success" role="progressbar" aria-label="Progress bar widget"
                                  aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
-                    </div>
-                    <button id="profile-picture" class="no-decoration px-3 py-1" type="button"
-                            onclick="javascript:showMyPortraitDialog()">
-                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" aria-label="<c:out value="${pageLearnerFirstName} ${pageLearnerLastName}" escapeXml="true"/> profile picture" alt="User profile picture">
                     </button>
+                    
+                    <c:if test="${not isIntegrationLogin}">
+                    	<a href="/" id="return-to-index" class="btn-close btn-sm float-end ms-3" title="Close and return to the course page"></a>
+                    </c:if>
                 </div>
             </header>
 
Index: lams_tool_survey/web/pages/learning/learning.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_survey/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
+<c:set var="sessionMapID" value="${surveyForm.sessionMapID}" />
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<c:set var="position" value="${surveyForm.position}" />
+<c:set var="questionSeqID" value="${surveyForm.questionSeqID}" />
+<c:set var="currentIdx" value="${surveyForm.currentIdx}" />
 
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 	<script type="text/javascript">
 		function previousQuestion(sessionMapID) {
 			$("#surveyForm").attr('action', '<c:url value="/learning/previousQuestion.do"/>');
@@ -26,35 +27,29 @@
 		function disableButtons() {
 			$('.btn').prop('disabled', true);
 		}
-
 	</script>
-</lams:head>
-<body class="stripes">
-	<form:form action="doSurvey.do" method="post" modelAttribute="surveyForm" id="surveyForm" onsubmit="disableButtons();">
-		<form:hidden path="questionSeqID" />
-		<form:hidden path="sessionMapID" />
-		<form:hidden path="position" />
-		<form:hidden path="currentIdx" />
-		<c:set var="sessionMapID" value="${surveyForm.sessionMapID}" />
-		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-		<c:set var="position" value="${surveyForm.position}" />
-		<c:set var="questionSeqID" value="${surveyForm.questionSeqID}" />
-		<c:set var="currentIdx" value="${surveyForm.currentIdx}" />
+	
+	<div id="container-main">
+		<form:form action="doSurvey.do" method="post" modelAttribute="surveyForm" id="surveyForm" onsubmit="disableButtons();">
+			<form:hidden path="questionSeqID" />
+			<form:hidden path="sessionMapID" />
+			<form:hidden path="position" />
+			<form:hidden path="currentIdx" />
 
-		<lams:Page type="learner" title="${sessionMap.title}">
-
-			<div class="panel">
+			<div id="instructions" class="instructions">
 				<c:out value="${sessionMap.instructions}" escapeXml="false" />
 			</div>
+			
 			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<lams:Alert id="submissionDeadline" type="info" close="true">
+				<lams:Alert5 id="submissionDeadline" type="info" close="true">
 					<fmt:message>
 						<fmt:param>
 							<lams:Date value="${sessionMap.submissionDeadline}" />
 						</fmt:param>
 					</fmt:message>
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
+			
 			<c:choose>
 				<%-- Show on one page or when learner does not choose edit one question --%>
 				<c:when test="${sessionMap.showOnOnePage && (empty questionSeqID or questionSeqID == 0)}">
@@ -65,8 +60,10 @@
 				</c:when>
 				<c:otherwise>
 					<c:set var="question" value="${sessionMap.questionList[questionSeqID]}" />
-					<fmt:message key="label.question" />&nbsp;${currentIdx}&nbsp;<fmt:message key="label.of" />&nbsp;${sessionMap.totalQuestions}
-						<%@ include file="/pages/learning/question.jsp"%>
+					<c:set var="questionSequenceNumber">
+						<fmt:message key="label.question" />&nbsp;${currentIdx}&nbsp;<fmt:message key="label.of" />&nbsp;${sessionMap.totalQuestions}
+					</c:set>
+					<%@ include file="/pages/learning/question.jsp"%>
 				</c:otherwise>
 			</c:choose>
 
@@ -76,12 +73,18 @@
 				<c:choose>
 					<c:when test="${(sessionMap.showOnOnePage && (empty questionSeqID or questionSeqID == 0)) or position == 3}">
 						<form:button onclick="submit" path="doSurvey" value="Done" disabled="${sessionMap.finishedLock}"
-							class="btn btn-primary">
+							class="btn btn-primary na">
 							<fmt:message key="label.submit.survey" />
 						</form:button>
 					</c:when>
 				
 					<c:otherwise>
+						 <c:if test="${position == 2}">
+							<form:button onclick="submit" path="doSurvey" disabled="${sessionMap.finishedLock}" class="btn btn-primary na ms-2">
+								<fmt:message key="label.submit.survey" />
+							</form:button>
+						</c:if>
+						
 						<c:set var="preChecked" value="true" />
 						<c:if test="${position == 2 || position == 0}">
 							<c:set var="preChecked" value="false" />
@@ -90,28 +93,23 @@
 						<c:if test="${position == 1 || position == 0}">
 							<c:set var="nextChecked" value="false" />
 						</c:if>
-						<div class="float-start"> 
-							<form:button path="PreviousButton" onclick="previousQuestion()"
-								class="btn btn-secondary" disabled="${preChecked}">
-								<fmt:message key="label.previous" />
-							</form:button>
-						</div>
 
 						<c:if test="${position != 2}">
-							<form:button path="NextButton" onclick="nextQuestion()" class="btn btn-secondary" disabled="${nextChecked}">
+							<form:button path="NextButton" onclick="nextQuestion()" class="btn btn-secondary btn-icon-next ms-2" disabled="${nextChecked}">
 								<fmt:message key="label.next" />
 							</form:button>
 						</c:if>
-						 <c:if test="${position == 2}">
-							<form:button onclick="submit" path="doSurvey" disabled="${sessionMap.finishedLock}" class="btn btn-primary">
-								<fmt:message key="label.submit.survey" />
+						
+						<div class="float-start"> 
+							<form:button path="PreviousButton" onclick="previousQuestion()"
+								class="btn btn-secondary btn-icon-previous" disabled="${preChecked}">
+								<fmt:message key="label.previous" />
 							</form:button>
-						</c:if>
+						</div>
 					</c:otherwise>
 				</c:choose>
 			</div>
 
-		</lams:Page>
-	</form:form>
-</body>
-</lams:html>
+		</form:form>
+	</div>
+</lams:PageLearner>
Index: lams_tool_survey/web/pages/learning/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_survey/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -1,57 +1,13 @@
-<%@ 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(){
-			$('#messageForm').submit();
-		});
-		
-		function disableFinishButton() {
-			document.getElementById("finishButton").disabled = true;
-		}
-	</script>
-</lams:head>
-<body class="stripes">
-	<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" id="messageForm" modelAttribute="messageForm">
-		<form:hidden path="userID" />
-		<form:hidden path="sessionMapID" />
+<lams:Notebook title="${sessionMap.title}"
+	toolSessionID="${sessionMap.toolSessionID}"
+	instructions="${sessionMap.reflectInstructions}"
+	formModelAttribute="messageForm"
+	notebookLabelKey="title.reflection"
+	isNextActivityButtonSupported="false"
+	finishButtonLabelKey="label.finish"/>
 
-		<lams:Page type="learner" title="${sessionMap.title}">
-
-			<div class="panel">
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-			</div>
-
-			<lams:errors/>
-
-			<form:textarea rows="5" id="focused" path="entryText" cssClass="form-control" />
-
-	
-			<div class="activity-bottom-buttons">
-				<button class="btn btn-primary na" id="finishButton" type="button">
-					<fmt:message key="label.finish" />
-				</button>
-			</div>
-
-		</lams:Page>
-	</form:form>
-
-	<script type="text/javascript">
-		window.onload = function() {
-			document.getElementById("focused").focus();
-		}
-	</script>
-
-</body>
-</lams:html>
Index: lams_tool_survey/web/pages/learning/question.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/web/pages/learning/question.jsp	(.../question.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_survey/web/pages/learning/question.jsp	(.../question.jsp)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -1,71 +1,85 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="sbox mt-2">
-	<div class="sbox-heading clearfix">
+<div class="card lcard mt-2">
+	<div class="card-header">
+		<div class="badge text-bg-danger float-end">${questionSequenceNumber}</div>
 		<c:if test="${not question.optional}">
-			<abbr class="float-end" title="<fmt:message key='label.answer.required'/>"><i class="fa fa-xs fa-asterisk text-danger float-end"></i></abbr>
+			<abbr class="float-end" title="<fmt:message key='label.answer.required'/>">
+				<i class="fa fa-xs fa-asterisk text-danger float-end"></i>
+			</abbr>
 		</c:if>
 
 		<c:out value="${question.description}" escapeXml="false" />
-		<lams:errors path="questionError${question.uid}"/>
 	</div>
 	
-	<div class="sbox-body">
+	<div class="card-body">
+		<lams:errors5 path="questionError${question.uid}"/>
+	
 		<c:set var="answerText" value="" />
 		<c:if test="${not empty question.answer}">
 			<c:set var="answerText" value="${question.answer.answerText}" />
 		</c:if>
 
-		<c:forEach var="option" items="${question.options}">
-			<c:set var="checked" value="" />
-			<c:if test="${not empty question.answer}">
-				<c:forEach var="choice" items="${question.answer.choices}">
-					<c:if test="${choice == option.uid}">
-						<c:set var="checked" value="checked='checked'" />
+		<fieldset>
+			<legend class="visually-hidden" id="fieldset-legend-${question.uid}">
+				<c:out value="${question.description}" escapeXml="false" />
+			</legend>
+			
+			<div class="div-hover mx-2">
+				<c:forEach var="option" items="${question.options}">
+					<c:set var="checked" value="" />
+					<c:if test="${not empty question.answer}">
+						<c:forEach var="choice" items="${question.answer.choices}">
+							<c:if test="${choice == option.uid}">
+								<c:set var="checked" value="checked='checked'" />
+							</c:if>
+						</c:forEach>
 					</c:if>
+					
+					<div class="row">
+						<div class="form-check">
+							<input id="optionChoice${question.uid}${option.uid}" name="optionChoice${question.uid}" value="${option.uid}" class="form-check-input"
+									${checked} 
+									<c:choose>
+										<c:when test="${question.type == 1}">
+											type="radio"
+										</c:when>
+										<c:when test="${question.type == 2}">
+											type="checkbox"
+										</c:when>
+									</c:choose>						
+							/>
+							
+							<label for="optionChoice${question.uid}${option.uid}" class="form-check-label">
+								<c:out value="${option.description}" escapeXml="true" />
+							</label>
+						</div>
+					</div>
 				</c:forEach>
-			</c:if>
+
+				<c:if test="${question.appendText}">
+					<div class="row">
+						<c:set var="jsfunc" value="" />
+						<%-- for single choice question, use javascript to ensure only one option or openText can be chosen --%>
+						<c:if test="${question.type == 1}">
+							<c:set var="jsfunc" value="onclick=\" singleChoice('optionChoice${question.uid}')\""/>
+						</c:if>
 			
-			<div class="mb-3">
-			<div class="form-check">
-				<input id="optionChoice${question.uid}${option.uid}" name="optionChoice${question.uid}" value="${option.uid}" class="form-check-input"
-						${checked} 
-						<c:choose>
-							<c:when test="${question.type == 1}">
-								type="radio"
-							</c:when>
-							<c:when test="${question.type == 2}">
-								type="checkbox"
-							</c:when>
-						</c:choose>						
-				/>
-				
-				<label for="optionChoice${question.uid}${option.uid}" class="form-check-label">
-					<c:out value="${option.description}" escapeXml="true" />
-				</label>
+						<p>
+							<fmt:message key="label.specifyOther" />
+						</p>
+						<p>
+							<textarea name="optionText${question.uid}" rows="7" cols="50" type="_moz" ${jsfunc} class="form-control">${answerText}</textarea>
+						</p>
+					</div>
+				</c:if>
 			</div>
-			</div>
-		</c:forEach>
+		</fieldset>
 
 		<c:if test="${question.type == 3}">
 			<p>
-				<lams:textarea name="optionText${question.uid}" rows="7" class="form-control">${answerText}</lams:textarea>
+				<lams:textarea name="optionText${question.uid}" rows="7" class="form-control" aria-labelledby="fieldset-legend-${question.uid}">${answerText}</lams:textarea>
 			</p>
 		</c:if>
-		
-		<c:if test="${question.appendText}">
-			<c:set var="jsfunc" value="" />
-			<%-- for single choice question, use javascript to ensure only one option or openText can be chosen --%>
-			<c:if test="${question.type == 1}">
-				<c:set var="jsfunc" value="onclick=\" singleChoice('optionChoice${question.uid}')\""/>
-			</c:if>
-
-			<p>
-				<fmt:message key="label.specifyOther" />
-			</p>
-			<p>
-				<textarea name="optionText${question.uid}" rows="7" cols="50" type="_moz" ${jsfunc}>${answerText}</textarea>
-			</p>
-		</c:if>
 	</div>
 </div>
Index: lams_tool_survey/web/pages/learning/result.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/web/pages/learning/result.jsp	(.../result.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_survey/web/pages/learning/result.jsp	(.../result.jsp)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -1,14 +1,8 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-<lams:html>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
-	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
+
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', finishSession);
 		
@@ -39,75 +33,75 @@
 			$('.btn').prop('disabled', true);
 		}
     </script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${sessionMap.title}">
-		<div class="panel">
+	<div id="container-main">
+		<div id="instructions" class="instructions">
 			<c:out value="${sessionMap.instructions}" escapeXml="false" />
 		</div>
 
 		<c:if test="${sessionMap.lockOnFinish and sessionMap.mode != 'teacher'}">
-			<div class="mt-2">
-				<c:choose>
-					<c:when test="${sessionMap.showOtherUsersAnswers}">
+			<c:choose>
+				<c:when test="${sessionMap.showOtherUsersAnswers}">
+					<lams:Alert5 id="warnLockOnFinish" type="info" close="true">
 						<c:set var="buttonLabel">
 							<fmt:message key="label.view.all.responses" />
 						</c:set>
 						<fmt:message key="message.warnLockOnFinish">
 							<fmt:param>${buttonLabel}</fmt:param>
 						</fmt:message>
-					</c:when>
+					</lams:Alert5>
+				</c:when>
 
-					<c:when test="${sessionMap.userFinished}">
-						<lams:Alert id="activityLocked" type="info" close="true">
-							<fmt:message key="message.activityLocked" />
-						</lams:Alert>
-					</c:when>
+				<c:when test="${sessionMap.userFinished}">
+					<lams:Alert5 id="activityLocked" type="info" close="true">
+						<fmt:message key="message.activityLocked" />
+					</lams:Alert5>
+				</c:when>
 
-					<c:otherwise>
-						<c:set var="buttonLabel">
-							<c:choose>
-								<c:when test="${sessionMap.isLastActivity}">
-									<fmt:message key="label.submit" />
-								</c:when>
+				<c:otherwise>
+					<c:set var="buttonLabel">
+						<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>
-						</c:set>
-						<lams:Alert id="lockWhenFinished" type="info" close="true">
-							<fmt:message key="message.warnLockOnFinish">
-								<fmt:param>
-									<strong>${buttonLabel}</strong>
-								</fmt:param>
-							</fmt:message>
-						</lams:Alert>
-					</c:otherwise>
-				</c:choose>
-			</div>
+							<c:otherwise>
+								<fmt:message key="label.finished" />
+							</c:otherwise>
+						</c:choose>
+					</c:set>
+					
+					<lams:Alert5 id="lockWhenFinished" type="info" close="true">
+						<fmt:message key="message.warnLockOnFinish">
+							<fmt:param>
+								<strong>${buttonLabel}</strong>
+							</fmt:param>
+						</fmt:message>
+					</lams:Alert5>
+				</c:otherwise>
+			</c:choose>
 		</c:if>
 
 		<c:forEach var="element" items="${sessionMap.questionList}">
-			<div class="sbox mt-2">
-				<div class="sbox-heading clearfix">
+			<div class="card lcard">
+				<div class="card-header">
 					<c:if test="${not question.optional}">
-						<abbr class="float-end" title="<fmt:message key='label.answer.required'/>"><i
-							class="fa fa-xs fa-asterisk text-danger float-end"></i></abbr>
+						<abbr class="float-end" title="<fmt:message key='label.answer.required'/>">
+							<i class="fa fa-xs fa-asterisk text-danger float-end"></i>
+						</abbr>
 					</c:if>
 
 					<c:set var="question" value="${element.value}" />
 					<c:out value="${question.description}" escapeXml="false" />
 				</div>
-				<div class="sbox-body">
-
+				
+				<div class="card-body">
 					<c:set var="answerText" value="" />
 					<c:if test="${not empty question.answer}">
 						<c:set var="answerText" value="${question.answer.answerText}" />
 					</c:if>
-					<c:forEach var="option" items="${question.options}">
-						<div>
+					<div class="div-hover">
+						<c:forEach var="option" items="${question.options}">
 							<c:set var="checked" value="false" />
 
 							<c:if test="${not empty question.answer}">
@@ -119,87 +113,60 @@
 							</c:if>
 
 							<c:if test="${checked}">
-								<c:out value="${option.description}" escapeXml="true" />
+								<div>
+									<c:out value="${option.description}" escapeXml="true" />
+								</div>
 							</c:if>
-						</div>
-					</c:forEach>
+						</c:forEach>
 
+						<c:if test="${question.appendText && (not empty answerText)}">
+							<div>
+								<fmt:message key="label.open.response" />:&nbsp;
+								
+								<lams:out value="${answerText}" escapeHtml="true" />
+							</div>
+						</c:if>
 
-					<c:if test="${question.type == 3}">
-						<lams:out value="${answerText}" escapeHtml="false" />
-					</c:if>
+						<c:if test="${question.type == 3}">
+							<div>
+								<lams:out value="${answerText}" escapeHtml="false" />
+							</div>
+						</c:if>
+					</div>
 
-					<c:if test="${question.appendText && (not empty answerText)}">
-						<fmt:message key="label.append.text" />
-						<lams:out value="${answerText}" escapeHtml="true" />
-					</c:if>
-
 					<c:if test="${(not sessionMap.finishedLock) && (not sessionMap.showOnOnePage)}">
-						<div class="">
-							<a href="#" onclick="retakeSurvey(${question.sequenceId})"><small><fmt:message key="label.retake" /></small>
-							</a>
+						<div>
+							<button type="button" onclick="retakeSurvey(${question.sequenceId})" class="btn btn-sm btn-secondary btn-icon-return float-end mt-1">
+								<small><fmt:message key="label.retake" /></small>
+							</button>
 						</div>
 					</c:if>
 
-
 				</div>
 			</div>
 		</c:forEach>
 
-		<c:if test="${not sessionMap.finishedLock}">
-			<div class="mt-2">
-				<button property="RetakeButton" onclick="return retakeSurvey(-1)" class="btn btn-sm btn-secondary float-start">
-					<fmt:message key="label.retake.survey" />
-				</button>
-			</div>
-		</c:if>
-
-		<div class="mt-2">&nbsp;</div>
-
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn and !sessionMap.showOtherUsersAnswers}">
-			<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="panel">
-						<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-					</div>
-
-					<c:choose>
-						<c:when test="${empty sessionMap.reflectEntry}">
-							<p>
-								<fmt:message key="message.no.reflection.available" />
-							</p>
-						</c:when>
-						<c:otherwise>
-							<div class="panel-body bg-warning mt-2">
-								<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-							</div>
-						</c:otherwise>
-					</c:choose>
-
-					<button property="ContinueButton" onclick="return continueReflect()"
-						class="btn mt-2 btn-sm btn-secondary float-start">
-						<fmt:message key="label.edit" />
-					</button>
-				</div>
-			</div>
+			<lams:NotebookReedit
+				reflectInstructions="${sessionMap.reflectInstructions}"
+				reflectEntry="${sessionMap.reflectEntry}"
+				isEditButtonEnabled="true"
+				notebookHeaderLabelKey="title.reflection"/>
 		</c:if>
 
 		<c:if test="${sessionMap.mode != 'teacher'}">
 			<div class="activity-bottom-buttons">
 				<c:choose>
 					<c:when test="${sessionMap.showOtherUsersAnswers}">
 						<button property="otherUsersAnswersButton" onclick="return showOtherUsersAnswers()"
-							class="btn btn-primary">
+							class="btn btn-primary na">
 							<fmt:message key="label.view.all.responses" />
 						</button>
 					</c:when>
 
 					<c:when test="${sessionMap.reflectOn}">
 						<button property="ContinueButton" onclick="return continueReflect()"
-							class="btn btn-primary">
+							class="btn btn-primary na">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:when>
@@ -218,13 +185,14 @@
 						</button>
 					</c:otherwise>
 				</c:choose>
+
+				<c:if test="${not sessionMap.finishedLock}">
+					<button type="button" onclick="return retakeSurvey(-1)" class="btn btn-secondary btn-icon-return me-2">
+						<fmt:message key="label.retake.survey" />
+					</button>
+				</c:if>
 			</div>
 		</c:if>
 
-		<div id="footer"></div>
-		<!--closes footer-->
-	</lams:Page>
-</body>
-</lams:html>
-
-
+	</div>
+</lams:PageLearner>
Index: lams_tool_survey/web/pages/learning/resultOtherUsers.jsp
===================================================================
diff -u -r8ab1c658eca81a42d7f21d0067bff04c15f70c38 -rb16c939172548a36f20eaa242698f99cda07c222
--- lams_tool_survey/web/pages/learning/resultOtherUsers.jsp	(.../resultOtherUsers.jsp)	(revision 8ab1c658eca81a42d7f21d0067bff04c15f70c38)
+++ lams_tool_survey/web/pages/learning/resultOtherUsers.jsp	(.../resultOtherUsers.jsp)	(revision b16c939172548a36f20eaa242698f99cda07c222)
@@ -1,19 +1,10 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="tool"><lams:WebAppURL /></c:set>
 <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:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager5.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css">
 	<link type="text/css" href="${lams}/css/defaultHTML_chart.css" rel="stylesheet" />
@@ -29,15 +20,13 @@
 		}
 	</style>
 
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/chart.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
 	<script type="text/javascript">
 		$(document).ready(function() {
-
 			$(".tablesorter").tablesorter({
 				theme : 'bootstrap',
 				headerTemplate : '{content} {icon}',
@@ -103,45 +92,44 @@
 			document.location.href = '<c:url value="/learning/retake.do?sessionMapID=${sessionMapID}"/>';
 		}
 	</script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${sessionMap.title}">
-		<div class="panel">
+	<div id="container-main">
+		<div id="instructions" class="instructions">
 			<c:out value="${sessionMap.instructions}" escapeXml="false" />
 		</div>
 
 		<c:if test="${sessionMap.lockOnFinish and sessionMap.mode != 'teacher'}">
-			<lams:Alert id="activityLocked" type="info" close="true">
+			<lams:Alert5 id="activityLocked" type="info" close="true">
 				<fmt:message key="message.activityLocked" />
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
 		<%-- user personal results--%>
-		<div class="panel">
+		<div class="card-subheader mb-4">
+			<fmt:message key="label.your.answers" />
+		</div>
+		
 		<c:forEach var="element" items="${sessionMap.questionList}">
-			<div class="sbox mt-2">
-				<div class="sbox-heading clearfix">
+			<div class="card lcard mt-n3">
+				<div class="card-header">
 					<c:if test="${not question.optional}">
 						<abbr class="float-end" title="<fmt:message key='label.answer.required'/>"><i
-							class="fa fa-xs fa-asterisk text-danger float-end"></i></abbr>
+							class="fa fa-xs fa-asterisk text-danger float-end"></i>
+						</abbr>
 					</c:if>
 
 					<c:set var="question" value="${element.value}" />
-
 					<c:out value="${question.description}" escapeXml="false" />
-
 				</div>
-				<div class="sbox-body">
-
+				
+				<div class="card-body">
 					<c:set var="answerText" value="" />
 					<c:if test="${not empty question.answer}">
 						<c:set var="answerText" value="${question.answer.answerText}" />
 					</c:if>
-					<c:forEach var="option" items="${question.options}">
-						<div>
+					<div class="div-hover">
+						<c:forEach var="option" items="${question.options}">
 							<c:set var="checked" value="false" />
-
 							<c:if test="${not empty question.answer}">
 								<c:forEach var="choice" items="${question.answer.choices}">
 									<c:if test="${choice == option.uid}">
@@ -151,168 +139,146 @@
 							</c:if>
 
 							<c:if test="${checked}">
-								<c:out value="${option.description}" escapeXml="true" />
+								<div>
+									<c:out value="${option.description}" escapeXml="true" />
+								</div>
 							</c:if>
-						</div>
-					</c:forEach>
+						</c:forEach>
 
-
-					<c:if test="${question.type == 3}">
-						<lams:out value="${answerText}" escapeHtml="false" />
-					</c:if>
-
-					<c:if test="${question.appendText && (not empty answerText)}">
-						<fmt:message key="label.append.text" />
-						<lams:out value="${answerText}" escapeHtml="true" />
-					</c:if>
+						<c:if test="${question.type == 3}">
+							<div>
+								<lams:out value="${answerText}" escapeHtml="false" />
+							</div>
+						</c:if>
+	
+						<c:if test="${question.appendText && (not empty answerText)}">
+							<div>
+								<fmt:message key="label.open.response" />:&nbsp;
+								<lams:out value="${answerText}" escapeHtml="true" />
+							</div>
+						</c:if>
+					</div>
 				</div>
 			</div>
 		</c:forEach>
 
-		<c:if test="${not sessionMap.lockOnFinish}">
-			<div class="mt-2">
-				<button property="RetakeButton" onclick="return retakeSurvey()" class="btn btn-secondary">
-					<fmt:message key="label.retake.survey" />
-				</button>
-			</div>
-		</c:if>
-		</div>
-
-		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="mt-2 panel panel-default">
-				<div class="panel-heading panel-title">
-					<fmt:message key="title.reflection" />
-				</div>
-				<div class="panel-body">
-					<div class="panel">
-						<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-					</div>
-
-					<c:choose>
-						<c:when test="${empty sessionMap.reflectEntry}">
-							<p>
-								<fmt:message key="message.no.reflection.available" />
-							</p>
-						</c:when>
-						<c:otherwise>
-							<div class="panel-body bg-warning">
-								<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-							</div>
-						</c:otherwise>
-					</c:choose>
-
-					<button property="ContinueButton" onclick="return continueReflect()" class="btn btn-secondary float-end">
-						<fmt:message key="label.edit" />
-					</button>
-				</div>
-			</div>
-		</c:if>
-
 		<%-- other users personal results--%>
 		<c:if test="${sessionMap.showOtherUsersAnswers}">
-		<div class="mt-2 panel panel-default">
-			<div class="panel-heading panel-title" id="other-users-answers-title">
+			<div class="card-subheader">
 				<fmt:message key="label.other.answers" />
 			</div>
 			
-			<div class="panel-body">
-			<div>
+			<div class="alert alert-info badge mb-4">
 				<fmt:message key="label.total.responses">
 					<fmt:param>${countFinishedUser}</fmt:param>
 				</fmt:message>
 			</div>
 
 			<c:forEach var="question" items="${answerDtos}" varStatus="queStatus">
-				<div class="table-responsive">
-					<table class="table table-hover table-sm">
-						<tr>
-							<th class="first" colspan="2"><c:out value="${question.shortTitle}" /> <%-- Only show pie/bar chart when question is single/multiple choics type --%>
-								<c:if test="${question.type != 3}">
-									<div class="float-end">
-										<c:set var="chartURL"
-											value="${tool}showChart.do?toolSessionID=${sessionMap.toolSessionID}&questionUid=${question.uid}" />
-										<a class="fa fa-lg fa-pie-chart text-primary btn btn-md btn-primary"
-											title="<fmt:message key='message.view.pie.chart'/>"
-											onclick="javascript:drawChart('pie', 'chartDiv${queStatus.index}', '${chartURL}')"></a>
-									</div>
-								</c:if></th>
-						</tr>
-
-						<c:set var="optSize" value="${fn:length(question.options)}" />
-						<c:forEach var="option" items="${question.options}" varStatus="optStatus">
-							<tr>
-								<td><c:out value="${option.description}" escapeXml="true" /></td>
-								<td class="text-center"><c:set var="imgTitle">
-										<fmt:message key="message.learner.choose.answer.percentage">
-											<fmt:param>${option.response}</fmt:param>
-										</fmt:message>
-									</c:set> ${option.responseCount} (${option.responseFormatStr}%)</td>
-							</tr>
-						</c:forEach>
-						<tr>
-							<td id="chartDiv${queStatus.index}" colspan="2" class="chartDiv"></td>
-						</tr>
-						<c:if test="${question.appendText}">
-							<tr>
-								<td><fmt:message key="label.open.response" /></td>
-								<td class="text-center"><c:set var="imgTitle">
-										<fmt:message key="message.learner.choose.answer.percentage">
-											<fmt:param>${question.openResponseFormatStr}</fmt:param>
-										</fmt:message>
-									</c:set> <c:set var="imgIdx">
-								${(optSize % 5)  + 1}
-							</c:set> ${question.openResponseCount} (${question.openResponseFormatStr}%)</td>
-							</tr>
+				<div class="card lcard mt-n3">
+					<div class="card-header">
+						<c:out value="${question.shortTitle}" /> <%-- Only show pie/bar chart when question is single/multiple choics type --%>
+								
+						<c:if test="${question.type != 3}">
+							<div class="float-end">
+								<c:set var="chartURL" value="${tool}showChart.do?toolSessionID=${sessionMap.toolSessionID}&questionUid=${question.uid}" />
+								<button type="button" class="fa fa-pie-chart text-primary btn btn-light"
+										title="<fmt:message key='message.view.pie.chart'/>"
+										onclick="javascript:drawChart('pie', 'chartDiv${queStatus.index}', '${chartURL}')"></button>
+							</div>
 						</c:if>
+					</div>
+						
+					<div class="card-body">
+						<div class="div-hover mx-2">
+							<c:set var="optSize" value="${fn:length(question.options)}" />
+							<c:forEach var="option" items="${question.options}" varStatus="optStatus">
+								<div class="row">
+									<div class="col-9">
+										<c:out value="${option.description}" escapeXml="true" />
+									</div>
+									<div class="col-3 text-center">
+										<c:set var="imgTitle">
+											<fmt:message key="message.learner.choose.answer.percentage">
+												<fmt:param>${option.response}</fmt:param>
+											</fmt:message>
+										</c:set> 
+										${option.responseCount} (${option.responseFormatStr}%)
+									</div>
+								</div>
+							</c:forEach>
+							
+							<c:if test="${question.appendText}">
+								<div class="row">
+									<div class="col-9">
+										<fmt:message key="label.open.response" />
+									</div>
+									<div class="col-3 text-center">
+										<c:set var="imgTitle">
+											<fmt:message key="message.learner.choose.answer.percentage">
+												<fmt:param>${question.openResponseFormatStr}</fmt:param>
+											</fmt:message>
+										</c:set> 
+										<c:set var="imgIdx">
+											${(optSize % 5)  + 1}
+										</c:set> 
+										${question.openResponseCount}	(${question.openResponseFormatStr}%)
+									</div>
+								</div>
+							</c:if>
+						</div>
+						
 						<c:if test="${question.type == 3}">
-							<tr>
-								<td colspan="2">
-									<lams:TSTable5 numColumns="1" dataId='data-question-uid="${question.uid}"'> 
-										<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.answer" /></th>
-									</lams:TSTable5>
-									
-								</td>
-							</tr>
+							<lams:TSTable5 numColumns="1" dataId='data-question-uid="${question.uid}"'> 
+								<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.answer" /></th>
+							</lams:TSTable5>
 						</c:if>
+						<div id="chartDiv${queStatus.index}" colspan="2" class="chartDiv"></div>
+							
+					</div>
+				</div>
+			</c:forEach>
+		</c:if>
 
-					</table>
-				</c:forEach>
-			</div>
-		</div>
+		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
+			<lams:NotebookReedit
+				reflectInstructions="${sessionMap.reflectInstructions}"
+				reflectEntry="${sessionMap.reflectEntry}"
+				isEditButtonEnabled="true"
+				notebookHeaderLabelKey="title.reflection"/>
 		</c:if>
 
 		<c:if test="${sessionMap.mode != 'teacher'}">
 			<div class="activity-bottom-buttons">
 				<c:choose>
 					<c:when test="${sessionMap.reflectOn}">
-						<button property="ContinueButton" onclick="return continueReflect()" class="btn btn-primary">
+						<button type="button" onclick="return continueReflect()" class="btn btn-primary na">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:when>
 
 					<c:otherwise>
-						<button type="submit" id="finishButton" onclick="return finishSession()"
-							class="btn btn-primary na">
-							<span class="nextActivity"> <c:choose>
-									<c:when test="${sessionMap.isLastActivity}">
-										<fmt:message key="label.submit" />
-									</c:when>
+						<button type="submit" id="finishButton" onclick="return finishSession()" 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>
-							</span>
+								<c:otherwise>
+									<fmt:message key="label.finished" />
+								</c:otherwise>
+							</c:choose>
 						</button>
 					</c:otherwise>
 				</c:choose>
+
+				<c:if test="${not sessionMap.lockOnFinish}">
+					<button type="button" onclick="return retakeSurvey()" class="btn btn-secondary btn-icon-return me-2">
+						<fmt:message key="label.retake.survey" />
+					</button>
+				</c:if>
 			</div>
 		</c:if>
 
-		<div id="footer"></div>
-		<!--closes footer-->
-	</lams:Page>
-</body>
-</lams:html>
-
-
+	</div>
+</lams:PageLearner>