Index: lams_tool_task/web/pages/learning/learning.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -4,6 +4,7 @@
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 <%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
 
+<c:set var="lams"><lams:LAMSURL/></c:set>
 <c:if test="${not empty param.sessionMapID}">
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
 </c:if>
@@ -12,20 +13,13 @@
 <c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
 <c:set var="taskList" value="${sessionMap.taskList}" />
 <c:set var="finishedLock" value="${sessionMap.finishedLock}" />
-
 <c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
 <c:set var="UPLOAD_FILE_MAX_SIZE_AS_USER_STRING"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE))%></c:set>
 <c:set var="EXE_FILE_TYPES"><%=Configuration.get(ConfigurationKeys.EXE_EXTENSIONS)%></c:set>
 <c:set var="language"><lams:user property="localeLanguage"/></c:set>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
+<lams:PageLearner title="${taskList.title}" toolSessionID="${toolSessionID}">
 	<link href="${lams}css/uppy.min.css" rel="stylesheet" type="text/css" />
-
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
 	
 	<script type="text/javascript" src="${lams}includes/javascript/uppy/uppy.min.js"></script>
 	<c:choose>
@@ -39,13 +33,11 @@
 			<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" />
+	<lams:JSImport src="includes/javascript/upload.js" />
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${toolSessionID}', '', finishSession);
 		
-		var LAMS_URL = '${lams}',
-	 		UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>',
+		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, '"$&"') + "]"),
 		   EXE_FILE_ERROR = '<spring:escapeBody javaScriptEscape="true"><fmt:message key="error.attachment.executable" /></spring:escapeBody>';
@@ -68,8 +60,7 @@
 		}
 	
 		function validateFiles() {
-			var fileSelect = document.getElementById('uploadButton');
-			var files = fileSelect.files;
+			var files = uppy.getFiles();
 			if (files.length == 0) {
 				return false;
 			} else {
@@ -151,7 +142,11 @@
 					//show complete item button in case comment is required and only its absence prevented it from completion
 					var i = $("#item-faminus-" + itemUid);
 					if (eval(i.data("waiting-for-comment"))) {
-						i.replaceWith( '<a href="javascript:;" onclick="return completeItem(' + itemUid + ')"><i class="fa fa-lg fa-square-o"></i></a>' );
+						i.parent().replaceWith( '<button type="button" onClick="javascript:completeItem(' + itemUid + ')" class="complete-item-button btn btn-success no-shadow">' + 
+											'<i class="fa-solid fa-pen-to-square fa-xl me-1"></i>' +
+											'<fmt:message key="label.completed" />' +
+										'</button> '
+						);
 					}
 				}
 			);
@@ -160,6 +155,7 @@
 		/**
 		 * Initialised Uppy as the file upload widget
 		 */
