Index: lams_central/web/WEB-INF/tags/Alert5.tag
===================================================================
diff -u -rddbc79d74b7e7ca5244818401f32e7f24c5da159 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_central/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision ddbc79d74b7e7ca5244818401f32e7f24c5da159)
+++ lams_central/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -5,6 +5,10 @@
 <%@ attribute name="id" required="false" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="type" required="false" rtexprvalue="true"%>
+<%@ attribute name="isIconDisplayed" required="false" rtexprvalue="true"%>
+<c:if test="${empty isIconDisplayed}">
+	<c:set var="isIconDisplayed" value="true" />
+</c:if>
 
 <c:set var="idName" value="alert-${type}" />
 <c:if test="${not empty id}">
@@ -24,7 +28,7 @@
 	</c:when>
 	<c:when test="${type == 'warning'}">
 		<c:set var="alertType" value="warning" />
-		<c:set var="iconType" value="exclamation-circle" />
+		<c:set var="iconType" value="circle-exclamation" />
 	</c:when>
 </c:choose>
 
@@ -35,12 +39,14 @@
 				<button type="button" class="btn-close btn-sm float-end ms-4" data-bs-dismiss="alert" aria-label="Close"></button>
 			</c:if>
 				
-			<c:if test="${not empty title}">
-				<span class="alert-heading fw-bold">${title}</span>
+			<c:if test="${not empty pageScope.title}">
+				<span class="alert-heading fw-bold">${pageScope.title}</span>
 				<hr>
 			</c:if>
-				
-			<i class="fa fa-lg fa-${iconType} text-muted me-1"></i>
+			
+			<c:if test="${isIconDisplayed}">
+				<i class="fa fa-lg fa-${iconType} text-muted me-1"></i>
+			</c:if>
 			<jsp:doBody />	
 		</div>
 	</div>
Index: lams_central/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r5f169ec12c68516cfdbdfce8692bf37f4baecb65 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 5f169ec12c68516cfdbdfce8692bf37f4baecb65)
+++ lams_central/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -153,7 +153,9 @@
             <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" />
+                    	<span title="Activity name">
+                    		<c:out value="${title}" escapeXml="true" />
+                    	</span>
                     </h2>
                 </c:if>
 				
Index: lams_central/web/css/components.scss
===================================================================
diff -u -rb5dd3686dc0394105288a7961668903057541633 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_central/web/css/components.scss	(.../components.scss)	(revision b5dd3686dc0394105288a7961668903057541633)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -559,7 +559,10 @@
 	border: 0;
 }
 
