Index: lams_tool_sbmt/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u -r5f8dff0cc7d791c9cb34c850aaf235ca604055d7 -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68
--- lams_tool_sbmt/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 5f8dff0cc7d791c9cb34c850aaf235ca604055d7)
+++ lams_tool_sbmt/web/WEB-INF/tags/Alert.tag	(.../Alert.tag)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
@@ -27,19 +27,18 @@
 	</c:when>
 </c:choose>
 
-<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 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>
 		</div>
 	</div>
Index: lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u
--- lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(revision 0)
+++ lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
@@ -0,0 +1,124 @@
+<%@ tag body-content="scriptless" %>
+<%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+
+<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
+<c:choose>
+    <c:when test="${not empty pageLearnerPortraitUuid}">
+        <c:set var="pageLearnerPortraitSrc">${lams}download/?uuid=${pageLearnerPortraitUuid}&preferDownload=false&version=4</c:set>
+    </c:when>
+    <c:otherwise>
+        <c:set var="pageLearnerPortraitSrc">${lams}images/css/john-doe-portrait.jpg</c:set>
+    </c:otherwise>
+</c:choose>
+<c:set var="pageLearnerFirstName"><lams:user property="firstName" /></c:set>
+<c:set var="pageLearnerLastName"><lams:user property="lastName" /></c:set>
+
+<lams:html>
+    <lams:head>
+        <title>LAMS ::
+            <c:choose>
+                <c:when test="${empty title}">
+                    <fmt:message key="activity.title"/>
+                </c:when>
+                <c:otherwise>
+                    <c:out value="${title}" />
+                </c:otherwise>
+            </c:choose>
+        </title>
+
+        <link rel="icon" type="image/x-icon" href="<lams:LAMSURL/>images/svg/lamsv5_logo.svg">
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+        <link rel="stylesheet" href="<lams:LAMSURL/>learning/css/components-learner.css">
+
+        <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/popper.min.js"></script>
+        <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+        <lams:JSImport src="learning/includes/javascript/learnerPage.js" />
+        <lams:JSImport src="includes/javascript/dialog5.js" />
+
+        <script>
+            var LAMS_URL = '<lams:LAMSURL/>';
+            $(document).ready(function (){
+                initLearnerPage(${toolSessionID});
+            });
+        </script>
+    </lams:head>
+
+    <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="true"/>
+            </a>
+
+            <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">
+            <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>
+                </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">
+                                Progress
+                            </div>
+                            <div class="col-6 text-end" 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>
+                </div>
+            </header>
+
+            <main class="p-3" id="component-main-content" tabindex="-1">
+                <c:if test="${not empty title}">
+                    <h2 class="mb-3"><c:out value="${title}" escapeXml="true" /></h2>
+                </c:if>
+
+                <jsp:doBody/>
+
+            </main>
+        </div>
+    </div>
+    </body>
+
+</lams:html>
\ No newline at end of file
Index: lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r6a7abdf7fa2c5646e736550302dcc376397cd645 -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68
--- lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 6a7abdf7fa2c5646e736550302dcc376397cd645)
+++ lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
@@ -361,6 +361,10 @@
 		<path>/WEB-INF/tags/Page5.tag</path>
    	</tag-file>
    	<tag-file>
+	    <name>PageLearner</name>
+		<path>/WEB-INF/tags/PageLearner.tag</path>
+   	</tag-file>
+   	<tag-file>
 	    <name>TSTable5</name>
 		<path>/WEB-INF/tags/TSTable5.tag</path>
    	</tag-file>    
@@ -445,4 +449,4 @@
        <name>Switch</name>
        <path>/WEB-INF/tags/Switch.tag</path>
    	</tag-file>
-</taglib>
+</taglib>
\ No newline at end of file
Index: lams_tool_sbmt/web/common/header.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68
--- lams_tool_sbmt/web/common/header.jsp	(.../header.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_sbmt/web/common/header.jsp	(.../header.jsp)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
@@ -15,14 +15,13 @@
 	<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>
 
+
 	
Index: lams_tool_sbmt/web/learner/sbmtlearner.jsp
===================================================================
diff -u -rca136be52df70bbdd506d2383d4d4bd2201a3b3f -r3db9ad9f8b7c6085cf5adca2cdf463254f81cd68
--- lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision ca136be52df70bbdd506d2383d4d4bd2201a3b3f)
+++ lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision 3db9ad9f8b7c6085cf5adca2cdf463254f81cd68)
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<%@include file="/common/taglibs.jsp"%>
+<%@ 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>
@@ -9,12 +9,9 @@
 <c:set var="isLeadershipEnabled" value="${sessionMap.useSelectLeaderToolOuput}"/>
 <c:set var="hasEditRight" value="${sessionMap.hasEditRight}"/>
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
-<lams:html>
-<lams:head>
-		
-	<title><fmt:message key="tool.display.name" /></title>
-	<%@ include file="/common/header.jsp"%>
-	
+
+	<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" />
 	<style>
