Index: lams_tool_sbmt/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -rdecee05de5d7a90fe2aef3af04f588494262685b -reb89290d3882c2f77a92373fb37c53a38f8efef9
--- lams_tool_sbmt/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision decee05de5d7a90fe2aef3af04f588494262685b)
+++ lams_tool_sbmt/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -18,10 +18,13 @@
 label.authoring.save.button = Save
 label.authoring.cancel.button = Cancel
 authoring.exception = There is a problem submitting content, the reason is {0}
+label.learner.upload.restrictions: File restrictions
+label.learner.upload.restrictions.and: and
+label.learner.upload.restrictions.files: file(s) to add
 label.learner.fileName = Name
 label.learner.filePath = File
 label.learner.fileDescription = Description
-label.learner.upload = Upload
+label.learner.upload = Add files 
 label.learner.finished = Finished uploading
 label.learner.time = Uploaded
 label.learner.dateOfSubmission = Submission date
@@ -61,7 +64,7 @@
 submit.upload.twice = You already upload this file, please waiting for a while.
 submit.modenotsupported = The mode "{0}" you''ve requested is not supported
 submit.successful = The content has been created successfully.
-learner.form.filepath.displayname = Upload file name
+learner.form.filepath.displayname = No file uploaded
 errors.mark.invalid.number = Mark is invalid number format.
 authoring.msg.cancel.save = Do you want to close this window without saving?
 define.later.message = Please wait for the instructor to complete the contents of this activity.
@@ -76,7 +79,7 @@
 error.title.blank = Title can not be blank.
 label.authoring.advanced.reflectOnActivity = Add a notebook at end of Submit Files with the following instructions:
 error.reflection.emtpy = Please input Notebook entry
-title.reflection = Notebook Entry
+title.reflection = Notebook entry
 label.continue = Continue
 monitoring.user.fullname = Name
 monitoring.user.loginname = Username
@@ -85,7 +88,7 @@
 label.limit.number.upload = Set maximum number of files to upload
 label.number.to.upload = Number of files to upload
 label.unlimited = Unlimited
-message.left.upload.limit = Maximum number of files to be submitted: {0}
+message.left.upload.limit = maximum of {0}
 messsage.learner.finish.confirm = Are you going to finish submission?
 label.edit = Edit
 message.no.reflection.available = No Notebook available
@@ -160,7 +163,7 @@
 error.upload = Error while uploading file: {0}
 outcome.authoring.remove.confirm = Are you sure you want to remove this learning outcome?
 label.enable.min.limit = Set minimum number of files to upload
-label.should.upload.another = Minimum number of files to be submitted: {0}
+label.should.upload.another = minimum of {0}
 outcome.authoring.create.new = [create new]
 label.monitoring.change.leader = Change leader
 label.monitoring.leader.successfully.changed = Leader changed
Index: lams_tool_sbmt/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u
--- lams_tool_sbmt/web/WEB-INF/tags/Errors5.tag	(revision 0)
+++ lams_tool_sbmt/web/WEB-INF/tags/Errors5.tag	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -0,0 +1,48 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ attribute name="path" required="false" rtexprvalue="true"%>
+
+<%-- To show the GLOBAL messages (default case) use no parameters --%>
+<%-- To show the all messages, ignoring their keys (e.g. Change Password) use path="*" --%>
+<%-- To show the messages for a particular item use path="itemName" --%>
+
+<c:choose>
+
+<%-- Show Messages for GLOBAL. Usual alert box --%>
+<c:when test="${empty path}">
+   	<c:set var="apath" value="GLOBAL" />
+	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
+   	<lams:Alert5 id="error" type="danger" close="false"> 
+       <c:forEach var="error" items="${errorMap[apath]}"> 
+       	<c:out value="${error}" /><br /> 
+       </c:forEach> 
+	</lams:Alert5> 
+	</c:if>
+</c:when>
+
+<%-- Show All Messages --%>
+<c:when test="${path eq '*'}">
+	<c:if test="${not empty errorMap}"> 
+   	<lams:Alert5 id="error" type="danger" close="false"> 
+       <c:forEach var="error" items="${errorMap}"> 
+       <c:forEach var="erorString" items="${error.value}"> 
+       	<c:out value="${erorString}" /><br /> 
+       </c:forEach> 
+       </c:forEach> 
+	</lams:Alert5> 
+	</c:if>
+</c:when>
+
+<%-- Show messages for a particular key --%>
+<c:otherwise>
+	<c:if test="${not empty errorMap and not empty errorMap[path]}">
+		<span class="text-danger">
+		<c:forEach var="error" items="${errorMap[path]}"> 
+	       	<c:out value="${error}" /><br /> 
+        </c:forEach> 
+        </span>
+    </c:if>
+</c:otherwise>
+
+</c:choose>
Index: lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68 -reb89290d3882c2f77a92373fb37c53a38f8efef9
--- lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
+++ lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -348,11 +348,15 @@
        <name>Etherpad</name>
        <path>/WEB-INF/tags/Etherpad.tag</path>
    	</tag-file> 
-	<tag-file>
+   	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
    	</tag-file> 
    	<tag-file>
+	    <name>errors5</name>
+		<path>/WEB-INF/tags/Errors5.tag</path>
+   	</tag-file>    
+   	<tag-file>
 	    <name>Widget</name>
 		<path>/WEB-INF/tags/Widget.tag</path>
    	</tag-file>   
Index: lams_tool_sbmt/web/learner/notebook.jsp
===================================================================
diff -u -rd5fa41792bdb2657d0d53c35126a64604510d18a -reb89290d3882c2f77a92373fb37c53a38f8efef9
--- lams_tool_sbmt/web/learner/notebook.jsp	(.../notebook.jsp)	(revision d5fa41792bdb2657d0d53c35126a64604510d18a)
+++ lams_tool_sbmt/web/learner/notebook.jsp	(.../notebook.jsp)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -3,68 +3,63 @@
 
 <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" />
