Index: lams_central/web/css/uppy.custom5.css
===================================================================
diff -u
--- lams_central/web/css/uppy.custom5.css	(revision 0)
+++ lams_central/web/css/uppy.custom5.css	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -0,0 +1,4 @@
+.uppy-Dashboard-AddFiles-title {
+	font-size: 20px !important;
+	font-weight: normal !important;
+}
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/Alert5.tag
===================================================================
diff -u -r5f8dff0cc7d791c9cb34c850aaf235ca604055d7 -r129046221bc61bf76b85db3dec56fae24bc18cab
--- lams_tool_nb/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 5f8dff0cc7d791c9cb34c850aaf235ca604055d7)
+++ lams_tool_nb/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -30,13 +30,17 @@
 
 <div class="row justify-content-md-center">
 	<div class="col-md-auto">
-		<div id="${idName}" class="alert alert-${alertType} shadow" role="alert">
+		<div id="${idName}" class="alert alert-${alertType} alert-dismissible shadow-sm" role="alert">
 			<c:if test="${not empty title}">
 				<span class="fa fa-${iconType} "></span> <span class="alert-heading font-weight-bold">${title}</span>
 				<hr>
 			</c:if>
+			<c:if test="${close}">
+				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+			</c:if>
+
 			<p class="mb-0">
-			<jsp:doBody />
+				<jsp:doBody />
 			</p>
 		</div>
 	</div>
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r153933d5279d59317b482a5196aa9b9a3ee49e82 -r129046221bc61bf76b85db3dec56fae24bc18cab
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 153933d5279d59317b482a5196aa9b9a3ee49e82)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -47,7 +47,9 @@
         <lams:JSImport src="includes/javascript/dialog5.js" />
 
         <script>
-            var LAMS_URL = '<lams:LAMSURL/>';
+            const LAMS_URL = '<lams:LAMSURL/>',
+                decoderDiv = $('<div />');
+
             $(document).ready(function (){
                 initLearnerPage(${toolSessionID});
             });
Index: lams_tool_sbmt/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68 -r129046221bc61bf76b85db3dec56fae24bc18cab
--- lams_tool_sbmt/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
+++ lams_tool_sbmt/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -27,19 +27,20 @@
 	</c:when>
 </c:choose>
 
-<div class="row justify-content-md-center">
-	<div class="col-md-auto">
-		<div id="${idName}" class="alert alert-${alertType} alert-dismissible fade show shadow-sm" role="alert">
-			<c:if test="${not empty title}">
-				<span class="fa fa-${iconType} "></span> <span class="alert-heading font-weight-bold">${title}</span>
-				<hr>
-			</c:if>
-			<c:if test="${close}">
-				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-			</c:if>
-			<div class="my-0">
-			<jsp:doBody />
+<div class="row no-gutter">
+	<div class="col-12 col-xs-12 col-sm-offset-2 col-sm-8">
+		<div id="${idName}" class="alert alert-${alertType}" style="margin-bottom: 10px; padding: 8px">
+			<div class="media">
+				<div class="media-left">
+					<i class="fa fa-lg fa-${iconType} text-muted"></i>
+				</div>
+				<div class="media-body">
+					<c:if test="${close}">
+						<a href="#" class="close pull-right" data-dismiss="alert" aria-label="close">&times;</a>
+					</c:if>
+					<jsp:doBody />
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file
Index: lams_tool_sbmt/web/WEB-INF/tags/Alert5.tag
===================================================================
diff -u -r5f8dff0cc7d791c9cb34c850aaf235ca604055d7 -r129046221bc61bf76b85db3dec56fae24bc18cab
--- lams_tool_sbmt/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 5f8dff0cc7d791c9cb34c850aaf235ca604055d7)
+++ lams_tool_sbmt/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -30,13 +30,17 @@
 
 <div class="row justify-content-md-center">
 	<div class="col-md-auto">
-		<div id="${idName}" class="alert alert-${alertType} shadow" role="alert">
+		<div id="${idName}" class="alert alert-${alertType} alert-dismissible shadow-sm" role="alert">
 			<c:if test="${not empty title}">
 				<span class="fa fa-${iconType} "></span> <span class="alert-heading font-weight-bold">${title}</span>
 				<hr>
 			</c:if>
+			<c:if test="${close}">
+				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+			</c:if>
+
 			<p class="mb-0">
-			<jsp:doBody />
+				<jsp:doBody />
 			</p>
 		</div>
 	</div>
Index: lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68 -r129046221bc61bf76b85db3dec56fae24bc18cab
--- lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
+++ lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -47,7 +47,9 @@
         <lams:JSImport src="includes/javascript/dialog5.js" />
 
         <script>