@@ -23,16 +20,16 @@
 		}
 	</style>
 	
-	<script type="text/javascript" src="${lams}/includes/javascript/uppy/uppy.min.js"></script>
+	<script type="text/javascript" src="/lams/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 type="text/javascript" src="/lams/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 type="text/javascript" src="/lams/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 type="text/javascript" src="/lams/includes/javascript/uppy/el_GR.min.js"></script>
 		</c:when>
 	</c:choose>
 	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
@@ -128,12 +125,13 @@
 				  target: '#file-upload-area',
 				  inline: true,
 				  height: 300,
-				  width: '100%',
+				  width: '90%',
 				  showProgressDetails : true,
 				  hideRetryButton : true,
 				  hideCancelButton : true,
 				  showRemoveButtonAfterComplete: true,
-				  proudlyDisplayPoweredByUppy: false
+				  proudlyDisplayPoweredByUppy: false,
+				  note: 'Hello world!'
 			  });
 			  uppy.use(Uppy.Webcam, {
 				  target: Uppy.Dashboard,
@@ -270,33 +268,24 @@
 			}
 		}
 	</script>
-</lams:head>
-<body class="stripes">
-
-	<lams:Page type="learner" title="${sessionMap.title}" formID="learnerForm">
-		<div class="panel">
-			<c:out value="${sessionMap.instruction}" escapeXml="false" />
-		</div>
-
+	<div id="instructions" class="instructions">
+		<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}">
+			<c:if test="${sessionMap.lockOnFinish} && ${sessionMap.userFinished}">
 				<!--  Lock when finished -->
-				<lams:Alert id="lockWhenFinished" type="info" close="true">
-					<c:choose>
-						<c:when test="${sessionMap.userFinished}">
+				<lams:Alert id="lockWhenFinished" type="info">
 							<fmt:message key="message.activityLocked" />
-						</c:when>
-						<c:otherwise>
-							<fmt:message key="message.warnLockOnFinish" />
-						</c:otherwise>
-					</c:choose>
 				</lams:Alert>
 			</c:if>
 
 			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<lams:Alert id="submissionDeadline" type="info" close="true">
+				<lams:Alert id="submissionDeadline" type="warning" >
 					<fmt:message key="authoring.info.teacher.set.restriction">
 						<fmt:param>
 							<lams:Date value="${sessionMap.submissionDeadline}" />
@@ -307,15 +296,15 @@
 
 			<c:if test="${not sessionMap.userFinished || not sessionMap.lockOnFinish}">
 				<c:if test="${sessionMap.isMaxLimitUploadEnabled}">
-					<lams:Alert id="limitUploads" close="true" type="info">
+					<lams:Alert id="limitUploads" close="true" type="warning">
 						<fmt:message key="message.left.upload.limit">
 							<fmt:param value="${sessionMap.maxLimitUploadNumber}" />
 						</fmt:message>
 					</lams:Alert>
 				</c:if>
 				
 				<c:if test="${sessionMap.minLimitUploadNumber != null}">
-					<lams:Alert id="minLimitUploadNumber" close="true" type="info">
+					<lams:Alert id="minLimitUploadNumber" close="true" type="warning">
 						<fmt:message key="label.should.upload.another">
 							<fmt:param value="${sessionMap.minLimitUploadNumber}" />
 						</fmt:message>
@@ -333,34 +322,37 @@
 				<input type="hidden" name="tmpFileUploadId" value="${learnerForm.tmpFileUploadId}" />
 				
 				<!--File path row -->
-				<div class="panel panel-default">
-					<div class="panel-heading panel-title">
+				<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="panel-body bg-success">
-						<div class="form-group">
-							<label for="file-upload-area"><fmt:message key="label.learner.filePath" />&nbsp;<span style="color: red">*</span></label>
+					<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" class="voffset20"></div>
+							<div id="file-upload-area" name="file-upload-area" class="m-1"></div>
 						</div>
 						
 						<!--File Description -->
-						<div class="form-group">	
-							<label for="description"><fmt:message key="label.learner.fileDescription" />&nbsp;<span
-								style="color: red">*</span></label>
-							<form:textarea id="description" cssClass="form-control" path="description"></form:textarea>
+						<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>
 						
-						<p class="help-block"><small><fmt:message key="errors.required"><fmt:param>*</fmt:param></fmt:message></small></p>
+						<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>
 										class="btn btn-default btn-success btn-disable-on-submit"
 										title='<fmt:message key="label.add.tip" />' >
-										<i class="fa fa-xs fa-plus"></i> <fmt:message key="label.add" />
+										<i class="fa-solid fa-paper-plane" aria-hidden="true"></i> <fmt:message key="label.add" />
 									</button>
 								</div>
 							</c:if>
@@ -509,7 +501,7 @@
 		</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)}">
@@ -536,8 +528,7 @@
 				</c:otherwise>
 			</c:choose>
 		</c:if>
-
-		<div id="footer"></div>
-	</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+		</div>
+	</div>	
+	<div id="footer"></div>
+	</lams:PageLearner>