+<fmt:message key="title.reflection" var="reflectionLabel"/>
+
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}" >
 	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', function(){
-			$('#refForm').submit();
-		});
-		
 		function disableFinishButton() {
 			document.getElementById("finishButton").disabled = true;
-		}
+		}		
 	</script>
-</lams:head>
 
-<body class="stripes">
+	<lams:errors5/>
 
-	<lams:Page type="learner" title="${sessionMap.title}" formID="refForm">
-
-		<lams:errors/>
-
-		<div class="panel">
-			<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+	<div id="instructions" class="instructions">
+		<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+	</div>
+	<div class="row">
+		<div class="col-12 text-primary">
+			<hr class="mx-5">
 		</div>
+	</div>
+	<div class="container-xxl">
+	<div class="row">
+		<div class="col-12">
 
-		<div class="form-group">
-			<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" modelAttribute="refForm" id="refForm">
-				<form:hidden path="userID" />
-				<form:hidden path="sessionMapID" />
-				<form:textarea path="entryText" cssClass="form-control" id="focused" rows="5"></form:textarea>
+			<div class="card lcard lcard-no-borders shadow mb-3">
+				<div class="card-header lcard-header-button-border">
+					<fmt:message key="title.reflection" />
+				</div>
+				<div class="card-body mb-2">
 
-
-				<button class="btn btn-primary voffset10 pull-right na" id="finishButton" type="button">
-
-					<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>
-
-			</form:form>
-
+					<div class="form-group">
+						<form:form action="submitReflection.do" method="post" onsubmit="disableFinishButton();" modelAttribute="refForm" id="refForm">
+							<form:hidden path="userID" />
+							<form:hidden path="sessionMapID" />
+							<form:textarea aria-label="${reflectionLabel}" aria-multiline="true" aria-required="true" required="true" path="entryText" cssClass="form-control" id="focused" rows="5"></form:textarea>
+						</form:form>
+					</div>	
+				</div>	
+			</div>
 		</div>
+	</div>
+	</div>	
+	<div class="activity-bottom-buttons">
+		<button class="btn btn-primary" id="finishButton" type="button">
 
-		<div id="footer"></div>
+			<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>
+	</div>
+	<div id="footer"></div>
 
-	</lams:Page>
 
-	<script type="text/javascript">
-		window.onload = function() {
-			document.getElementById("focused").focus();
-		}
-	</script>
+</lams:PageLearner>
 
-</body>
-</lams:html>
Index: lams_tool_sbmt/web/learner/redirectAfterSubmit.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -reb89290d3882c2f77a92373fb37c53a38f8efef9
--- lams_tool_sbmt/web/learner/redirectAfterSubmit.jsp	(.../redirectAfterSubmit.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_sbmt/web/learner/redirectAfterSubmit.jsp	(.../redirectAfterSubmit.jsp)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -1,24 +1,17 @@
-s<%@ include file="/common/taglibs.jsp"%>
-
+<%@ include file="/common/taglibs.jsp"%>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <!-- Triggers redirection to the learner page after a file is submitted, to stop Refresh reloading the file. -->
 
-<lams:html>
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}" >
 
-<lams:head>
-<%@ include file="/common/header.jsp"%>
 <script language="JavaScript" type="text/JavaScript">
 	$(document).ready(function(){
 		window.location.href = '<lams:WebAppURL />learning/refresh.do?sessionMapID=${sessionMapID}';
 	});
 </script>
-</lams:head>
-
-<body class="stripes">
-<lams:Page type="admin">
-	<div class="text-center" style="margin-top: 10px; margin-bottom: 15px;">
-		<i class="fa fa-2x fa-refresh fa-spin text-primary"></i>
+	<div class="text-center" role="alert" aria-busy="true" style="margin-top: 10px; margin-bottom: 15px;">
+		<i class="fa fa-2x fa-refresh fa-spin text-primary" aria-hidden="true"></i>
 	</div>
-</lams:Page>	 
-</body>
+</lams:PageLearner>
 
-</lams:html>
+
Index: lams_tool_sbmt/web/learner/sbmtlearner.jsp
===================================================================
diff -u -r3e5f23228af144f86f91a0dd45d342702d22c22d -reb89290d3882c2f77a92373fb37c53a38f8efef9
--- lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision 3e5f23228af144f86f91a0dd45d342702d22c22d)
+++ lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -3,7 +3,6 @@
 
 <%@ page import="org.lamsfoundation.lams.util.Configuration" %>
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
-
 <c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
 <c:set var="EXE_FILE_TYPES"><%=Configuration.get(ConfigurationKeys.EXE_EXTENSIONS)%></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
@@ -12,6 +11,7 @@
 <c:set var="hasEditRight" value="${sessionMap.hasEditRight}"/>
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
 
+
 <lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}" >
 
 	<link href="<lams:LAMSURL />css/uppy.min.css"    rel="stylesheet" type="text/css" />
@@ -37,338 +37,134 @@
 		</c:when>
 	</c:choose>
 