-            var LAMS_URL = '<lams:LAMSURL/>';
+            const LAMS_URL = '<lams:LAMSURL/>',
+                decoderDiv = $('<div />');
+
             $(document).ready(function (){
                 initLearnerPage(${toolSessionID});
             });
Index: lams_tool_sbmt/web/common/header.jsp
===================================================================
diff -u -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68 -r129046221bc61bf76b85db3dec56fae24bc18cab
--- lams_tool_sbmt/web/common/header.jsp	(.../header.jsp)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
+++ lams_tool_sbmt/web/common/header.jsp	(.../header.jsp)	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -15,13 +15,12 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
  	<!-- ********************  CSS ********************** -->
+	<lams:css />
 
  	<!-- ********************  javascript ********************** -->
 	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL />/includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(localeLanguage)}.js"></script>
-
-
-	
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
\ No newline at end of file
Index: lams_tool_sbmt/web/learner/sbmtlearner.jsp
===================================================================
diff -u -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68 -r129046221bc61bf76b85db3dec56fae24bc18cab
--- lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
+++ lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision 129046221bc61bf76b85db3dec56fae24bc18cab)
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+
 <%@ 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]}" />
@@ -10,153 +12,152 @@
 <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}" >
+<lams:PageLearner title="${sessionMap.title}" toolSessionID="${sessionMap.toolSessionID}" >
 
-	<link href="/lams/css/uppy.min.css"    rel="stylesheet" type="text/css" />
-	<link href="/lams/css/uppy.custom.css" rel="stylesheet" type="text/css" />
+	<link href="<lams:LAMSURL />css/uppy.min.css"    rel="stylesheet" type="text/css" />
+	<link href="<lams:LAMSURL />css/uppy.custom5.css" rel="stylesheet" type="text/css" />
 	<style>
 		.btn-hide-on-min-not-met {
 			display: none;
 		}
 	</style>
-	
-	<script type="text/javascript" src="/lams/includes/javascript/uppy/uppy.min.js"></script>
+
+	<script src="<lams:LAMSURL />includes/javascript/jquery.timeago.js"></script>
+	<script src="<lams:LAMSURL />includes/javascript/timeagoi18n/jquery.timeago.${fn:toLowerCase(language)}.js"></script>
+	<script src="<lams:LAMSURL />includes/javascript/uppy/uppy.min.js"></script>
 	<c:choose>
 		<c:when test="${language eq 'es'}">
-			<script type="text/javascript" src="/lams/includes/javascript/uppy/es_ES.min.js"></script>
+			<script src="<lams:LAMSURL />includes/javascript/uppy/es_ES.min.js"></script>
 		</c:when>
 		<c:when test="${language eq 'fr'}">
-			<script type="text/javascript" src="/lams/includes/javascript/uppy/fr_FR.min.js"></script>
+			<script src="<lams:LAMSURL />includes/javascript/uppy/fr_FR.min.js"></script>
 		</c:when>
 		<c:when test="${language eq 'el'}">
-			<script type="text/javascript" src="/lams/includes/javascript/uppy/el_GR.min.js"></script>
+			<script src="<lams:LAMSURL />includes/javascript/uppy/el_GR.min.js"></script>
 		</c:when>
 	</c:choose>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-		
-	<script type="text/javascript">
+
+	<script>
 		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', finish);
-		
-		var LAMS_URL = '<lams:LAMSURL/>',
-			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, '"$&"') + "]"),
-		   decoderDiv = $('<div />'),
-	       <fmt:message key="error.attachment.executable" var="EXE_FILE_ERROR_VAR" />
-	       EXE_FILE_ERROR = decoderDiv.html('<c:out value="${EXE_FILE_ERROR_VAR}" />').text();
-		
-		
+
+		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');
-				}
+			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}';
-				};
+			// 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: {
+			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
-				    	}
-				    })
-				  }
-			  })
+					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);
@@ -170,15 +171,15 @@
 
 			//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;
-					}
+			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
@@ -197,7 +198,7 @@
 			disableButtons();
 			location.href = tUrl;
 		}
-		
+
 		function clearFileError(errDivId) {
 			if ( ! errDivId || errDivId.length == 0 ) {
 				errDivId = 'file-error-msg';
@@ -206,7 +207,7 @@
 			errDiv.empty();
 			errDiv.css( "display", "none" );
 		}
-		
+
 		function showFileError(error, errDivId) {
 			if ( ! errDivId || errDivId.length == 0 ) {
 				errDivId = 'file-error-msg';
@@ -219,7 +220,7 @@
 				alert(error);
 			}
 		}
-		
+
 		function validateFileUpload() {
 			var valid = true;
 
@@ -230,85 +231,87 @@
 				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) {	
+			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);
-			        }
-			    });
+					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>
+
 	<div id="instructions" class="instructions">
 		<c:out value="${sessionMap.instruction}" escapeXml="false" />