-.ltable>div:first-child {
+.ltable {
+	margin-bottom: 1rem;	
+}
+.ltable:not(.table-striped)>div:first-child {
 	border-top: 1px solid #ddd;
     background-color: rgba(var(--bs-light-rgb), 1);
     font-style: italic;
@@ -568,10 +571,17 @@
 .ltable>.row {
 	border-bottom: 2px solid var(--bs-gray-200);
 	padding: 0.5rem;
+	margin-left: 0;
+	margin-right: 0;
 }
 .ltable.table-sm>.row {
 	padding: 0.25rem;
 }
+.ltable.table-striped {
+   > div:nth-of-type(odd) {
+    background-color: var(--bs-gray-200);
+  }
+}
 
 /* jqGrid text wrapping */
 .ui-jqgrid tr.jqgrow td, .ui-jqgrid tr.ui-subgrid td {
Index: lams_learning/src/java/org/lamsfoundation/lams/learning/web/controller/BranchingActivityController.java
===================================================================
diff -u -rbe74862925361d836bef1df4c5959105c9695a87 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/src/java/org/lamsfoundation/lams/learning/web/controller/BranchingActivityController.java	(.../BranchingActivityController.java)	(revision be74862925361d836bef1df4c5959105c9695a87)
+++ lams_learning/src/java/org/lamsfoundation/lams/learning/web/controller/BranchingActivityController.java	(.../BranchingActivityController.java)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -98,6 +98,8 @@
 	    branchingForm.setProgressID(learnerProgress.getLearnerProgressId());
 	    branchingForm.setShowFinishButton(Boolean.TRUE);
 	    branchingForm.setTitle(activity.getTitle());
+	    // lessonId needed for the progress bar
+	    request.setAttribute(AttributeNames.PARAM_LESSON_ID, learnerProgress.getLesson().getLessonId());
 
 	    if (learnerProgress.getLesson().isPreviewLesson()) {
 
@@ -135,8 +137,6 @@
 		} else if (branchingActivity.isToolBranchingActivity()) {
 		    branchingForm.setType(BranchingActivity.TOOL_BASED_TYPE);
 		}
-		// lessonId needed for the progress bar
-		request.setAttribute(AttributeNames.PARAM_LESSON_ID, learnerProgress.getLesson().getLessonId());
 	    } else {
 		// forward to the sequence activity.
 		if (log.isDebugEnabled()) {
Index: lams_learning/web/WEB-INF/tags/Alert5.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_learning/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -5,6 +5,10 @@
 <%@ attribute name="id" required="false" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="type" required="false" rtexprvalue="true"%>
+<%@ attribute name="isIconDisplayed" required="false" rtexprvalue="true"%>
+<c:if test="${empty isIconDisplayed}">
+	<c:set var="isIconDisplayed" value="true" />
+</c:if>
 
 <c:set var="idName" value="alert-${type}" />
 <c:if test="${not empty id}">
@@ -24,20 +28,26 @@
 	</c:when>
 	<c:when test="${type == 'warning'}">
 		<c:set var="alertType" value="warning" />
-		<c:set var="iconType" value="exclamation-circle" />
+		<c:set var="iconType" value="circle-exclamation" />
 	</c:when>
 </c:choose>
 
 <div class="row justify-content-md-center">
 	<div class="col-md-auto">
 		<div id="${idName}" class="alert alert-${alertType} shadow" role="alert">
-			<c:if test="${not empty title}">
-				<span class="fa fa-${iconType} "></span> <span class="alert-heading fw-bold">${title}</span>
+			<c:if test="${close}">
+				<button type="button" class="btn-close btn-sm float-end ms-4" data-bs-dismiss="alert" aria-label="Close"></button>
+			</c:if>
+				
+			<c:if test="${not empty pageScope.title}">
+				<span class="alert-heading fw-bold">${pageScope.title}</span>
 				<hr>
 			</c:if>
-			<p class="mb-0">
-			<jsp:doBody />
-			</p>
+			
+			<c:if test="${isIconDisplayed}">
+				<i class="fa fa-lg fa-${iconType} text-muted me-1"></i>
+			</c:if>
+			<jsp:doBody />	
 		</div>
 	</div>
-</div>	
\ No newline at end of file
+</div>
Index: lams_learning/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r5f169ec12c68516cfdbdfce8692bf37f4baecb65 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 5f169ec12c68516cfdbdfce8692bf37f4baecb65)
+++ lams_learning/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -153,7 +153,9 @@
             <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" />
+                    	<span title="Activity name">
+                    		<c:out value="${title}" escapeXml="true" />
+                    	</span>
                     </h2>
                 </c:if>
 				
Index: lams_learning/web/branching/preview.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/branching/preview.jsp	(.../preview.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_learning/web/branching/preview.jsp	(.../preview.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -20,86 +20,82 @@
 --%>
 
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="WebAppURL"><lams:WebAppURL/></c:set>
+<c:set var="formParameters" value="type=${branchingForm.type}&activityID=${branchingForm.activityID}&progressID=${branchingForm.progressID}"/>
 
-<lams:html>
+<lams:PageLearner title="${branchingForm.title}" toolSessionID="" lessonID="${lessonID}"
+		refresh="60;URL=${WebAppURL}/branching/performBranching.do?${formParameters}${(branchingForm.previewLesson == true) ? '&force=true' : ''}">
 
-	<lams:head>
-		<title><fmt:message key="label.branching.title"/></title>
-		<lams:css/>
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<c:set var="formAction">/branching/performBranching.do?type=${branchingForm.type}&activityID=${branchingForm.activityID}&progressID=${branchingForm.progressID}</c:set>
-		<c:if test="${branchingForm.previewLesson == true}">
-			<c:set var="formAction"><c:out value="${formAction}"/>&amp;force=true</c:set>
-		</c:if>
-		<META HTTP-EQUIV="Refresh" CONTENT="60;URL=<lams:WebAppURL/>${formAction}">
-	  </lams:head>
-
-	<body class="stripes">
-		<script type="text/javascript">
-			function validate() {
-				var validated = false,
-					form = document.forms[0],
-					elements = form.elements;
-				for (var i = 0; i < elements.length; i++) {
-					if (elements[i].name == "branchID") {
-						if (elements[i].checked) {
-							validated = true;
-							break;
-						}
+	<script type="text/javascript">
+		function validate() {
+			var validated = false, form = document.forms[0], elements = form.elements;
+			for (var i = 0; i < elements.length; i++) {
+				if (elements[i].name == "branchID") {
+					if (elements[i].checked) {
+						validated = true;
+						break;
 					}
 				}
-				
-				if (validated) {
-					return true;
-				}
-			
-				alert("<spring:escapeBody javaScriptEscape='true'><fmt:message key='message.activity.options.noActivitySelected' /></spring:escapeBody>");
-				return false;
 			}
-		</script>
+
+			if (validated) {
+				return true;
+			}
+
+			alert("<spring:escapeBody javaScriptEscape='true'><fmt:message key='message.activity.options.noActivitySelected' /></spring:escapeBody>");
+			return false;
+		}
+	</script>
 		
-		<c:set var="title"><c:out value="${branchingForm.title}" /></c:set>
-		<lams:Page type="learner" title="${title}">
+	<div id="container-main">
+		<p>
+			<em><fmt:message key="label.branching.preview.message" /> </em>
+		</p>
 		
-			<p>
-				<em><fmt:message key="label.branching.preview.message" /> </em>
-			</p>
+		<form:form action="forceBranching.do?${formParameters}" modelAttribute="branchingForm" target="_self" onsubmit="return validate();">
+		<fieldset>
+			<legend class="visually-hidden">
+				<fmt:message key="message.activity.options.noActivitySelected" />
+			</legend>
 		
-			<div class="group-box">
-		
-				<form:form
-					action="forceBranching.do?type=${branchingForm.type}&activityID=${branchingForm.activityID}&progressID=${branchingForm.progressID}"
-					modelAttribute="branchingForm" target="_self" onsubmit="return validate();">
-		
-					<table class="table table-condensed table-striped">
-						<c:forEach items="${branchingForm.activityURLs}"
-							var="activityURL" varStatus="loop">
-							<tr>
-								<td width="2%">
-									<c:choose>
-										<c:when test="${activityURL.complete}">
-											<i class="fa fa-check"></i>
-										</c:when>
-										<c:when test="${activityURL.defaultURL}">
-											<input type="radio" name="branchID"
-												id="activityID-${activityURL.activityId}"
-												value="<c:out value="${activityURL.activityId}"/>"
-												checked="checked">
-										</c:when>
-										<c:otherwise>
-											<input type="radio" name="branchID"
-												id="activityID-${activityURL.activityId}"
-												value="<c:out value="${activityURL.activityId}"/>">
-										</c:otherwise>
-									</c:choose>
-								</td>
-								<td>
-									<c:choose>
-		
-										<c:when test="${activityURL.complete}">
-											<!-- No Label tags -->
+			<div class="ltable table-striped">
+				<c:forEach items="${branchingForm.activityURLs}" var="activityURL" varStatus="loop">
+					<div class="row">
+						<div class="col">
+							<div class="form-check">
+								<c:choose>
+									<c:when test="${activityURL.complete}">
+										<i class="fa fa-check"></i>
+									</c:when>
+									<c:when test="${activityURL.defaultURL}">
+										<input type="radio" class="form-check-input" name="branchID"
+											id="activityID-${activityURL.activityId}"
+											value="<c:out value="${activityURL.activityId}"/>"
+											checked="checked">
+									</c:when>
+									<c:otherwise>
+										<input type="radio" class="form-check-input" name="branchID"
+											id="activityID-${activityURL.activityId}"
+											value="<c:out value="${activityURL.activityId}"/>">
+									</c:otherwise>
+								</c:choose>
+
+								<c:choose>
+									<c:when test="${activityURL.complete}">
+										<!-- No Label tags -->
+										<c:choose>
+											<c:when test="${activityURL.defaultURL}">
+												<strong><c:out value="${activityURL.title}" /> </strong>
+											</c:when>
+											<c:otherwise>
+												<c:out value="${activityURL.title}" />
+											</c:otherwise>
+										</c:choose>
+									</c:when>
+									<c:otherwise>
+										<!-- With Label tags -->
+										<label class="form-check-label" for="activityID-${activityURL.activityId}">
 											<c:choose>
 												<c:when test="${activityURL.defaultURL}">
 													<strong><c:out value="${activityURL.title}" /> </strong>
@@ -108,53 +104,33 @@
 													<c:out value="${activityURL.title}" />
 												</c:otherwise>
 											</c:choose>
-										</c:when>
-										<c:otherwise>
-											<!-- With Label tags -->
-											<label for="activityID-${activityURL.activityId}">
-												<c:choose>
-													<c:when test="${activityURL.defaultURL}">
-														<strong><c:out value="${activityURL.title}" /> </strong>
-													</c:when>
-													<c:otherwise>
-														<c:out value="${activityURL.title}" />
-													</c:otherwise>
-												</c:choose>
-											</label>
-										</c:otherwise>
+										</label>
+									</c:otherwise>
 		
-									</c:choose>
+								</c:choose>
 		
-								</td>
-							</tr>
-						</c:forEach>
-					</table>
-			
-					<button class="btn btn-primary pull-right">
-						<fmt:message key="label.activity.options.choose" />
-					</button>
-		
-				</form:form>
-				
-									
-				<form action="/lams/learning/CompleteActivity.do" method="post">
-					<input type="hidden" name="activityID" value="${branchingForm.activityID}">
-					<input type="hidden" name="progressID" value="${branchingForm.progressID}">
-			
-					<button class="btn btn-primary float-start na" onclick="finishActivity()">
-						<fmt:message key="label.finish.button" />
-					</button>
-			
-				</form>
+							</div>
+						</div>
+					</div>
+				</c:forEach>
 			</div>
 			
+			<button type="submit" class="btn btn-secondary float-end mb-2">
+				<fmt:message key="label.activity.options.choose" />
+			</button>
+		</fieldset>
+		</form:form>
 
-		<!--closes content-->
+		<div class="activity-bottom-buttons">
+			<form action="/lams/learning/CompleteActivity.do" method="post">
+				<input type="hidden" name="activityID" value="${branchingForm.activityID}">
+				<input type="hidden" name="progressID" value="${branchingForm.progressID}">
+			
+				<button type="submit" class="btn btn-primary float-start na">
+					<fmt:message key="label.finish.button" />
+				</button>
+			</form>
+		</div>
 		
-		<div id="footer"></div>
-		
-		</lams:Page>
-
-	</body>
-
-</lams:html>
+	</div>
+</lams:PageLearner>
Index: lams_learning/web/branching/wait.jsp
===================================================================
diff -u -r54007f98ca71e0073f19c5db78536437123287c6 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/branching/wait.jsp	(.../wait.jsp)	(revision 54007f98ca71e0073f19c5db78536437123287c6)
+++ lams_learning/web/branching/wait.jsp	(.../wait.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -20,40 +20,25 @@
 --%>
 
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="WebAppURL"><lams:WebAppURL/></c:set>
+<c:set var="formAction">performBranching.do?type=${branchingForm.type}&activityID=${branchingForm.activityID}&progressID=${branchingForm.progressID}</c:set>
 
-<lams:html>
+<lams:PageLearner title="${branchingForm.title}" toolSessionID="" lessonID="${lessonID}"
+		refresh="60;URL=${WebAppURL}/branching/${formAction}${(branchingForm.previewLesson == true) ? '&force=true' : ''}">
 
-	<lams:head>
-		<title><fmt:message key="label.branching.title"/></title>
-		<lams:css/>
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<c:set var="formAction">/branching/performBranching.do?type=${branchingForm.type}&activityID=${branchingForm.activityID}&progressID=${branchingForm.progressID}</c:set>
-		<c:if test="${branchingForm.previewLesson == true}">
-			<c:set var="formAction"><c:out value="${formAction}"/>&amp;force=true</c:set>
-		</c:if>
-		<META HTTP-EQUIV="Refresh" CONTENT="60;URL=<lams:WebAppURL/>${formAction}">
-	  </lams:head>
-
-	<body class="stripes">
-	
-		<c:set var="formAction">performBranching.do?type=${branchingForm.type}&activityID=${branchingForm.activityID}&progressID=${branchingForm.progressID}</c:set>
-	
+	<div id="container-main">
 		<form:form action="${formAction}" modelAttribute="branchingForm" target="_self">
+			<lams:Alert5 type="info">
+				<fmt:message key="label.branching.wait.message"/>
+				<div class="mt-2"><fmt:message key="label.branching.refresh.message"/></div>
+			</lams:Alert5>
 	
-			<c:set var="title"><c:out value="${branchingForm.title}" /></c:set>
-			<lams:Page type="learner" title="${title}">
-	
-				<p><fmt:message key="label.branching.wait.message"/></p>
-				<p><fmt:message key="label.branching.refresh.message"/></p>
-	
-				<button class="btn btn-default pull-right"><fmt:message key="label.next.button"/></button>
-	
-				<div id="footer"></div>
-			</lams:Page>
-	
+			<div class="activity-bottom-buttons">
+				<button type="submit" class="btn btn-primary na">
+					<fmt:message key="label.next.button"/>
+				</button>
+			</div>
 		</form:form>
-	</body>
-
-</lams:html>
+	</div>
+</lams:PageLearner>
Index: lams_learning/web/grouping/choose.jsp
===================================================================
diff -u -rfe19797ec82718905555353176ed719bec11043e -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/grouping/choose.jsp	(.../choose.jsp)	(revision fe19797ec82718905555353176ed719bec11043e)
+++ lams_learning/web/grouping/choose.jsp	(.../choose.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -20,38 +20,51 @@
 --%>
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams"><lams:LAMSURL /></c:set>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.view.groups.title" /></title>
-
-	<lams:css />
+<lams:PageLearner title="${title}" toolSessionID="" lessonID="${lessonID}">
 	<style type="text/css">
 		.user-container {
 			padding: 2px;
 		}
+		.modal-dialog {
+			--bs-modal-width: 400px;
+		}
 	</style>
 
-	<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/common.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-</lams:head>
-<body class="stripes">
-	
+	<script>
+		$(document).ready(function(){
+			$('#confirmationModal').on('show.bs.modal', function (event) {
+				  var button = $(event.relatedTarget) 
+				  var url = button.data('u') 
+				  var groupName = button.data('gn')
+		
+				  var modal = $(this);
+				  modal.find('.modal-body').html('<fmt:message key="label.group.confirm.areyoujoining"/>:&nbsp;<strong>' + groupName + '</strong>?')
+				  modal.find('#submitter').click(function(){
+					$(this).parent().children('button').each(function(){
+						$(this).prop('disabled', true).html($(this).data('loadingText'));
+					});
+					document.getElementById(url).submit();
+				  });
+			})
+		})
+	</script>
+
 	<!-- Modal -->
-	<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-	  <div class="modal-dialog modal-sm" role="popup">
+	<div class="modal fade" id="confirmationModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
+	  <div class="modal-dialog">
 	    <div class="modal-content">
 	      <div class="modal-header bg-warning">
-	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-	        <h4 class="modal-title"><i class="fa fa-sm fa-users"></i> <fmt:message key="label.group.confirm.header"/></h4>
+	        	<div class="modal-title fs-4">
+	        		<i class="fa fa-sm fa-users"></i> 
+	        		<fmt:message key="label.group.confirm.header"/>
+	        	</div>
+	        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 	      </div>
 	      <div class="modal-body text-center" style="min-height: 60px;">
 	      </div>
 	      <div class="modal-footer" style="padding: 8px">
-	      		<button type="button" class="btn  btn-sm btn-default" data-dismiss="modal"
+	      		<button type="button" class="btn  btn-sm btn-secondary" data-bs-dismiss="modal"
 	        			data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i><span> <fmt:message key='label.cancel.button' /></span>">
 	        		<fmt:message key="label.cancel.button" />
 	        	</button>
@@ -64,76 +77,65 @@
 	  </div>
 	</div>
 	
-	<lams:Page type="learner" title="${title}">
-	
-		<div class="panel">
+	<div id="container-main">
+		<div class="instructions">
 			<fmt:message key="label.learner.choice.group.message" />
 		</div>
 	
 		<div class="table-responsive">
-			<table class="table table-condensed table-hover">
-				<tr>
-					<th width="25%" class="first"><fmt:message key="label.view.groups.title" /></th>
-					<th>
+			<div class="ltable">
+				<div class="row">
+					<div class="col-3 first">
+						<fmt:message key="label.view.groups.title" />
+					</div>
+					
+					<div class="col-7">
 						<c:if test="${viewStudentsBeforeSelection && !RestrictedGroupUserNames}">
 							<fmt:message key="label.view.groups.learners" />
 						</c:if>
-					</th>
-					<th></th>
-				</tr>
+					</div>
+					
+					<div class="col-2"></div>
+				</div>
+				
 				<c:forEach var="group" items="${groups}">
-					<tr>
-						<td width="25%" class="first">
+					<div class="row">
+						<div class="col-sm-3 first">
 							<strong><c:out value="${group.groupName}" /></strong>
-						</td>
-						<td width="60%">
+						</div>
+						
+						<div class="col-sm-7">
 							<c:if test="${viewStudentsBeforeSelection && !RestrictedGroupUserNames}">
 								<c:forEach items="${group.userList}" var="user">
 									<div name="u-${user.userID}" class="user-container">
 										<lams:Portrait userId="${user.userID}"/>&nbsp;<c:out value="${user.firstName}" />&nbsp;<c:out value="${user.lastName}" />
 									</div>
 								</c:forEach>
 							</c:if>
-						</td>
-						<td>
+						</div>
+						
+						<div class="col-sm-2 text-end">
 							<c:choose>
 								<c:when test="${not empty maxLearnersPerGroup and fn:length(group.userList)>=maxLearnersPerGroup}">
 									<fmt:message key="label.learner.choice.group.full" />
 								</c:when>
+								
 								<c:otherwise>
 									<form:form action="learnerChooseGroup.do?userId=${user.userID}&activityID=${activityID}&groupId=${group.groupID}"
 										 modelAttribute="groupingForm" id="form${user.userID}${activityID}${group.groupID}" >
 									</form:form>							
 									<button type="button" class="btn btn-sm btn-primary" 
-										data-toggle="modal" data-target="#confirmationModal" 
-										data-backdrop="static" data-keyboar="false"
-										data-u="form${user.userID}${activityID}${group.groupID}" 
-										data-gn="<c:out value="${group.groupName}" />"><fmt:message key="label.choose.group.button" />
+											data-bs-toggle="modal" data-bs-target="#confirmationModal" 
+											data-u="form${user.userID}${activityID}${group.groupID}" 
+											data-gn="<c:out value="${group.groupName}" />">
+										<fmt:message key="label.choose.group.button" />
 									</button>
 								</c:otherwise>							
 							</c:choose>
-						</td>
-					</tr>
+						</div>
+					</div>
 				</c:forEach>
-			</table>
+			</div>
 		</div>
-	</lams:Page>
-	<script>
-		$('#confirmationModal').on('show.bs.modal', function (event) {
-			  var button = $(event.relatedTarget) 
-			  var url = button.data('u') 
-			  var groupName = button.data('gn')
-	
-			  var modal = $(this);
-			  modal.find('.modal-body').html('<fmt:message key="label.group.confirm.areyoujoining"/>:&nbsp;<strong>' + groupName + '</strong>?')
-			  modal.find('#submitter').click(function(){
-				$(this).parent().children('button').each(function(){
-					$(this).prop('disabled', true).html($(this).data('loadingText'));
-				});
-				document.getElementById(url).submit();
-			  });
-		})
-	</script>
-
-</body>
-</lams:html>
\ No newline at end of file
+	</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_learning/web/grouping/show.jsp
===================================================================
diff -u -rfe19797ec82718905555353176ed719bec11043e -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/grouping/show.jsp	(.../show.jsp)	(revision fe19797ec82718905555353176ed719bec11043e)
+++ lams_learning/web/grouping/show.jsp	(.../show.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -21,14 +21,10 @@
 
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="userId" value="${user.userID}" />
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="label.view.groups.title" /></title>
+<lams:PageLearner title="${title}" toolSessionID="" lessonID="${lessonID}">
 
-	<lams:css />
 	<style type="text/css">
 		.user-container {
 			padding: 2px;
@@ -39,11 +35,6 @@
 		}
 	</style>
 
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<lams:JSImport src="includes/javascript/common.js" />
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '', ${activityID}, submitForm);
 		
@@ -52,29 +43,26 @@
 			f.submit();
 		}
 	</script>
-</lams:head>
 
-<body class="stripes">
-	<lams:Page type="learner" title="${title}">
-	
+	<div id="container-main">	
 		<form:form action="/lams/learning/grouping/completeActivity.do?userId=${userId}&lessonId=${lessonID}&activityID=${activityID}"
 			target="_self" modelAttribute="messageForm" id="messageForm">
 	
-			<div class="panel panel-default">
-				<div class="panel-heading panel-title">
-					<i class="fa fa-sm fa-users text-primary"></i>&nbsp;
+			<div class="card lcard">
+				<div class="card-header">
+					<i class="fa fa-sm fa-users"></i>&nbsp;
 					<fmt:message key="label.view.groups.title" />
 				</div>
 				
-				<div class="panel-body">
+				<div>
 					<div class="table-responsive">
-						<table class="table table-condensed table-hover" cellspacing="0">
+						<div class="ltable table-stripped mb-0">
 							<c:forEach var="group" items="${groups}">
-								<tr>
-									<td width="15%">
+								<div class="row">
+									<div class="col-2">
 										<strong><c:out value="${group.groupName}" /></strong>
-									</td>
-									<td>
+									</div>
+									<div class="col-10">
 										<c:choose>
 											<c:when test="${RestrictedGroupUserNames && !group.userBelongsToGroup}">
 												<fmt:message key="label.learners">
@@ -86,55 +74,35 @@
 											
 											<c:otherwise>
 												<c:forEach items="${group.userList}" var="groupUser">
-													<div name="u-${groupUser.userID}" class="user-container">
-														<lams:Portrait userId="${groupUser.userID}"/>&nbsp;<c:out value="${groupUser.firstName}" />&nbsp;<c:out value="${groupUser.lastName}" />
+													<div name="u-${groupUser.userID}" class="user-container ${groupUser.userID ==  userId ? 'alert alert-info you mb-0' : ''}">
+														<lams:Portrait userId="${groupUser.userID}"/>&nbsp;
+														<c:out value="${groupUser.firstName}" />&nbsp;<c:out value="${groupUser.lastName}" />
 													</div>
 												</c:forEach>
 											</c:otherwise>
 										</c:choose>
-									</td>
-								</tr>
+									</div>
+								</div>
 							</c:forEach>
-						</table>
+						</div>
 					</div>
 				</div>
 			</div>
 	
 			<c:if test="${finishedButton}">
-				<div class="row no-gutter">
-					<div class="col-xs-12">
-						<div id="right-buttons" class="pull-right voffset10">
-							<a href="javascript:;" class="btn btn btn-primary na" id="finishButton">
-								<span class="nextActivity"> 
-									<c:choose>
-										<c:when test="${activityPosition.last}">
-											<fmt:message key="label.submit.button" />
-										</c:when>
-										<c:otherwise>
-											<fmt:message key="label.finish.button" />
-										</c:otherwise>
-									</c:choose>
-								</span>
-							</a>
-						</div>
-					</div>
+				<div class="activity-bottom-buttons">
+					<buttton class="btn btn-primary na" id="finishButton"> 
+						<c:choose>
+							<c:when test="${activityPosition.last}">
+								<fmt:message key="label.submit.button" />
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="label.finish.button" />
+							</c:otherwise>
+						</c:choose>
+					</buttton>
 				</div>
 			</c:if>
-
-			<div id="footer"></div>
-			<!--closes footer-->
-			<script type="text/javascript">
-				function codeAddress() {
-					var youUser = document.getElementsByName('u-${userId}');
-					if (youUser) {
-						youUser[0].className += ' alert-info you';
-					}
-				}
-				window.onload = codeAddress;
-			</script>
-
 		</form:form>
-	</lams:Page>
-</body>
-
-</lams:html>
\ No newline at end of file
+	</div>
+</lams:PageLearner>
\ No newline at end of file
Index: lams_learning/web/grouping/wait.jsp
===================================================================
diff -u -re325f88e2e856294ed9cde0f90303f84e2ceea8d -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/grouping/wait.jsp	(.../wait.jsp)	(revision e325f88e2e856294ed9cde0f90303f84e2ceea8d)
+++ lams_learning/web/grouping/wait.jsp	(.../wait.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -20,40 +20,33 @@
 --%>
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="WebAppURL"><lams:WebAppURL/></c:set>
 
-<lams:html xhtml="true">
-	<lams:head>
-		<title><fmt:message key="label.view.groups.title"/></title>
-		<lams:css/>
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<META HTTP-EQUIV="Refresh" CONTENT="60;URL=<lams:WebAppURL/>grouping/performGrouping.do?activityID=${groupingForm.activityID}">
-	</lams:head>
+<lams:PageLearner title="${groupingForm.title}" toolSessionID="" lessonID="${lessonID}"
+		refresh="60;URL=${WebAppURL}grouping/performGrouping.do?activityID=${groupingForm.activityID}">
 
-	<body class="stripes">
-		<lams:Page type="learner" title="${groupingForm.title}">
-			<form:form action="performGrouping.do" modelAttribute="groupingForm" target="_self">
-				<input type="hidden" name="activityID" value="${groupingForm.activityID}" />
-				<input type="hidden" name="force" value="${groupingForm.previewLesson}" />
-				
+	<div id="container-main">
+
+		<lams:Alert5 id="waitingGroups" close="false" type="info">
+			<fmt:message key="label.view.view.groups.wait.message" />
+		</lams:Alert5>
 		
-				<lams:Alert id="waitingGroups" close="false" type="info">
-					<fmt:message key="label.view.view.groups.wait.message" />
-				</lams:Alert>
+		<c:if test="${groupingForm.previewLesson == true}">
+			<lams:Alert5 type="warning">
+				<fmt:message key="label.grouping.preview.message" />
+			</lams:Alert5>
+		</c:if>
+			
+		<form:form action="performGrouping.do" modelAttribute="groupingForm" target="_self">
+			<input type="hidden" name="activityID" value="${groupingForm.activityID}" />
+			<input type="hidden" name="force" value="${groupingForm.previewLesson}" />
 		
-				<c:if test="${groupingForm.previewLesson == true}">
-					<div class="voffset10">
-						<em><fmt:message key="label.grouping.preview.message" /></em>
-					</div>
-				</c:if>
+			<div class="activity-bottom-buttons">
+				<button class="btn btn-primary na">
+					<fmt:message key="label.next.button" />
+				</button>
+			</div>
 		
-				<div class="right-buttons">
-					<button class="btn btn-primary pull-right">
-						<fmt:message key="label.next.button" />
-					</button>
-				</div>
-		
-			</form:form>
-		</lams:Page>
-	</body>
-
-</lams:html>
+		</form:form>
+	</div>
+</lams:PageLearner>
Index: lams_learning/web/lessonComplete.jsp
===================================================================
diff -u -rff5898738229a10e41410750ca5c082e1a5eb770 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/lessonComplete.jsp	(.../lessonComplete.jsp)	(revision ff5898738229a10e41410750ca5c082e1a5eb770)
+++ lams_learning/web/lessonComplete.jsp	(.../lessonComplete.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -206,7 +206,7 @@
 		
 		<c:if test="${gradebookOnComplete}">
 			<br>
-			<lams:Alert5 type="success"> 		
+			<lams:Alert5 type="success" isIconDisplayed="false">
 				<div class="text-center fs-5 fw-semibold">
 					<fmt:message key="gradebook.lesson.complete" />
 				</div>
Index: lams_learning/web/optionsActivity.jsp
===================================================================
diff -u -r21f82ef5c6ab672a3ad2848d330824c97b877738 -r56ec8d9806c22331d9483e197f0e270b638471be
--- lams_learning/web/optionsActivity.jsp	(.../optionsActivity.jsp)	(revision 21f82ef5c6ab672a3ad2848d330824c97b877738)
+++ lams_learning/web/optionsActivity.jsp	(.../optionsActivity.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
@@ -25,18 +25,8 @@
 		request.setAttribute("isOptionsWithSequencesActivity", "true");
 	}
 %>
-<c:set var="lams"><lams:LAMSURL /></c:set>
 
-<lams:html>
-<lams:head>
-	<title><fmt:message key="learner.title" /></title>
-	<lams:css />
-
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
-	<lams:JSImport src="includes/javascript/common.js" />
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
+<lams:PageLearner title="${optionsActivityForm.title}" toolSessionID="" lessonID="${optionsActivityForm.lessonID}">	
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '', ${optionsActivityForm.activityID}, finishActivity);
 		
@@ -65,18 +55,16 @@
 			document.getElementById('messageForm').submit();
 		}
 	</script>
-</lams:head>
-<body class="stripes">
-	<lams:Page type="learner" title="${optionsActivityForm.title}">
-		
+
+	<div id="container-main">
 		<c:if test="${not empty optionsActivityForm.description}">
-			<div class="panel">
+			<div id="instructions" class="instructions">
 				<c:out value="${optionsActivityForm.description}" />
 			</div>
 		</c:if>
 
 		<c:if test="${optionsActivityForm.minimum != 0 && !optionsActivityForm.minimumLimitReached}">
-			<lams:Alert id="min-liimt" close="false" type="danger">	
+			<lams:Alert5 id="min-liimt" close="false" type="danger">	
 				<c:choose>
 					<c:when test="${isOptionsWithSequencesActivity}">
 						<fmt:message key="message.activity.set.options.activityCount">
@@ -89,11 +77,11 @@
 						</fmt:message>
 					</c:otherwise>
 				</c:choose>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 								
 		<c:if test="${optionsActivityForm.maximum != 0}">
-			<lams:Alert id="max-limit" type="danger" close="false">
+			<lams:Alert5 id="max-limit" type="danger" close="false">
 				<c:choose>
 					<c:when test="${isOptionsWithSequencesActivity}">
 						<fmt:message key="message.activity.set.options.note.maximum">
@@ -117,11 +105,11 @@
 						</c:otherwise>
 					</c:choose>
 				</c:if>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
 		
 		<c:if test="${optionsActivityForm.hasCompletedActivities}">
-			<lams:Alert id="can-revisit" type="info" close="true">
+			<lams:Alert5 id="can-revisit" type="info" close="true">
 				<c:choose>
 					<c:when test="${isOptionsWithSequencesActivity}">
 						<fmt:message key="message.activity.set.options.note" />
@@ -130,31 +118,34 @@
 						<fmt:message key="message.activity.options.note" />
 					</c:otherwise>
 				</c:choose>
-			</lams:Alert>
+			</lams:Alert5>
 		</c:if>
-		
-		<div class="group-box">
-			<form:form action="ChooseActivity.do" modelAttribute="activityForm" method="post" onsubmit="return validate();">
-				<input type="hidden" name="lams_token" value="<c:out value='${lams_token}' />">
-		
-				<div class="options">
-					<table class="table table-condensed table-hover">
-						<c:forEach items="${optionsActivityForm.activityURLs}" var="activityURL">
-							<tr><td>
 
+		<form:form action="ChooseActivity.do" modelAttribute="activityForm" method="post" onsubmit="return validate();">
+			<input type="hidden" name="lams_token" value="<c:out value='${lams_token}' />">
+			
+			<fieldset>
+				<legend class="visually-hidden">
+					<fmt:message key="message.activity.options.noActivitySelected" />
+				</legend>
+		
+				<div class="ltable table-stripped">
+					<c:forEach items="${optionsActivityForm.activityURLs}" var="activityURL">
+						<div class="row">
+							<div class="col">
 								<c:choose>
 									<c:when test="${not activityURL.complete and not optionsActivityForm.maxActivitiesReached}">
-										<div class="radio">
-											<label>
-												<input type="radio" name="activityID" class="noBorder" id="activityID-${activityURL.activityId}"
+										<div class="form-check">
+											<input type="radio" name="activityID" class="form-check-input" id="activityID-${activityURL.activityId}"
 													value="${activityURL.activityId}" onchange="$('#choose-branch-button').prop('disabled', false);">
+											<label class="form-check-label" for="activityID-${activityURL.activityId}">
 												<c:out value="${activityURL.title}" />
 											</label>
 										</div>
 									</c:when>
 									
 									<c:when test="${activityURL.complete}">
-										<div class="radio loffset20">
+										<div class="form-check">
 											<i class="fa fa-lg fa-check-circle text-success radio-button-offset" style="cursor: auto;"></i>
 										
 											<c:choose>
@@ -167,10 +158,11 @@
 														<c:out value="${activityURL.title}" />
 													</span>
 													
-													<div class="loffset20">
+													<div class="ms-4">
 														<c:forEach items="${activityURL.childActivities}" var="childActivityURL">
-															<a href="${childActivityURL.url}"><c:out value="${childActivityURL.title}" /></a>
-															<br>
+															<div>
+																<a href="${childActivityURL.url}"><c:out value="${childActivityURL.title}" /></a>
+															</div>
 														</c:forEach>
 													</div>
 												</c:when>
@@ -179,38 +171,36 @@
 									</c:when>
 											
 									<c:otherwise>
-										<div class="radio loffset20">
+										<div class="form-check ms-3">
 											<c:out value="${activityURL.title}" />
 										</div>
 									</c:otherwise>
 								</c:choose>
-							</td></tr>
-						</c:forEach>
-					</table>
+							</div>
+						</div>
+					</c:forEach>
 				</div>
+			</fieldset>
 		
-				<div align="center" class="voffset10">
-					<c:if test="${!optionsActivityForm.maxActivitiesReached}">
-						<button id="choose-branch-button" class="btn btn-success" disabled="disabled">
-							<fmt:message key="label.activity.options.choose" />
-						</button>						
-					</c:if>
-				</div>
+			<div class="float-end mb-3">
+				<c:if test="${!optionsActivityForm.maxActivitiesReached}">
+					<button id="choose-branch-button" class="btn btn-secondary" disabled="disabled">
+						<fmt:message key="label.activity.options.choose" />
+					</button>						
+				</c:if>
+			</div>
 		
-			</form:form>
-		</div>
+		</form:form>
 		
 		<c:if test="${optionsActivityForm.minimumLimitReached or isPreview}">
-			<form:form action="/lams/learning/CompleteActivity.do" modelAttribute="messageForm" method="post" id="messageForm">
-				<input type="hidden" name="lams_token" value="<c:out value='${lams_token}' />">
-				<input type="hidden" name="activityID" value="<c:out value='${optionsActivityForm.activityID}' />">
-				<input type="hidden" name="lessonID" value="<c:out value='${optionsActivityForm.lessonID}' />">
-				<input type="hidden" name="progressID" value="<c:out value='${optionsActivityForm.progressID}' />">
-		
-				<hr class="msg-hr">
-		
-				<div class="voffset10">
-					<a href="#nogo" class="btn btn-primary pull-right na" id="finishButton">
+			<div class="activity-bottom-buttons">
+				<form:form action="/lams/learning/CompleteActivity.do" modelAttribute="messageForm" method="post" id="messageForm">
+					<input type="hidden" name="lams_token" value="<c:out value='${lams_token}' />">
+					<input type="hidden" name="activityID" value="<c:out value='${optionsActivityForm.activityID}' />">
+					<input type="hidden" name="lessonID" value="<c:out value='${optionsActivityForm.lessonID}' />">
+					<input type="hidden" name="progressID" value="<c:out value='${optionsActivityForm.progressID}' />">
+				
+					<button type="submit" class="btn btn-primary na" id="finishButton">
 						<c:choose>
 							<c:when test="${activityPosition.last}">
 								<fmt:message key="label.submit.button" />
@@ -219,12 +209,10 @@
 								<fmt:message key="label.finish.button" />
 							</c:otherwise>
 						</c:choose>
-					</a>
-				</div>
-		
-			</form:form>
+					</button>
+				</form:form>
+			</div>
 		</c:if>
 			
-	</lams:Page>
-</body>
-</lams:html>
\ No newline at end of file
+	</div>
+</lams:PageLearner>