-	<script>
-		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', finish);
-
-		var UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
-				// convert Java syntax to JSON
-				EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
-				<fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
-				EXE_FILE_ERROR = decoderDiv.html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
-
-
-		$(document).ready(function() {
-			$("time.timeago").timeago();
-
-			if ($('#file-upload-area').length == 1) {
-				initFileUpload('${learnerForm.tmpFileUploadId}', '${language}');
-			}
-
-			<c:if test="${sessionMap.mode != 'author' and sessionMap.minLimitUploadNumber != null}">
-			var uploadedFilesNumber = +${learner.filesUploaded.size()};
-			if (uploadedFilesNumber >= ${sessionMap.minLimitUploadNumber}) {
-				$('.btn-hide-on-min-not-met').removeClass('btn-hide-on-min-not-met');
-			}
-			</c:if>
-
-			<%-- Connect to command websocket only if it is learner UI --%>
-			<c:if test="${isLeadershipEnabled and sessionMap.mode == 'learner'}">
-			// command websocket stuff for refreshing
-			// trigger is an unique ID of page and action that command websocket code in Page.tag recognises
-			commandWebsocketHookTrigger = 'submit-files-leader-change-refresh-${sessionMap.toolSessionID}';
-			// if the trigger is recognised, the following action occurs
-			commandWebsocketHook = function() {
-				// in case in the address bar there is refresh.do, direct to the main learner URL
-				location.href = '<lams:WebAppURL />learning/learner.do?toolSessionID=${sessionMap.toolSessionID}';
-			};
-			</c:if>
-		});
-
-		/**
-		 * Initialise Uppy as the file upload widget
-		 */
-		function initFileUpload(tmpFileUploadId, language) {
-			var uppyProperties = {
-				// upload immediately
-				autoProceed: true,
-				allowMultipleUploads: true,
-				debug: false,
-				restrictions: {
-					// taken from LAMS configuration
-					maxFileSize: +UPLOAD_FILE_MAX_SIZE,
-					maxNumberOfFiles: ${sessionMap.isMaxLimitUploadEnabled ? sessionMap.maxLimitUploadNumber - learner.filesUploaded.size() : 10}
-				},
-				meta: {
-					// all uploaded files go to this subdir in LAMS tmp dir
-					// its format is: upload_<userId>_<timestamp>
-					'tmpFileUploadId' : tmpFileUploadId,
-					'largeFilesAllowed' : false
-				},
-				onBeforeFileAdded: function(currentFile, files) {
-					var name = currentFile.data.name || currentFile.name,
-							extensionIndex = name.lastIndexOf('.'),
-							valid = extensionIndex < 0 || !EXE_FILE_TYPES.includes(name.substring(extensionIndex).trim().toLowerCase());
-					if (!valid) {
-						uppy.info(EXE_FILE_ERROR, 'error', 10000);
-					}
-
-					return valid;
-				}
-			};
-
-			switch(language) {
-				case 'es' : uppyProperties.locale = Uppy.locales.es_ES; break;
-				case 'fr' : uppyProperties.locale = Uppy.locales.fr_FR; break;
-				case 'el' : uppyProperties.locale = Uppy.locales.el_GR; break;
-			}
-
-
-			var uppy = Uppy.Core(uppyProperties);
-			// upload using Ajax
-			uppy.use(Uppy.XHRUpload, {
-				endpoint: LAMS_URL + 'tmpFileUpload',
-				fieldName : 'file',
-				// files are uploaded one by one
-				limit : 1
-			});
-
-			uppy.use(Uppy.Dashboard, {
-				target: '#file-upload-area',
-				inline: true,
-				height: 300,
-				width: '90%',
-				showProgressDetails : true,
-				hideRetryButton : true,
-				hideCancelButton : true,
-				showRemoveButtonAfterComplete: true,
-				proudlyDisplayPoweredByUppy: false,
-				note: 'Hello world!'
-			});
-			uppy.use(Uppy.Webcam, {
-				target: Uppy.Dashboard,
-				modes: ['picture']
-			});
-
-			uppy.on('upload-success', (file, response) => {
-				// if file name was modified by server, reflect it in Uppy
-				file.meta.name = response.body.name;
-			});
-
-			uppy.on('file-removed', (file, reason) => {
-				if (reason === 'removed-by-user') {
-					// delete file from temporary folder on server
-					$.ajax({
-						url :  LAMS_URL + 'tmpFileUploadDelete',
-						data : {
-							'tmpFileUploadId' : tmpFileUploadId,
-							'name' : file.meta.name
-						}
-					})
-				}
-			})
-		}
-
-		function finish() {
-			var finishUrl = "<lams:WebAppURL />learning/finish.do?sessionMapID=${sessionMapID}";
-			return validateFinish(finishUrl);
-		}
-		function notebook() {
-			var continueUrl = "<lams:WebAppURL />learning/newReflection.do?sessionMapID=${sessionMapID}";
-			return validateFinish(continueUrl);
-		}
-		function validateFinish(tUrl) {
-			var uploadedFilesNumber = +${learner.filesUploaded.size()};
-
-			//enforce min files upload limit
-			<c:if test="${sessionMap.minLimitUploadNumber != null}">
-			if (uploadedFilesNumber < ${sessionMap.minLimitUploadNumber}) {
-				if (${sessionMap.mode eq 'author'}) {
-					showToast('<fmt:message key="label.should.upload.another"><fmt:param value="${sessionMap.minLimitUploadNumber}" /></fmt:message>' +
-							'\n<fmt:message key="label.min.limit.preview"/>');
-				} else {
-					showToast('<fmt:message key="label.should.upload.another"><fmt:param value="${sessionMap.minLimitUploadNumber}" /></fmt:message>');
-					return false;
-				}
-			}
-			</c:if>
-
-			let finishFunction = function(){
-				disableButtons();
-				location.href = tUrl;
-			};
-
-			//let user confirm zero files upload
-			if (uploadedFilesNumber == 0) {
-				if (${sessionMap.lockOnFinish}) {
-					showConfirm("<fmt:message key='learner.finish.without.upload'/>", finishFunction);
-				} else {
-					showConfirm("<fmt:message key='messsage.learner.finish.confirm'/>", finishFunction);
-				}
-			} else {
-				finishFunction();
-			}
-
-		}
-
-		function clearFileError(errDivId) {
-			if ( ! errDivId || errDivId.length == 0 ) {
-				errDivId = 'file-error-msg';
-			}
-			var errDiv = $('#'+errDivId);
-			errDiv.empty();
-			errDiv.css( "display", "none" );
-		}
-
-		function showFileError(error, errDivId) {
-			if ( ! errDivId || errDivId.length == 0 ) {
-				errDivId = 'file-error-msg';
-			}
-			var errDiv = $('#'+errDivId);
-			if ( errDiv.length > 0 ) {
-				errDiv.append(error);
-				errDiv.css( "display", "block" );
-			} else {
-				showToast(error);
-			}
-		}
-
-		function validateFileUpload() {
-			var valid = true;
-
-			// check description
-			clearFileError("desc-error-msg");
-			if ( $('#description').val().trim().length == 0 ) {
-				var requiredMsg = '<fmt:message key="errors.required"><fmt:param><fmt:message key="label.learner.fileDescription"/></fmt:param></fmt:message>';
-				showFileError(requiredMsg, "desc-error-msg");
-				valid = false;
-			}
-
-			if ( valid ) {
-				disableButtons();
-			}
-			return valid;
-		}
-
-		function disableButtons() {
-			// do not disable the file button or the file will be missing on the upload.
-			$('.btn-disable-on-submit').prop('disabled', true);
-			$('a.btn-disable-on-submit').hide(); // links must be hidden, cannot be disabled
-
-			// show the waiting area during the upload
-			var div = document.getElementById("attachmentArea_Busy");
-			if(div != null){
-				div.style.display = '';
-			}
-		}
-
-		function deleteLearnerFile(detailId, filename) {
-			var msg = '<fmt:message key="message.monitor.confirm.original.learner.file.delete"/>';
-			msg = msg.replace('{0}', filename);
-			showConfirm(msg, function (){
-				$.ajax({
-					url: '<c:url value="/learning/deleteLearnerFile.do"/>',
-					data: 'detailId=' + detailId,
-					success: function () {
-						document.location.href = "<lams:WebAppURL />learning/${sessionMap.mode}.do?toolSessionID=${sessionMap.toolSessionID}";
-					},
-					error: function(error){
-						showToast("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
-						showToast("responseText: "+xhr.responseText);
-					}
-				});
-			});
-		}
-	</script>
-
-	<div id="instructions" class="instructions">
+	<div id="instructions" class="instructions" aria-label="<fmt:message key='label.authoring.basic.instruction'/>">
 		<c:out value="${sessionMap.instruction}" escapeXml="false" />
 	</div>
 
 	<div class="container-xxl">
-		<div class="text-primary">
-			<hr class="mx-5">
-		</div>
-		<!-- notices and announcements -->
-		<c:if test="${(sessionMap.mode == 'author' || sessionMap.mode == 'learner') && hasEditRight}">
-			<c:if test="${sessionMap.lockOnFinish} && ${sessionMap.userFinished}">
-				<!--  Lock when finished -->
-				<lams:Alert5 id="lockWhenFinished" type="info">
-					<fmt:message key="message.activityLocked" />
-				</lams:Alert5>
-			</c:if>
+		<div class="row">
+			<div class="col-12 text-primary">
+				<hr class="mx-5">
+				<!-- notices and announcements -->
+				<c:if test="${(sessionMap.mode == 'author' || sessionMap.mode == 'learner') && hasEditRight}">
+					<c:if test="${sessionMap.lockOnFinish} && ${sessionMap.userFinished}">
+						<!--  Lock when finished -->
+						<lams:Alert5 id="lockWhenFinished" type="info">
+							<fmt:message key="message.activityLocked" />
+						</lams:Alert5>
+					</c:if>
 
-			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<lams:Alert5 id="submissionDeadline" type="warning" >
-					<fmt:message key="authoring.info.teacher.set.restriction">
-						<fmt:param>
-							<lams:Date value="${sessionMap.submissionDeadline}" />
-						</fmt:param>
-					</fmt:message>
-				</lams:Alert5>
-			</c:if>
+					<c:if test="${not empty sessionMap.submissionDeadline}">
+						<lams:Alert5 id="submissionDeadline" type="warning" >
+							<fmt:message key="authoring.info.teacher.set.restriction">
+								<fmt:param>
+									<lams:Date value="${sessionMap.submissionDeadline}" />
+								</fmt:param>
+							</fmt:message>
+						</lams:Alert5>
+					</c:if>
 
-			<c:if test="${not sessionMap.userFinished || not sessionMap.lockOnFinish}">
-				<c:if test="${sessionMap.isMaxLimitUploadEnabled}">
-					<lams:Alert5 id="limitUploads" close="true" type="warning">
-						<fmt:message key="message.left.upload.limit">
-							<fmt:param value="${sessionMap.maxLimitUploadNumber}" />
-						</fmt:message>
-					</lams:Alert5>
-				</c:if>
+					<c:if test="${not sessionMap.userFinished || not sessionMap.lockOnFinish}">
+						<c:choose>
+							<c:when test="${sessionMap.minLimitUploadNumber != null && sessionMap.isMaxLimitUploadEnabled}">
+								<c:set var="fileRestrictions">
+									<fmt:message key="label.learner.upload.restrictions"/>: 
+									<fmt:message key="label.should.upload.another">
+										<fmt:param value="${sessionMap.minLimitUploadNumber}" />
+									</fmt:message>&nbsp;<fmt:message key="label.learner.upload.restrictions.and"/>&nbsp;<fmt:message key="message.left.upload.limit">
+										<fmt:param value="${sessionMap.maxLimitUploadNumber}" />
+									</fmt:message>&nbsp;<fmt:message key="label.learner.upload.restrictions.files"/>
+								</c:set>
+							</c:when>
+							<c:when test="${sessionMap.minLimitUploadNumber != null}">
+								<c:set var="fileRestrictions">
+									<fmt:message key="label.learner.upload.restrictions"/>: 
+									<fmt:message key="label.should.upload.another">
+										<fmt:param value="${sessionMap.minLimitUploadNumber}" />
+									</fmt:message>&nbsp;<fmt:message key="label.learner.upload.restrictions.files"/>
+								</c:set>
+							</c:when>
+							<c:when test="${sessionMap.isMaxLimitUploadEnabled}">
+								<c:set var="fileRestrictions">
+									<fmt:message key="label.learner.upload.restrictions"/>: 
+									<fmt:message key="message.left.upload.limit">
+										<fmt:param value="${sessionMap.maxLimitUploadNumber}" />
+									</fmt:message>&nbsp;<fmt:message key="label.learner.upload.restrictions.files"/>
+								</c:set>
+							</c:when>						
+						</c:choose>
+						<c:if test="${not empty fileRestrictions}">
+							<lams:Alert5 id="minLimitUploadNumber" close="true" type="warning">
+								<c:out value="${fileRestrictions}" escapeXml="false" /> 
+							</lams:Alert5>	
+						</c:if>
 
-				<c:if test="${sessionMap.minLimitUploadNumber != null}">
-					<lams:Alert5 id="minLimitUploadNumber" close="true" type="warning">
-						<fmt:message key="label.should.upload.another">
-							<fmt:param value="${sessionMap.minLimitUploadNumber}" />
-						</fmt:message>
-					</lams:Alert5>
+					</c:if>
 				</c:if>
-			</c:if>
-		</c:if>
-		<lams:errors/>
+				<lams:errors5/>
 
-		<!-- upload form (we display it only if the user is not finished and lockedWhenFinished or no more files allowed) -->
-		<c:if test="${!sessionMap.finishLock && !sessionMap.maxLimitReached && hasEditRight && sessionMap.mode != 'teacher'}">
-			<form:form action="uploadFile.do" modelAttribute="learnerForm" id="learnerForm" method="post" enctype="multipart/form-data" onsubmit="return validateFileUpload();" >
-				<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
-				<input type="hidden" name="toolSessionID" value="${toolSessionID}" />
-				<input type="hidden" name="tmpFileUploadId" value="${learnerForm.tmpFileUploadId}" />
+			</div>
+		</div>
 
-				<!--File path row -->
-				<div class="card lcard lcard-no-borders shadow">
-					<div class="card-header lcard-header-lg lcard-header-button-border">
-						<fmt:message key="label.learner.upload" />
-					</div>
+		<div class="row">
+			<div class="col-12">
+			<!-- upload form (we display it only if the user is not finished and lockedWhenFinished or no more files allowed) -->
+			<c:if test="${!sessionMap.finishLock && !sessionMap.maxLimitReached && hasEditRight && sessionMap.mode != 'teacher'}">
+				<form:form action="uploadFile.do" modelAttribute="learnerForm" id="learnerForm" method="post" enctype="multipart/form-data" onsubmit="return validateFileUpload();" >
+					<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
+					<input type="hidden" name="toolSessionID" value="${toolSessionID}" />
+					<input type="hidden" name="tmpFileUploadId" value="${learnerForm.tmpFileUploadId}" />
 
-					<div class="card-body">
-						<div class="form-floating">
-							<label for="file-upload-area" class="d-none"><fmt:message key="label.learner.filePath" />&nbsp;<span style="color: red">*</span></label>
-
-							<div id="file-upload-area" name="file-upload-area" class="m-1"></div>
+					<!--File path row -->
+					<div class="card lcard lcard-no-borders shadow">
+						<div class="card-header lcard-header-lg lcard-header-button-border">
+							<fmt:message key="label.learner.upload" />
 						</div>
 
-						<!--File Description -->
-						<div class="form-floating">
-							<form:textarea id="description" cssClass="form-control" path="description" placeholder="-"></form:textarea>
-							<label for="description"><fmt:message key="label.learner.fileDescription" /> <fmt:message key="errors.required"><fmt:param> </fmt:param></fmt:message></label>
-							<div id="desc-error-msg" class="text-danger" style="display: none;"></div>
-						</div>
+						<div class="card-body">
+							<div class="form-floating">
+								<label for="file-upload-area" class="d-none"><fmt:message key="label.learner.filePath" />&nbsp;<span style="color: red">*</span></label>
 
-						<div id="fileHelpBlock" class="form-text mb-4 mt-2" >
-							<c:if test="${sessionMap.lockOnFinish}">
-								<i class="fa-solid fa-triangle-exclamation text-danger" style="font-size: 1.2rem" aria-hidden="true"></i>&nbsp;<fmt:message key="message.warnLockOnFinish" />
-							</c:if>
-						</div>
+								<div id="file-upload-area" name="file-upload-area" class="m-1"></div>
+							</div>
 
-						<c:if test="${hasEditRight}">
-							<div class="form-group text-center">
-								<button id="uploadButton" type="submit" <c:if test="${sessionMap.finishLock || sessionMap.maxLimitReached}">disabled="disabled"</c:if>
-										class="btn btn-default btn-success btn-disable-on-submit"
-										title='<fmt:message key="label.add.tip" />' >
-									<i class="fa-solid fa-paper-plane" aria-hidden="true"></i> <fmt:message key="label.add" />
-								</button>
+							<!--File Description -->
+							<div class="form-floating m-3">
+								<form:textarea id="description" aria-multiline="true" aria-required="true" required="true" cssClass="form-control" path="description" placeholder="-"></form:textarea>
+								<label for="description"><fmt:message key="label.learner.fileDescription" /></label>
+								<div id="desc-error-msg" class="text-danger" style="display: none;"></div>
 							</div>
-						</c:if>
 
+							<div id="fileHelpBlock" class="form-text mx-3 mb-4 mt-2" >
+								<c:if test="${sessionMap.lockOnFinish}">
+									<i class="fa-solid fa-triangle-exclamation text-danger" style="font-size: 1.2rem" aria-hidden="true"></i>&nbsp;<fmt:message key="message.warnLockOnFinish" />
+								</c:if>
+							</div>
+
+							<c:if test="${hasEditRight}">
+								<div class="form-group text-center">
+									<button id="uploadButton" type="submit" <c:if test="${sessionMap.finishLock || sessionMap.maxLimitReached}">disabled="disabled"</c:if>
+											class="btn btn-default btn-success btn-disable-on-submit"
+											title='<fmt:message key="label.add.tip" />' >
+										<i class="fa-solid fa-paper-plane" aria-hidden="true"></i> <fmt:message key="label.add" />
+									</button>
+								</div>
+							</c:if>
+
+						</div>
 					</div>
-				</div>
-			</form:form>
+				</form:form>
 
-			<lams:WaitingSpinner id="attachmentArea_Busy"/>
+				<lams:WaitingSpinner id="attachmentArea_Busy"/>
 
-			<hr/>
-		</c:if>
+				<hr/>
+			</c:if>
+			<!-- end div uppy form-->
+			</div>
+		</div>
 
+
+
 		<!--Checks if the filesUploaded property of the SbmtLearnerForm is set -->
 		<c:choose>
 			<c:when test="${empty learner.filesUploaded && hasEditRight}">
@@ -378,7 +174,7 @@
 			</c:when>
 
 			<c:otherwise>
-				<div class="voffset10">
+				<div class="mt-5">
 					<fmt:message key="monitoring.user.submittedFiles" />: <c:out value="${fn:length(learner.filesUploaded)}" />
 				</div>
 
@@ -535,4 +331,237 @@
 	</div>
 	<div id="footer"></div>
 
-</lams:PageLearner>
\ No newline at end of file
+	<script>
+		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', finish);
+	
+		var UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
+				// convert Java syntax to JSON
+				EXE_FILE_TYPES = JSON.parse("[" + "${EXE_FILE_TYPES}".replace(/\.\w+/g, '"$&"') + "]"),
+				<fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
+				EXE_FILE_ERROR = decoderDiv.html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
+	
+	
+		$(document).ready(function() {
+			$("time.timeago").timeago();
+	
+			if ($('#file-upload-area').length == 1) {
+				initFileUpload('${learnerForm.tmpFileUploadId}', '${language}');
+			}
+	
+			<c:if test="${sessionMap.mode != 'author' and sessionMap.minLimitUploadNumber != null}">
+			var uploadedFilesNumber = +${learner.filesUploaded.size()};
+			if (uploadedFilesNumber >= ${sessionMap.minLimitUploadNumber}) {
+				$('.btn-hide-on-min-not-met').removeClass('btn-hide-on-min-not-met');
+			}
+			</c:if>
+	
+			<%-- Connect to command websocket only if it is learner UI --%>
+			<c:if test="${isLeadershipEnabled and sessionMap.mode == 'learner'}">
+			// command websocket stuff for refreshing
+			// trigger is an unique ID of page and action that command websocket code in Page.tag recognises
+			commandWebsocketHookTrigger = 'submit-files-leader-change-refresh-${sessionMap.toolSessionID}';
+			// if the trigger is recognised, the following action occurs
+			commandWebsocketHook = function() {
+				// in case in the address bar there is refresh.do, direct to the main learner URL
+				location.href = '<lams:WebAppURL />learning/learner.do?toolSessionID=${sessionMap.toolSessionID}';
+			};
+			</c:if>
+		});
+	
+		/**
+		 * Initialise Uppy as the file upload widget
+		 */
+		function initFileUpload(tmpFileUploadId, language) {
+			var uppyProperties = {
+				// upload immediately
+				autoProceed: true,
+				allowMultipleUploads: true,
+				debug: false,
+				restrictions: {
+					// taken from LAMS configuration
+					maxFileSize: +UPLOAD_FILE_MAX_SIZE,
+					maxNumberOfFiles: ${sessionMap.isMaxLimitUploadEnabled ? sessionMap.maxLimitUploadNumber - learner.filesUploaded.size() : 10}
+				},
+				meta: {
+					// all uploaded files go to this subdir in LAMS tmp dir
+					// its format is: upload_<userId>_<timestamp>
+					'tmpFileUploadId' : tmpFileUploadId,
+					'largeFilesAllowed' : false
+				},
+				onBeforeFileAdded: function(currentFile, files) {
+					var name = currentFile.data.name || currentFile.name,
+							extensionIndex = name.lastIndexOf('.'),
+							valid = extensionIndex < 0 || !EXE_FILE_TYPES.includes(name.substring(extensionIndex).trim().toLowerCase());
+					if (!valid) {
+						uppy.info(EXE_FILE_ERROR, 'error', 10000);
+					}
+	
+					return valid;
+				}
+			};
+	
+			switch(language) {
+				case 'es' : uppyProperties.locale = Uppy.locales.es_ES; break;
+				case 'fr' : uppyProperties.locale = Uppy.locales.fr_FR; break;
+				case 'el' : uppyProperties.locale = Uppy.locales.el_GR; break;
+			}
+	
+	
+			var uppy = Uppy.Core(uppyProperties);
+			// upload using Ajax
+			uppy.use(Uppy.XHRUpload, {
+				endpoint: LAMS_URL + 'tmpFileUpload',
+				fieldName : 'file',
+				// files are uploaded one by one
+				limit : 1
+			});
+	
+			uppy.use(Uppy.Dashboard, {
+				target: '#file-upload-area',
+				inline: true,
+				height: '410px',
+				width: '100%',
+				showProgressDetails : true,
+				hideRetryButton : true,
+				hideCancelButton : true,
+				showRemoveButtonAfterComplete: true,
+				proudlyDisplayPoweredByUppy: false
+			});
+			uppy.use(Uppy.Webcam, {
+				target: Uppy.Dashboard,
+				modes: ['picture']
+			});
+			uppy.use(ScreenCapture, { target: Uppy.Dashboard });
+	
+			uppy.on('upload-success', (file, response) => {
+				// if file name was modified by server, reflect it in Uppy
+				file.meta.name = response.body.name;
+			});
+	
+			uppy.on('file-removed', (file, reason) => {
+				if (reason === 'removed-by-user') {
+					// delete file from temporary folder on server
+					$.ajax({
+						url :  LAMS_URL + 'tmpFileUploadDelete',
+						data : {
+							'tmpFileUploadId' : tmpFileUploadId,
+							'name' : file.meta.name
+						}
+					})
+				}
+			})
+		}
+	
+		function finish() {
+			var finishUrl = "<lams:WebAppURL />learning/finish.do?sessionMapID=${sessionMapID}";
+			return validateFinish(finishUrl);
+		}
+		function notebook() {
+			var continueUrl = "<lams:WebAppURL />learning/newReflection.do?sessionMapID=${sessionMapID}";
+			return validateFinish(continueUrl);
+		}
+		function validateFinish(tUrl) {
+			var uploadedFilesNumber = +${learner.filesUploaded.size()};
+	
+			//enforce min files upload limit
+			<c:if test="${sessionMap.minLimitUploadNumber != null}">
+			if (uploadedFilesNumber < ${sessionMap.minLimitUploadNumber}) {
+				if (${sessionMap.mode eq 'author'}) {
+					alert('<fmt:message key="label.should.upload.another"><fmt:param value="${sessionMap.minLimitUploadNumber}" /></fmt:message>' +
+							'\n<fmt:message key="label.min.limit.preview"/>');
+				} else {
+					alert('<fmt:message key="label.should.upload.another"><fmt:param value="${sessionMap.minLimitUploadNumber}" /></fmt:message>');
+					return false;
+				}
+			}
+			</c:if>
+	
+			//let user confirm zero files upload
+			if (uploadedFilesNumber == 0) {
+				if (${sessionMap.lockOnFinish}) {
+					if (!confirm("<fmt:message key='learner.finish.without.upload'/>")) {
+						return false;
+					}
+				} else {
+					if (!confirm("<fmt:message key='messsage.learner.finish.confirm'/>")) {
+						return false;
+					}
+				}
+			}
+	
+			disableButtons();
+			location.href = tUrl;
+		}
+	
+		function clearFileError(errDivId) {
+			if ( ! errDivId || errDivId.length == 0 ) {
+				errDivId = 'file-error-msg';
+			}
+			var errDiv = $('#'+errDivId);
+			errDiv.empty();
+			errDiv.css( "display", "none" );
+		}
+	
+		function showFileError(error, errDivId) {
+			if ( ! errDivId || errDivId.length == 0 ) {
+				errDivId = 'file-error-msg';
+			}
+			var errDiv = $('#'+errDivId);
+			if ( errDiv.length > 0 ) {
+				errDiv.append(error);
+				errDiv.css( "display", "block" );
+			} else {
+				alert(error);
+			}
+		}
+	
+		function validateFileUpload() {
+			var valid = true;
+	
+			// check description
+			clearFileError("desc-error-msg");
+			if ( $('#description').val().trim().length == 0 ) {
+				var requiredMsg = '<fmt:message key="errors.required"><fmt:param><fmt:message key="label.learner.fileDescription"/></fmt:param></fmt:message>';
+				showFileError(requiredMsg, "desc-error-msg");
+				valid = false;
+			}
+	
+			if ( valid ) {
+				disableButtons();
+			}
+			return valid;
+		}
+	
+		function disableButtons() {
+			// do not disable the file button or the file will be missing on the upload.
+			$('.btn-disable-on-submit').prop('disabled', true);
+			$('a.btn-disable-on-submit').hide(); // links must be hidden, cannot be disabled
+	
+			// show the waiting area during the upload
+			var div = document.getElementById("attachmentArea_Busy");
+			if(div != null){
+				div.style.display = '';
+			}
+		}
+	
+		function deleteLearnerFile(detailId, filename) {
+			var msg = '<fmt:message key="message.monitor.confirm.original.learner.file.delete"/>';
+			msg = msg.replace('{0}', filename);
+			var answer = confirm(msg);
+			if (answer) {
+				$.ajax({
+					url: '<c:url value="/learning/deleteLearnerFile.do"/>',
+					data: 'detailId=' + detailId,
+					success: function () {
+						document.location.href = "<lams:WebAppURL />learning/${sessionMap.mode}.do?toolSessionID=${sessionMap.toolSessionID}";
+					},
+					error: function(error){
+						alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
+						alert("responseText: "+xhr.responseText);
+					}
+				});
+			}
+		}
+	</script>	
+</lams:PageLearner>
+
Index: lams_tool_sbmt/web/learner/submissionDeadline.jsp
===================================================================
diff -u -rc1d637e4d2786f97672dd38f6e3278d5c4f7b79c -reb89290d3882c2f77a92373fb37c53a38f8efef9
--- lams_tool_sbmt/web/learner/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision c1d637e4d2786f97672dd38f6e3278d5c4f7b79c)
+++ lams_tool_sbmt/web/learner/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -1,14 +1,8 @@
 <!DOCTYPE html>
