Index: lams_central/src/java/org/lamsfoundation/lams/web/ProfileController.java
===================================================================
diff -u -rb4c7cf180245db7c4d9d5c600eaf294a4c570286 -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/src/java/org/lamsfoundation/lams/web/ProfileController.java	(.../ProfileController.java)	(revision b4c7cf180245db7c4d9d5c600eaf294a4c570286)
+++ lams_central/src/java/org/lamsfoundation/lams/web/ProfileController.java	(.../ProfileController.java)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -113,7 +113,7 @@
 	    Organisation org = (Organisation) userManagementService.findById(Organisation.class, orgId);
 	    Integer orgTypeId = org.getOrganisationType().getOrganisationTypeId();
 	    IndexLessonBean lessonBean = new IndexLessonBean(lesson.getLessonName(),
-		    "javascript:openLearner(" + lesson.getLessonID() + ")");
+		    "javascript:openLearner(" + lesson.getLessonID() + ", null, true)");
 	    lessonBean.setId(lesson.getLessonID());
 	    log.debug("Lesson: " + lesson.getLessonName());
 
Index: lams_central/web/includes/javascript/dialog5.js
===================================================================
diff -u -r9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision 9f3a96b9d3fb0e80b3b181c6ec62a1f2e000decc)
+++ lams_central/web/includes/javascript/dialog5.js	(.../dialog5.js)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -1,5 +1,5 @@
 var dialogTemplate = $('<div class="modal fade dialogContainer " tabindex="-1" role="dialog">' +
-	'<div class="modal-dialog" role="document">' +
+	'<div class="modal-dialog modal-lg" role="document">' +
 	'<div class="modal-content">' +
 	'<div class="modal-header">' +
 	'<h5 class="modal-title"></h5>' +
Index: lams_central/web/includes/javascript/openUrls.js
===================================================================
diff -u -r81f928586161dd03042b6353f68c7d7b8279ccde -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/includes/javascript/openUrls.js	(.../openUrls.js)	(revision 81f928586161dd03042b6353f68c7d7b8279ccde)
+++ lams_central/web/includes/javascript/openUrls.js	(.../openUrls.js)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -55,13 +55,17 @@
 	window.location.href = url;
 }
 