-	</div>	
+	</div>
+
 	<div class="container-xxl">
 		<div class="text-primary">
 			<hr class="mx-5">
-		</div>		
+		</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:Alert id="lockWhenFinished" type="info">
-							<fmt:message key="message.activityLocked" />
-				</lams:Alert>
+				<lams:Alert5 id="lockWhenFinished" type="info">
+					<fmt:message key="message.activityLocked" />
+				</lams:Alert5>
 			</c:if>
 
 			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<lams:Alert id="submissionDeadline" type="warning" >
+				<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:Alert>
+				</lams:Alert5>
 			</c:if>
 
 			<c:if test="${not sessionMap.userFinished || not sessionMap.lockOnFinish}">
 				<c:if test="${sessionMap.isMaxLimitUploadEnabled}">
-					<lams:Alert id="limitUploads" close="true" type="warning">
+					<lams:Alert5 id="limitUploads" close="true" type="warning">
 						<fmt:message key="message.left.upload.limit">
 							<fmt:param value="${sessionMap.maxLimitUploadNumber}" />
 						</fmt:message>
-					</lams:Alert>
+					</lams:Alert5>
 				</c:if>
-				
+
 				<c:if test="${sessionMap.minLimitUploadNumber != null}">
-					<lams:Alert id="minLimitUploadNumber" close="true" type="warning">
+					<lams:Alert5 id="minLimitUploadNumber" close="true" type="warning">
 						<fmt:message key="label.should.upload.another">
 							<fmt:param value="${sessionMap.minLimitUploadNumber}" />
 						</fmt:message>
-					</lams:Alert>
+					</lams:Alert5>
 				</c:if>
 			</c:if>
 		</c:if>
@@ -320,52 +323,52 @@
 				<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
 				<input type="hidden" name="toolSessionID" value="${toolSessionID}" />
 				<input type="hidden" name="tmpFileUploadId" value="${learnerForm.tmpFileUploadId}" />
-				
+
 				<!--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="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>
 						</div>
-						
+
 						<!--File Description -->
-						<div class="form-floating">	
+						<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 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>
-						
-							<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>
+
+						<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>
-						
+									<i class="fa-solid fa-paper-plane" aria-hidden="true"></i> <fmt:message key="label.add" />
+								</button>
+							</div>
+						</c:if>
+
 					</div>
 				</div>
 			</form:form>
-				
+
 			<lams:WaitingSpinner id="attachmentArea_Busy"/>
-			
-			<hr width="100%"/>
+
+			<hr/>
 		</c:if>
-		
+
 		<!--Checks if the filesUploaded property of the SbmtLearnerForm is set -->
 		<c:choose>
 			<c:when test="${empty learner.filesUploaded && hasEditRight}">
@@ -378,48 +381,48 @@
 				<div class="voffset10">
 					<fmt:message key="monitoring.user.submittedFiles" />: <c:out value="${fn:length(learner.filesUploaded)}" />
 				</div>
-				
+
 				<table class="table table-condensed voffset20">
 					<c:forEach var="file" items="${learner.filesUploaded}" varStatus="status">
-					
+
 						<!--The name of the File -->
 						<tr class="active">
 							<td colspan="${file.currentLearner ? 2 : 3}">
 								<c:out value="${status.count}" />) <c:out value="${file.filePath}" />
-								
+
 								<c:if test="${file.currentLearner}">
-									<c:set var="downloadURL">
-										<c:url value="/download?uuid=${file.displayUuid}&versionID=${file.versionID}&preferDownload=true" />
-									</c:set>
-									</td>
-									
-									<td>
-										<c:if test="${empty file.marks && hasEditRight}">
-										 	<a href="javascript:deleteLearnerFile(${file.submissionID}, '${file.filePath}');" class="btn btn-default btn-disable-on-submit pull-right">
-							                      <i class="fa fa-trash" title="<fmt:message key="label.monitoring.original.learner.file.delete" />"></i> <span class="hidden-xs"></span>
-						                 	</a>
-						                 </c:if>
-					                 
-										<a href="${downloadURL}" title="<fmt:message key="label.download" />" class="btn btn-default btn-disable-on-submit pull-right">
-											<i class="fa fa-download" ></i>
-										</a>
-									</td>
+								<c:set var="downloadURL">
+									<c:url value="/download?uuid=${file.displayUuid}&versionID=${file.versionID}&preferDownload=true" />
+								</c:set>
+							</td>
+
+							<td>
+								<c:if test="${empty file.marks && hasEditRight}">
+									<a href="javascript:deleteLearnerFile(${file.submissionID}, '${file.filePath}');" class="btn btn-default btn-disable-on-submit pull-right">
+										<i class="fa fa-trash" title="<fmt:message key="label.monitoring.original.learner.file.delete" />"></i> <span class="hidden-xs"></span>
+									</a>
 								</c:if>