-
 <%@include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-
-	<%@ include file="/common/header.jsp"%>
-
-	<title><fmt:message key="tool.display.name" /></title>
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}" >
 	<script type="text/javascript">
 		function finish() {
 			document.getElementById("finishButton").disabled = true;
@@ -20,49 +14,44 @@
 			location.href = finishUrl;
 		}
 	</script>
-</lams:head>
 
-<body class="stripes">
-
-	<c:set var="title" scope="request">
-		<fmt:message key="activity.title"></fmt:message>
-	</c:set>
-
-	<lams:Page type="learner" title="${title}">
-
-		<lams:Alert id="submissionDeadline" close="false" type="danger">
+	<div class="container-xxl">
+		<lams:Alert5 id="submissionDeadline" close="false" type="danger">
 			<fmt:message key="authoring.info.teacher.set.restriction">
 				<fmt:param>
 					<lams:Date value="${sessionMap.submissionDeadline}" />
 				</fmt:param>
 			</fmt:message>
-		</lams:Alert>
+		</lams:Alert5>
+	
+		<div class="activity-bottom-buttons">
+			<c:choose>
+				<c:when test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
+					<button name="continueButton" onclick="javascript:notebook();" class="btn btn-primary pull-right">
+						<fmt:message key="label.continue" />
+					</button>
+				</c:when>
+				<c:otherwise>
+					<a href="#nogo" name="finishButton" onclick="javascript:finish();"
+						class="btn btn-primary pull-right na" id="finishButton">
+						<span class="nextActivity"> <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>
+					</a>
+				</c:otherwise>
+			</c:choose>
+		</div>
+	
+		<div id="footer"></div>		
 