-function openLearner( lessonId, url ) {
+function openLearner( lessonId, url, isNewTab ) {
 	if (!url) {
-		url = '/lams/home/learner.do?';
+		url = (isNewTab ? LAMS_URL : '/lams') + '/home/learner.do?';
 	}
 	var learnerUrl = url + 'lessonID=' + lessonId;
 
-	window.location.href = learnerUrl;
+	if (isNewTab) {
+		window.open(learnerUrl, '_blank');
+	} else {
+		window.location.href = learnerUrl;
+	}
 }
 
 function openKumalive(orgID, role) {
Index: lams_central/web/profile/editprofile.jsp
===================================================================
diff -u -re2e62167b21f940caccf37f0d8c51f2fe3d8e1ed -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/profile/editprofile.jsp	(.../editprofile.jsp)	(revision e2e62167b21f940caccf37f0d8c51f2fe3d8e1ed)
+++ lams_central/web/profile/editprofile.jsp	(.../editprofile.jsp)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -13,7 +13,8 @@
 							
 <lams:html>
 <lams:head>
-	<lams:css/>
+	<link rel="stylesheet" href="${lams}css/components.css">
+    <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
 	<style type="text/css">
 		body {
 			overflow-x:hidden;
@@ -22,6 +23,7 @@
 
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
 	<lams:JSImport src="includes/javascript/profile.js" />
 	<script type="text/javascript">
 		$(document).ready( function() {
@@ -47,86 +49,82 @@
 
 		<div style="clear: both;"></div>
 		<div class="container">
-			<div class="row vertical-center-row">
-				<div
-					class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
-					<div class="panel">
-						<div class="panel-body">
+			<div class="col-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 mx-auto">
 							<c:if test="${authenticationMethodId eq dbId}">
 
-								<div class="form-group">
+								<div class="my-3">
 									<span class="lead">
-										<label>
+										<label class="form-label">
 											<fmt:message key="label.username" />
 										</label>: 
 										<lams:user property="login" />
 									</span>
 								</div>
 								
-								<div class="form-group">
-									<label><fmt:message key="label.title" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.title" />:</label>
 									<form:input path="title" size="32" maxlength="32"
 										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.first_name" /> *:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.first_name" /> *:</label>
 									<form:input path="firstName" size="50" maxlength="128"
 										disabled="${!profileEditEnabled}" cssClass="form-control" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.last_name" /> *:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.last_name" /> *:</label>
 									<form:input path="lastName" size="50" maxlength="128"
 										disabled="${!profileEditEnabled}" cssClass="form-control" />
 								</div>
 								<c:if test="${!profileEditEnabled}">
 									<form:hidden path="firstName" />
 									<form:hidden path="lastName" />
 								</c:if>
-								<div class="form-group">
-									<label><fmt:message key="label.email" /> *:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.email" /> *:</label>
 									<form:input path="email" size="50" maxlength="128"
 										disabled="${!profileEditEnabled and !partialProfileEditEnabled or editOnlyName}"
 										cssClass="form-control" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.address_line_1" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.address_line_1" />:</label>
 									<form:input path="addressLine1" size="50" maxlength="64"
 										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.address_line_2" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.address_line_2" />:</label>
 									<form:input path="addressLine2" size="50" maxlength="64"
 										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.address_line_3" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.address_line_3" />:</label>
 									<form:input path="addressLine3" size="50" maxlength="64"
 										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.city" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.city" />:</label>
 									<form:input path="city" size="50" maxlength="64"
 										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.state" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.state" />:</label>
 									<form:input path="state" size="50" maxlength="64"
 										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.postcode" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.postcode" />:</label>
 									<form:input path="postcode" size="10" maxlength="10"
 										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.country" /> *:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.country" /> *:</label>
 
-									<form:select path="country" disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control">
+									<form:select path="country" disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-select">
 										<form:option value="0">
 											<fmt:message key="label.select.country" />
 										</form:option>
@@ -137,36 +135,36 @@
 										</c:forEach>
 									</form:select>
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.day_phone" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.day_phone" />:</label>
 									<form:input path="dayPhone" size="50" maxlength="64"
 										disabled="${!profileEditEnabled and !partialProfileEditEnabled or editOnlyName}"
 										cssClass="form-control" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.evening_phone" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.evening_phone" />:</label>
 									<form:input path="eveningPhone" size="50" maxlength="64"
 										disabled="${!profileEditEnabled and !partialProfileEditEnabled or editOnlyName}"
 										cssClass="form-control" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.mobile_phone" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.mobile_phone" />:</label>
 									<form:input path="mobilePhone" size="50" maxlength="64"
 										disabled="${!profileEditEnabled and !partialProfileEditEnabled or editOnlyName}"
 										cssClass="form-control" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.fax" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.fax" />:</label>
 									<form:input path="fax" size="50" maxlength="64"
 										disabled="${!profileEditEnabled and !partialProfileEditEnabled or editOnlyName}"
 										cssClass="form-control" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.language" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.language" />:</label>
 									<form:select path="localeId"
-										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control">
+										disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-select">
 										<c:forEach items="${locales}" var="locale">
 											<form:option value="${locale.localeId}">
 												<c:out value="${locale.description}" />
@@ -175,18 +173,18 @@
 									</form:select>
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.timezone.title" />:</label>
-									<form:select path="timeZone" disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control">
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.timezone.title" />:</label>
+									<form:select path="timeZone" disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-select">
 										<c:forEach items="${timezones}" var="timezone">
 											<form:option value="${timezone}"><c:out value="${timezone}" /></form:option>
 										</c:forEach>
 									</form:select>
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.theme" />:</label>
-									<form:select path="userTheme" disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-control">
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.theme" />:</label>
+									<form:select path="userTheme" disabled="${!profileEditEnabled or editOnlyName}" cssClass="form-select">
 										<c:forEach items="${themes}" var="theme">
 											<form:option value="${theme.themeId}">${theme.name}</form:option>
 										</c:forEach>
@@ -213,101 +211,115 @@
 								<form:hidden path="mobilePhone" />
 								<form:hidden path="fax" />
 
-								<div class="form-group">
-									<label><fmt:message key="label.username" /></label> 
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.username" /></label> 
 									<lams:user property="login" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.first_name" /> *:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.first_name" /> *:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.firstName}"/>
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.last_name" /> *:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.last_name" /> *:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.lastName}"/>
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.email" /> *:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.email" /> *:</label>
+									 <input
 										type="text" class="form-control"
 										value="${UserForm.email}"/>
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.address_line_1" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.address_line_1" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.addressLine1}"/>
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.address_line_2" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.address_line_2" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.addressLine2}" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.address_line_3" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.address_line_3" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.addressLine3}" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.city" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.city" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.city}" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.state" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.state" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.state}" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.postcode" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.postcode" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.postcode}" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.country" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.country" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.country}" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.day_phone" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.day_phone" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.dayPhone}" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.evening_phone" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.evening_phone" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.eveningPhone}" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.mobile_phone" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.mobile_phone" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.mobilePhone}" />
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.fax" />:</label> <input
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.fax" />:</label> 
+									<input
 										type="text" class="form-control"
 										value="${UserForm.fax}" />
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.theme" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.theme" />:</label>
 									<form:select path="userTheme"