+
+								<a href="${downloadURL}" title="<fmt:message key="label.download" />" class="btn btn-default btn-disable-on-submit pull-right">
+									<i class="fa fa-download" ></i>
+								</a>
 							</td>
+							</c:if>
+							</td>
 						</tr>
-						
+
 						<!--The description of the File -->
 						<tr>
 							<td colspan="3">
 								<lams:out value="${file.fileDescription}" escapeHtml="true" />
-								
+
 								<div class="text-muted voffset10">
 									<fmt:message key="label.learner.time" />&nbsp;
 									<lams:Date value="${file.dateOfSubmission}" timeago="true"/>
 								</div>
 							</td>
 						</tr>
-	
+
 						<!--Comments -->
 						<c:if test="${sessionMap.isMarksReleased and not empty file.comments}">
 							<tr>
@@ -429,7 +432,7 @@
 								</td>
 							</tr>
 						</c:if>
-		
+
 						<!--Marks-->
 						<c:if test="${sessionMap.isMarksReleased and not empty file.marks}">
 							<tr>
@@ -439,9 +442,9 @@
 								</td>
 							</tr>
 						</c:if>
-						
+
 						<!--Marked file-->
-						<c:if  test="${sessionMap.isMarksReleased and not empty file.markFileUUID}">	
+						<c:if  test="${sessionMap.isMarksReleased and not empty file.markFileUUID}">
 							<tr>
 								<td><fmt:message key="label.monitor.mark.markedFile" /></td>
 								<td>
@@ -456,12 +459,12 @@
 									</a>
 								</td>
 							</tr>
-						</c:if>	
+						</c:if>
 					</c:forEach>
 				</table>
 			</c:otherwise>
 		</c:choose>
-		
+
 		<!-- reflection -->
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
@@ -491,44 +494,45 @@
 					</div>
 
 					<c:if test="${sessionMap.mode != 'teacher'}">
-					<button id="notebookButton" name="notebookButton" style="margin-top: 10px" onclick="javascript:notebook();"
-						class="btn btn-sm btn-primary btn-disable-on-submit pull-left" >
-						<fmt:message key="label.edit" />
-					</button>
+						<button id="notebookButton" name="notebookButton" style="margin-top: 10px" onclick="javascript:notebook();"
+								class="btn btn-sm btn-primary btn-disable-on-submit pull-left" >
+							<fmt:message key="label.edit" />
+						</button>
 					</c:if>
 				</div>
 			</div>
 		</c:if>
-		
+
 		<!-- submit buttons -->
 		<div class="activity-bottom-buttons">
-		<c:if test="${sessionMap.mode != 'teacher'}">
-			<c:choose>
-				<c:when test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
-					<button id="notebookButton" onclick="javascript:notebook();"
-							class="btn btn-primary btn-disable-on-submit pull-right
+			<c:if test="${sessionMap.mode != 'teacher'}">
+				<c:choose>
+					<c:when test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
+						<button id="notebookButton" onclick="javascript:notebook();"
+								class="btn btn-primary btn-disable-on-submit pull-right
 								   ${sessionMap.mode eq 'author' or empty sessionMap.minLimitUploadNumber ? '' : 'btn-hide-on-min-not-met'}">
-						<fmt:message key="label.continue" />
-					</button>
-				</c:when>
-				<c:otherwise>
-					<button type="button" 
-							class="btn btn-primary btn-disable-on-submit pull-right na
+							<fmt:message key="label.continue" />
+						</button>
+					</c:when>
+					<c:otherwise>
+						<button type="button"
+								class="btn btn-primary btn-disable-on-submit pull-right na
 								   ${sessionMap.mode eq 'author' or empty sessionMap.minLimitUploadNumber ? '' : 'btn-hide-on-min-not-met'}"
-							id="finishButton">
-						<c:choose>
-							<c:when test="${isLastActivity}">
-								<fmt:message key="button.submit" />
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="button.finish" />
-							</c:otherwise>
-						</c:choose>
-					</button>
-				</c:otherwise>
-			</c:choose>
-		</c:if>
+								id="finishButton">
+							<c:choose>
+								<c:when test="${isLastActivity}">
+									<fmt:message key="button.submit" />
+								</c:when>
+								<c:otherwise>
+									<fmt:message key="button.finish" />
+								</c:otherwise>
+							</c:choose>
+						</button>
+					</c:otherwise>
+				</c:choose>
+			</c:if>
 		</div>
-	</div>	
+	</div>
 	<div id="footer"></div>
-	</lams:PageLearner>
+
+</lams:PageLearner>
\ No newline at end of file