-		<c:choose>
-			<c:when test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
-				<button name="continueButton" onclick="javascript:notebook();" class="btn btn-primary pull-right">
-					<fmt:message key="label.continue" />
-				</button>
-			</c:when>
-			<c:otherwise>
-				<a href="#nogo" name="finishButton" onclick="javascript:finish();"
-					class="btn btn-primary pull-right na" id="finishButton">
-					<span class="nextActivity"> <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>
-				</a>
-			</c:otherwise>
-		</c:choose>
+	</div>
 
-		<div id="footer"></div>
 
-	</lams:Page>
 
-</body>
-</lams:html>
+</lams:PageLearner>
Index: lams_tool_sbmt/web/learner/waitforleader.jsp
===================================================================
diff -u -rf86004309489cb81f283d1962b481b4bbb3facd6 -reb89290d3882c2f77a92373fb37c53a38f8efef9
--- lams_tool_sbmt/web/learner/waitforleader.jsp	(.../waitforleader.jsp)	(revision f86004309489cb81f283d1962b481b4bbb3facd6)
+++ lams_tool_sbmt/web/learner/waitforleader.jsp	(.../waitforleader.jsp)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
@@ -2,70 +2,61 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="activity.title" /></title>
 
-	<lams:css />
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}" >
 
+	<div id="instructions" class="instructions">
+		<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+	</div>
+	<div class="row">
+		<div class="col-12 text-primary">
+			<hr class="mx-5">
+		</div>
+	</div>
+	<div class="container-xxl">
+		<div class="row">
+			<div class="col-12">
+				<div class="card lcard lcard-no-borders shadow mb-3">
+					<div class="card-header lcard-header-button-border">
+						<fmt:message key="${waitingMessageKey}" />
+					</div>
+					<div class="card-body mb-3">
+						<c:if test="${not empty groupUsers}">
+		
+							<div class="mb-2">
+								<fmt:message key="label.users.from.group" />
+							</div>
+							
+							<div id="usersInGroup" class="row mt-2" role="list">
+								<c:forEach var="user" items="${groupUsers}">
+									<div role="listitem" class="col-md-4 my-2 text-md-start">
+										<lams:Portrait userId="${user.userID}"/>
+										<span>
+											<c:out value="${user.firstName} ${user.lastName}" escapeXml="true" />
+										</span>
+									</div>
+								</c:forEach>
+							</div>
+							
+						</c:if>
+					</div>
+				</div>
+				<div class="activity-bottom-buttons">
+					<button id="finishButton" name="refreshButton" onclick="refresh();" class="btn btn-primary">
+						<fmt:message key="label.refresh" />
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>				
 	<script type="text/javascript">
 		function refresh() {
 			location.reload(true);
 		}
 		
 		//refresh page every 30 sec
 		setTimeout("refresh();",30000);