-										disabled="${!profileEditEnabled}" cssClass="form-control">
+										disabled="${!profileEditEnabled}" cssClass="form-select">
 										<c:forEach items="${themes}" var="theme">
 											<form:option value="${theme.themeId}">${theme.name}</form:option>
 										</c:forEach>
 									</form:select>
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.language" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.language" />:</label>
 									<form:select path="localeId"
-										disabled="${!profileEditEnabled}" cssClass="form-control">
+										disabled="${!profileEditEnabled}" cssClass="form-select">
 										<c:forEach items="${locales}" var="locale">
 											<form:option value="${locale.localeId}">
 												<c:out value="${locale.description}" />
@@ -316,43 +328,38 @@
 									</form:select>
 								</div>
 
-								<div class="form-group">
-									<label><fmt:message key="label.timezone.title" />:</label>
-									<form:select path="timeZone" disabled="${!profileEditEnabled}" cssClass="form-control">
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.timezone.title" />:</label>
+									<form:select path="timeZone" disabled="${!profileEditEnabled}" cssClass="form-select">
 										<c:forEach items="${timezones}" var="timezone">
 											<form:option value="${timezone}"><c:out value="${timezone}" /></form:option>
 										</c:forEach>
 									</form:select>
 								</div>
-								<div class="form-group">
-									<label><fmt:message key="label.timezone.title" />:</label>
+								<div class="mb-3">
+									<label class="form-label"><fmt:message key="label.timezone.title" />:</label>
 									<c:set var="timeZone">
 										<input type="text" class="form-control" value="${UserForm.timeZone}" />
 									</c:set>
 									${timeZone}
 								</div>
 							</c:if>
 
-						</div>
-					</div>
-
-					<div class="form-group" align="right">
-						<button type="button" class="btn btn-sm btn-default voffset5" id="cancelEditProfile" onclick="history.go(-1);">
+					<div class="mb-4 float-end">
+						<button type="button" class="btn btn-sm btn-secondary me-2" id="cancelEditProfile" onclick="history.go(-1);">
+							<i class="fa-solid fa-ban me-1"></i>
 							<fmt:message key="button.cancel" />
 						</button>
-						&nbsp;&nbsp;
+						
 						<c:if test="${profileEditEnabled or partialProfileEditEnabled}">
-							<button type="submit" class="btn btn-sm btn-primary voffset5" 
-									name="submit"  id="saveEditProfile"> 
+							<button type="submit" class="btn btn-sm btn-primary" name="submit"  id="saveEditProfile">
+								<i class="fa-regular fa-floppy-disk me-1"></i> 
 								<fmt:message key="button.save" />
 							</button>
 						</c:if>
 					</div>