+		var uppy;
 		function initFileUpload(target, tmpFileUploadId, language) {
 			  var uppyProperties = {
 				  id : 'uppy-' + target,
@@ -197,7 +193,7 @@
 			  }
 			  
 			  
-			  let uppy = Uppy.Core(uppyProperties);
+			  uppy = Uppy.Core(uppyProperties);
 			  // upload using Ajax
 			  uppy.use(Uppy.XHRUpload, {
 				  endpoint: LAMS_URL + 'tmpFileUpload',
@@ -246,32 +242,25 @@
 		}
 	</script>
 	<script type="text/javascript" src="/lams/includes/javascript/jquery.timeago.js"></script>
-</lams:head>
-<body class="stripes">
 
-	<lams:Page type="learner" title="${taskList.title}"> 
-
+	<div id="container-main">
+			
 		<!--Task Information-->
 
-		<lams:errors/>
+		<lams:errors5/>
 
 		<c:if test="${not empty taskList.submissionDeadline}">
-			<lams:Alert id="submissionDeadline" type="info" close="true">
+			<lams:Alert5 id="submissionDeadline" type="info" close="true">
 				<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>
 
-
-		<div class="panel" id="instructions">
-			<c:out value="${taskList.instructions}" escapeXml="false" />
-		</div>
-
 		<c:if test="${(mode != 'teacher') && taskList.lockWhenFinished}">
-			<lams:Alert id="lockWhenFinished" type="info" close="true">
+			<lams:Alert5 id="lockWhenFinished" type="info" close="true">
 				<c:choose>
 					<c:when test="${finishedLock}">
 						<fmt:message key="label.learning.responses.locked.reminder" />
@@ -280,91 +269,43 @@
 						<fmt:message key="label.learning.responses.locked" />
 					</c:otherwise>
 				</c:choose>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
 		<c:if test="${(mode != 'teacher') && taskList.sequentialOrder}">
-			<lams:Alert id="sequentialOrder" type="info" close="true">
+			<lams:Alert5 id="sequentialOrder" type="info" close="true">
 				<fmt:message key="label.learning.info.sequential.order" />
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 
+		<c:if test="${fn:length(taskList.minimumNumberTasksErrorStr) > 0}">
+			<lams:Alert5 id="minimumNumberTasks" type="info">
+				<c:out value="${taskList.minimumNumberTasksErrorStr}" />
+			</lams:Alert5>
+		</c:if>
+
+		<div id="instructions" class="instructions">
+			<c:out value="${taskList.instructions}" escapeXml="false" />
+		</div>
+
 		<!--TaskListItems table-->
 
 		<%@ include file="/pages/learning/parts/itemlist.jsp"%>
 
 		<!--"Check for new" button-->
 
 		<p class="form-text">
-			* -
-			<fmt:message key="label.learning.required.tasks" />
+			<i class="fa-solid fa-asterisk text-danger"></i>
+			 - <fmt:message key="label.learning.required.tasks" />
 		</p>
 
-		<c:if test="${mode != 'teacher'}">
-			<p>
-				<button onclick="return checkNew()" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
-					<fmt:message key="label.learning.check.for.new" />
-				</button>
-			</p>
-		</c:if>
-
-		<!--"Add new task" Area-->
-
-		<c:if test="${mode != 'teacher' && (not finishedLock)}">
-			<c:if test="${taskList.allowContributeTasks}">
-
-				<p>
-					<button onclick="javascript:showMessage('<lams:WebAppURL/>learning/addtask.do?sessionMapID=${sessionMapID}&mode=${mode}');"
-						class="btn btn-sm btn-secondary btn-disable-on-submit"><i class="fa fa-sm fa-plus-circle"></i>&nbsp;<fmt:message
-							key="label.authoring.basic.add.task" /> </button>
-				<p>
-
-					<iframe onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
-						id="reourceInputArea" name="reourceInputArea" style="width: 0px; height: 0px; border: 0px; display: none"
-						frameborder="no" scrolling="no"> </iframe>
-			</c:if>
-		</c:if>
-
 		<!--Reflection-->
-
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-						<div class="panel panel-default">
-							<div class="panel-heading panel-title">
-								<fmt:message key="label.monitoring.summary.title.reflection" />
-							</div>
-							<div class="panel-body">
-								<div class="panel">
-									<lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}" />
-								</div>
-
-								<div class="mb-3">
-
-									<c:choose>
-										<c:when test="${empty sessionMap.reflectEntry}">
-											<p>
-												<em> <fmt:message key="message.no.reflection.available" />
-												</em>
-											</p>
-										</c:when>
-										<c:otherwise>
-											<p>
-												<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-											</p>
-										</c:otherwise>
-									</c:choose>
-
-									<c:if test="${mode != 'teacher'}">
-										<button type="submit" id="finishButton" onclick="return continueReflect()"
-											class="btn btn-sm btn-secondary float-start mt-2 btn-disable-on-submit">
-											<fmt:message key="label.edit" />
-										</button>
-									</c:if>
-
-
-								</div>
-
-							</div>
-						</div>
+			<lams:NotebookReedit
+				reflectInstructions="${sessionMap.reflectInstructions}"
+				reflectEntry="${sessionMap.reflectEntry}"
+				isEditButtonEnabled="${mode != 'teacher'}"
+				notebookHeaderLabelKey="label.monitoring.summary.title.reflection"/>
 		</c:if>
 
 		<!--Bottom buttons-->
@@ -375,40 +316,62 @@
 				<c:set var="isRequiredTasksCompleted" value="${false}" />
 			</c:if>
 		</c:forEach>
-
-		<c:if test="${(mode != 'teacher') && isRequiredTasksCompleted}">
+		<c:if test="${(mode != 'teacher')}">
+			<c:if test="${isRequiredTasksCompleted && taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
+				<lams:Alert5 type="warning">
+					<fmt:message key="label.learning.wait.for.monitor.verification" />
+				</lams:Alert5>
+			</c:if>
+		
 			<div class="activity-bottom-buttons">
-
-				<c:choose>
-					<c:when test="${taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
-						<fmt:message key="label.learning.wait.for.monitor.verification" />
-					</c:when>
-
-					<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<button type="submit" id="finishButton" onclick="return continueReflect()"
-							class="btn btn-primary btn-disable-on-submit">
-							<fmt:message key="label.continue" />
-						</button>
-					</c:when>
-
-					<c:otherwise>
-						<button type="submit" id="finishButton"
-							class="btn btn-primary btn-disable-on-submit na">
-							<span class="nextActivity"> <c:choose>
+				<c:if test="${isRequiredTasksCompleted}">
+					<c:choose>
+						<c:when test="${taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
+						</c:when>
+	
+						<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
+							<button type="button" id="finishButton" onclick="return continueReflect()"
+								class="btn btn-primary btn-disable-on-submit na">
+								<fmt:message key="label.continue" />
+							</button>
+						</c:when>
+	
+						<c:otherwise>
+							<button type="submit" id="finishButton" class="btn btn-primary btn-disable-on-submit na">
+								<c:choose>
 									<c:when test="${sessionMap.isLastActivity}">
 										<fmt:message key="label.submit" />
 									</c:when>
 									<c:otherwise>
 										<fmt:message key="label.finished" />
 									</c:otherwise>
 								</c:choose>
-							</span>
-						</button>
-					</c:otherwise>
-				</c:choose>
+							</button>
+						</c:otherwise>
+					</c:choose>
+				</c:if>
+				
+				<button type="button" onclick="return checkNew()" class="btn btn-sm btn-secondary btn-disable-on-submit btn-icon-refresh me-2"> 
+					<fmt:message key="label.learning.check.for.new" />
+				</button>
+				
+				<!--"Add new task" Area-->
+				
+				<c:if test="${(not finishedLock) && taskList.allowContributeTasks}">
+					<button type="button" onclick="javascript:showMessage('<lams:WebAppURL/>learning/addtask.do?sessionMapID=${sessionMapID}&mode=${mode}');"
+							class="btn btn-sm btn-secondary btn-disable-on-submit me-2">
+						<i class="fa fa-sm fa-plus-circle"></i>&nbsp;
+						<fmt:message key="label.authoring.basic.add.task" />
+					</button>
+				</c:if>
 			</div>
 		</c:if>
 
-	</lams:Page>
-</body>
-</lams:html>
+		<c:if test="${(not finishedLock) && taskList.allowContributeTasks}">
+			<iframe onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
+					id="reourceInputArea" name="reourceInputArea" class="mt-3"
+					style="width: 0px; height: 0px; border: 0px; display: none"
+					frameborder="no" scrolling="no" title="<fmt:message key='label.authoring.basic.add.task' />"> </iframe>
+		</c:if>
+	</div>
+</lams:PageLearner>
Index: lams_tool_task/web/pages/learning/parts/addtask.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/parts/addtask.jsp	(.../addtask.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_task/web/pages/learning/parts/addtask.jsp	(.../addtask.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -1,12 +1,17 @@
 <!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
 <lams:head>
-	<%@ include file="/common/header.jsp"%>
+    <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/bootstrap5.bundle.min.js"></script>
+    <lams:JSImport src="includes/javascript/common.js" />
 	<script type="text/javascript">
 		function disableButtons() {
 			$('.btn-disable-on-submit').prop('disabled', true);
@@ -23,39 +28,51 @@
 		}
 	</script>		
 </lams:head>
-<body>
+<body class="component">
+    <div class="component-page-wrapperx">
 
 	<form:form action="saveNewTask.do" modelAttribute="taskListItemForm" method="post" id="taskListItemForm">
 		<form:hidden path="mode" />
 		<form:hidden path="sessionMapID" />
 
-		<h5>
-			<fmt:message key="label.learning.new.task.details" />
-		</h5>
-		<lams:errors/>
+		<div class="card">
+			<div class="card-header">
+				<fmt:message key="label.learning.new.task.details" />
+			</div>
+			
+			<div class="card-body">
+				<lams:errors5/>
 
-		<div class="mb-3">
-			<label for="taskTitle">
-			<fmt:message key="label.authoring.basic.resource.title.input" />
-			</label>
-			<form:input id="taskTitle" path="title" cssClass="form-control" tabindex="1" />
+				<div class="mb-3">
+					<label for="taskTitle">
+						<fmt:message key="label.authoring.basic.resource.title.input" />
+					</label>
+					<form:input id="taskTitle" path="title" cssClass="form-control" />
+				</div>
+				<div class="mb-3">
+					<label for="description">
+						<fmt:message key="label.learning.comment.or.instruction" />
+					</label>
+					<lams:textarea irows="5" id="description" class="form-control" name="description"></lams:textarea>
+				</div>
+
+				<div class="mt-3 float-end">
+					<lams:ImgButtonWrapper>
+						<button onclick="cancel();" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
+							<i class="fa fa-cancel"></i>
+							<fmt:message key="label.cancel" />
+						</button>
+						
+						<button onclick="saveTask()" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
+							<i class="fa fa-plus"></i>
+							<fmt:message key="button.add" />
+						</button>
+					</lams:ImgButtonWrapper>
+				</div>
+			</div>
 		</div>
-		<div class="mb-3">
-			<label for="description"><fmt:message key="label.learning.comment.or.instruction" /></label>
-			<lams:textarea irows="5" tabindex="2" id="description" class="form-control" name="description"></lams:textarea>
-		</div>
 	</form:form>
 
-	<div class="mb-3">
-		<lams:ImgButtonWrapper>
-			<button onclick="cancel();" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
-				<fmt:message key="label.cancel" />
-			</button>
-			<button onclick="saveTask()" class="btn btn-sm btn-secondary btn-disable-on-submit"> 
-				<fmt:message key="button.add" />
-			</button>
-		</lams:ImgButtonWrapper>
 	</div>
-
 </body>
 </lams:html>
Index: lams_tool_task/web/pages/learning/parts/commentlist.jsp
===================================================================
diff -u -rda1d6852bb351ff58c8ddc48a80144681106fd4b -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/parts/commentlist.jsp	(.../commentlist.jsp)	(revision da1d6852bb351ff58c8ddc48a80144681106fd4b)
+++ lams_tool_task/web/pages/learning/parts/commentlist.jsp	(.../commentlist.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -2,69 +2,64 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="itemUid" value="${itemDTO.taskListItem.uid}" />
 <c:set var="localeLanguage"><lams:user property="localeLanguage" /></c:set>
+
 <script type="text/javascript" src="<lams:LAMSURL/>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:LAMSURL />/includes/javascript/portrait5.js"></script>
+<script type="text/javascript">
+	$(document).ready(function() {
+		$("time.timeago").timeago();
+	});
+</script>
 
-<c:if test="${not empty itemDTO.comments}">
-	<h5>
-		<fmt:message key="label.preview.comments" />
-	</h5>
-</c:if>
+<div class="card-subheader mt-3">
+	<fmt:message key="label.preview.comments" />
+</div>
 
 <c:forEach var="comment" items="${itemDTO.comments}">
 	<c:if test="${(sessionMap.userLogin == comment.createBy.loginName) || (sessionMap.mode == 'teacher') || (sessionMap.mode == 'author')}">
-		<div class="row mt-2">
-			<div class="col-12">
-				<div class="panel panel-default">
-					<div class="panel-heading-sm panel-title bg-warning">
-						<c:if test="${not empty comment.createBy.userId}">
-							<lams:Portrait userId="${comment.createBy.userId}"/>&nbsp;
-						</c:if>
+		<div class="card mt-2">
+			<div class="card-header text-bg-warning bg-opacity-50">
+				<c:if test="${not empty comment.createBy.userId}">
+					<lams:Portrait userId="${comment.createBy.userId}"/>&nbsp;
+				</c:if>
 						
-						<c:choose>
-							<c:when test="${not empty comment.createBy.firstName or not empty comment.createBy.lastName}">
-								<c:out escapeXml="true" value="${comment.createBy.firstName} ${comment.createBy.lastName}"/>
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="label.default.user.name" />
-							</c:otherwise>
-						</c:choose>
+				<c:choose>
+					<c:when test="${not empty comment.createBy.firstName or not empty comment.createBy.lastName}">
+						<c:out escapeXml="true" value="${comment.createBy.firstName} ${comment.createBy.lastName}"/>
+					</c:when>
+					<c:otherwise>
+						<fmt:message key="label.default.user.name" />
+					</c:otherwise>
+				</c:choose>
 						
-						-
-						<lams:Date value="${comment.createDate}" timeago="true"/>
-					</div>
+				-
+				<lams:Date value="${comment.createDate}" timeago="true"/>
+			</div>
 					
-					<div class="panel-body-sm">
-						<c:out value="${comment.comment}" escapeXml="false" />
-					</div>
-				</div>
+			<div class="card-body">
+				<c:out value="${comment.comment}" escapeXml="false" />
 			</div>
 		</div>
 	</c:if>
 </c:forEach>
-<script type="text/javascript">
-	$(document).ready(function() {
-		$("time.timeago").timeago();
-	});
-</script>
 
 <c:if test="${sessionMap.mode != 'teacher'}">
-
 	<c:if test="${!itemDTO.commentRequirementsMet}">
-		<lams:Alert id="commentRequired" close="true" type="info">
+		<lams:Alert5 id="commentRequired" close="true" type="info">
 			<fmt:message key="label.learning.info.add.comment.required" />
-		</lams:Alert>
+		</lams:Alert5>
 	</c:if>
 
-	<div class="mb-3 mt-2">
-		<label for="comment-${itemUid}">
+	<div class="mb-3 mt-2 d-flex align-items-center text-nowrap">
+		<label for="comment-${itemUid}" class="visually-hidden">
 			<fmt:message key="label.preview.add.comment" />
 		</label>
-		<textarea name="comment-${itemUid}" id="comment-${itemUid}" class="form-control" rows="2"></textarea>
+		<textarea name="comment-${itemUid}" id="comment-${itemUid}" class="form-control me-2" rows="2"></textarea>
 
-		<input type="submit" value='<fmt:message key="label.preview.post" />'
-				class="btn btn-secondary btn-disable-on-submit mt-2" onclick="addNewComment(${itemUid})"/>
+		<button type="button" class="btn btn-secondary btn-disable-on-submit" onclick="addNewComment(${itemUid})">
+			<fmt:message key="label.preview.post" />
+			<i class="fa-regular fa-paper-plane ms-1"></i>
+		</button>
 	</div>
-	
 </c:if>
Index: lams_tool_task/web/pages/learning/parts/filelist.jsp
===================================================================
diff -u -r2de8f805211b6433aff4efd6fa9275a1b9933033 -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/parts/filelist.jsp	(.../filelist.jsp)	(revision 2de8f805211b6433aff4efd6fa9275a1b9933033)
+++ lams_tool_task/web/pages/learning/parts/filelist.jsp	(.../filelist.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -1,24 +1,31 @@
-<div>
-	<c:set var="fileList" value="${itemDTO.attachments}" />
+<c:set var="fileList" value="${itemDTO.attachments}" />
 
-	<c:if test="${not empty fileList}">
-		<div class="field-name">
-			<fmt:message key="label.preview.filelist" />
-		</div>
-
-		<%-- Display target file type --%>
+<c:if test="${not empty fileList}">
+	<div>
 		<ul>
 			<c:forEach var="file" items="${fileList}">
 				<c:if test="${(sessionMap.userLogin == file.createBy.loginName) || (sessionMap.mode == 'teacher') || (sessionMap.mode == 'author')}">
 
-					<li><c:out value="${file.fileName}" escapeXml="true" /> <c:if test="${file.createBy != null}">
-						[<c:out value="${file.createBy.firstName} ${file.createBy.lastName}" escapeXml="true" />]
-					</c:if> <c:set var="downloadURL">
+					<li>
+						<c:out value="${file.fileName}" escapeXml="true" /> 
+						
+						<c:if test="${file.createBy != null}">
+							<span class="badge text-bg-warning bg-opacity-50 mx-2">
+								<c:out value="${file.createBy.firstName} ${file.createBy.lastName}" escapeXml="true" />
+							</span>
+						</c:if> 
+
+						<c:set var="downloadURL">
 							<lams:WebAppURL/>download/?uuid=${file.fileDisplayUuid}&versionID=${file.fileVersionId}&preferDownload=true
-						</c:set> <a href="${downloadURL}"><fmt:message key="label.download" /></a></li>
+						</c:set> 
+						<a href="${downloadURL}" class="btn btn-sm btn-light">
+							<fmt:message key="label.download" />
+							<i class="fa-solid fa-download ms-1"></i>
+						</a>
+					</li>
 				</c:if>
 			</c:forEach>
 		</ul>
-	</c:if>
+	</div>
+</c:if>
 
-</div>
Index: lams_tool_task/web/pages/learning/parts/itemdetails.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/parts/itemdetails.jsp	(.../itemdetails.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_task/web/pages/learning/parts/itemdetails.jsp	(.../itemdetails.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -1,49 +1,46 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div class="row">
-	<div class="col-12">
-		<div class="panel-body">${item.description}</div>
-		
-		<!-- Comments Part -->
-		<c:if test="${item.commentsAllowed}">
-			<br>
-			<div id="comment-list-${item.uid}">
-				<%@ include file="commentlist.jsp"%>
-			</div>
+<div>${item.description}</div>
+
+<!-- Comments Part -->
+<c:if test="${item.commentsAllowed}">
+	<div id="comment-list-${item.uid}">
+		<%@ include file="commentlist.jsp"%>
+	</div>
+</c:if>
+
+<!-- Uploaded Attachments -->
+<c:if test="${item.filesAllowed}">
+	<form:form action="uploadFile.do?sessionMapID=${sessionMapID}&mode=${mode}&itemUid=${item.uid}"
+		modelAttribute="taskListItemForm" method="post"
+		enctype="multipart/form-data" onsubmit="return validateFiles();">
+		<c:if test="${(mode != 'teacher') && !itemDTO.attachmentRequirementsMet}">
+			<lams:Alert5 id="fileRequired" close="true" type="info">
+				<fmt:message key="label.learning.info.upload.file.required" />
+			</lams:Alert5>
 		</c:if>
 
-		<!-- Uploaded Attachments -->
-		<c:if test="${item.filesAllowed}">
-			<br>
-						
-			<form:form action="uploadFile.do?sessionMapID=${sessionMapID}&mode=${mode}&itemUid=${item.uid}"
-					modelAttribute="taskListItemForm" method="post" enctype="multipart/form-data" onsubmit="return validateFiles();">
-				<c:if test="${(mode != 'teacher') && !itemDTO.attachmentRequirementsMet}">
-					<lams:Alert id="fileRequired" close="true" type="info">
-						<fmt:message key="label.learning.info.upload.file.required" />
-					</lams:Alert>
-				</c:if>
+		<div class="card-subheader mt-3">
+			<fmt:message key="label.preview.upload.file" />
+		</div>
+		<%@ include file="filelist.jsp"%>
 
-				<h5>
-					<fmt:message key="label.preview.upload.file" />
-				</h5>
-				<%@ include file="filelist.jsp"%>
-				
-				<c:if test="${sessionMap.mode != 'teacher'}">
-					<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId"
-						   value="${taskListItemForm.tmpFileUploadId}_${item.uid}" />
-					<div id="file-upload-area-${item.uid}" class="mt-4"></div>
-					<script>
-						initFileUpload('#file-upload-area-${item.uid}', '${taskListItemForm.tmpFileUploadId}_${item.uid}', '<lams:user property="localeLanguage"/>');
-					</script>
-					
-					<input type="submit" name="uploadedFileButton" value='<fmt:message key="label.preview.upload.button" />'
-						class="btn btn-secondary btn-disable-on-submit mt-2" />
-				</c:if>
-			</form:form>
-				
-			<lams:WaitingSpinner id="attachmentArea_Busy"/>
+		<c:if test="${sessionMap.mode != 'teacher'}">
+			<input type="hidden" id="tmpFileUploadId" name="tmpFileUploadId" value="${taskListItemForm.tmpFileUploadId}_${item.uid}" />
+
+			<div class="mt-2 d-flex align-items-center text-nowrap">
+				<div id="file-upload-area-${item.uid}" class="flex-fill me-2">
+				</div>
+				<button type="submit" name="uploadedFileButton" class="btn btn-secondary btn-disable-on-submit order-last">
+					<fmt:message key="label.preview.upload.button" />
+					<i class="fa-solid fa-upload ms-1"></i>
+				</button>
+			</div>
+			<script>
+				initFileUpload('#file-upload-area-${item.uid}', '${taskListItemForm.tmpFileUploadId}_${item.uid}', '<lams:user property="localeLanguage"/>');
+			</script>
 		</c:if>
+	</form:form>
 
-	</div>
-</div>
\ No newline at end of file
+	<lams:WaitingSpinner id="attachmentArea_Busy" />
+</c:if>
Index: lams_tool_task/web/pages/learning/parts/itemlist.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/parts/itemlist.jsp	(.../itemlist.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_task/web/pages/learning/parts/itemlist.jsp	(.../itemlist.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -1,64 +1,67 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<h4>
+<div class="card-subheader">
 	<fmt:message key="label.learning.tasks.to.do" />
-</h4>
+</div>
 
-<div class="panel-group" id="accordion">
-	<c:forEach var="itemDTO" items="${sessionMap.itemDTOs}" varStatus="status">
-		<c:set var="item" value="${itemDTO.taskListItem}" />
+<c:forEach var="itemDTO" items="${sessionMap.itemDTOs}" varStatus="status">
+	<c:set var="item" value="${itemDTO.taskListItem}" />
 
-		<c:if test="${itemDTO.allowedByParent}">
+	<c:if test="${itemDTO.allowedByParent}">
 
-			<div class="panel panel-default">
-				<div class="panel-heading clearfix">
-					<div class="panel-title float-start" data-bs-toggle="collapse" data-bs-target="#collapse${item.uid}">
-						<c:out value="${item.title}" escapeXml="true" /> 
-						<c:if test="${!item.createByAuthor && item.createBy != null}">
-							[<c:out value="${item.createBy.firstName} ${item.createBy.lastName}" escapeXml="true" />]
-						</c:if>
+			<div class="card lcard">
+				<div class="card-header">
+					<span class="card-title collapsable-icon-left">
+						<button type="button" class="btn btn-secondary-darker no-shadow <c:if test="${item.complete}">collapsed</c:if>" data-bs-toggle="collapse" data-bs-target="#collapse${item.uid}"
+								aria-controls="collapse${item.uid}" >
+							<c:out value="${item.title}" escapeXml="true" /> 
+							
+							<c:if test="${!item.createByAuthor && item.createBy != null}">
+								<span class="badge text-bg-warning rounded-pill mx-2">
+									[<c:out value="${item.createBy.firstName} ${item.createBy.lastName}" escapeXml="true" />]
+								</span>
+							</c:if>
+							
 						<c:if test="${item.required}">
-							*
+							<i class="fa-solid fa-asterisk text-danger ms-2" title="<fmt:message key='label.monitoring.tasksummary.task.required.to.finish'/>"></i>
 						</c:if>
-						</a>
-					</div>
+						</button>
+					</span>
 					
 					<div class="float-end">
 						<c:choose>
 							<c:when test="${item.complete}">
-								<i title="<fmt:message key='label.completed' />" class="fa fa-lg fa-check text-success"></i>
+								<span class="text-bg-success p-2 shadow"> 
+									<i class="fa-regular fa-square-check fa-xl" title='<fmt:message key="label.completed" />'></i>
+								</span>
 							</c:when>
 
 							<c:when test="${(mode != 'teacher') && (not finishedLock) && (not taskList.sequentialOrder || itemDTO.previousTaskCompleted) 
 									&& itemDTO.commentRequirementsMet && itemDTO.attachmentRequirementsMet}">
-								<a href="javascript:;" onclick="return completeItem(${item.uid})"> 
-									<i class="fa fa-lg fa-square-o"></i>
-								</a>
+								<button type="button" onClick="javascript:completeItem(${item.uid})"
+										class="complete-item-button btn btn-success no-shadow">
+									<i class="fa-solid fa-pen-to-square fa-xl me-1"></i>
+									<fmt:message key="label.completed" />
+								</button>
 							</c:when>
 
 							<c:otherwise>
-								<i id="item-faminus-${item.uid}" class="fa fa-lg fa-minus" 
-									data-waiting-for-comment="${(mode != 'teacher') && (not finishedLock) && (not taskList.sequentialOrder || itemDTO.previousTaskCompleted) 
-									&& !itemDTO.commentRequirementsMet && itemDTO.attachmentRequirementsMet}"></i>
+								<span class="text-bg-danger p-1 rounded-pill">
+									<i id="item-faminus-${item.uid}" class="fa fa-lg fa-minus" 
+											data-waiting-for-comment="${(mode != 'teacher') && (not finishedLock) && (not taskList.sequentialOrder || itemDTO.previousTaskCompleted) 
+											&& !itemDTO.commentRequirementsMet && itemDTO.attachmentRequirementsMet}"></i>
+								</span>
 							</c:otherwise>
 						</c:choose>
 					</div>
 				</div>
 				
-				<div id="collapse${item.uid}" class="panel-collapse collapse <c:if test="${not item.complete}">in</c:if>">
-					<div class="panel-body">
+				<div id="collapse${item.uid}" class="collapse <c:if test="${not item.complete}">show</c:if>">
+					<div class="card-body">
 						<!-- task details -->
 						<%@ include file="/pages/learning/parts/itemdetails.jsp"%>
 					</div>
 				</div>
 			</div>
-		</c:if>
-	</c:forEach>
-
-	<c:if test="${fn:length(taskList.minimumNumberTasksErrorStr) > 0}">
-		<p class="form-text">
-			<c:out value="${taskList.minimumNumberTasksErrorStr}" />
-		</p>
 	</c:if>
-
-</div>
\ No newline at end of file
+</c:forEach>
Index: lams_tool_task/web/pages/learning/parts/notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/parts/notebook.jsp	(.../notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_task/web/pages/learning/parts/notebook.jsp	(.../notebook.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -1,61 +1,11 @@
-<%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
-
-
+<%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMapID" value="${param.sessionMapID}" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
-	
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${sessionMap.toolSessionID}', '', function(){
-			$('#messageForm').submit();
-		});
-		
-		function disableFinishButton() {
-			document.getElementById("finishButton").disabled = true;
-		}
-	</script>
-</lams:head>
-<body class="stripes">
-
-	<form:form action="submitReflection.do" modelAttribute="reflectionForm" method="post" onsubmit="disableFinishButton();" id="messageForm">
-		<form:hidden path="userID" />
-		<form:hidden path="sessionMapID" />
-
-		<lams:Page type="learner" title="${sessionMap.title}" formID="messageForm">
-
-			<lams:errors/>
-
-			<p>
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-			</p>
-
-			<textarea cols="60" id="notebookEntry" name="entryText" class="form-control" rows="5"></textarea>
-
-			<div class="activity-bottom-buttons">
-				<button type="button" class="btn btn-primary na" id="finishButton">
-					<span class="nextActivity"> <c:choose>
-							<c:when test="${sessionMap.isLastActivity}">
-								<fmt:message key="label.submit" />
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="label.finished" />
-							</c:otherwise>
-						</c:choose>
-					</span>
-				</button>
-			</div>
-
-			<div id="footer"></div>
-			<!--closes footer-->
-		</lams:Page>
-			
-	</form:form>
-
-</body>
-</lams:html>
+<lams:Notebook title="${sessionMap.title}"
+	toolSessionID="${sessionMap.toolSessionID}"
+	instructions="${sessionMap.reflectInstructions}"
+	isNextActivityButtonSupported="true"
+	isLastActivity="${sessionMap.isLastActivity}"
+	notebookLabelKey="label.monitoring.summary.title.reflection"/>
Index: lams_tool_task/web/pages/learning/start.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r0ed980d10740b8dbc056b9bba997826776c8c470
--- lams_tool_task/web/pages/learning/start.jsp	(.../start.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_task/web/pages/learning/start.jsp	(.../start.jsp)	(revision 0ed980d10740b8dbc056b9bba997826776c8c470)
@@ -1,14 +1,11 @@
 <!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <html>
 	<body class="stripes">
-
 		<script type="text/javascript">
 			window.parent.location.href = "<c:url value="/learning/start.do?toolSessionID=${toolSessionID}&mode=${mode}"/>"
 		</script>
-	<body class="stripes">
+	</body>
 </html>