-
-		$(document).ready(function(){
-			<%-- Connect to command websocket only if it is learner UI --%>
-			<c:if test="${sessionMap.mode == 'learner'}">
-				// command websocket stuff for refreshing
-				// trigger is an unique ID of page and action that command websocket code in Page.tag recognises
-				commandWebsocketHookTrigger = 'submit-files-leader-change-refresh-${sessionMap.toolSessionID}';
-				// if the trigger is recognised, the following action occurs
-				commandWebsocketHook = function() {
-					location.reload();
-				};
-			</c:if>
-		});
-    </script>
-</lams:head>
-<body class="stripes">
-
-	<lams:Page type="learner" title="${sessionMap.title}">
 	
-		<div class="panel">
-			<c:out value="${sessionMap.instruction}" escapeXml="false" />
-		</div>
+	</script>
+</lams:PageLearner>
 
-		<h4>
-			<fmt:message key="${waitingMessageKey}" />
-		</h4>
-		
-		<c:if test="${not empty groupUsers}">
-		
-			<div class="voffset5">
-				<fmt:message key="label.users.from.group" />
-			</div>
-		
-			<div id="usersInGroup">
-				<c:forEach var="user" items="${groupUsers}">
-					<div class="voffset10 loffset10">
-						<lams:Portrait userId="${user.userID}"/>
-						<span>
-							<c:out value="${user.firstName} ${user.lastName}" escapeXml="true" />
-						</span>
-					</div>
-				</c:forEach>
-			</div>
-		</c:if>
-		
-		<button name="refreshButton" onclick="refresh();" class="btn btn-sm btn-primary pull-right">
-			<fmt:message key="label.refresh" />
-		</button>
-
-	</lams:Page>
-
-</body>
-</lams:html>
\ No newline at end of file