-
-				</div>
 			</div>
 		</div>
-			
 	</form:form>
 </body>
 </lams:html>
Index: lams_central/web/profile/lessons.jsp
===================================================================
diff -u -re2e62167b21f940caccf37f0d8c51f2fe3d8e1ed -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/profile/lessons.jsp	(.../lessons.jsp)	(revision e2e62167b21f940caccf37f0d8c51f2fe3d8e1ed)
+++ lams_central/web/profile/lessons.jsp	(.../lessons.jsp)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -3,14 +3,18 @@
 <c:set var="lams"><lams:LAMSURL/></c:set>
 <lams:html>
 <lams:head>
-	<lams:css/>
+	<link rel="stylesheet" href="${lams}css/components.css">
+    <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
 
 	<lams:JSImport src="includes/javascript/getSysInfo.js" />
 	<lams:JSImport src="includes/javascript/openUrls.js" />
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
 	<lams:JSImport src="includes/javascript/profile.js" />
 	<script type="text/javascript">
+		const LAMS_URL = "${lams}";
+		
 		$(document).ready(function () {
 			//update dialog's height and title
 			updateMyProfileDialogSettings('<spring:escapeBody javaScriptEscape="true"><fmt:message key="title.all.my.lessons" /></spring:escapeBody>', '80%');
@@ -19,64 +23,55 @@
 </lams:head>
 
 <body>
-<div style="clear: both;"></div>
-<div class="container">
-	<div class="row vertical-center-row">
-		<div
-			class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
-			<div class="panel">
-				<div class="panel-body">
-					<div class="text-left">
-						<c:if test="${not empty beans}">
-						
-							<c:forEach var="group" items="${beans}">
-								<br />
-								<h4>
-									<c:out value="${group.name}" />
-								</h4>
+	<div style="clear: both;"></div>
+	<div class="container">
+		<div class="col-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 mx-auto">
+			<c:if test="${not empty beans}">
+				<c:forEach var="group" items="${beans}">
+					<br />
+					<h4>
+						<c:out value="${group.name}" />
+					</h4>
 								
-								<ul>
-									<c:forEach var="lesson" items="${group.lessons}">
-										<li><a href="<c:out value="${lesson.url}"/>"
-											class="sequence-name-link"> <c:out value="${lesson.name}" />
-										</a></li>
-									</c:forEach>
-								</ul>
+					<div class="list-group">
+						<c:forEach var="lesson" items="${group.lessons}">
+							<a href="<c:out value="${lesson.url}"/>" class="list-group-item list-group-item-action sequence-name-link"> 
+								<c:out value="${lesson.name}" />
+							</a>
+						</c:forEach>
+					</div>
 								
-								<ul>
-									<c:forEach var="subgroup" items="${group.childIndexOrgBeans}">
-										<c:out value="${subgroup.name}" />
-										<ul>
-											<c:forEach var="s_lesson" items="${subgroup.lessons}">
-												<li><a href="<c:out value="${s_lesson.url}"/>"
-													class="sequence-name-link"> <c:out
-															value="${s_lesson.name}" />
-												</a></li>
-											</c:forEach>
-										</ul>
-									</c:forEach>
-								</ul>
-							</c:forEach>
+					<div class="ms-5 mt-3">
+						<c:forEach var="subgroup" items="${group.childIndexOrgBeans}">
+							<h5>
+								<c:out value="${subgroup.name}" />
+							</h5>
 							
-						</c:if>
-						
-						<c:if test="${empty beans}">
-							<p class="align-left">
-								<fmt:message key="msg.no.lessons" />
-							</p>
-						</c:if>
+							<div class="list-group">
+								<c:forEach var="s_lesson" items="${subgroup.lessons}">
+									<a href="<c:out value="${s_lesson.url}"/>" class="list-group-item list-group-item-action sequence-name-link"> 
+										<c:out value="${s_lesson.name}" />
+									</a>
+								</c:forEach>
+							</div>
+						</c:forEach>
 					</div>
+				</c:forEach>
+			</c:if>
+						
+			<c:if test="${empty beans}">
+				<p>
+					<fmt:message key="msg.no.lessons" />
+				</p>
+			</c:if>
 					
-					<div align="center">
-						<button type="button" class="btn btn-sm btn-primary offset5" onclick="history.go(-1);">
-							<fmt:message key="label.return.to.myprofile" />
-						</button>
-					</div>
-
-				</div>
+			<div class="float-end">
+				<button type="button" class="btn btn-sm btn-light mt-4" onclick="history.go(-1);">
+					<i class="fa-solid fa-rotate-left me-1"></i>
+					<fmt:message key="label.return.to.myprofile" />
+				</button>
 			</div>
 		</div>
 	</div>
-</div>
 </body>
 </lams:html>
Index: lams_central/web/profile/policyDetails.jsp
===================================================================
diff -u -r4c2d1f37b92435907ec4ce23cb635a7cd9e4161e -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/profile/policyDetails.jsp	(.../policyDetails.jsp)	(revision 4c2d1f37b92435907ec4ce23cb635a7cd9e4161e)
+++ lams_central/web/profile/policyDetails.jsp	(.../policyDetails.jsp)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -1,19 +1,21 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="lams"><lams:LAMSURL/></c:set>
 
 <lams:html>
 <lams:head>
 	<title><fmt:message key="label.policy.details" /></title>
 	<link rel="icon" href="/lams/favicon.ico" type="image/x-icon" />
 	<link rel="shortcut icon" href="/lams/favicon.ico" type="image/x-icon" />
-	<lams:css/>
-	<lams:css suffix="main"/>
+	<link rel="stylesheet" href="${lams}css/components.css">
+    <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
+    
+    <script type="text/javascript" src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
 
 <body>
 <div style="clear: both;"></div>
 <div class="container">
-<div class="row vertical-center-row">
 <div>
 <div class="panel panel-default">
 	<div class="panel-heading">
@@ -65,15 +67,16 @@
 		</tr>
 	</table>
 					
-	<div class="pull-right">
-		<input class="btn btn-default" type="button" value="<fmt:message key="label.authoring.close" />"
-				onclick="javascript:window.close();" />
+	<div class="float-end">
+		<button class="btn btn-light mt-2" type="button" onclick="javascript:window.close();">
+			<i class="fa-solid fa-rotate-left me-1"></i>
+			<fmt:message key="label.authoring.close" />
+		</button>
 	</div>
 
 </div>
 </div>
 </div>
 </div>
-</div>
 </body>
 </lams:html>
Index: lams_central/web/profile/portrait.jsp
===================================================================
diff -u -re2e62167b21f940caccf37f0d8c51f2fe3d8e1ed -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/profile/portrait.jsp	(.../portrait.jsp)	(revision e2e62167b21f940caccf37f0d8c51f2fe3d8e1ed)
+++ lams_central/web/profile/portrait.jsp	(.../portrait.jsp)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -7,7 +7,8 @@
 
 <lams:html>
 <lams:head>
-	<lams:css/>
+	<link rel="stylesheet" href="${lams}css/components.css">
+    <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
 	<link rel="stylesheet" href="css/croppie.css" />
 	<style type="text/css">
 		#accordion h3 a {
@@ -32,7 +33,7 @@
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
 	<lams:JSImport src="includes/javascript/profile.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/webrtc-capturestill.js"></script>
 	<script type="text/javascript">
@@ -74,9 +75,9 @@
 		            
 		            reader.onload = function (e) {
 						$('#save-upload-button, #upload-croppie').show();
-		            		$uploadCroppie.croppie('bind', {
-		            			url: e.target.result
-		            		});
+		            	$uploadCroppie.croppie('bind', {
+		            		url: e.target.result
+		            	});
 		            }
 		            
 		            reader.readAsDataURL(this.files[0]);
@@ -127,16 +128,16 @@
 	<form:hidden path="portraitUuid" />
 	<div style="clear: both"></div>
 	
-	<div class="container">
-	<div class="row vertical-center-row">
-	<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
-
+	<div class="d-flex justify-content-center align-items-center text-center">
+	<div class="col-12 col-sm-10 col-sm-offset-1">
 		<div class="currentPortrait text-center" style="margin:10px">
-			<fmt:message key="label.portrait.current" />:<br/>
+			<fmt:message key="label.portrait.current" /><br/>
 	
 			<c:choose>
 				<c:when test="${PortraitActionForm.portraitUuid == 0}">
-					<em><fmt:message key="msg.portrait.none" /></em>
+					<div class="text-bg-light badge">
+						<fmt:message key="msg.portrait.none" />
+					</div>
 				</c:when>
 				<c:otherwise>
 				<img class="img-thumbnail" src="/lams/download?uuid=${PortraitActionForm.portraitUuid}&version=2&preferDownload=false" />
@@ -145,91 +146,84 @@
 		</div>
 
 		<c:if test="${ENABLE_PORTRAIT_EDITING}">
-			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+			<div class="accordion" id="accordion">
 			
 				<!-- Webcamera -->
-				<div class="panel panel-default">
-				    <div class="panel-heading" role="tab" id="headingOne">
-				    	<div class="panel-title">
-				        	<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" 
-				        			aria-expanded="true" aria-controls="collapseOne">
-				          	<i class="fa fa-fw fa-camera text-primary"></i> 
+				<div class="accordion-item">
+				    <h2 class="accordion-header" id="headingOne">
+				    	<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 				          	<fmt:message key="label.portrait.take.snapshot.from.webcamera" />
-				        	</a>
-				    	</div>
-				    </div>
+				        </button>
+				    </h2>
 				    
-				    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-				    	<div class="panel-body">
-				      			
+					<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
+      					<div class="accordion-body">
 							<div>
 							    <video id="video">
-							    		<fmt:message key="label.video.stream.not.available" />
+							    	<fmt:message key="label.video.stream.not.available" />
 							    </video>
 							</div>
 							    
-							<a id="startbutton" class="btn btn-sm btn-file btn-default voffset5" role="button" href="#nogo">
+							<button type="button" id="startbutton" class="btn btn-sm btn-primary mt-2">
+								<i class="fa fa-fw fa-camera"></i>
 								<fmt:message key='label.portrait.take.snapshot' />
-							</a>
+							</button>
 							
 							<canvas id="canvas"></canvas>
+							
 							<div id="still-portrait">
-								<div class="output voffset10">
+								<div class="output mt-3">
 									<div id="photo" ></div> 
 								</div>
 								
-								<a class="btn btn-sm btn-default voffset10" id="upload-webcam">
+								<button type="button" class="btn btn-sm btn-primary" id="upload-webcam">
+									<i class="fa-regular fa-check-circle me-1"></i> 
 									<fmt:message key='label.portrait.yes.set.it.as.portrait' />
-								</a>
+								</button>
 							</div>
 				    	</div>
 				    </div>
 				</div>
 				
 				<!-- Upload -->
-				<div class="panel panel-default">
-					<div class="panel-heading" role="tab" id="headingTwo">
-						<div class="panel-title">
-				        		<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" 
-				        				aria-expanded="false" aria-controls="collapseTwo">
-				        			<i class="fa fa-fw fa-upload text-primary"></i> 
-				        			<fmt:message key="label.portrait.upload" />
-				        		</a>
-						</div>
+				<div class="accordion-item">
+					<div class="accordion-header" id="headingTwo">
+						<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="#collapseTwo">
+				        	<fmt:message key="label.portrait.upload" />
+						</button>
 					</div>
 				    
-				    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-				    		<div class="panel-body">
-							<div class="form-group">
-								<label class="btn btn-default">
-									<input type="file" name="file" value="" id="upload-input" accept="image/*">
-								</label>
+				    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="collapseTwo" data-bs-parent="#accordion">
+				    	<div class="accordion-body">	
+							<input type="file" name="file" value="" id="upload-input" accept="image/*" class="form-control my-2" >
 								
-								<p class="help-block">
-									<fmt:message key="msg.portrait.resized" />
-								</p>	
-								<div id="upload-croppie"></div>
-								
-								<a class="btn btn-sm btn-default offset5" id="save-upload-button" role="button">
-									<fmt:message key='label.portrait.yes.set.it.as.portrait' />
-								</a>
+							<div class="alert alert-warning mt-3">
+								<fmt:message key="msg.portrait.resized" />
 							</div>
-				    		</div>
+								
+							<div id="upload-croppie"></div>
+								
+							<button type="button" class="btn btn-sm btn-primary m-2" id="save-upload-button">
+								<i class="fa-regular fa-check-circle me-1"></i> 
+								<fmt:message key='label.portrait.yes.set.it.as.portrait' />
+							</button>
+				    	</div>
 				    </div>
 				</div>
 			</div>
 		</c:if>
-
+		
 		<c:if test="${!param.isReturnButtonHidden}">
-			<div align="right">
-				<button type="button" class="btn btn-sm btn-file btn-primary offset5" id="portraitReturnButton" onclick="history.go(-1);">
+			<div class="float-end">
+				<button type="button" class="btn btn-sm btn-file btn-light my-4" id="portraitReturnButton" onclick="history.go(-1);">
+					<i class="fa-solid fa-rotate-left me-1"></i>
 					<fmt:message key="label.return.to.myprofile" />
 				</button>
 			</div>
 		</c:if>
 	</div>
-	</div>
 	</div>	
+
 </form:form>
 </body>
 </lams:html>
Index: lams_central/web/profile/profile.jsp
===================================================================
diff -u -rfe19797ec82718905555353176ed719bec11043e -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/profile/profile.jsp	(.../profile.jsp)	(revision fe19797ec82718905555353176ed719bec11043e)
+++ lams_central/web/profile/profile.jsp	(.../profile.jsp)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -8,11 +8,12 @@
 
 <lams:html>
 <lams:head>
-	<lams:css/>
+	<link rel="stylesheet" href="${lams}css/components.css">
+    <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
 	
-	
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
 	<lams:JSImport src="includes/javascript/profile.js" />
 	<script type="text/javascript">
 		$(document).ready(function () {
@@ -22,12 +23,8 @@
 	</script>
 </lams:head>
 <body>
-
-<div class="container">
-	<div class="row vertical-center-row">
-		<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
-			<div class="panel voffset20">
-				<div class="panel-body">
+	<div class="container">
+		<div class="col-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 mx-auto">
 					<div class="text-center">
 						<c:choose>
 							<c:when test="${empty portraitUuid}">
@@ -52,12 +49,13 @@
 						</p>
 					</div>
 					<hr>
+					
 					<!-- Split button -->
-					<div class="col-xs-12 text-center">
-						<a class="btn btn-sm btn-default offset5"
+					<div class="col-12 text-center">
+						<a class="btn btn-sm btn-light m-1"
 								href="<lams:LAMSURL/>index.do?redirect=editprofile" id="editProfileButton" role="button">
 							<i class="fa fa-fw fa-pencil"></i> 
-							<span class="hidden-xs">
+							<span class="float-end d-none d-sm-block ms-1">
 								<fmt:message key="title.profile.edit.screen" />
 							</span>
 						</a>&nbsp;&nbsp;
@@ -67,46 +65,39 @@
 						</c:set>
 						<c:set var="dbId"><%=AuthenticationMethod.DB%></c:set>
 						<c:if test="${authenticationMethodId eq dbId}">
-							<a class="btn btn-sm btn-default offset5"
+							<a class="btn btn-sm btn-light m-1"
 									href="<lams:LAMSURL/>index.do?redirect=password&redirectURL=index.do%3Fstate%3Dactive%26redirect%3Dprofile"  id="changePasswordButton" role="button">
 								<i class="fa fa-fw fa-lock"></i>
-								<span class="hidden-xs">
+								<span class="float-end d-none d-sm-block ms-1">
 									<fmt:message key="title.password.change.screen" />
 								</span>
 							</a>
 						</c:if>
 
-						<a class="btn btn-sm btn-default offset5"
-								href="<lams:LAMSURL/>index.do?redirect=portrait"  id="editPortraitButton" role="button">
+						<a class="btn btn-sm btn-light m-1" href="<lams:LAMSURL/>index.do?redirect=portrait"  id="editPortraitButton" role="button">
 							<i class="fa fa-fw fa-camera"></i> 
-							<span class="hidden-xs">
+							<span class="float-end d-none d-sm-block ms-1">
 								<fmt:message key="title.portrait.change.screen" />
 							</span>
 						</a>&nbsp;&nbsp;
 
-						<a class="btn btn-sm btn-default offset5" href="profile/policyConsents.do"  id="viewPolicies" role="button">
-							<i class="fa fa-fw fa-calendar-check-o"></i> 
-							<span class="hidden-xs">
+						<a class="btn btn-sm btn-light m-1" href="profile/policyConsents.do"  id="viewPolicies" role="button">
+							<i class="fa-regular fa-calendar-check"></i>
+							<span class="float-end d-none d-sm-block ms-1">
 								<fmt:message key="label.policies.consents" />
 							</span>
 						</a>&nbsp;&nbsp;
 
 						<c:if test="${showAllMyLessonLink}">
-							<a class="btn btn-sm btn-default offset5"
-									href="<lams:LAMSURL/>index.do?redirect=lessons" id="viewAllLessons"  role="button">
+							<a class="btn btn-sm btn-light m-1" href="<lams:LAMSURL/>index.do?redirect=lessons" id="viewAllLessons"  role="button">
 								<i class="fa fa-fw fa-book"></i> 
-								<span class="hidden-xs">
+								<span class="float-end d-none d-sm-block ms-1">
 									<fmt:message key="title.all.my.lessons" />
 								</span>
 							</a>
 						</c:if>
 					</div>
-				</div>
-			</div>
 		</div>
 	</div>
-
-</div>
-
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_central/web/profile/profilePolicyConsents.jsp
===================================================================
diff -u -re2e62167b21f940caccf37f0d8c51f2fe3d8e1ed -r85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb
--- lams_central/web/profile/profilePolicyConsents.jsp	(.../profilePolicyConsents.jsp)	(revision e2e62167b21f940caccf37f0d8c51f2fe3d8e1ed)
+++ lams_central/web/profile/profilePolicyConsents.jsp	(.../profilePolicyConsents.jsp)	(revision 85e52bd836773ab33bc41ba2ca0ced5a5f4d4fbb)
@@ -4,7 +4,8 @@
 
 <lams:html>
 <lams:head>
-	<lams:css/>
+	<link rel="stylesheet" href="${lams}css/components.css">
+    <link rel="stylesheet" href="${lams}includes/font-awesome6/css/all.css">
 	<style>
 		th, td {
 			text-align: center;
@@ -13,6 +14,7 @@
 	
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap5.bundle.min.js"></script>
 	<lams:JSImport src="includes/javascript/profile.js" />
 	<script type="text/javascript">
 		$(document).ready(function () {
@@ -23,14 +25,10 @@
 </lams:head>
 
 <body>
-<div style="clear: both;"></div>
-<div class="container">
-	<div class="row vertical-center-row">
-		<div>
-			<div class="panel">
-				<div class="panel-body">
-
-					<table class="table table-condensed table-striped" >
+	<div style="clear: both;"></div>
+	
+	<div class="container">
+					<table class="table table-condensed table-striped mt-3" >
 						<tr>
 							<th><fmt:message key="label.policy.name" /></th>
 							<th><fmt:message key="label.policy.type" /></th>
@@ -83,16 +81,12 @@
 						</c:forEach>
 					</table>
 					
-					<div class="pull-right">
-						<button type="button" class="btn btn-sm btn-primary offset5" onclick="history.go(-1);">
+					<div class="float-end">
+						<button type="button" class="btn btn-sm btn-light mt-2" onclick="history.go(-1);">
+							<i class="fa-solid fa-rotate-left me-1"></i>
 							<fmt:message key="label.return.to.myprofile" />
 						</button>
 					</div>
-
-				</div>
-			</div>
-		</div>
 	</div>
-</div>
 </body>
 </lams:html>