Index: lams_admin/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r4d39e9dca40fc4b974cb775f27284fbd582c3615 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 4d39e9dca40fc4b974cb775f27284fbd582c3615)
+++ lams_admin/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -129,7 +129,7 @@
 admin.search = Search
 admin.enable = Enable
 admin.disable = Disable
-appadmin.maintain = LAMS Admin
+appadmin.maintain = LAMS Administration
 appadmin.maintain.loginpage = Maintain login page
 appadmin.maintain.external.servers = Maintain integrated servers
 appadmin.maintain.server.edit = Edit integrated server
@@ -195,7 +195,7 @@
 label.login.as = Login as
 appadmin.import.groups.title = Import courses
 heading.import.results = Import results
-table.heading.organisation.id = Organisation ID
+table.heading.organisation.id  =Course ID
 import.groups.intro = Use this screen to bulk import courses and subcourses using an Excel spreadsheet.
 import.groups.instructions = When creating a course, make sure the row above it is empty.  When creating a subcourse, place it directly under it's parent course.
 import.groups.download = Download the courses template to create courses and subcourse.
@@ -296,7 +296,7 @@
 audit.spreadsheet.error = Error processing spreadsheet row {0}: {1}
 audit.successful.user.import = Successfully imported {0} users.
 audit.successful.role.import = Successfully imported {0} role memberships.
-audit.successful.organisation.import = Successfully imported {0} organisations.
+audit.successful.organisation.import  =Successfully imported {0} courses.
 config.forgot.password.allow.email = Allow forgot password email link in front page?
 config.forgot.password.email = Email address from which the forgotten password emails will be sent
 config.custom.tab.link = Custom tab URL
Index: lams_admin/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r4d39e9dca40fc4b974cb775f27284fbd582c3615 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 4d39e9dca40fc4b974cb775f27284fbd582c3615)
+++ lams_admin/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -96,6 +96,7 @@
 role.LEARNER = Learner
 role.MONITOR = Monitor
 role.SYSADMIN = System Admin
+role.APPADMIN = App Admin
 label.member.of = Member of
 label.with.roles = With roles
 admin.organisation.management = Course/Subcourse management
@@ -128,7 +129,7 @@
 admin.search = Search
 admin.enable = Enable
 admin.disable = Disable
-appadmin.maintain = LAMS Admin
+appadmin.maintain = LAMS Administration
 appadmin.maintain.loginpage = Maintain login page
 appadmin.maintain.external.servers = Maintain integrated servers
 appadmin.maintain.server.edit = Edit integrated server
@@ -194,7 +195,7 @@
 label.login.as = Login as
 appadmin.import.groups.title = Import courses
 heading.import.results = Import results
-table.heading.organisation.id = Organisation ID
+table.heading.organisation.id  =Course ID
 import.groups.intro = Use this screen to bulk import courses and subcourses using an Excel spreadsheet.
 import.groups.instructions = When creating a course, make sure the row above it is empty.  When creating a subcourse, place it directly under it's parent course.
 import.groups.download = Download the courses template to create courses and subcourse.
@@ -281,6 +282,7 @@
 label.authors = Authors
 label.group.managers = Course Managers
 label.sysadmins = Sysadmins
+label.appadmins = Appadmins
 label.author.admins = Author Administrators
 heading.users = Users
 label.number.of.users = {0} users.
@@ -294,7 +296,7 @@
 audit.spreadsheet.error = Error processing spreadsheet row {0}: {1}
 audit.successful.user.import = Successfully imported {0} users.
 audit.successful.role.import = Successfully imported {0} role memberships.
-audit.successful.organisation.import = Successfully imported {0} organisations.
+audit.successful.organisation.import  =Successfully imported {0} courses.
 config.forgot.password.allow.email = Allow forgot password email link in front page?
 config.forgot.password.email = Email address from which the forgotten password emails will be sent
 config.custom.tab.link = Custom tab URL
@@ -426,6 +428,7 @@
 config.live.edit = Enable live edit
 sysadmin.extGroupsUrl = External groups URL
 server.sys.config.title = Server configuration
+server.app.config.title = Application configuration
 server.monitor.title = Server monitoring
 user.course.title = User and course configuration
 config.site.name = Site name
Index: lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/OrgManageController.java
===================================================================
diff -u -rdd60c645ebe32ff15180cff47caa583cb41b7ee1 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/OrgManageController.java	(.../OrgManageController.java)	(revision dd60c645ebe32ff15180cff47caa583cb41b7ee1)
+++ lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/OrgManageController.java	(.../OrgManageController.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -23,6 +23,7 @@
 package org.lamsfoundation.lams.admin.web.controller;
 
 import java.io.IOException;
+import java.text.SimpleDateFormat;
 import java.util.List;
 
 import javax.servlet.ServletException;
@@ -109,6 +110,7 @@
 		: userManagementService.getUsersFromOrganisation(orgId).size();
 	String key = org == rootOrganisation ? "label.users.in.system" : "label.users.in.group";
 	request.setAttribute("numUsers", messageService.getMessage(key, new String[] { String.valueOf(numUsers) }));
+	request.setAttribute("totalUsers", numUsers); 
 
 	// Set OrgManageForm
 	if (orgManageForm == null) {
@@ -133,6 +135,7 @@
 
 	    // display parent org breadcrumb link
 	    request.setAttribute("parentGroupName", pOrg.getName());
+	    request.setAttribute("parentCode", pOrg.getCode());
 	    request.setAttribute("parentGroupId", pOrg.getOrganisationId());
 	} else {
 	    request.setAttribute("orgManageForm", orgManageForm);
Index: lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/UserOrgController.java
===================================================================
diff -u -rf2ad75cef0c507a64877942631fee13efbc6ed50 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/UserOrgController.java	(.../UserOrgController.java)	(revision f2ad75cef0c507a64877942631fee13efbc6ed50)
+++ lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/UserOrgController.java	(.../UserOrgController.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -64,18 +64,22 @@
 	    return "error";
 	}
 
+	String orgCode = organisation.getCode();
+	
 	String orgName = organisation.getName();
 	log.debug("orgName: " + orgName);
 	Organisation parentOrg = organisation.getParentOrganisation();
 	if (parentOrg != null && !parentOrg.equals(userManagementService.getRootOrganisation())) {
 	    request.setAttribute("pOrgId", parentOrg.getOrganisationId());
+	    request.setAttribute("pOrgCode", parentOrg.getCode());
 	    request.setAttribute("pOrgName", parentOrg.getName());
 	}
 	Integer orgType = organisation.getOrganisationType().getOrganisationTypeId();
 	request.setAttribute("orgType", orgType);
 
 	// create form object
 	userOrgForm.setOrgId(orgId);
+	userOrgForm.setOrgCode(orgCode);
 	userOrgForm.setOrgName(orgName);
 
 	String[] args = { "0" };
Index: lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/UserOrgRoleController.java
===================================================================
diff -u -rf2ad75cef0c507a64877942631fee13efbc6ed50 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/UserOrgRoleController.java	(.../UserOrgRoleController.java)	(revision f2ad75cef0c507a64877942631fee13efbc6ed50)
+++ lams_admin/src/java/org/lamsfoundation/lams/admin/web/controller/UserOrgRoleController.java	(.../UserOrgRoleController.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -77,9 +77,11 @@
 
 	// display breadcrumb links
 	request.setAttribute("orgName", organisation.getName());
+	request.setAttribute("orgCode", organisation.getCode());
 	Organisation parentOrg = organisation.getParentOrganisation();
 	if (parentOrg != null && !parentOrg.equals(userManagementService.getRootOrganisation())) {
 	    request.setAttribute("pOrgId", parentOrg.getOrganisationId());
+	    request.setAttribute("pOrgCode", parentOrg.getCode());
 	    request.setAttribute("pOrgName", parentOrg.getName());
 	}
 	request.setAttribute("orgType", organisation.getOrganisationType().getOrganisationTypeId());
Index: lams_admin/src/java/org/lamsfoundation/lams/admin/web/dto/UserListDTO.java
===================================================================
diff -u -rb5d493f6a41f8161b6a62a0cea53e78e069bac36 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/src/java/org/lamsfoundation/lams/admin/web/dto/UserListDTO.java	(.../UserListDTO.java)	(revision b5d493f6a41f8161b6a62a0cea53e78e069bac36)
+++ lams_admin/src/java/org/lamsfoundation/lams/admin/web/dto/UserListDTO.java	(.../UserListDTO.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -35,6 +35,7 @@
 public class UserListDTO {
     private List<UserManageBean> userManageBeans;
     private Integer orgId;
+    private String orgCode;
     private String orgName;
     private Boolean courseAdminCanAddNewUsers;
     private Boolean courseAdminCanBrowseAllUsers;
@@ -97,4 +98,12 @@
         this.canEditRole = canEditRole;
     }
 
+    public String getOrgCode() {
+	return orgCode;
+    }
+
+    public void setOrgCode(String orgCode) {
+	this.orgCode = orgCode;
+    }
+
 }
\ No newline at end of file
Index: lams_admin/src/java/org/lamsfoundation/lams/admin/web/form/UserOrgForm.java
===================================================================
diff -u -r550e1b37b507779064955267ef47e9085f791357 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/src/java/org/lamsfoundation/lams/admin/web/form/UserOrgForm.java	(.../UserOrgForm.java)	(revision 550e1b37b507779064955267ef47e9085f791357)
+++ lams_admin/src/java/org/lamsfoundation/lams/admin/web/form/UserOrgForm.java	(.../UserOrgForm.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -26,6 +26,8 @@
 
     private Integer orgId;
 
+    private String orgCode;
+
     private String orgName;
 
     private String[] userIds;
@@ -54,4 +56,12 @@
 	this.userIds = userIds;
     }
 
+    public String getOrgCode() {
+	return orgCode;
+    }
+
+    public void setOrgCode(String orgCode) {
+	this.orgCode = orgCode;
+    }
+
 }
Index: lams_admin/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_admin/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_admin/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_admin/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_admin/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_admin/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_admin/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_admin/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_admin/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_admin/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_admin/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -49,7 +49,7 @@
          <name>toolSignature</name>
          <required>false</required>
 
-           <rtexprvalue>true</rtexprvalue>
+         <rtexprvalue>true</rtexprvalue>
 
       </attribute>
       <attribute>
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_admin/web/appadmin.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/appadmin.jsp	(.../appadmin.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/appadmin.jsp	(.../appadmin.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -9,41 +9,52 @@
 	<c:set var="title"><fmt:message key="appadmin.maintain"/></c:set>
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
-
-	<lams:css/>
+	
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
+<body class="component pb-4">
+	<lams:Page5 type="admin" title="${title}">
 		<div class="row"> 
-			<div class="col-xs-12"> 
-				<div class="alert alert-info text-center"> 
-					<img src="/lams/images/svg/lams_logo_black.svg" width="100px"><br> 
-					<fmt:message key="config.version" />&nbsp;${serverVersion}
-				</div> 
+			<div class="col text-center"> 
+				<a href="/" class="lams-logo" alt="LAMS logo">
+					<img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="<fmt:message key='label.monitoring.logo' />" />
+				</a>
    			</div> 
   		</div>
-	
+		<div class="row"> 
+			<div class="col text-center my-2"> 
+				<fmt:message key="config.version" />&nbsp;${serverVersion}
+   			</div> 
+  		</div>
+ 		
 		<c:forEach items="${groupedLinks}" var="links">
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<div class="panel-title"><fmt:message key="${links[0]}"/></div>
+			<div class="row">
+				<div class="col text-center h4">
+					<fmt:message key="${links[0]}"/>
 				</div>
-				<div class="list-group">
-					<c:set var="linkBeans" value="${links[1]}"/>
-		 			<c:forEach items="${linkBeans}" var="linkBean">
-						<span class="list-group-item">
-							<a href="<c:out value="${linkBean.link}"/>">
-								<fmt:message><c:out value="${linkBean.name}"/></fmt:message>
-							</a>
-						</span>
-					</c:forEach>
-			 	</div>
-			</div>		
+			</div>
+			
+
+			<div class="row mb-3">
+				<div class="col-4 offset-4">
+					<ul class="list-group">
+			 			<c:forEach items="${links[1]}" var="linkBean">
+							<li class="list-group-item">
+								<a href="<c:out value="${linkBean.link}"/>" class="text-decoration-none">
+									<fmt:message><c:out value="${linkBean.name}"/></fmt:message>
+								</a>
+							</li>
+						</c:forEach>
+					</ul>
+				</div>
+			</div>
 		</c:forEach>
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/cleanup.jsp
===================================================================
diff -u -r4d39e9dca40fc4b974cb775f27284fbd582c3615 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/cleanup.jsp	(.../cleanup.jsp)	(revision 4d39e9dca40fc4b974cb775f27284fbd582c3615)
+++ lams_admin/web/cleanup.jsp	(.../cleanup.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -10,102 +10,98 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
-	
-	<lams:Page type="admin" formID="cleanupForm">
-	
-	<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
-	<div class="panel panel-default" >
-		<div class="panel-heading">
-			<span class="panel-title">
+<body class="component">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="sysadmin.cleanup"/></c:set>
+
+	<lams:Page5 type="admin" title="${title}" formID="cleanupForm" breadcrumbItems="${breadcrumbItems}">
+		<div class="card" >
+			<div class="card-header">
 				<fmt:message key="appadmin.batch.temp.file.delete" />
-			</span>
-		</div>
+			</div>
+				
+			<div class="card-body">
+				<lams:errors path="numDays"/>
+		
+				<lams:Alert type="warn" id="cleanup-warning" close="false">
+					<fmt:message key="msg.cleanup.warning" /><br />
+				</lams:Alert>
+				
+				<c:set var="filesDeleted" value="${filesDeleted}"/>
+				<c:if test="${not empty filesDeleted}">
+					<p><c:out value="${filesDeleted}" /></p>
+				</c:if>
+				<input class="btn btn-secondary mb-2" type="submit" value="Calculate" onClick="javascript:document.location='refresh.do'" />
+				<span class="loffset10"><c:out value="<%= FileUtil.getTempDir() %>" /></span>
+				
+				<ul class="list-group voffset5">
+					<li class="list-group-item"><c:out value="<%= TempDirectoryFilter.zip_prefix %>" />* : <c:out value="${zipTotal}" /><c:if test="${empty zipTotal}"><i><fmt:message key="label.unknown"/></i></c:if> KB
+					<li class="list-group-item"><c:out value="<%= TempDirectoryFilter.tmp_prefix %>" />* : <c:out value="${tmpTotal}" /><c:if test="${empty tmpTotal}"><i><fmt:message key="label.unknown"/></i></c:if> KB
+				</ul>
+				<fmt:message key="msg.cleanup.actual.space" />
 			
-		<div class="panel-body">
-			<lams:errors path="numDays"/>
-	
-			<lams:Alert type="warn" id="cleanup-warning" close="false">
-				<fmt:message key="msg.cleanup.warning" /><br />
-			</lams:Alert>
+				<p>
+					<fmt:message key="msg.cleanup.recommended" />
+				</p>
 			
-			<c:set var="filesDeleted" value="${filesDeleted}"/>
-			<c:if test="${not empty filesDeleted}">
-				<p><c:out value="${filesDeleted}" /></p>
-			</c:if>
-			<input class="btn btn-default" type="submit" value="Calculate" onClick="javascript:document.location='../cleanup/refresh.do'" />
-			<span class="loffset10"><c:out value="<%= FileUtil.getTempDir() %>" /></span>
+				<form:form action="files.do" modelAttribute="cleanupForm" id="cleanupForm" method="post">
+					<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 			
-			<ul class="list-group voffset5">
-				<li class="list-group-item"><c:out value="<%= TempDirectoryFilter.zip_prefix %>" />* : <c:out value="${zipTotal}" /><c:if test="${empty zipTotal}"><i><fmt:message key="label.unknown"/></i></c:if> KB
-				<li class="list-group-item"><c:out value="<%= TempDirectoryFilter.tmp_prefix %>" />* : <c:out value="${tmpTotal}" /><c:if test="${empty tmpTotal}"><i><fmt:message key="label.unknown"/></i></c:if> KB
-			</ul>
-			<fmt:message key="msg.cleanup.actual.space" />
-		
-			<p>
-			<fmt:message key="msg.cleanup.recommended" />
-			</p>
-		
-			<form:form action="files.do" modelAttribute="cleanupForm" id="cleanupForm" method="post">
-				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-		
-				<p><fmt:message key="label.cleanup.delete" />:
-				<form:input path="numDays" maxlength="4" size="4" cssClass="form-control form-control-inline" /></p>
-				
-				<div class="pull-right">
-					<input type="submit" class="btn btn-primary loffset5" value="<fmt:message key="admin.delete"/>" />
-				</div>
-			</form:form>
+					<p><fmt:message key="label.cleanup.delete" />:
+					<form:input path="numDays" maxlength="4" size="4" cssClass="form-control d-inline ms-2" cssStyle="width: 100px" /></p>
+					
+					<div class="text-end">
+						<input type="submit" class="btn btn-primary" value="<fmt:message key="admin.delete"/>" />
+					</div>
+				</form:form>
+			</div>
 		</div>
-	</div>
-		
-	<div class="panel panel-default" >
-		<div class="panel-heading">
-			<span class="panel-title">
+			
+		<div class="card my-3" >
+			<div class="card-header">
 				<fmt:message key="sysadmin.cache.clear" />
-			</span>
+			</div>
+			
+			<div class="card-body text-end">
+				<form:form action="cache.do" method="post">
+					<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+					
+					<c:if test="${param.cacheCleared eq 'true'}">
+						<span class="me-2"><fmt:message key="sysadmin.cache.cleared" /></span>
+					</c:if>
+					<input type="submit" class="btn btn-primary" value="<fmt:message key="sysadmin.clear"/>" />
+
+				</form:form>
+			</div>
 		</div>
-		
-		<div class="panel-body">
-			<form:form action="cache.do" method="post">
-				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-				
-				<input type="submit" class="btn btn-primary pull-right" value="<fmt:message key="sysadmin.clear"/>" />
-				<c:if test="${param.cacheCleared eq 'true'}">
-					<span class="loffset10"><fmt:message key="sysadmin.cache.cleared" /></span>
-				</c:if>
-			</form:form>
-		</div>
-	</div>
-		
-	<div class="panel panel-default" >
-		<div class="panel-heading">
-			<span class="panel-title">
+			
+		<div class="card" >
+			<div class="card-header">
 				<fmt:message key="sysadmin.garbage.clear" />
-			</span>
+			</div>
+			
+			<div class="card-body text-end">
+				<form:form action="garbage.do" method="post">
+					<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+					
+					<c:if test="${param.garbageCollectorRun eq 'true'}">
+						<span class="me-2"><fmt:message key="sysadmin.garbage.cleared" /></span>
+					</c:if>
+					<input type="submit" class="btn btn-primary" value="<fmt:message key="sysadmin.clear"/>" />
+				</form:form>
+			</div>
 		</div>
-		
-		<div class="panel-body">
-			<form:form action="garbage.do" method="post">
-				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-		
-				<input type="submit" class="btn btn-primary pull-right" value="<fmt:message key="sysadmin.clear"/>" />
-				<c:if test="${param.garbageCollectorRun eq 'true'}">
-					<span class="loffset10"><fmt:message key="sysadmin.garbage.cleared" /></span>
-				</c:if>
-			</form:form>
-		</div>
-	</div>
 	
-	</lams:Page>
+	</lams:Page5>
 
 </body>
-</lams:html>
-
-
-
+</lams:html>
\ No newline at end of file
Index: lams_admin/web/cleanupPreviewLessons.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/cleanupPreviewLessons.jsp	(.../cleanupPreviewLessons.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/cleanupPreviewLessons.jsp	(.../cleanupPreviewLessons.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,11 +8,14 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+	
 	<script type="text/javascript">
 		$(document).ready(function(){
 			var previewCount = ${previewCount},
@@ -70,21 +73,23 @@
 	</script>
 </lams:head>
 
-<body class="stripes">
+<body class="component">
 
-	<lams:Page type="admin" title="${title}">
-		
-		<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="appadmin.batch.preview.lesson.delete"/></c:set>
 
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">	
+
 		<fmt:message key="label.cleanup.preview.lesson.count" />&nbsp;<span id="previewCount">${previewCount}</span> / <span id="allLessonCount">${allLessonCount}</span>
 		<div id="deletingBox" style="display: none">
-		<fmt:message key="label.cleanup.preview.lesson.progress" />
+			<fmt:message key="label.cleanup.preview.lesson.progress" />
 		</div>
 				
-		<div class="pull-right">
-			<button id="deleteButton" class="btn btn-primary loffset5"><fmt:message key="admin.delete"/></button>
+		<div class="float-end">
+			<button id="deleteButton" class="btn btn-primary"><fmt:message key="admin.delete"/></button>
 		</div>
-	</lams:Page>
+	</lams:Page5>
 
 </body>
 </lams:html>
Index: lams_admin/web/config/editconfig.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/config/editconfig.jsp	(.../editconfig.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/config/editconfig.jsp	(.../editconfig.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -10,83 +10,100 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
+<body class="component pb-4">
 	<c:set var="help"><fmt:message key="LAMS+Configuration"/></c:set>
 	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
-	<lams:Page type="admin" title="${title}" titleHelpURL="${help}" formID="configForm">
-		
-		<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
+	
+	<%-- Build the breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="sysadmin.config.settings.edit"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
 
+	
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}"  breadcrumbItems="${breadcrumbItems}" formID="configForm" >
+	
 		<c:if test="${not empty error}">
 			<lams:Alert type="danger" id="error-messages" close="false">
 				<c:out value="${error}" />
 			</lams:Alert>
 		</c:if>
+		
 		<form:form action="config/save.do" modelAttribute="configForm" id="configForm" method="post">
 			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 				
 			<c:forEach items="${config}" var="group">
-				<div class="panel panel-default">
-					<div class="panel-heading">
-						<div class="panel-title"><fmt:message key="${group.key}"/></div>
+				<div class="row">
+					<div class="col text-center h4">
+						<fmt:message key="${group.key}"/>
 					</div>
-									
-					<table class="table table-striped table-condensed" >
-						<c:forEach items="${group.value}" var="row">
-							<tr>
-								<td>
-									<fmt:message key="${row.descriptionKey}"/>
-									<c:if test="${row.required}">&nbsp;&nbsp;*</c:if>
-								</td>
-								<td>
-									<input type="hidden" name="key" value="${row.key}"/>
-									<c:set var="BOOLEAN"><c:out value="<%= ConfigurationItem.BOOLEAN_FORMAT %>" /></c:set>
-									<c:choose>
-									<c:when test="${row.key == 'SMTPAuthSecurity'}">
-										<select name="value" class="form-control form-control-sm" id="${row.key}">
-											<c:forEach items="${smtpAuthTypes}" var="authType">
-												<option value="${authType.key}" ${authType.key == row.value ? 'selected="selected"' : '' }>
-													${authType.value}
-												</option>
-											</c:forEach>
-										</select>
-									</c:when>
-									<c:when test="${row.format==BOOLEAN}">
-										<select name="value" class="form-control form-control-sm">
-											<option value="true" ${row.value ? 'selected="selected"' : '' }>true</option>
-											<option value="false" ${row.value ? '' : 'selected="selected"' }>false&nbsp;&nbsp;</option>
-										</select>
-									</c:when>
-									<c:when test="${row.format==BOOLEAN}">
-										<select name="value" class="form-control form-control-sm">
-											<option value="true" ${row.value ? 'selected="selected"' : '' }>true</option>
-											<option value="false" ${row.value ? '' : 'selected="selected"' }>false&nbsp;&nbsp;</option>
-										</select>
-									</c:when>
-									<c:otherwise>
-										<input type="text" id="${row.key}" name="value" value="${row.value}" size="50" maxlength="255" class="form-control"/>
-									</c:otherwise>
-									</c:choose>
-								</td>
-							</tr>
-						</c:forEach>
-					</table>
 				</div>
+				<div class="row mb-3">
+					<div class="col-8 offset-2">					
+						<table class="table table-striped table-bordered bg-white" role="presentation">
+							<c:forEach items="${group.value}" var="row">
+								<tr>
+									<td>
+										<label for="${row.key}" class="form-label"><fmt:message key="${row.descriptionKey}"/>
+											<c:if test="${row.required}">&nbsp;&nbsp;<span class="text-danger">*</span></c:if>
+										</label>
+									</td>
+									<td class="w-50">
+										<input type="hidden" name="key" value="${row.key}"/>
+										<c:set var="BOOLEAN"><c:out value="<%= ConfigurationItem.BOOLEAN_FORMAT %>" /></c:set>
+										<c:choose>
+										<c:when test="${row.key == 'SMTPAuthSecurity'}">
+											<select name="value" class="form-control" id="${row.key}">
+												<c:forEach items="${smtpAuthTypes}" var="authType">
+													<option value="${authType.key}" ${authType.key == row.value ? 'selected="selected"' : '' }>
+														${authType.value}
+													</option>
+												</c:forEach>
+											</select>
+										</c:when>
+										<c:when test="${row.format==BOOLEAN}">
+											<select id="${row.key}" name="value" class="form-control">
+												<option value="true" ${row.value ? 'selected="selected"' : '' }>true</option>
+												<option value="false" ${row.value ? '' : 'selected="selected"' }>false&nbsp;&nbsp;</option>
+											</select>
+										</c:when>
+										<c:when test="${row.format==BOOLEAN}">
+											<select id="${row.key}" name="value" class="form-control">
+												<option value="true" ${row.value ? 'selected="selected"' : '' }>true</option>
+												<option value="false" ${row.value ? '' : 'selected="selected"' }>false&nbsp;&nbsp;</option>
+											</select>
+										</c:when>
+										<c:otherwise>
+											<input id="${row.key}" type="text" id="${row.key}" name="value" value="${row.value}" size="50" maxlength="255" class="form-control" <c:if test="${row.required}">required</c:if>/>
+										</c:otherwise>
+										</c:choose>
+									</td>
+								</tr>
+							</c:forEach>
+						</table>
+					</div>
+				</div>
 			</c:forEach>
 				
-			<div class="pull-right">
-				<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-					<fmt:message key="admin.cancel"/>
-				</a>
-				<input type="submit" id="saveButton" class="btn btn-primary loffset5" value="<fmt:message key="admin.save" />" />
+			<div class="row">
+				<div class="col-8 offset-2 text-end">
+					<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary">
+						<fmt:message key="admin.cancel"/>
+					</a>
+					<button type="submit" id="saveButton" class="btn btn-primary">
+						<fmt:message key="admin.save" />
+					</button>
+				</div>
 			</div>
 		</form:form>
 		
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/css/admin.scss
===================================================================
diff -u -ra5b247dd91cb3ffabf9de46cba029e5537fad087 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/css/admin.scss	(.../admin.scss)	(revision a5b247dd91cb3ffabf9de46cba029e5537fad087)
+++ lams_admin/web/css/admin.scss	(.../admin.scss)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -2,4 +2,8 @@
 
 .signupFieldDescription {
 	color: lighten($gray-base, 50%);
+}
+
+.lams-logo img {
+	width: 5rem;
 }
\ No newline at end of file
Index: lams_admin/web/disabledusers.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/disabledusers.jsp	(.../disabledusers.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/disabledusers.jsp	(.../disabledusers.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -6,52 +6,67 @@
 <lams:head>
 	<c:set var="title"><fmt:message key="admin.user.management"/></c:set>
 	<title>${title}</title>
-	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="<lams:LAMSURL/>favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
 <body class="stripes">
-	<c:set var="title">${title}: <fmt:message key="admin.list.disabled.users"/></c:set>
-	<lams:Page type="admin" title="${title}">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="admin.list.disabled.users"/></c:set>
 	
-		<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
-
-		<table class="table table-striped table-condensed">
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+	
+		<table class="table table-striped table-bordered">
+		<thead>
 		<tr>
-			<th></th>
+			<th>ID</th>
 			<th><fmt:message key="admin.user.login"/></th>
-			<th><fmt:message key="admin.user.title"/></th>
 			<th><fmt:message key="admin.user.first_name"/></th>
 			<th><fmt:message key="admin.user.last_name"/></th>
-			<th></th>
+			<th class="text-center"><fmt:message key="admin.actions"/></th>
 		</tr>
+		</thead>
+		<tbody>
 		<c:forEach var="user" items="${users}">
 			<tr>
 				<td>
-					<c:out value="${user.userId}" />
+					<c:out value="${user.userId}" escapeXml="true"/>
 				</td>
 				<td>
-					<c:out value="${user.login}" />
+					<c:out value="${user.login}" escapeXml="true" />
 				</td>
 				<td>
-					<c:out value="${user.title}" />
+					<c:out value="${user.firstName}" escapeXml="true" />
 				</td>
 				<td>
-					<c:out value="${user.firstName}" />
+					<c:out value="${user.lastName}" escapeXml="true" />
 				</td>
-				<td>
-					<c:out value="${user.lastName}" />
-				</td>
-				<td>
-					<csrf:form style="display: inline-block;" id="enable_${ltiConsumer.sid}" method="post" action="/lams/admin/user/enable.do"><input type="hidden" name="userId" value="${user.userId}"/><button type="submit" class="btn btn-primary btn-xs"><fmt:message key="admin.enable" /></button></csrf:form>
+				<td class="text-center">
+					<csrf:form style="display: inline-block;" id="enable_${ltiConsumer.sid}" method="post" action="/lams/admin/user/enable.do">
+						<input type="hidden" name="userId" value="${user.userId}"/>
+						<button type="submit" class="btn btn-success text-white" title="<fmt:message key="admin.enable" />">
+							<i class="fa fa-power-off"></i>
+						</button>
+					</csrf:form>
 				</td>		
 			</tr>
 		</c:forEach>
+		</tbody>
 		</table>
-	</lams:Page>
+		
+		<div class="text-end">
+			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary">
+				<fmt:message key="admin.cancel"/>
+			</a>
+		</div>	
+	</lams:Page5>
 
 </body>
 </lams:html>
Index: lams_admin/web/import/importGroups.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/import/importGroups.jsp	(.../importGroups.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/import/importGroups.jsp	(.../importGroups.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -19,15 +19,16 @@
 	<c:set var="title"><fmt:message key="appadmin.import.groups.title"/></c:set>
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+	
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
 	<link href="<lams:LAMSURL/>css/uppy.min.css" rel="stylesheet" type="text/css" />
 	<link href="<lams:LAMSURL/>css/uppy.custom.css" rel="stylesheet" type="text/css" />
-
-	<lams:css/>
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
-	
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/uppy/uppy.min.js"></script>
 	<c:choose>
 		<c:when test="${language eq 'es'}">
@@ -114,14 +115,18 @@
 	 </script>
 </lams:head>
     
-<body class="stripes">
+<body class="component">
 
 	<c:set var="help"><fmt:message key="Import+Groups"/></c:set>
 	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
-	<lams:Page type="admin" title="${title}" titleHelpURL="${help}" formID="importForm">
-	
-	<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/apadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="sysadmin.import.groups.title"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>	
 
+	
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" formID="importForm" breadcrumbItems="${breadcrumbItems}">
+	
 	<div id="main-page">
 	
 	<c:if test="${not empty results}">
@@ -183,15 +188,15 @@
 				
 		<div id="file-upload-area" class="voffset20"></div>
 		
-		<div class="pull-right voffset20">
-		<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="admin.cancel"/></a>
-		<input type="submit" id="importButton" class="btn btn-primary loffset5" value="<fmt:message key="label.import"/>" /> &nbsp; 	
+		<div class="mt-3 text-end">
+		<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary"><fmt:message key="admin.cancel"/></a>
+		<input type="submit" id="importButton" class="btn btn-primary" value="<fmt:message key="label.import"/>" /> &nbsp; 	
 		</div>
 	
 	</form:form>
 	
 	</div>
-	</lams:Page>
+	</lams:Page5>
 		
 </body>
 </lams:html>
Index: lams_admin/web/import/importexcel.jsp
===================================================================
diff -u -r3f3f34c22194aeaf302e1fd332925dffd35019aa -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/import/importexcel.jsp	(.../importexcel.jsp)	(revision 3f3f34c22194aeaf302e1fd332925dffd35019aa)
+++ lams_admin/web/import/importexcel.jsp	(.../importexcel.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -19,15 +19,16 @@
 <lams:head>
 	<c:set var="title"><fmt:message key="admin.user.management"/></c:set>
 	<title>${title}</title>
-
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
-	<link rel="shortcut icon" href="<lams:LAMSURL/>favicon.ico" type="image/x-icon" />
+	
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
 	<link href="<lams:LAMSURL/>css/uppy.min.css" rel="stylesheet" type="text/css" />
 	<link href="<lams:LAMSURL/>css/uppy.custom.css" rel="stylesheet" type="text/css" />
-	
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
+
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/uppy/uppy.min.js"></script>
 	<c:choose>
 		<c:when test="${language eq 'es'}">
@@ -114,16 +115,18 @@
 	</script>
 </lams:head>
     
-<body class="stripes">
+<body class="component">
 
 	<c:set var="title"><fmt:message key="admin.user.management"/></c:set>
 	<c:set var="help"><fmt:message key="Import+Users"/></c:set>
 	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
-			<lams:Page type="admin" title="${title}" titleHelpURL="${help}" formID="importExcelForm">
-				<p>
-					<a href="<lams:LAMSURL/>admin/appadminstart.do"
-						class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
-				</p>
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="admin.user.management"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>	
+	
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" formID="importExcelForm" breadcrumbItems="${breadcrumbItems}">
+
 				
 				<p>
 					<fmt:message key="msg.import.intro" />
@@ -145,10 +148,9 @@
 						</ul></li>
 				</ul>
 				</p>
-				<div class ="pull-left">
-					<lams:Alert type="info" close="false">
-						<strong><fmt:message key='label.password.must.contain' />:</strong>
-						<ul style="line-height: 1.2">
+			<c:set var="alertTitle"><fmt:message key='label.password.must.contain' /></c:set>
+			<lams:Alert type="info" close="false" title="${alertTitle}:">
+				<ul style="line-height: 1.2em; list-style: none;">
 							<li><span class="fa fa-check"></span> <fmt:message
 									key='label.password.min.length'>
 									<fmt:param value='${minNumChars}' />
@@ -186,25 +188,23 @@
 					<form:hidden path="orgId" />
 					<form:hidden path="tmpFileUploadId" />
 					
-					<div class="checkbox">
-						<label>
-							<form:checkbox path="sendEmail" /> <fmt:message key='label.import.email' />
+					<div class="form-check">
+						
+						<form:checkbox path="sendEmail" cssClass="form-check-input"/>
+						<label class="form-check-label" for="sendEmail">
+							<fmt:message key='label.import.email' />
 						</label>
 					</div>
 				
-					<div id="file-upload-area" class="voffset20"></div>
+					<div id="file-upload-area" class="my-3"></div>
 				
-					<div class="pull-right voffset20">
-						<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="admin.cancel"/></a>
-						<input type="submit" id="importButton" class="btn btn-primary loffset5" value="<fmt:message key="label.import" />" />
+					<div class="text-end">
+						<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary"><fmt:message key="admin.cancel"/></a>
+						<input type="submit" id="importButton" class="btn btn-primary" value="<fmt:message key="label.import" />" />
 						&nbsp;
 					</div>
 				
 				</form:form>
-			</lams:Page>
+			</lams:Page5>
 </body>
-</lams:html>
-
-
-
-
+</lams:html>
\ No newline at end of file
Index: lams_admin/web/import/importresult.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/import/importresult.jsp	(.../importresult.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/import/importresult.jsp	(.../importresult.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -6,16 +6,19 @@
 <lams:head>
 	<c:set var="title"><fmt:message key="admin.user.management"/></c:set>
 	<title>${title}</title>
-		<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="<lams:LAMSURL/>favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
-		<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
+<body class="component">
+	<lams:Page5 type="admin" title="${title}">
+		<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary"><fmt:message key="appadmin.maintain" /></a></p>
 
 		<p>${successful}</p>
 		<p>
@@ -29,9 +32,6 @@
 		</c:forEach>
 		</p>
 
-	</lams:Page>
+	</lams:Page5>
 </body>
-</lams:html>
-
-
-
+</lams:html>
\ No newline at end of file
Index: lams_admin/web/import/status.jsp
===================================================================
diff -u -r37bb2ae017713b44cdfd6a55cfceca28c3efab02 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/import/status.jsp	(.../status.jsp)	(revision 37bb2ae017713b44cdfd6a55cfceca28c3efab02)
+++ lams_admin/web/import/status.jsp	(.../status.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -6,8 +6,13 @@
 
 <lams:html>
 	<lams:head>
-		<lams:css/>
+		<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/>admin/css/admin.css" type="text/css" media="screen">
+		
 		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	</lams:head>
 	
 	<script type="text/JavaScript">
@@ -39,17 +44,17 @@
 	%>
 	</c:set>	
 
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
+<body class="component">
+	<lams:Page5 type="admin" title="${title}">
 	
 		<div align="center">	
-			<h3><fmt:message key="msg.please.wait"/></h3>
+			<h4><fmt:message key="msg.please.wait"/></h4>
 			<p>${progressMessage}</p>
 		</div>
 			
 		<lams:WaitingSpinner id="fileUpload_Busy"/> 
 		
-	</lams:Page>
+	</lams:Page5>
 </body>
 
 </lams:html>
\ No newline at end of file
Index: lams_admin/web/integration/extLessonForm.jsp
===================================================================
diff -u -rccc788f07597ad3fde52adb6ff13e964b552c35d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/integration/extLessonForm.jsp	(.../extLessonForm.jsp)	(revision ccc788f07597ad3fde52adb6ff13e964b552c35d)
+++ lams_admin/web/integration/extLessonForm.jsp	(.../extLessonForm.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -1,38 +1,53 @@
 <%@ include file="/taglibs.jsp"%>
 
-		<h3><fmt:message key="sysadmin.lesson.default" /></h3>
-		<div class="checkbox">
-		    <label>
-		    <form:checkbox path="gradebookOnComplete" /><fmt:message key="sysadmin.lesson.gradebook.complete" />
+		<h4><fmt:message key="sysadmin.lesson.default" /></h4>
+				<div class="form-check mb-2">
+					<form:checkbox id="gradebookOnComplete" path="gradebookOnComplete" cssClass="form-check-input"/>
+					<label class="form-check-label" for="gradebookOnComplete">
+						<fmt:message key="sysadmin.lesson.gradebook.complete" />
 		    </label>
 		</div>
-		<div class="checkbox">
-		    <label>
-		     <form:checkbox path="forceLearnerRestart" /><fmt:message key="sysadmin.lesson.force.restart" />
+					
+				<div class="form-check mb-2">
+					<form:checkbox path="forceLearnerRestart" id="forceLearnerRestart" cssClass="form-check-input"/>
+					<label class="form-check-label" for="forceLearnerRestart">
+						<fmt:message key="sysadmin.lesson.force.restart" />
 		    </label>
 		</div>
-		<div class="checkbox">
-		    <label>
-		     <form:checkbox path="allowLearnerRestart" /><fmt:message key="sysadmin.lesson.allow.restart" />
+
+				<div class="form-check mb-2">
+					<form:checkbox id="allowLearnerRestart" path="allowLearnerRestart" cssClass="form-check-input"/>
+					<label class="form-check-label" for="allowLearnerRestart">
+						<fmt:message key="sysadmin.lesson.allow.restart" />
 		    </label>
 		</div>
-		<div class="checkbox">
-		    <label>
-		     <form:checkbox path="liveEditEnabled" /><fmt:message key="sysadmin.lesson.liveedit" />
+		    
+				<div class="form-check mb-2">
+					<form:checkbox id="liveEditEnabled" path="liveEditEnabled" cssClass="form-check-input"/>
+					<label class="form-check-label" for="liveEditEnabled">
+						<fmt:message key="sysadmin.lesson.liveedit" />
 		    </label>
 		</div>
-		<div class="checkbox">
-		    <label>
-		    <form:checkbox path="enableLessonNotifications" /><fmt:message key="sysadmin.lesson.notification" />
+
+				<div class="form-check mb-2">
+					<form:checkbox id="enableLessonNotifications" path="enableLessonNotifications" cssClass="form-check-input"/>
+					<label class="form-check-label" for="enableLessonNotifications">
+						<fmt:message key="sysadmin.lesson.notification" />
 		    </label>
 		</div>
-		<div class="checkbox">
-		    <label>
-		     <form:checkbox path="learnerPresenceAvailable" styleId="learnerPresenceAvailable" /><fmt:message key="sysadmin.lesson.presence" />
+
+				<div class="form-check mb-2">
+					<form:checkbox id="learnerPresenceAvailable" path="learnerPresenceAvailable" cssClass="form-check-input" styleId="learnerPresenceAvailable" />
+					<label class="form-check-label" for="learnerPresenceAvailable">
+						<fmt:message key="sysadmin.lesson.presence" />
 		    </label>
 		</div>
-		<div class="checkbox">
-		    <label>
-		     <form:checkbox path="learnerImAvailable" styleId="learnerImAvailable" /><fmt:message key="sysadmin.lesson.im" />
+
+				<div class="form-check mb-2">
+					<form:checkbox id="learnerImAvailable" path="learnerImAvailable" cssClass="form-check-input" styleId="learnerImAvailable" />
+					<label class="form-check-label" for="learnerImAvailable">
+						<fmt:message key="sysadmin.lesson.im" />
 		    </label>
-		</div>
\ No newline at end of file
+		</div>			
+	</div>
+
Index: lams_admin/web/integration/ltiConsumer.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/integration/ltiConsumer.jsp	(.../ltiConsumer.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/integration/ltiConsumer.jsp	(.../ltiConsumer.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -7,21 +7,20 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
-	<style media="screen,projection" type="text/css">
-		table td {
-	  		padding-bottom: 7px;
-		}
-	</style>
 	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.validate.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+	
 	<script type="text/javascript">
 		$(document).ready(function(){
 			// validate signup form on keyup and submit
 			var validator = $("#ltiConsumerForm").validate({
+				errorClass: 'text-danger form-text font-italic',
  				rules: {
 					serverid: "required", 
 					serverkey: "required",
@@ -39,233 +38,204 @@
 	</script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}" formID="ltiConsumerForm">
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-				<fmt:message key="appadmin.maintain" />
-			</a>
-					
-			<a href="<lams:LAMSURL/>admin/ltiConsumerManagement/start.do" class="btn btn-default">
-				<fmt:message key="label.manage.tool.consumers" />
-			</a>
-		</p>
+<body class="component pb-4">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbChild1"><lams:LAMSURL/>admin/ltiConsumerManagement/start.do | <fmt:message key="label.manage.tool.consumers" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="appadmin.maintain.server.edit"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbChild1},${breadcrumbActive}"/>
 
+
+	<lams:Page5 type="admin" title="${title}" formID="ltiConsumerForm" breadcrumbItems="${breadcrumbItems}">
 		<lams:errors path="*"/>
 		<form:form action="save.do" id="ltiConsumerForm" modelAttribute="ltiConsumerForm" method="post">
 			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 			<form:hidden path="sid" />
-						
-			<table class="table table-no-border">
-				<tr>
-					<td><fmt:message key="sysadmin.serverkey" />&nbsp;*</td>
-					<td>
+			
+			<div class="row">
+				<div class="col-6 offset-3">				
+					<div class="mb-3">
+			   			<label for="serverid" class="form-label"><fmt:message key="sysadmin.serverkey" /></label>&nbsp;<span class="text-danger">*</span>
+			    		<input id="serverid" maxlength="20" name="serverid" value="${ltiConsumerForm.serverid}" class="form-control" required/>
 						<lams:errors path="serverid"/>
-						<form:input path="serverid" size="20" cssClass="form-control"/>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="sysadmin.serversecret" />&nbsp;*</td>
-					<td>
+					</div>
+					<div class="mb-3">
+						<label for="serverkey" class="form-label"><fmt:message key="sysadmin.serversecret" /></label>&nbsp;<span class="text-danger">*</span>
+						<input id="serverkey" maxlength="20" name="serverkey" value="${ltiConsumerForm.serverkey}" class="form-control" required/>
 						<lams:errors path="serverkey"/>
-						<form:input path="serverkey" size="30" cssClass="form-control"/>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="sysadmin.servername" />&nbsp;*</td>
-					<td>
+					</div>
+					<div class="mb-3">
+						<label for="servername" class="form-label"><fmt:message key="sysadmin.servername" /></label>&nbsp;<span class="text-danger">*</span>
+						<input id="servername" maxlength="20" name="servername" value="${ltiConsumerForm.servername}" class="form-control" required/>
 						<lams:errors path="servername"/>
-						<form:input path="servername" size="30" cssClass="form-control"/>
-					</td>
-				</tr>
-				<tr>
-					<td valign="top"><fmt:message key="sysadmin.serverdesc" />:</td>
-					<td>
-						<form:input path="serverdesc" cols="40" rows="3" cssClass="form-control"/>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="sysadmin.prefix" />&nbsp;*</td>
-					<td>
-						<lams:errors path="prefix"/>
-						<form:input path="prefix" size="10" cssClass="form-control"/>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="sysadmin.disabled" />:</td>
-					<td>
-						<form:checkbox path="disabled"  />
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="sysadmin.lessonFinishUrl" />:</td>
-					<td>
-						<form:input path="lessonFinishUrl" cssClass="form-control" />
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="sysadmin.lti.consumer.monitor.roles" />:</td>
-					<td>
-						<form:input path="ltiToolConsumerMonitorRoles" cssClass="form-control"/>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="sysadmin.user.id.name" />:</td>
-					<td>
-						<form:input path="userIdParameterName" cssClass="form-control"/>
-					</td>
-				</tr>
-				
-				<c:if test="${ltiAdvantageEnabled}">
-					<tr>
-						<td colspan="2">
-							<h3><fmt:message key="sysadmin.lti.advantage" /></h3>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.user.country" />:</td>
-						<td>
-							<form:select path="defaultCountry" cssClass="form-control">
+					</div>
+					<div class="mb-3">
+						<label for="serverdesc" class="form-label"><fmt:message key="sysadmin.serverdesc" /></label>&nbsp;<span class="text-danger">*</span>
+						<input id="serverdesc" maxlength="20" name="serverdesc" value="${ltiConsumerForm.serverdesc}" class="form-control"/>
+						<lams:errors path="servername"/>
+					</div>
+					<div class="mb-3">
+						<label for="prefix" class="form-label"><fmt:message key="sysadmin.prefix" /></label>&nbsp;<span class="text-danger">*</span>
+						<input id="prefix" maxlength="10" name="prefix" value="${ltiConsumerForm.prefix}" class="form-control"/>
+						<lams:errors path="servername"/>
+					</div>
+					<div class="mb-3">
+						<label for="ltiToolConsumerMonitorRoles" class="form-label"><fmt:message key="sysadmin.lti.consumer.monitor.roles" /></label>:
+						<form:input id="ltiToolConsumerMonitorRoles" path="ltiToolConsumerMonitorRoles" cssClass="form-control" />
+					</div>
+					<div class="mb-3 my-2">
+						<label for="lessonFinishUrl" class="form-label"><fmt:message key="sysadmin.lessonFinishUrl" /></label>:
+						<form:hidden id="lessonFinishUrl" path="lessonFinishUrl"/>
+						<c:out value="${ltiConsumerForm.lessonFinishUrl}"/>
+					</div>
+
+					<div class="mb-3 mt-3">
+						<div class="form-check mb-2">
+							<form:checkbox path="disabled" cssClass="form-check-input"/>
+				    		<label class="form-check-label" for="disabled">
+				    			<fmt:message key="sysadmin.disabled" />
+				    		</label>
+				  	  	</div>
+					</div>
+					<c:if test="${ltiAdvantageEnabled}">
+						<h4 class="mt-3"><fmt:message key="sysadmin.lti.advantage" /></h4>
+						
+						<div class="mb-3">
+							<label for="defaultCountry" class="form-label"><fmt:message key="admin.user.country" /></label>
+							<form:select path="defaultCountry" cssClass="form-select">
 								<form:option value="0"><fmt:message key="label.select.country" /></form:option>
 								<c:forEach items="${countryCodes}" var="countryCode">
 									<form:option value="${countryCode.key}">
 										${countryCode.value}
 									</form:option>
 								</c:forEach>
 							</form:select>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.organisation.locale" />:</td>
-						<td>
-							<form:select path="defaultLocaleId" cssClass="form-control">
+							<lams:errors path="defaultCountry"/>
+						</div>
+						<div class="mb-3">
+							<label for="defaultLocaleId"><fmt:message key="admin.organisation.locale" /></label>
+							<form:select path="defaultLocaleId" cssClass="form-select">
 								<c:forEach items="${locales}" var="locale">
 									<form:option value="${locale.localeId}">
 										<c:out value="${locale.description}" />
 									</form:option>
 								</c:forEach>
 							</form:select>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.user.time.zone" />:</td>
-						<td>
-							<form:select path="defaultTimeZone" cssClass="form-control">
+							<lams:errors path="defaultLocaleId"/>
+						</div>
+						<div class="mb-3">
+							<label for="defaultTimeZone" class="form-label"><fmt:message key="admin.user.time.zone" /></label>
+							<form:select path="defaultTimeZone" cssClass="form-select">
 								<c:forEach items="${timezoneDtos}" var="timezoneDto">
 									<form:option value="${timezoneDto.timeZoneId}">
 										${timezoneDto.timeZoneId} - ${timezoneDto.displayName}
 									</form:option>
 								</c:forEach>
 							</form:select>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.use.course.prefix" />:</td>
-						<td>
-							<form:checkbox path="useCoursePrefix"  />
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.user.registration.enabled" />:</td>
-						<td>
-							<form:checkbox path="userRegistrationEnabled"  />
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.user.name.lower.case" />:</td>
-						<td>
-							<form:checkbox path="userNameLowerCase"  />
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.enforce.state.cookie" />:</td>
-						<td>
-							<form:checkbox path="enforceStateCookie"  />
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.reregistration.enabled" />:</td>
-						<td>
-							<form:checkbox path="toolReregistrationEnabled"  />
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.platform.issuer" />:</td>
-						<td>
+							<lams:errors path="defaultTimeZone"/>
+						</div>
+						<div class="form-check mb-2">
+							<form:checkbox path="useCoursePrefix" cssClass="form-check-input"/>
+				    		<label class="form-check-label" for="useCoursePrefix">
+				    			<fmt:message key="sysadmin.use.course.prefix" />
+				    		</label>
+				  	  	</div>
+						<div class="form-check mb-2">
+							<form:checkbox path="userRegistrationEnabled" cssClass="form-check-input"/>
+				    		<label class="form-check-label" for="userRegistrationEnabled">
+				    			<fmt:message key="sysadmin.user.registration.enabled" />
+				    		</label>
+				  	  	</div>
+						<div class="form-check mb-2">
+							<form:checkbox path="userNameLowerCase" cssClass="form-check-input"/>
+				    		<label class="form-check-label" for="userNameLowerCase">
+				    			<fmt:message key="sysadmin.user.name.lower.case" />
+				    		</label>
+				  	  	</div>
+						<div class="form-check mb-2">
+							<form:checkbox path="enforceStateCookie" cssClass="form-check-input"/>
+				    		<label class="form-check-label" for="enforceStateCookie">
+				    			<fmt:message key="sysadmin.lti.advantage.enforce.state.cookie" />
+				    		</label>
+				  	  	</div>
+						<div class="form-check mb-2">
+							<form:checkbox path="toolReregistrationEnabled" cssClass="form-check-input"/>
+				    		<label class="form-check-label" for="toolReregistrationEnabled">
+				    			<fmt:message key="sysadmin.lti.advantage.tool.reregistration.enabled" />
+				    		</label>
+				  	  	</div>
+						<div class="mb-3">
+							<label for="issuer" class="form-label"><fmt:message key="sysadmin.lti.advantage.platform.issuer" /></label>
 							<form:input path="issuer" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.platform.keyset.url" />:</td>
-						<td>
+							<lams:errors path="issuer"/>
+						</div>
+						<div class="mb-3">
+							<label for="platformKeySetUrl" class="form-label"><fmt:message key="sysadmin.lti.advantage.platform.keyset.url" /></label>
 							<form:input path="platformKeySetUrl" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.platform.oidc.url" />:</td>
-						<td>
+							<lams:errors path="platformKeySetUrl"/>
+						</div>
+						<div class="mb-3">
+							<label for="oidcAuthUrl" class="form-label"><fmt:message key="sysadmin.lti.advantage.platform.oidc.url" /></label>
 							<form:input path="oidcAuthUrl" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.platform.access.token.url" />:</td>
-						<td>
+							<lams:errors path="oidcAuthUrl"/>
+						</div>
+						<div class="mb-3">
+							<label for="accessTokenUrl" class="form-label"><fmt:message key="sysadmin.lti.advantage.platform.access.token.url" /></label>
 							<form:input path="accessTokenUrl" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.name" />:</td>
-						<td>
+							<lams:errors path="accessTokenUrl"/>
+						</div>
+						<div class="mb-3">
+							<label for="toolName" class="form-label"><fmt:message key="sysadmin.lti.advantage.tool.name" /></label>
 							<form:input path="toolName" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.description" />:</td>
-						<td>
+							<lams:errors path="toolName"/>
+						</div>
+						<div class="mb-3">
+							<label for="toolDescription" class="form-label"><fmt:message key="sysadmin.lti.advantage.tool.description" /></label>
 							<form:input path="toolDescription" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.client.id" />:</td>
-						<td>
+							<lams:errors path="toolDescription"/>
+						</div>
+						<div class="mb-3">
+							<label for="clientId" class="form-label"><fmt:message key="sysadmin.lti.advantage.tool.client.id" /></label>
 							<form:input path="clientId" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.keyset.url" />:</td>
-						<td>
+							<lams:errors path="clientId"/>
+						</div>
+						<div class="mb-3">
+							<label for="toolKeySetUrl" class="form-label"><fmt:message key="sysadmin.lti.advantage.tool.keyset.url" /></label>
 							<form:input path="toolKeySetUrl" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.key.id" />:</td>
-						<td>
+							<lams:errors path="toolKeySetUrl"/>
+						</div>
+						<div class="mb-3">
+							<label for="toolKeyId" class="form-label"><fmt:message key="sysadmin.lti.advantage.tool.key.id" /></label>
 							<form:input path="toolKeyId" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.public.key" />:</td>
-						<td>
+							<lams:errors path="toolKeyId"/>
+						</div>
+						<div class="mb-3">
+							<label for="publicKey" class="form-label"><fmt:message key="sysadmin.lti.advantage.tool.public.key" /></label>
 							<form:input path="publicKey" cssClass="form-control"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="sysadmin.lti.advantage.tool.private.key" />:</td>
-						<td>
+							<lams:errors path="publicKey"/>
+						</div>
+						<div class="mb-3">
+							<label for="privateKey" class="form-label"><fmt:message key="sysadmin.lti.advantage.tool.private.key" /></label>
 							<form:input path="privateKey" cssClass="form-control"/>
-						</td>
-					</tr>
-				</c:if>
-			</table>
-				
-			<%@ include file="extLessonForm.jsp"%>
-					
-			<div class="pull-right">
-				<a href="<lams:LAMSURL/>admin/ltiConsumerManagement/start.do" class="btn btn-default"><fmt:message key="admin.cancel"/></a>
-				<input type="submit" name="submitbutton" class="btn btn-primary loffset5" value="<fmt:message key="admin.save" />" />
+							<lams:errors path="privateKey"/>
+						</div>
+					</c:if>
+				</div>
 			</div>
 			
+			<div class="row mt-3">
+				<div class="col-6 offset-3">	
+					<%@ include file="extLessonForm.jsp"%>
+				</div>
+			</div>
+			
+			<div class="row mt-3">
+				<div class="col-6 offset-3 text-end">
+					<a href="<lams:LAMSURL/>admin/ltiConsumerManagement/start.do" class="btn btn-secondary"><fmt:message key="admin.cancel"/></a>
+					<input type="submit" name="submitbutton" class="btn btn-primary" value="<fmt:message key="admin.save" />" />
+				</div>
+			</div>	
 		</form:form>
-	</lams:Page>		
+	</lams:Page5>		
 </body>
 </lams:html>
Index: lams_admin/web/integration/ltiConsumerList.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/integration/ltiConsumerList.jsp	(.../ltiConsumerList.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/integration/ltiConsumerList.jsp	(.../ltiConsumerList.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,79 +8,116 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script>
 		function deleteConsumer() {
 			return confirm('<fmt:message key="label.manage.tool.consumers.delete" />');
 		}
 	</script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
-				<p>
-					<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-						<fmt:message key="appadmin.maintain" />
-					</a>
-				</p>
-				
-				<table class="table table-striped">
-				
+<body class="component pb-4">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="label.manage.tool.consumers"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+		<div class="row">
+			<div class="col-8 offset-2">
+				<table class="table table-striped table-bordered">
+					<thead>
 					<tr>
-						<th><fmt:message key="sysadmin.serverid" /></th>
-						<th><fmt:message key="sysadmin.serverkey" /></th>
 						<th><fmt:message key="sysadmin.servername" /></th>
-						<th><fmt:message key="sysadmin.serverdesc" /></th>
+						<th><fmt:message key="sysadmin.serverid" /></th>
+						<th class="d-none d-lg-table-cell"><fmt:message key="sysadmin.serverdesc" /></th>
 						<th><fmt:message key="sysadmin.prefix" /></th>
-						<th><fmt:message key="sysadmin.disabled" /></th>
 						<th><fmt:message key="admin.actions"/></th>
 					</tr>
-					
-					<c:forEach var="ltiConsumer" items="${ltiConsumers}">
-						<tr>
-							<td><c:out value="${ltiConsumer.serverid}" /></td>
-							<td><c:out value="${ltiConsumer.serverkey}" /></td>
-							<td><c:out value="${ltiConsumer.servername}" /></td>
-							<td><c:out value="${ltiConsumer.serverdesc}" /></td>
-							<td><c:out value="${ltiConsumer.prefix}" /></td>
-							<td>
-								<c:choose>
-									<c:when test="${ltiConsumer.disabled}" >
-										<fmt:message key="label.yes" />
-									</c:when>
-									<c:otherwise>
-										<fmt:message key="label.no" />
-									</c:otherwise>
-								</c:choose>
-							</td>
-							<td>
-								<a class="btn btn-default btn-xs" id="edit_${ltiConsumer.sid}" href="../ltiConsumerManagement/edit.do?sid=<c:out value='${ltiConsumer.sid}' />">
-									<fmt:message key="admin.edit" />
-								</a>
-								&nbsp;
-								<c:choose>
-									<c:when test="${ltiConsumer.disabled}">
-                                        <csrf:form style="display: inline-block;" id="enable_${ltiConsumer.sid}" method="post" action="/lams/admin/ltiConsumerManagement/disable.do"><input type="hidden" name="sid" value="${ltiConsumer.sid}"/><input type="hidden" name="disable" value="false"/><input type="submit" class="btn btn-primary btn-xs" value="<fmt:message key="admin.enable" />"/></csrf:form>
-									</c:when>
-									<c:otherwise>
-                                        <csrf:form style="display: inline-block;" id="disable_${ltiConsumer.sid}" method="post" action="/lams/admin/ltiConsumerManagement/disable.do"><input type="hidden" name="sid" value="${ltiConsumer.sid}"/><input type="hidden" name="disable" value="true"/><input type="submit" class="btn btn-primary btn-xs" value="<fmt:message key="admin.disable" />"/></csrf:form>
-									</c:otherwise>
-								</c:choose>
-								&nbsp;
-                                <csrf:form style="display: inline-block;" id="delete_${ltiConsumer.sid}" method="post" action="/lams/admin/ltiConsumerManagement/delete.do" onSubmit="javascript:return deleteConsumer()"><input type="hidden" name="sid" value="${ltiConsumer.sid}"/><input type="submit" class="btn btn-danger btn-xs" value="<fmt:message key="admin.delete" />"/></csrf:form>
-							</td>
-						</tr>
-					</c:forEach>
+					</thead>
+					<tbody>
+						<c:forEach var="ltiConsumer" items="${ltiConsumers}">
+							<tr <c:if test="${ltiConsumer.disabled}">class="table-danger ${signupOrganisation.disabled}"</c:if> >
+								<td>
+									<a href="../ltiConsumerManagement/edit.do?sid=<c:out value='${ltiConsumer.sid}' escapeXml='true'/>" title="<fmt:message key="admin.edit" />" class="fw-bold text-decoration-none">
+										<c:out value="${ltiConsumer.servername}" escapeXml="true"/>
+									</a>
+									</br>
+									<c:choose>
+										<c:when test="${ltiConsumer.disabled}" >
+											<span class="badge bg-warning text-black"><fmt:message key="sysadmin.disabled" /></span>
+										</c:when>
+										<c:otherwise>
+											<a class="btn btn-sm btn-outline-secondary py-0 px-1" title="<fmt:message key="sysadmin.serverkey" />" href="javascript:alert('<fmt:message key="sysadmin.serverkey" />: <c:out value="${ltiConsumer.serverkey}" escapeXml="true"/>');">
+												<i title="<fmt:message key="sysadmin.serverkey" />" class="fa fa-key font-weight-bolder "></i>
+											</a>
+										</c:otherwise>
+									</c:choose>
+								</td>
+								<td><c:out value="${ltiConsumer.serverid}" escapeXml="true"/></td>
+								<td class="d-none d-lg-table-cell"style="word-wrap: break-word;min-width: 410px;max-width: 410px;"><span class="d-inline-block text-truncate" style="max-width: 410px;"><c:out value="${ltiConsumer.serverdesc}" escapeXml="true"/></span></td>
+								<td><c:out value="${ltiConsumer.prefix}" /></td>
+								<td class="text-center">
+									<a style="display: inline-block;" title="<fmt:message key="admin.edit" />" class="btn btn-primary" id="edit_<c:out value='${ltiConsumer.sid}' escapeXml="true"/>" href="../ltiConsumerManagement/edit.do?sid=<c:out value='${ltiConsumer.sid}' escapeXml='true'/>">
+										<i class="fa fa-pencil"></i>
+									</a>
+									&nbsp;
+									<c:choose>
+										<c:when test="${ltiConsumer.disabled}">
+									<csrf:form style="display: inline-block;" id="enable_${ltiConsumer.sid}" method="post" action="/lams/admin/ltiConsumerManagement/disable.do">
+										<input type="hidden" name="sid" value="${ltiConsumer.sid}"/>
+										<input type="hidden" name="disable" value="false"/>
+										<button type="submit" class="btn btn-outline-primary btn-sm" title="<fmt:message key="admin.enable" />"/>
+	                                		<i class="fa fa-power-off"></i>
+	                                	</button>
+									</csrf:form>
+										</c:when>
+										<c:otherwise>
+									<csrf:form style="display: inline-block;" id="disable_${ltiConsumer.sid}" method="post" action="/lams/admin/ltiConsumerManagement/disable.do">
+										<input type="hidden" name="sid" value="${ltiConsumer.sid}"/>
+										<input type="hidden" name="disable" value="true"/>
+										<button type="submit" class="btn btn-secondary" title="<fmt:message key="admin.disable" />"/>
+											<i class="fa fa-pause"></i>
+										</button>
+									</csrf:form>
+										</c:otherwise>
+									</c:choose>
+									&nbsp;
+			                        <csrf:form style="display: inline-block;" id="delete_${ltiConsumer.sid}" method="post" action="/lams/admin/ltiConsumerManagement/delete.do" onSubmit="javascript:return deleteConsumer()">
+			                        	<input type="hidden" name="sid" value="${ltiConsumer.sid}"/>
+			                        	<button type="submit" class="btn btn-danger" title="<fmt:message key="admin.delete" />"/>
+			                        		<i class="fa fa-trash"></i>
+			                        	</button>
+			                       	</csrf:form>
+								</td>
+							</tr>
+						</c:forEach>
+					</tbody>
 				</table>
+			</div>
+		</div>
 				
-				<p>${fn:length(ltiConsumers)}&nbsp;<fmt:message key="label.tool.consumers.count" /></p>
-				
-				<input class="btn btn-default pull-right" name="addNewLtiConsumer" type="button" value="<fmt:message key='label.add.tool.consumer' />" 
+		<div class="row">
+			<div class="col-8 offset-2">
+				${fn:length(ltiConsumers)}&nbsp;<fmt:message key="label.tool.consumers.count" />
+			</div>
+		</div>
+		
+		<div class="row">
+			<div class="col-8 offset-2 text-end">
+				<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary">
+					<fmt:message key="admin.cancel"/>
+				</a>
+				<input class="btn btn-primary" name="addNewLtiConsumer" type="button" value="<fmt:message key='label.add.tool.consumer' />" 
 						onClick="javascript:document.location='../ltiConsumerManagement/edit.do'" />
-				
-	</lams:Page>
+			</div>
+		</div>
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/integration/serverlist.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/integration/serverlist.jsp	(.../serverlist.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/integration/serverlist.jsp	(.../serverlist.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,70 +8,112 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script>
 		function deleteIntegratedServer() {
 			return confirm('<fmt:message key="sysadmin.server.delete" />');
 		}
 	</script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
-		</p>
+<body class="component pb-4">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="appadmin.maintain.external.servers"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
 
-			<table class="table table-striped">
-				<tr>
-					<th><fmt:message key="sysadmin.serverid" /></th>
-					<th><fmt:message key="sysadmin.serverkey" /></th>
-					<th><fmt:message key="sysadmin.servername" /></th>
-					<th><fmt:message key="sysadmin.serverdesc" /></th>
-					<th><fmt:message key="sysadmin.prefix" /></th>
-					<th><fmt:message key="sysadmin.disabled" /></th>
-					<th><fmt:message key="admin.actions"/></th>
-				</tr>
-				<c:forEach items="${servers}" var="server">
-				<tr>
-					<td><c:out value="${server.serverid}" /></td>
-					<td><c:out value="${server.serverkey}" /></td>
-					<td><c:out value="${server.servername}" /></td>
-					<td><c:out value="${server.serverdesc}" /></td>
-					<td><c:out value="${server.prefix}" /></td>
-					<td>
-						<c:choose>
-						<c:when test="${server.disabled}" >
-							<fmt:message key="label.yes" />
-						</c:when>
-						<c:otherwise>
-							<fmt:message key="label.no" />
-						</c:otherwise>
-						</c:choose>
-					</td>
-					<td>
-						<a style="display: inline-block;" class="btn btn-primary btn-xs" id="edit_<c:out value='${server.serverid}'/>" href="<lams:LAMSURL/>admin/extserver/edit.do?sid=${server.sid}"><fmt:message key="admin.edit" /></a>
-						&nbsp;
-						<c:choose>
-							<c:when test="${server.disabled}">
-                                <csrf:form style="display: inline-block;" id="enable_${server.serverid}" method="post" action="/lams/admin/extserver/enable.do"><input type="hidden" name="sid" value="${server.sid}"/><input type="submit" class="btn btn-success btn-xs" value="<fmt:message key="admin.enable" />"/></csrf:form>
-							</c:when>
-							<c:otherwise>
-                                <csrf:form style="display: inline-block;" id="disable_${server.serverid}" method="post" action="/lams/admin/extserver/disable.do"><input type="hidden" name="sid" value="${server.sid}"/><input type="submit" class="btn btn-primary btn-xs" value="<fmt:message key="admin.disable" />"/></csrf:form>
-							</c:otherwise>
-						</c:choose>
-						&nbsp;
-                        <csrf:form id="delete_${server.serverid}" style="display: inline-block;" method="post" action="/lams/admin/extserver/delete.do" onSubmit="javascript:return deleteIntegratedServer()"><input type="hidden" name="sid" value="${server.sid}"/><input type="submit" class="btn btn-danger btn-xs" value="<fmt:message key="admin.delete" />"/></csrf:form>
-					</td>
-				</tr>
-				</c:forEach>
-			</table>
-			<p>${fn:length(servers)}&nbsp;<fmt:message key="sysadmin.integrated.servers" /></p>
-			
-			<input class="btn btn-default pull-right" name="addnewserver" type="button" value="<fmt:message key='sysadmin.server.add' />" onClick="javascript:document.location='edit.do'" />
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+		<div class="row">
+			<div class="col-8 offset-2">
+				<table class="table table-striped table-bordered">
+					<thead>
+						<tr>
+							<th><fmt:message key="sysadmin.servername" /></th>
+							<th><fmt:message key="sysadmin.serverid" /></th>
+							<th class="d-none d-lg-table-cell"><fmt:message key="sysadmin.serverdesc" /></th>
+							<th><fmt:message key="sysadmin.prefix" /></th>
+							<th><fmt:message key="admin.actions"/></th>
+						</tr>
+					</thead>
+					<tbody>
+						<c:forEach items="${servers}" var="server">
+							<tr <c:if test="${server.disabled}">class="table-danger ${signupOrganisation.disabled}"</c:if> >
+								<td>
+									<a href="<lams:LAMSURL/>admin/extserver/edit.do?sid=${server.sid}" title="<fmt:message key="admin.edit" />" class="fw-bold text-decoration-none">
+										<c:out value="${server.servername}" escapeXml="true"/>
+									</a>
+									<c:choose>
+									<c:when test="${server.disabled}" >
+											</br><span class="badge bg-warning text-black"><fmt:message key="sysadmin.disabled" /></span>
+									</c:when>
+									<c:otherwise>
+											</br>
+											<a class="btn btn-sm btn-outline-secondary py-0 px-1" title="<fmt:message key="sysadmin.serverkey" />" href="javascript:alert('<fmt:message key="sysadmin.serverkey" />: <c:out value="${server.serverkey}" escapeXml="true"/>');">
+												<i title="<fmt:message key="sysadmin.serverkey" />" class="fa fa-key font-weight-bolder "></i>
+											</a>
+									</c:otherwise>
+									</c:choose>
+								</td>
+								<td><c:out value="${server.serverid}"  escapeXml="true"/></td>
+								<td class="d-none d-lg-table-cell" style="word-wrap: break-word;min-width: 410px;max-width: 410px;"><span class="d-inline-block text-truncate" style="max-width: 410px;"><c:out value="${server.serverdesc}" escapeXml="true"/></span></td>
+								<td><c:out value="${server.prefix}" /></td>
+								<td class="text-center">
+									<a style="display: inline-block;" class="btn btn-primary" id="edit_<c:out value='${server.serverid}' escapeXml="true"/>" href="<lams:LAMSURL/>admin/extserver/edit.do?sid=${server.sid}" title="<fmt:message key="admin.edit" />">
+										<i class="fa fa-pencil"></i>
+									</a>
+									&nbsp;
+									<c:choose>
+										<c:when test="${server.disabled}">
+			                                <csrf:form style="display: inline-block;" id="enable_${server.serverid}" method="post" action="/lams/admin/extserver/enable.do">
+			                                	<input type="hidden" name="sid" value="${server.sid}"/>
+			                                		<button type="submit" class="btn btn-success" title="<fmt:message key="admin.enable" />">
+			                                		<i class="fa fa-power-off"></i>
+			                                		</button>
+			                                </csrf:form>
+										</c:when>
+										<c:otherwise>
+			                                <csrf:form style="display: inline-block;" id="disable_${server.serverid}" method="post" action="/lams/admin/extserver/disable.do">
+			                                	<input type="hidden" name="sid" value="${server.sid}"/>
+			                                	<button type="submit" class="btn btn-secondary" title="<fmt:message key="admin.disable" />">
+			                                		<i class="fa fa-pause"></i>
+			                                	</button></csrf:form>
+										</c:otherwise>
+									</c:choose>
+									&nbsp;
+			                        <csrf:form id="delete_${server.serverid}" style="display: inline-block;" method="post" action="/lams/admin/extserver/delete.do" onSubmit="javascript:return deleteIntegratedServer()">
+			                        	<input type="hidden" name="sid" value="${server.sid}"/>
+			                        	<button type="submit" class="btn btn-danger" title="<fmt:message key="admin.delete" />"/>
+			                        		<i class="fa fa-trash"></i>
+			                        	</button>
+			                        </csrf:form>
+								</td>
+							</tr>
+						</c:forEach>
+					</tbody>
+				</table>
+			</div>
+		</div>
+		
+		<div class="row">
+			<div class="col-8 offset-2">
+				${fn:length(servers)}&nbsp;<fmt:message key="sysadmin.integrated.servers" />
+			</div>
+		</div>
+		
+		<div class="row">
+			<div class="col-8 offset-2 text-end">
+				<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary">
+					<fmt:message key="admin.cancel"/>
+				</a>
 
-	</lams:Page>
+				<input class="btn btn-primary" name="addnewserver" type="button" value="<fmt:message key='sysadmin.server.add' />" onClick="javascript:document.location='edit.do'" />
+			</div>
+		</div>
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/integration/servermaintain.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/integration/servermaintain.jsp	(.../servermaintain.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/integration/servermaintain.jsp	(.../servermaintain.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -9,10 +9,13 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript">	
 		$(document).ready(function(){
 			$("#ttl-login-request-enabled").click(function(){
@@ -28,6 +31,7 @@
 			
 			// validate signup form on keyup and submit
 			var validator = $("#extServerForm").validate({
+				errorClass: 'text-danger form-text font-italic',
 				rules: {
 					serverid: "required", 
 					serverkey: "required",
@@ -54,92 +58,103 @@
 	
 </lams:head>
     
-<body class="stripes">
+<body class="component pb-4">
 	
 	<c:set var="help"><fmt:message key="Integrations"/></c:set>
 	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
-	<lams:Page type="admin" title="${title}" titleHelpURL="${help}" formID="extServerForm">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbChild1"><lams:LAMSURL/>admin/extserver/serverlist.do| <fmt:message key="appadmin.maintain.external.servers" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="appadmin.maintain.server.edit"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbChild1},${breadcrumbActive}"/>
 	
-	<p>
-		<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-			<fmt:message key="appadmin.maintain" />
-		</a>
+	
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" formID="extServerForm" breadcrumbItems="${breadcrumbItems}">
 		
-		<a href="<lams:LAMSURL/>admin/extserver/serverlist.do" class="btn btn-default">
-			<fmt:message key="appadmin.maintain.external.servers" />
-		</a>
-	</p>
 	
 	<lams:errors/>
     <form:form action="serversave.do" id="extServerForm" modelAttribute="extServerForm" method="post">
 		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 		<form:hidden path="sid" />
 		
-		<div class="form-group">
-		    <label for="serverid"><strong><fmt:message key="sysadmin.serverid" /> *</strong></label>
-		    <form:input path="serverid" size="20" cssClass="form-control"/>
+		<div class="row">
+			<div class="col-6 offset-3">	
+				<div class="mb-3">
+				    <label for="serverid" class="form-label"><fmt:message key="sysadmin.serverid" /></label>&nbsp;<span class="text-danger">*</span>
+				    <input id="serverid" name="serverid" value="${extServerForm.serverid}" class="form-control" maxlength="20" required/>
+				</div>
+				<div class="mb-3">
+				    <label for="serverkey" class="form-label"><fmt:message key="sysadmin.serverkey" /></label>&nbsp;<span class="text-danger">*</span>
+				    <input id="serverkey" name="serverkey" value="${extServerForm.serverkey} " class="form-control" maxlength="20" required/>
+				</div>
+				<div class="mb-3">
+				    <label for="servername" class="form-label"><fmt:message key="sysadmin.servername" /></label>&nbsp;<span class="text-danger">*</span>
+				    <input id="servername" name="servername" value="${extServerForm.servername}"  class="form-control" maxlength="20" required/>
+				</div>
+				<div class="mb-3">
+				    <label for="serverdesc" class="form-label"><fmt:message key="sysadmin.serverdesc" /></label>
+				    <form:input path="serverdesc" cols="40" rows="3" cssClass="form-control"/>
+				</div>
+				<div class="mb-3">
+				    <label for="prefix" class="form-label"><fmt:message key="sysadmin.prefix" /></label>&nbsp;<span class="text-danger">*</span>
+				    <input id="prefix" name="prefix" class="form-control" value="${extServerForm.prefix}" required maxlength="10"/>
+				</div>
+				<div class="form-check mb-2">
+					<form:checkbox id="disabled" path="disabled" name="disabled" cssClass="form-check-input"/>
+			    	<label class="form-check-label" for="disabled">
+			    		<fmt:message key="sysadmin.disabled" />
+			    	</label>
+			    </div>
+				<div class="form-check mb-2">
+				    <form:checkbox path="timeToLiveLoginRequestEnabled" id="ttl-login-request-enabled" cssClass="form-check-input"/>
+				    <label class="form-check-label" for="ttl-login-request-enabled">
+				    	<fmt:message key="sysadmin.login.request.ttl.enable" />
+				    </label>
+				</div>
+				<div class="mb-3" <c:if test="${!formBean.map.timeToLiveLoginRequestEnabled}">style="display:none;"</c:if> >
+				    <label for="ttl-login-request" class="form-label"><fmt:message key="sysadmin.login.request.ttl" /></label>
+				    <form:input path="timeToLiveLoginRequest" size="10" id="ttl-login-request" maxlength="120" cssClass="form-control"/>
+				</div>
+				<div class="form-check mb-2">
+				    <form:checkbox path="addStaffToAllLessons" cssClass="form-check-input"/>
+				    <label class="form-check-label" for="addStaffToAllLessons">
+				    	<fmt:message key="sysadmin.add.staff.to.all.lessons" />
+				    </label>
+				</div>
+				<div class="mb-3">
+				    <label for="userinfoUrl" class="form-label"><fmt:message key="sysadmin.userinfoUrl" /></label>
+				    <form:input path="userinfoUrl" size="70" cssClass="form-control"/>
+				</div> 
+				<div class="mb-3">
+				    <label for="lessonFinishUrl" class="form-label"><fmt:message key="sysadmin.lessonFinishUrl" /></label>
+				    <form:input path="lessonFinishUrl" size="70" cssClass="form-control"/>
+				</div>
+				<div class="mb-3">
+				    <label for="extGroupsUrl" class="form-label"><fmt:message key="sysadmin.extGroupsUrl" /></label>
+				    <form:input path="extGroupsUrl" size="70" cssClass="form-control"/>
+				</div>
+				<div class="mb-3">
+				    <label for="logoutUrl" class="form-label"><fmt:message key="sysadmin.logoutUrl" /></label>
+				    <form:input path="logoutUrl" size="70" cssClass="form-control"/>
+				</div>
+			</div>
 		</div>
-		<div class="form-group">
-		    <label for="serverkey"><strong><fmt:message key="sysadmin.serverkey" /> *</strong></label>
-		    <form:input path="serverkey" size="30" cssClass="form-control"/>
-		</div>
-		<div class="form-group">
-		    <label for="servername"><strong><fmt:message key="sysadmin.servername" /> *</strong></label>
-		    <form:input path="servername" size="30" cssClass="form-control"/>
-		</div>
-		<div class="form-group">
-		    <label for="serverdesc"><fmt:message key="sysadmin.serverdesc" /></label>
-		    <form:input path="serverdesc" cols="40" rows="3" cssClass="form-control"/>
-		</div>
-		<div class="form-group">
-		    <label for="prefix"><strong><fmt:message key="sysadmin.prefix" /> *</strong></label>
-		  	<form:input path="prefix" size="10" cssClass="form-control"/>
-		</div>
-		<div class="checkbox">
-		    <label>
-		    	<form:checkbox path="disabled" /><fmt:message key="sysadmin.disabled" />
-		    </label>
-		</div>
-		<div class="checkbox">
-		    <label>
-		    <form:checkbox path="timeToLiveLoginRequestEnabled" id="ttl-login-request-enabled"/><fmt:message key="sysadmin.login.request.ttl.enable" />
-		    </label>
-		</div>
-		<div class="form-group" <c:if test="${!formBean.map.timeToLiveLoginRequestEnabled}">style="display:none;"</c:if> >
-		    <label for="ttl-login-request"><fmt:message key="sysadmin.login.request.ttl" /></label>
-		    <form:input path="timeToLiveLoginRequest" size="10" id="ttl-login-request" cssClass="form-control"/>
-		</div>
-		<div class="checkbox">
-		    <label>
-		    	<form:checkbox path="addStaffToAllLessons" /><fmt:message key="sysadmin.add.staff.to.all.lessons" />
-		    </label>
-		</div>
-		<div class="form-group">
-		    <label for="userinfoUrl"><fmt:message key="sysadmin.userinfoUrl" /></label>
-		    <form:input path="userinfoUrl" size="70" cssClass="form-control"/>
-		</div> 
-		<div class="form-group">
-		    <label for="lessonFinishUrl"><fmt:message key="sysadmin.lessonFinishUrl" /></label>
-		    <form:input path="lessonFinishUrl" size="70" cssClass="form-control"/>
-		</div>
-		<div class="form-group">
-		    <label for="extGroupsUrl"><fmt:message key="sysadmin.extGroupsUrl" /></label>
-		    <form:input path="extGroupsUrl" size="70" cssClass="form-control"/>
-		</div>
-		<div class="form-group">
-		    <label for="logoutUrl"><fmt:message key="sysadmin.logoutUrl" /></label>
-		    <form:input path="logoutUrl" size="70" cssClass="form-control"/>
-		</div>
 		
-		<%@ include file="extLessonForm.jsp"%>
-
-		<div class="pull-right">
-			<input type="reset" class="btn btn-default" value="<fmt:message key="admin.reset" />" />
-			<a href="<lams:LAMSURL/>admin/extserver/serverlist.do" class="btn btn-default"><fmt:message key="admin.cancel"/></a>
-			<input type="submit" name="submitbutton" class="btn btn-primary loffset5" value="<fmt:message key="admin.save" />" />
+		<div class="row mt-3">
+			<div class="col-6 offset-3">	
+				<%@ include file="extLessonForm.jsp"%>
+			</div>
 		</div>
+		
+		<div class="row mt-3">
+			<div class="col-6 offset-3 text-end">
+				<a href="<lams:LAMSURL/>admin/extserver/serverlist.do" class="btn btn-secondary"><fmt:message key="admin.cancel"/></a>
+				<input type="submit" name="submitbutton" class="btn btn-primary" value="<fmt:message key="admin.save" />" />
+			</div>
+		</div>	
+		
 	</form:form>
-</lams:Page>
+</lams:Page5>
 
 </body>
 </lams:html>
Index: lams_admin/web/joblist.jsp
===================================================================
diff -u -r37bb2ae017713b44cdfd6a55cfceca28c3efab02 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/joblist.jsp	(.../joblist.jsp)	(revision 37bb2ae017713b44cdfd6a55cfceca28c3efab02)
+++ lams_admin/web/joblist.jsp	(.../joblist.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -14,7 +14,7 @@
 </lams:head>
     
 <body class="stripes">
-	<lams:Page type="admin" title="${title}">
+	<lams:Page5 type="admin" title="${title}">
 		<div align="center" id="jobList">
 			<div id="datatablecontainer">
 			<table width="100%" align="CENTER" 	class="form">
@@ -47,7 +47,7 @@
 			</div>
 		</div>
 
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/ldap.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/ldap.jsp	(.../ldap.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/ldap.jsp	(.../ldap.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -30,7 +30,7 @@
 	
 	<c:set var="help"><fmt:message key="LDAP+Configuration"/></c:set>
 	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
-	<lams:Page type="admin" title="${title}" titleHelpURL="${help}">
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}">
 		
 		<p>
 			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
@@ -160,7 +160,7 @@
 						
 			</div>
 		</div>				
-	</lams:Page>
+	</lams:Page5>
 
 </body>
 </lams:html>
Index: lams_admin/web/logevent.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/logevent.jsp	(.../logevent.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/logevent.jsp	(.../logevent.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -9,20 +9,22 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	<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/jquery-ui-bootstrap-theme5.css">
+	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css"/>
 	<link rel="stylesheet" href="${lams}css/jquery-ui.timepicker.css" />
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css"/>
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css" />
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
 	
 	<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/jquery-ui.timepicker.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script> 
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script> 
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script> 
-	<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/portrait.js" ></script>
 	<script type="text/javascript">
 	
@@ -230,32 +232,49 @@
 	 </script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
-	
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
-		</p>
+<body class="component pb-4">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="label.event.log"/></c:set>
 
-		<div class="form form-inline">
-				<span><select id="areaMenu" class="form-control" onchange="javascript:configureTypeDropdown(this.value)"></select>&nbsp;
-				<select id="typeMenu" class="form-control"></select></span>
-				<span class="pull-right"><fmt:message key="label.between.dates"/>&nbsp;<input type="text" class="form-control" name="startDatePicker" id="startDatePicker" value=""/>
-				&nbsp;<input type="text" class="form-control" name="endDatePicker" id="endDatePicker" value=""/>
-				<a href="#" class="btn btn-default" onclick="javascript:getEvents()"><fmt:message key="admin.search"/></a>
-				</span>
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+	
+		<form class="row row-cols-lg-auto g-3 align-items-center">
+  			<div class="col-12">
+				<select id="areaMenu" class="form-select form-select-sm d-inline" onchange="javascript:configureTypeDropdown(this.value)"></select>
+			</div>
+			<div class="col-12">
+				<select id="typeMenu" class="form-select form-select-sm d-inline"></select>
+			</div>
+			<div class="col-12">
+				<span class="d-inline px-4"><fmt:message key="label.between.dates"/></span>
+			</div>
+			<div class="col-12">
+				<input type="text" class="form-control form-control-sm" name="startDatePicker" id="startDatePicker" value=""/>
+			</div>
+			<div class="col-12">
+				<input type="text" class="form-control form-control-sm" name="endDatePicker" id="endDatePicker" value=""/>
+			</div>
+			<div class="col-12">
+				<a href="#" class="btn btn-primary btn-sm" onclick="javascript:getEvents()"><fmt:message key="admin.search"/></a>
+			</div>
 		</div>
 		
-		<div class="voffset10">	
-			<lams:TSTable numColumns="5" dataId="data-session-id='1'">
+		<div class="mt-3 bg-white">	
+			<lams:TSTable5 numColumns="5" dataId="data-session-id='1'">
 					<th style="width:20%"><fmt:message key="label.date"/></th>
 					<th class="no-spinner"><fmt:message key="label.event.type"/></th>
 					<th class="no-spinner" style="width:12%"><fmt:message key="audit.change.made.by"/></th>
 					<th class="no-spinner" style="width:12%"><fmt:message key="audit.change.made.to"/></th>
 					<th class="no-spinner"><fmt:message key="audit.remarks"/></th>
-			</lams:TSTable>
+			</lams:TSTable5>
 		</div>
-			
-	</lams:Page>
+		<div class="text-end">
+			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary">
+				<fmt:message key="admin.cancel"/>
+			</a>
+		</div>		
+
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/loginmaintain.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/loginmaintain.jsp	(.../loginmaintain.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/loginmaintain.jsp	(.../loginmaintain.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,34 +8,40 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}" formID="loginMaintainForm">
-		
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-				<fmt:message key="appadmin.maintain" />
-			</a>
-		</p>
+<body class="component pb-4">
+
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="appadmin.maintain.loginpage"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+
+
+	<lams:Page5 type="admin" title="${title}" formID="loginMaintainForm" breadcrumbItems="${breadcrumbItems}">
+	
 		<form:form action="./loginsave.do" modelAttribute="loginMaintainForm" id="loginMaintainForm" method="post">
 			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 			<c:set var="language"><lams:user property="localeLanguage"/></c:set>
-			<p class="help-block"><fmt:message key="appadmin.login.text"/></p>
+			<h4 class="text-center"><fmt:message key="appadmin.login.text"/></h4>
 			
 			<lams:CKEditor id="news" value="${loginMaintainForm.news}" contentFolderID="../public" height="600px"></lams:CKEditor>
 			
-			<div class="pull-right voffset5">
-				<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-					<fmt:message key="admin.cancel"/>
-				</a>
-				<input type="submit" id="saveButton" class="btn btn-primary loffset5" value="<fmt:message key="admin.save" />" />
-			</div>
+			<div class="mt-3 text-end">
+				<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary"><fmt:message key="admin.cancel"/></a>
+				<button class="btn btn-primary">
+					<fmt:message key="admin.save" /> 
+				</button>
+			</div>	
+
 		</form:form>
 		
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/orgPasswordChange.jsp
===================================================================
diff -u -r5450d5a77ffff8d5c315afaef1db4dc96ecfde6a -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/orgPasswordChange.jsp	(.../orgPasswordChange.jsp)	(revision 5450d5a77ffff8d5c315afaef1db4dc96ecfde6a)
+++ lams_admin/web/orgPasswordChange.jsp	(.../orgPasswordChange.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -18,9 +18,10 @@
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
 	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme5.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.custom.css">
 	<link type="text/css" href="<lams:LAMSURL/>css/free.ui.jqgrid.min.css" rel="stylesheet" />
+	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
 	<style type="text/css">
 		.changeContainer .checkbox {
 			display: inline-block;
@@ -72,7 +73,7 @@
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.validate.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>
 	<script type="text/javascript">
 	     var mustHaveUppercase = ${mustHaveUppercase},
@@ -337,7 +338,7 @@
 </lams:head>
     
 <body class="stripes">
-	<lams:Page type="admin" title="${title}">
+	<lams:Page5 type="admin" title="${title}">
 				<p>
 					<a href="<lams:LAMSURL/>admin/usermanage.do?org=<c:out value='${orgPasswordChangeForm.organisationID}' />" class="btn btn-default">
 					<fmt:message key="admin.user.manage" /></a>
@@ -452,12 +453,12 @@
 								</tr>
 							</tbody>
 						</table>
-						<div class="pull-right voffset20">
+						<div class="pull-right mt-3">
 							<input type="submit" class="btn btn-primary" value="<fmt:message key='admin.org.password.change.submit' />" />
 						</div>
 					</form:form>
 				</div>
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/policies/editPolicy.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/policies/editPolicy.jsp	(.../editPolicy.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/policies/editPolicy.jsp	(.../editPolicy.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -7,16 +7,19 @@
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 	<title>${title}</title>
 
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>/admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	<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/>admin/css/admin.css" type="text/css" media="screen">
 
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.validate.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript">	
 		$(document).ready(function(){
 			// validate signup form on keyup and submit
 			var validator = $("#policy-form").validate({
+				errorClass: 'text-danger form-text font-italic',
 				ignore: [],
 				rules: {
 					policyName: "required", 
@@ -58,103 +61,109 @@
 		});
 	</script>
 </lams:head>
-<body class="stripes">
-	<c:set var="title">${title}: <fmt:message key="admin.add.edit.policy"/></c:set>
+<body class="component pb-4">
+	<c:set var="title"><fmt:message key="admin.add.edit.policy"/></c:set>
+	
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbChild1"><lams:LAMSURL/>admin/policyManagement/list.do | <fmt:message key="admin.policies.title" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="admin.add.edit.policy"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbChild1},${breadcrumbActive}"/>
 
-	<lams:Page type="admin" title="${title}" >
-		<div>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-				<fmt:message key="appadmin.maintain" />
-			</a>
-			<a href="../policyManagement/list.do" class="btn btn-default loffset5">
-				<fmt:message key="admin.policies.title" />
-			</a>
-		</div>
-    <form:form action="../policyManagement/save.do" modelAttribute="policyForm" id="policy-form" cssClass="voffset20" method="post">
-		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+
+	    <form:form action="../policyManagement/save.do" modelAttribute="policyForm" id="policy-form" cssClass="voffset20" method="post">
+			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 			<form:hidden path="policyUid" />
 			<form:hidden path="policyId" />
-			<table class="table table-condensed table-no-border">
-				<tr>
-					<td><fmt:message key="label.name" />&nbsp;&nbsp;*</td>
-					<td><form:input path="policyName" size="40" maxlength="255" cssClass="form-control" /></td>
-				</tr>
-				<tr>
-					<td style="width: 250px;"><fmt:message key="label.policy.type" />:</td>
-					<td>
-						<form:select path="policyTypeId" cssClass="form-control">
+	
+			<div class="row">
+				<div class="col-6 offset-3">	
+					<div class="mb-3">
+					    <label for="policyName"><fmt:message key="label.name" /></label>&nbsp;<span class="text-danger">*</span>
+					    <input id="policyName" maxlength="40" name="policyName" value="${policyForm.policyName}" class="form-control" required/>
+					</div>
+					<div class="mb-3">
+					    <label for="policyTypeId"><fmt:message key="label.policy.type" /></label>
+						<form:select path="policyTypeId" cssClass="form-select">
 							<form:option value="1"><fmt:message key="label.policy.type.site" /></form:option>
 							<form:option value="2"><fmt:message key="label.policy.type.privacy" /></form:option>
 							<form:option value="3"><fmt:message key="label.policy.type.third.party" /></form:option>
 							<form:option value="4"><fmt:message key="label.policy.type.other" /></form:option>
 						</form:select>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="label.version" /></td>
-					<td><form:input path="version" size="40" maxlength="255" cssClass="form-control"/></td>
-				</tr>
-				<tr>
-					<td><fmt:message key="label.summary" />&nbsp;&nbsp;*</td>
-					<td>
-					  <lams:CKEditor id="summary" 
-					     value="${policyForm.summary}" 
-					     contentFolderID="../public/policies">
-					  </lams:CKEditor>
-					  <span id="summary-error"></span>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="label.full.policy" />&nbsp;&nbsp;*</td>
-					<td>
-					  <lams:CKEditor id="fullPolicy" 
-					     value="${policyForm.fullPolicy}" 
-					     contentFolderID="../public/policies">
-					  </lams:CKEditor>
-					  <span id="full-policy-error"></span>
-					</td>
-				</tr>
-				<tr>
-					<td><fmt:message key="label.policy.status" /></td>
-					<td>
-		                <div class="radio">
-		                    <label>
-		                    	<form:radiobutton path="policyStateId" value="1" />
-		                        <fmt:message key="label.policy.status.active" />
-		                    </label>
-		                </div>
-		                <div class="radio">
-		                    <label>
-		                    	<form:radiobutton path="policyStateId" value="2" />
-		                        <fmt:message key="label.policy.status.inactive" />
-		                    </label>
-		                    <span id="helpBlock" class="help-block"><fmt:message key="label.policy.status.hint" /></span>
-		                </div>
-					</td>
-				</tr>
-				
-				<c:if test="${policyForm.policyUid != null}">
-					<tr>
-						<td><fmt:message key="label.minor.change" /></td>
-						<td>
-		                    <div class="radio">
-		                        <form:checkbox path="minorChange" />
-		                        <span id="helpBlock" class="help-block"><fmt:message key="label.policy.minor.change.hint" /></span>
-		                    </div>
-		                </td>
-					</tr>
-				</c:if>
-				
-			</table>
+					</div>
+					<div class="mb-3">
+					    <label for="version" class="form-label"><fmt:message key="label.version" /></label>&nbsp;<span class="text-danger">*</span>
+					    <input id="version" maxlength="40" name="version" value="${policyForm.version}" class="form-control" required/>
+					</div>
+					<div class="mb-3">
+						  <label for="summary" class="form-label"><fmt:message key="label.summary" /></label>&nbsp;<span class="text-danger">*</span>
+						  <lams:CKEditor id="summary" 
+						     value="${policyForm.summary}" 
+						     contentFolderID="../public/policies">
+						  </lams:CKEditor>
+						  <span id="summary-error"></span>
+					</div>
+					<div class="mb-3">
+					    <label for="fullPolicy" class="form-label"><fmt:message key="label.full.policy" /></label>&nbsp;<span class="text-danger">*</span>
+					  	<lams:CKEditor id="fullPolicy" 
+					    	 value="${policyForm.fullPolicy}" 
+					     	contentFolderID="../public/policies">
+						  </lams:CKEditor>
+					  	<span id="full-policy-error"></span>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-6 offset-3">	
+					<h4><fmt:message key="label.policy.status" /></h4>
+			    	<small id="policyStatusHelpBlock" class="form-text text-muted">
+						<fmt:message key="label.policy.status.hint" />
+					</small>
+					
+					<div class="form-check mt-2">
+						<form:radiobutton path="policyStateId" value="1" id="policyStateId" name="policyStateId" cssClass="form-check-input"/>
+				    	<label class="form-check-label" for="policyStateId">
+	                        <fmt:message key="label.policy.status.active" />
+	                    </label>
+	                </div>
+	                
+					<div class="form-check">
+						<form:radiobutton path="policyStateId" value="2" id="policyStateId2" name="policyStateId" cssClass="form-check-input"/>
+				    	<label class="form-check-label" for="policyStateId2">
+		                   <fmt:message key="label.policy.status.inactive" />
+		               </label>
+		           </div>
+				</div>
+			</div>
 			
-			<div class="pull-right">
-				<a href="<lams:LAMSURL/>admin/policyManagement/list.do" class="btn btn-default">
-					<fmt:message key="admin.cancel" />
-				</a>
-				<button type="submit" id="submitButton" class="btn btn-primary loffset5"><fmt:message key="admin.submit" /></button>
+			<c:if test="${policyForm.policyUid != null}">
+				<div class="row">
+					<div class="col-6 offset-3">	
+						<div class="form-check mt-2">
+							<form:checkbox id="minorChange" path="minorChange" name="minorChange" cssClass="form-check-input"/>
+					    	<label class="form-check-label" for="disabled">
+					    		<fmt:message key="label.minor.change" />
+					    		<br>
+								<small id="policyMinorChangeHelpBlock" class="form-text text-muted">
+					    			<fmt:message key="label.policy.minor.change.hint" />
+					    		</small>
+					    	</label>
+					    </div>
+				    </div>
+			    </div>
+			</c:if>
+					
+			<div class="row mt-3">
+				<div class="col-6 offset-3 text-end">	
+					<a href="<lams:LAMSURL/>admin/policyManagement/list.do" class="btn btn-secondary">
+							<fmt:message key="admin.cancel" />
+						</a>
+					<button type="submit" id="submitButton" class="btn btn-primary"><fmt:message key="admin.submit" /></button>
+				</div>
 			</div>
-		
+			
 		</form:form>
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/policies/policies.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/policies/policies.jsp	(.../policies.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/policies/policies.jsp	(.../policies.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -7,9 +7,12 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>/admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+
+	<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/>css/jquery-ui-bootstrap-theme5.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
 	<style>
 		th, td {
 			text-align: center;
@@ -20,31 +23,34 @@
 	</style>
 
 	<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:LAMSURL/>includes/javascript/jquery-ui.js"></script>
-	<lams:JSImport src="includes/javascript/dialog.js" />
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.timeago.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+	<lams:JSImport src="includes/javascript/dialog5.js" />
 	<script type="text/javascript">
-		$(window).on('load', function(){
+	    $(document).ready(function(){
+	        $("time.timeago").timeago();
+	    });
+    </script>
+	
+	<script type="text/javascript">
+		$(document).ready(function(){
 			//dialog displaying user consents given for the specified policy
 			$(".policy-consents-link").click(function() {
-				var policyUid = $(this).data("policy-uid");
-				
-				var id = "policy-consents-dialog",
-				dialog = $('#' + id),
-				exists = dialog.length > 0
-				url = '<c:url value="/policyManagement/displayUserConsents.do"/>?policyUid=' + policyUid;
+				var policyUid = $(this).data("policy-uid"),
+					id = "policy-consents-dialog",
+					url = '<c:url value="/policyManagement/displayUserConsents.do"/>?policyUid=' + policyUid;
 				showDialog(id, {
-					//'resizable' : false,
 					'data' : {
 						'orgID'  : "orgID"
 					},
-					'height' : 500,
-					'width'  : 600,
+					'height' : 800,
 					'title'  : "<fmt:message key='label.user.consents'/>",
 					'open'   : function() {
 						$('iframe', this).attr('src', url);
 					}
-				}, true, exists);
+				}).addClass('modal-lg');;
+				
 			});
 	
 			//handler for "change-status" links
@@ -67,29 +73,41 @@
 	</script>
 </lams:head>
 
-<body class="stripes">
+<body class="component pb-4">
 	<c:set var="help"><lams:help style="small" page="LAMS+Policies" /></c:set>
-	<lams:Page type="admin" title="${title}" titleHelpURL="${help}">
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default">
-				<fmt:message key="appadmin.maintain" />
-			</a>
-			<c:if test="${viewPreviousVersions}">
-				<a class="btn btn-default" href="<lams:WebAppURL />policyManagement/list.do">
-					<fmt:message key="admin.policies.title"/>
-				</a>
-			</c:if>
-		</p>
 		
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+    <c:choose>
+    <c:when test="${viewPreviousVersions}">
+    	<c:set var="breadcrumbChild1"><lams:WebAppURL />policyManagement/list.do | <fmt:message key="admin.policies.title" /></c:set>
+    	<c:set var="breadcrumbActive">. | <fmt:message key="label.view.previous.versions"/></c:set>
+    		<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbChild1}, ${breadcrumbActive}"/>	
+    	
+	</c:when>
+	<c:otherwise>
+		<c:set var="breadcrumbActive">. | <fmt:message key="admin.policies.title"/></c:set>
+			<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>	
+	</c:otherwise>
+	</c:choose>
+
+	
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}">
+
 		<div id="policy-table">
 			<%@ include file="policyTable.jsp"%>
 		</div>
 		
-		<c:if test="${!viewPreviousVersions}">
-			<a class="btn btn-default pull-right" href="<lams:WebAppURL />policyManagement/edit.do">
-				<fmt:message key="label.add.new.policy"/>
+		<div class="mt-3 text-end">
+			<a href="<lams:WebAppURL />policyManagement/list.do" class="btn btn-secondary">
+				<fmt:message key="admin.cancel"/>
 			</a>
-		</c:if>
-	</lams:Page>
+			<c:if test="${!viewPreviousVersions}">
+				<a class="btn btn-primary" href="<lams:WebAppURL />policyManagement/edit.do">
+					<fmt:message key="label.add.new.policy"/>
+				</a>
+			</c:if>
+		</div>
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/policies/policyTable.jsp
===================================================================
diff -u -r95b456e2d455b045b20b696f2a749c0e3cc35917 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/policies/policyTable.jsp	(.../policyTable.jsp)	(revision 95b456e2d455b045b20b696f2a749c0e3cc35917)
+++ lams_admin/web/policies/policyTable.jsp	(.../policyTable.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -1,6 +1,7 @@
 <%@ include file="/taglibs.jsp"%>
 
-<table class="table table-striped table-condensed" >
+<table class="table table-striped table-bordered" >
+	<thead>
 	<tr>
 		<th><fmt:message key="label.name" /></th>
 		<th><fmt:message key="label.policy.status" /></th>
@@ -10,22 +11,22 @@
 		<th><fmt:message key="label.consents"/></th>
 		<th colspan="3"><fmt:message key="admin.actions"/></th>
 	</tr>
+	</thead>
+	<tbody>
 	<c:forEach items="${policies}" var="policy">
 		<tr>
-			<td>
-				<c:out value="${policy.policyName}" />
+			<td class="text-left">
+				<a href="<lams:WebAppURL />policyManagement/edit.do?policyUid=${policy.uid}" class="fw-bold text-decoration-none">
+					<c:out value="${policy.policyName}" escapeXml="true" />
+				</a>
 			</td>
 			<td>
 				<c:choose>
 					<c:when test="${policy.policyStateId == 1}">
-						<span class="label label-success">
-							<fmt:message key="label.policy.status.active"/>
-						</span>
+						<span class="badge bg-success"><fmt:message key="label.policy.status.active"/></span>
 					</c:when>
 					<c:otherwise>
-						<span class="label label-warning">
-							<fmt:message key="label.policy.status.inactive"/>
-						</span>
+						<span class="badge bg-warning text-black"><fmt:message key="label.policy.status.inactive"/>
 					</c:otherwise>
 				</c:choose>
 			</td>
@@ -46,28 +47,32 @@
 				</c:choose>
 			</td>
 			<td>
-				<c:out value="${policy.version}" />
+				<c:out value="${policy.version}" escapeXml="true" />
 			</td>
 			<td>
-				<lams:Date value="${policy.lastModified}"/>
+				<lams:Date value="${policy.lastModified}" timeago="true"/>
 			</td>
 			<td>
-				<a href="#nogo" class="policy-consents-link" data-policy-uid="${policy.uid}">
+				<a href="#nogo" class="policy-consents-link text-decoration-none" data-policy-uid="${policy.uid}">
 					${fn:length(policy.consents)}/${userCount}
 				</a>
 			</td>
 			
 			<!-- Actions columns -->
 			<td>
 				<a href="<lams:WebAppURL />policyManagement/edit.do?policyUid=${policy.uid}">
-					<fmt:message key="admin.edit"/>
+					<button class="btn btn-primary" title="<fmt:message key="admin.edit"/>">
+						<i class="fa fa-pencil"></i>
+					</button>
 				</a>
 			</td>
 						
 			<td>
 				<c:if test="${!viewPreviousVersions && policy.hasPreviousVersions()}">
 					<a href="<lams:WebAppURL />policyManagement/viewPreviousVersions.do?policyId=${policy.policyId}">
-						<fmt:message key="label.view.previous.versions"/>
+						<button  title="<fmt:message key="label.view.previous.versions"/>" class="btn btn-primary" >
+							<i class="fa fa-code-fork fa-fw"></i>
+						</button>
 					</a>
 				</c:if>	
 			</td>
@@ -76,10 +81,13 @@
 				<a href="#nogo" class="change-status-link" data-policy-uid="${policy.uid}" data-policy-id="${policy.policyId}">
 					<c:choose>
 						<c:when test="${policy.policyStateId == 1}">
-							<fmt:message key="label.deactivate"/>
+							<button class="btn btn-warning" title="<fmt:message key="label.deactivate"/>"><i class="fa fa-pause"></i></button>
 						</c:when>
 						<c:otherwise>
-							<fmt:message key="label.activate"/>				
+							<button class="btn btn-success" title="<fmt:message key="label.activate"/>">
+								<i class="fa fa-power-off"></i>
+							</button>
+											
 						</c:otherwise>
 					</c:choose>
 				</a>
@@ -88,4 +96,5 @@
 				
 		</tr>
 	</c:forEach>
+	</tbody>
 </table>
\ No newline at end of file
Index: lams_admin/web/policies/userConsents.jsp
===================================================================
diff -u -r95b456e2d455b045b20b696f2a749c0e3cc35917 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/policies/userConsents.jsp	(.../userConsents.jsp)	(revision 95b456e2d455b045b20b696f2a749c0e3cc35917)
+++ lams_admin/web/policies/userConsents.jsp	(.../userConsents.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -3,9 +3,11 @@
 <!DOCTYPE html>
 <lams:html>
 <lams:head>
-	<lams:css/>
-	<lams:css suffix="learner"/>
-	<link type="text/css" href="<lams:LAMSURL/>css/free.ui.jqgrid.min.css" rel="stylesheet">
+	<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/free.ui.jqgrid.min.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/free.ui.jqgrid.custom.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
 	<style>
 		th, td {
@@ -14,16 +16,26 @@
 	</style>
 	
 	<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:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>
 	<script type="text/javascript">
 		
 		$(document).ready(function(){
-  
+			// customise jqGrid's Boostrap theme
+			$.extend(true, $.jgrid.guiStyles.bootstrap4, {
+				pager : {
+					pagerSelect : 'form-control-select'
+				},
+				searchToolbar : {
+					clearButton : 'btn btn-sm'
+				},
+				titleButton : "btn btn-xs"
+			});
+			
 			// for the ipad, we seem to need to force the grid to a sensible size to start
 			$("#consents-grid").jqGrid({
-				guiStyle: "bootstrap",
-				iconSet: 'fontAwesome',
+				guiStyle: "bootstrap4",
+				iconSet: 'fontAwesomeSolid',
 				autoencode:false,
 				caption: "${organisationName}",
 			    datatype: "json",
@@ -33,8 +45,8 @@
 				shrinkToFit: false,
 			    sortorder: "asc", 
 			    sortname: "fullName", 
-			    pager: 'consents-grid-pager',
-			    rowList:[10,20,30,40,50,100],
+			    pager: true,
+			    rowList:[10,50,100,500],
 			    rowNum:10,
 			    colNames:[
 			    	'',
@@ -53,8 +65,6 @@
 			    	alert('<fmt:message key="admin.org.password.change.grid.error.load"/>');
 			    },
 				gridComplete: function(){
-					//toolTip($(".jqgrow"));	// enable tooltips for grid
-					fixPagerInCenter('consents-grid-pager', 0);
 				}	
 			}).navGrid("#consents-grid-pager", {edit:false,add:false,del:false,search:false});
 
@@ -90,25 +100,14 @@
 </lams:head>
 
 <body>
-<div class="row no-gutter no-margin">
-<div class="col-xs-12">
-<div class="container" id="content">
-
-	<h5>
-		<c:out value="${policy.policyName}" />
-	</h5>
-
-	<fmt:message key="label.version" />: <c:out value="${policy.version}" />
-	<br/><br/>
+<c:set var="title"><c:out value='${policy.policyName}' escapeXml='true'/></c:set>
+<lams:Page5 type="admin" title="${title}" >
+	<p><fmt:message key="label.version" />: <c:out value="${policy.version}" /></p>
 	
 	 <div class="grid-holder">
  		<table id="consents-grid" class="scroll"></table>
-		<div id="consents-grid-pager" class="scroll"></div>
- 		<div class="tooltip-lg" id="tooltip"></div>
 	</div>
 
-</div>
-</div>
-</div>
+</lams:Page5>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_admin/web/remove.jsp
===================================================================
diff -u -read5d983137f06698c17843087000cb3545e7b34 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/remove.jsp	(.../remove.jsp)	(revision ead5d983137f06698c17843087000cb3545e7b34)
+++ lams_admin/web/remove.jsp	(.../remove.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,13 +8,35 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
+<body class="component">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems">
+		<lams:LAMSURL />admin/appadminstart.do | <fmt:message
+			key="appadmin.maintain" />
+	</c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, <lams:LAMSURL />admin/usersearch.do | <fmt:message
+			key="admin.user.management" />
+	</c:set>
+	<c:if test="${method == 'disable'}">
+		<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message
+				key="admin.user.disable" />
+		</c:set>
+	</c:if>
+	<c:if test="${method == 'delete'}">
+		<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message
+				key="admin.user.delete" />
+		</c:set>
+	</c:if>
+	
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
 				<c:if test="${empty orgId}">
 					<c:url var="cancel" value="/usersearch.do" />
 				</c:if>
@@ -25,13 +47,11 @@
 				</c:if>
 				
 				<c:if test="${method == 'disable'}">
-					<div class="panel panel-default" >
-						<div class="panel-heading">
-							<span class="panel-title">
-								<fmt:message key="admin.user.disable"/>
-							</span>
+					<div class="card" >
+						<div class="card-header">
+							<fmt:message key="admin.user.disable"/>
 						</div>
-						<div class="panel-body">     
+						<div class="card-body">     
 							<p>
 								<fmt:message key="msg.disable.user.1"/>&nbsp;&nbsp;
 								<fmt:message key="msg.disable.user.2"/>&nbsp;&nbsp;
@@ -42,34 +62,34 @@
 								<c:param name="userId" value="${userId}" />
 								<c:param name="orgId" value="${orgId}" />
 							</c:url>
-							<div class="pull-right">
-								<csrf:form style="display: inline-block;" id="disable_${userId}" method="post" action="/lams/admin/user/disable.do"><input type="hidden" name="userId" value="${userId}"/><input type="hidden" name="orgId" value="<c:out value="${orgId}"/>"/><input type="submit" class="btn btn-primary" value="<fmt:message key="admin.disable" />"/></csrf:form>
-								&nbsp;
-
-								<button class="btn btn-default" type="button" onClick="javascript:document.location='<c:out value="${cancel}"/>'">
-									Cancel 
+							<div class="text-end">
+								<button class="btn btn-secondary" type="button" onClick="javascript:document.location='<c:out value="${cancel}"/>'">
+									<fmt:message key="admin.cancel" />
 								</button>
+								<csrf:form style="display: inline-block;" id="disable_${userId}" method="post" action="/lams/admin/user/disable.do">
+									<input type="hidden" name="userId" value="${userId}"/>
+									<input type="hidden" name="orgId" value="<c:out value="${orgId}"/>"/>
+									<input type="submit" class="btn btn-primary" value="<fmt:message key="admin.disable" />"/>
+								</csrf:form>
 							</div>
 						</div>
 					</div>	
 				</c:if>
 				
 				<c:if test="${method == 'delete'}">
-					<div class="panel panel-default" >
-						<div class="panel-heading">
-							<span class="panel-title">
-								<fmt:message key="admin.user.delete"/>
-							</span>
+					<div class="card" >
+						<div class="card-header">
+							<fmt:message key="admin.user.delete"/>
 						</div>
-						<div class="panel-body">     
+						<div class="card-body">     
 							<p><fmt:message key="msg.delete.user.1"/>&nbsp;&nbsp;<fmt:message key="msg.delete.user.2"/></p>
 							<c:url var="deleteaction" value="/user/delete.do">
 								<c:param name="userId" value="${userId}" />
 								<c:param name="orgId" value="${orgId}" />
 							</c:url>
-							<div class="pull-right">
+							<div class="float-end">
 								<button class="btn btn-default" type="button" onClick="javascript:document.location='<c:out value="${cancel}"/>'">
-									Cancel
+									<fmt:message key="admin.cancel" />
 								</button>
 							
 								<csrf:form style="display: inline-block;" id="delete_${userId}" method="post" action="delete.do">
@@ -85,7 +105,7 @@
 				</c:if>
 				
 	<div id="footer"/>
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/sessionmaintain.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/sessionmaintain.jsp	(.../sessionmaintain.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/sessionmaintain.jsp	(.../sessionmaintain.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -7,36 +7,53 @@
 	<c:set var="title"><fmt:message key="appadmin.maintain.session"/></c:set>
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
-
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	
+	<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/jquery-ui-bootstrap-theme5.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>/css/jquery.tablesorter.theme.bootstrap5.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
+
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.timeago.js"></script>	
+	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.tablesorter.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript">
 	    jQuery(document).ready(function() {
 	    	jQuery("time.timeago").timeago();
+	    	
+	    	// initial sort set using data-sortlist attribute 
+			$(".sessionTable").tablesorter({
+				theme : 'bootstrap'
+			});
 	    });
 	</script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
-		</p>
+<body class="component">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | ${title}</c:set>
+
+
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
 		
 		<div class="alert alert-info">${fn:length(sessions)}&nbsp;<fmt:message key="appadmin.maintain.session.count" /></div>
 
-		<table class="table table-striped table-hover">
+		<table class="table table-striped table-hover bg-white sessionTable align-middle" id="sessionTable" data-sortlist="[[1]]">
+			<thead class="thead-light">
 			<tr>
 				<th><fmt:message key="appadmin.maintain.session.login" /></th>
 				<th><fmt:message key="appadmin.maintain.session.name" /></th>
 				<th><fmt:message key="appadmin.maintain.session.access" /></th>
 				<th><fmt:message key="appadmin.maintain.session.id" /></th>
-				<th></th>
+				<th data-sorter="false"  class="text-center"><fmt:message key="admin.actions" /></th>
 			</tr>
+			</thead>
+			<tbody>
 			<c:forEach items="${sessions}" var="ses">
 			<tr>
 				<td><c:out value="${ses.key}" /></td>
@@ -45,13 +62,25 @@
 				<td title="<fmt:message key="appadmin.maintain.session.created" />&nbsp;<c:out value="${ses.value[3]}" />">
 					<c:out value="${ses.value[4]}" />
 				</td>
-				<td>
-					<csrf:form style="display: inline-block;" id="delete_${ses.key}" method="post" action="/lams/admin/sessionmaintain/delete.do"><input type="hidden" name="login" value="${ses.key}"/><button type="submit" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> <fmt:message key="appadmin.maintain.session.delete" /></button></csrf:form>
+				<td class="text-center">
+					<csrf:form style="display: inline-block;" id="delete_${ses.key}" method="post" action="/lams/admin/sessionmaintain/delete.do">
+					<input type="hidden" name="login" value="${ses.key}"/>
+					<button title="<fmt:message key="sysadmin.maintain.session.delete" />" type="submit" class="btn btn-danger">
+						<i class="fa fa-trash"></i></button>
+					</csrf:form>
 				</td>
 			</tr>
 			</c:forEach>
+			</tbody>
 		</table>
-	</lams:Page>
+		<hr>
+		<div class="text-end">
+			<a href="<lams:LAMSURL/>admin/sysadminstart.do" class="btn btn-secondary">
+				<fmt:message key="admin.cancel"/>
+			</a>
+		</div>		
+		
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/signupmanagement/add.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/signupmanagement/add.jsp	(.../add.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/signupmanagement/add.jsp	(.../add.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -3,109 +3,103 @@
 
 <lams:html>
 <lams:head>
-	<c:set var="title"><fmt:message key="admin.signup.title"/></c:set>
+	<c:set var="title"><fmt:message key="admin.add.edit.signup.page"/></c:set>
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
-	<c:set var="title">${title}: <fmt:message key="admin.add.edit.signup.page"/></c:set>
-	<lams:Page type="admin" title="${title}" formID="signupForm">
+<body class="component pb-4">
+	<c:set var="title"><fmt:message key="admin.add.edit.signup.page"/></c:set>
 	
-		<div>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
-			<a href="<lams:LAMSURL/>admin/signupManagement/start.do" class="btn btn-default loffset5"><fmt:message key="admin.signup.title" /></a>
-		</div>
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbChild1"><lams:LAMSURL/>admin/signupManagement/start.do | <fmt:message key="admin.signup.title"/></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="admin.add.edit.signup.page"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbChild1}, ${breadcrumbActive}"/>
+
+	
+	<lams:Page5 type="admin" title="${title}" formID="signupForm" breadcrumbItems="${breadcrumbItems}">
+	
 		<form:form action="add.do" modelAttribute="signupForm" id="signupForm" method="post">
 			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-				<form:hidden path="signupOrganisationId" />
+			<form:hidden path="signupOrganisationId" />
 				
-				<table class="table table-condensed table-no-border">
-					<tr>
-						<td style="width: 250px;"><fmt:message key="admin.group" />:</td>
-						<td>
-							<form:select path="organisationId" cssClass="form-control">
-								<c:forEach items="${organisations}" var="organisation">
-									<form:option value="${organisation.organisationId}"><c:out value="${organisation.name}" /></form:option>
-								</c:forEach>
-							</form:select>
-						</td>
-						<td></td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.lessons" />:</td>
-						<td><form:checkbox path="addToLessons" /></td>
-						<td></td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.staff" />:</td>
-						<td><form:checkbox path="addAsStaff" /></td>
-						<td></td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.email.verify" />:</td>
-						<td colspan="2">
-							<form:checkbox path="emailVerify" />&nbsp;&nbsp;
-							<span class="signupFieldDescription">
-								<fmt:message key="admin.email.verify.desc" />
-							</span>
-						</td>
-					</tr>
-					<tr>
-						<td colspan="2">
-						<lams:errors path="courseKey"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.course.key" />:</td>
-						<td><form:input path="courseKey" size="40" maxlength="255" cssClass="form-control"/></td>
-					<tr>
-						<td><fmt:message key="admin.confirm.course.key" />:</td>
-						<td><form:input path="confirmCourseKey" size="40" maxlength="255" cssClass="form-control"/></td>
-						<td></td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.description.txt" />:</td>
-						<td>
+			<div class="row">
+				<div class="col-6 offset-3">
+					<div class="mb-3">
+						<label for="selector" class="form-label"><fmt:message key="admin.group" /></label>:
+						<form:select id="selector" path="organisationId" cssClass="form-control">
+							<c:forEach items="${organisations}" var="organisation">
+								<form:option value="${organisation.organisationId}"><c:out value="${organisation.name}" escapeXml="true" /></form:option>
+							</c:forEach>
+						</form:select>
+					</div>
+					<div class="form-check mb-2">
+						<form:checkbox path="addToLessons" id="addToLessons" cssClass="form-check-input"/>
+						<label class="form-check-label" for="addToLessons"><fmt:message key="admin.lessons" /></label>
+					</div>	
+					<div class="form-check mb-2">
+						<form:checkbox id="addAsStaff" path="addAsStaff" cssClass="form-check-input"/>
+						<label class="form-check-label" for="addToLessons"><fmt:message key="admin.staff" /></label>
+					</div>
+					<div class="form-check mb-2">
+						<form:checkbox id="emailVerify" path="emailVerify" cssClass="form-check-input" />
+						<label class="form-check-label" for="emailVerify"><fmt:message key="admin.email.verify" /></label>
+						<small id="passwordHelpBlock" class="form-text text-muted">
+									<fmt:message key="admin.email.verify.desc" />
+						</small>
+					</div>
+					<div class="mb-3">
+						<label for="courseKey" class="form-label"><fmt:message key="admin.course.key" /></label>
+						<input value="${signupForm.courseKey}" required id="courseKey" name="courseKey" maxlength="20" class="form-control"/>
+						<small id="passwordHelpBlock" class="form-text text-muted">
+								<lams:errors path="courseKey"/>
+						</small>	
+					</div>
+					<div class="mb-3">
+						<label for="confirmCourseKey" class="form-label"><fmt:message key="admin.confirm.course.key" /></label>
+						<input value="${signupForm.courseKey}" id="confirmCourseKey"  name="confirmCourseKey" required  maxlength="20" class="form-control"/>
+					</div>
+					<div class="mb-3">
+						<label for="blurb" class="form-label"><fmt:message key="admin.description.txt" /></label>
 						  <lams:CKEditor id="blurb" 
 						     value="${signupForm.blurb}" 
 						     contentFolderID="../public/signups">
 						  </lams:CKEditor>
-						</td>
-						<td></td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.disable.option" />:</td>
-						<td><form:checkbox path="disabled" /></td>
-						<td></td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.login.tab" />:</td>
-						<td><form:checkbox path="loginTabActive" /></td>
-						<td></td>
-					</tr>		
-					<tr>
-						<td colspan="2">
-						<lams:errors path="context"/>
-						</td>
-					</tr>
-					<tr>
-						<td><fmt:message key="admin.context.path" />:</td>
-						<td style="vertical-align: middle;"><lams:LAMSURL/>signup/<form:input path="context" /></td>
-					</tr>
-				</table>
-				
-				<div class="pull-right">
-					<a href="<lams:LAMSURL/>admin/signupManagement/start.do" class="btn btn-default loffset5"><fmt:message key="admin.cancel" /></a>
-					<input type="submit" id="saveButton" class="btn btn-primary loffset5" value="<fmt:message key="admin.save" />" />
+					</div>
+					<div class="form-check mb-2">
+						<form:checkbox path="disabled" cssClass="form-check-input"/>
+						<label class="form-check-label" for="disabled"><fmt:message key="admin.disable.option" /></label>
+					</div>
+					<div class="form-check mb-2">
+						<form:checkbox id="loginTabActive" path="loginTabActive" cssClass="form-check-input"/>
+						<label class="form-check-label" for="loginTabActive"><fmt:message key="admin.login.tab" /></label>
+					</div>
+					<div class="mb-3">
+						<label for="context" class="form-label"><fmt:message key="admin.context.path" /></label>:</br>
+						<lams:LAMSURL/>signup/<input id="context" value="${signupForm.context}" name="context" required class="form-control form-control-inline"/>
+						<small id="passwordHelpBlock" class="form-text text-danger">
+								<lams:errors path="context"/>
+						</small>				
+					</div>
 				</div>
+			</div>
 			
+			<div class="row">
+				<div class="col-6 offset-3 text-end">
+					<a href="<lams:LAMSURL/>admin/signupManagement/start.do" class="btn btn-secondary"><fmt:message key="admin.cancel" /></a>
+					<input type="submit" id="saveButton" class="btn btn-primary" value="<fmt:message key="admin.save" />" />
+				</div>
+			</div>
 		</form:form>
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/signupmanagement/list.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/signupmanagement/list.jsp	(.../list.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/signupmanagement/list.jsp	(.../list.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -9,75 +9,103 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	
+	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.timeago.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+	<script type="text/javascript">
+	    $(document).ready(function(){
+	        $("time.timeago").timeago();
+	        
+	    });
+    </script>
 </lams:head>
     
-<body class="stripes">
+<body class="component pb-4">
 	<c:set var="help"><fmt:message key="LAMS+Signup"/></c:set>
 	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
-	<lams:Page type="admin" title="${title}" titleHelpURL="${help}">
+		<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. |<fmt:message key="admin.signup.title"/></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
 	
-		<p><a href="<lams:LAMSURL/>/admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
-
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}">
+	
 		<c:if test="${not empty error}">
 			<lams:Alert type="warn" id="errorMessage" close="false">	
 				<c:out value="${error}" />
 			</lams:Alert>
 		</c:if>
 		
-		<table class="table table-striped table-condensed" >
+		<table class="table table-striped table-bordered" >
+			<thead>
 			<tr>
 				<th><fmt:message key="admin.group" /></th>
 				<th><fmt:message key="admin.group.code" /></th>
 				<th><fmt:message key="admin.lessons" /></th>
 				<th><fmt:message key="admin.staff" /></th>
-				<th><fmt:message key="admin.email.verify" /></th>
 				<th><fmt:message key="admin.added.on"/></th>
-				<th><fmt:message key="admin.disable.option"/></th>
-				<th><fmt:message key="admin.context.path"/></th>
-				<th><fmt:message key="admin.actions"/></th>
+				<th class="text-center"><fmt:message key="admin.actions"/></th>
 			</tr>
+			</thead>
+			<tbody>
 			<c:forEach items="${signupOrganisations}" var="signupOrganisation">
-				<tr>
+				<tr <c:if test="${signupOrganisation.disabled == 'true'}">class="table-danger ${signupOrganisation.disabled}"</c:if> >
 					<td>
-						<c:out value="${signupOrganisation.organisation.name}" />
+						<a href="<lams:LAMSURL/>admin/signupManagement/edit.do?soid=${signupOrganisation.signupOrganisationId}"><strong><c:out value="${signupOrganisation.organisation.name}" /></strong></a>
+						<c:if test="${signupOrganisation.disabled == 'true'}"><span class="badge bg-warning text-black">Disabled</span></c:if>
 					</td>
 					<td>
 						<c:out value="${signupOrganisation.organisation.code}" />
 					</td>
 					<td>
-						<c:out value="${signupOrganisation.addToLessons}" />
+						<c:choose>
+						<c:when test="${signupOrganisation.addToLessons}" >
+							<fmt:message key="label.yes" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="label.no" />
+						</c:otherwise>
+						</c:choose>
 					</td>
 					<td>
-						<c:out value="${signupOrganisation.addAsStaff}" />
+						<c:choose>
+						<c:when test="${signupOrganisation.addAsStaff}" >
+							<fmt:message key="label.yes" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="label.no" />
+						</c:otherwise>
+						</c:choose>
 					</td>
 					<td>
-						<c:out value="${signupOrganisation.emailVerify}" />
+						<lams:Date value="${signupOrganisation.createDate}" timeago="true"/>
 					</td>
-					<td>
-						<c:out value="${signupOrganisation.createDate}" />
+					<td class="text-center">
+											
+                        <csrf:form style="display: inline-block;" id="delete_${signupOrganisation.signupOrganisationId}" method="post" action="/lams/admin/signupManagement/delete.do">
+                        <input type="hidden" name="soid" value="${signupOrganisation.signupOrganisationId}"/>
+                        
+                        <button title="<fmt:message key="admin.delete" />" class="btn btn-danger" type="submit"><i class="fa fa-trash"></i></button>
+                        </csrf:form>
 					</td>
-					<td>
-						<c:out value="${signupOrganisation.disabled}" />
-					</td>
-					<td>
-						<c:out value="${signupOrganisation.context}" />
-					</td>
-					<td>
-						<a id="edit" class="btn btn-default btn-xs" href="<lams:LAMSURL/>admin/signupManagement/edit.do?soid=${signupOrganisation.signupOrganisationId}"><fmt:message key="admin.edit"/></a>
-						&nbsp;
-						<a href="<lams:LAMSURL/>admin/signupManagement/delete.do?soid=${signupOrganisation.signupOrganisationId}"><fmt:message key="admin.delete"/></a>
-                        <csrf:form style="display: inline-block;" id="delete_${signupOrganisation.signupOrganisationId}" method="post" action="/lams/admin/signupManagement/delete.do"><input type="hidden" name="soid" value="${signupOrganisation.signupOrganisationId}"/><input type="submit" class="btn btn-danger btn-xs" value="<fmt:message key="admin.delete" />"/></csrf:form>
-					</td>
 				</tr>
 			</c:forEach>
+			</tbody>
 		</table>
 		
-		<a href="<lams:LAMSURL/>admin/signupManagement/add.do" class="btn btn-primary pull-right"><fmt:message key="admin.add.new.signup.page"/></a>
+		<div class="mt-3 text-end">
+			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary">
+				<fmt:message key="admin.cancel"/>
+			</a>
 
-	</lams:Page>
+			<a href="<lams:LAMSURL/>admin/signupManagement/add.do" class="btn btn-primary"><fmt:message key="admin.add.new.signup.page"/></a>
+		</div>
+	</lams:Page5>
 
 </body>
 </lams:html>
Index: lams_admin/web/statistics.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/statistics.jsp	(.../statistics.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/statistics.jsp	(.../statistics.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,12 +8,14 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	
-	<script src="<lams:LAMSURL/>/includes/javascript/jquery.js" type="text/javascript"></script>
-
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript">
 		function loadGroupStats(orgId) {
 			if (orgId) {
@@ -33,97 +35,97 @@
 	</script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}">
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
-		</p>
-			
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<div class="panel-title"><fmt:message key="admin.statistics.overall" /></div>
-				</div>
-				<div class="panel-body">
-				<table class="table table-striped table-condensed" >
-					<tr>
-						<td>
-							<fmt:message key="admin.statistics.totalUsers" />
-						</td>
-						<td width="150px">
-							${statisticsDTO.users}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.statistics.learningDesigns" />
-						</td>
-						<td>
-							${statisticsDTO.sequences}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.statistics.lessons" />
-						</td>
-						<td>
-							${statisticsDTO.lessons}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.statistics.activities" />
-						</td>
-						<td>
-							${statisticsDTO.activities}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.statistics.completedActivities" />
-						</td>
-						<td>
-							${statisticsDTO.completedActivities}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.statistics.groups" />
-						</td>
-						<td>
-							${statisticsDTO.groups}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.statistics.subGroups" />
-						</td>
-						<td>
-							${statisticsDTO.subGroups}
-						</td>
-					</tr>
-				</table>
-				</div>
+<body class="component">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="admin.statistics.title"/></c:set>
+
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+		<div class="card">
+			<div class="card-header">
+				<fmt:message key="admin.statistics.overall" />
 			</div>
+			<div class="card-body">
+			<table class="table table-striped table-condensed" >
+				<tr>
+					<td>
+						<fmt:message key="admin.statistics.totalUsers" />
+					</td>
+					<td width="150px">
+						${statisticsDTO.users}
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<fmt:message key="admin.statistics.learningDesigns" />
+					</td>
+					<td>
+						${statisticsDTO.sequences}
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<fmt:message key="admin.statistics.lessons" />
+					</td>
+					<td>
+						${statisticsDTO.lessons}
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<fmt:message key="admin.statistics.activities" />
+					</td>
+					<td>
+						${statisticsDTO.activities}
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<fmt:message key="admin.statistics.completedActivities" />
+					</td>
+					<td>
+						${statisticsDTO.completedActivities}
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<fmt:message key="admin.statistics.groups" />
+					</td>
+					<td>
+						${statisticsDTO.groups}
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<fmt:message key="admin.statistics.subGroups" />
+					</td>
+					<td>
+						${statisticsDTO.subGroups}
+					</td>
+				</tr>
+			</table>
+			</div>
+		</div>
+		
+		<div class="card mt-3">
+			<div class="card-header">
+				<fmt:message key="admin.statistics.title.byGroup" />
+			</div>
 			
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<div class="panel-title"><fmt:message key="admin.statistics.title.byGroup" /></div>
+			<div class="card-body">
+				<select onchange="javascript:loadGroupStats(this.options[this.selectedIndex].value)" class="form-control">
+					<option></option>
+					<c:forEach var="groupEntry" items="${groupMap}" >	
+						<option value="${groupEntry.value}">${groupEntry.key}</option>
+					</c:forEach>
+				</select>
+				<br />
+				<div id="groupDiv">
+			
 				</div>
-				
-				<div class="panel-body">
-					<select onchange="javascript:loadGroupStats(this.options[this.selectedIndex].value)" class="form-control">
-						<option></option>
-						<c:forEach var="groupEntry" items="${groupMap}" >	
-							<option value="${groupEntry.value}">${groupEntry.key}</option>
-						</c:forEach>
-					</select>
-					<br />
-					<div id="groupDiv">
-				
-					</div>
-				</div>
 			</div>
-	</lams:Page>
+		</div>
+	</lams:Page5>
 </body>
 </lams:html>
 
Index: lams_admin/web/themeManagement.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/themeManagement.jsp	(.../themeManagement.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/themeManagement.jsp	(.../themeManagement.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,9 +8,12 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	
 	<script type="text/javascript">
 		function editTheme(name, description, imageDirectory, id, currentDefaultTheme) {
@@ -78,13 +81,16 @@
 	</script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}" formID="themeForm">
-		<p>
-			<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a>
-		</p>
+<body class="component pb-4">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="admin.themes.title"/></c:set>
+
+
+	<lams:Page5 type="admin" title="${title}" formID="themeForm" breadcrumbItems="${breadcrumbItems}">	
 			
-			<table class="table table-striped table-condensed" >
+			<table class="table table-striped table-bordered bg-white align-middle" >
+				<thead>
 				<tr>
 					<th>
 						<fmt:message key="admin.themes.theme" />
@@ -98,110 +104,86 @@
 					<th>
 						<fmt:message key="admin.themes.defaultTheme" />
 					</th>
-					<th>
+					<th class="text-center">
+						<fmt:message key="admin.actions" />
 					</th>
-					<th>
-					</th>
 				</tr>
+				</thead>
+				<tbody>
 				<c:forEach var="theme" items="${themes}" >
 					<tr>
 						<td>
-							${theme.name}
+							<c:out value="${theme.name}" escapeXml="true"/>
 						</td>
 						<td>
-							${theme.description}
+							<c:out value="${theme.description}" escapeXml="true"/>
 						</td>
 						<td>
-							${theme.imageDirectory}
+							<c:out value="${theme.imageDirectory}" escapeXml="true"/>
 						</td>
-						<td align="center">
+						<td class="text-center">
 							<c:if test="${theme.currentDefaultTheme}">
-								<i class="fa fa-check"></i>
+								<i class="fa fa-check text-success"></i>
 							</c:if>
 						</td>
-						<td align="center">
+						<td class="text-center">
 			
 							<c:choose>
 								<c:when test="${not theme.notEditable}">
-									<i class="fa fa-pencil" 
+									<i class="btn btn-secondary fa fa-pencil" 
 										title="<fmt:message key="admin.themes.edit" />"
 										onclick="editTheme('${theme.name}', '${theme.description}', '${theme.imageDirectory}', '${theme.themeId}', '${theme.currentDefaultTheme}')"
 									></i>
-									<i class="fa fa-times" 
+									<i class="btn btn-danger fa fa-times" 
 										title="<fmt:message key="admin.themes.remove" />"
 										onclick="removeTheme('${theme.themeId}', '${theme.name}')"
 									></i>
 								</c:when>
 								<c:otherwise>
-									<a href="javascript:setAsDefault('${theme.name}')" class="btn btn-default btn-sm" title="<fmt:message key="admin.themes.makeThemeDefault"/>">
+									<a href="javascript:setAsDefault('${theme.name}')" class="btn btn-secondary" title="<fmt:message key="admin.themes.makeThemeDefault"/>">
 										<fmt:message key="admin.themes.makeDefault" />
 									</a>
 								</c:otherwise>
 							</c:choose>
 						</td>	
 					</tr>
 				</c:forEach>
+				</tbody>
 			</table>
 			
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<div class="panel-title"><fmt:message key="admin.themes.addNew" /></div>
-				</div>
-				
-				<div class="panel-body">
-				<form:form action="addOrEditTheme.do" method="post" modelAttribute="themeForm" id="themeForm">	
+			<h2><fmt:message key="admin.themes.addNew" /></h2>
+			<form:form action="addOrEditTheme.do" method="post" modelAttribute="themeForm" id="themeForm">	
 				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 				<form:hidden path="id" id="id" />
 				
-				<table class="table table-no-border" >
-					<tr>
-						<td>
-							* <fmt:message key="admin.themes.name" />:
-						</td>
-						<td>
-							<form:input path="name" id="name" size="40" />
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.themes.description" />:
-						</td>
-						<td>
-							<form:input path="description" id="description" size="40" />
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.themes.imageDir" />:
-						</td>
-						<td>
-							<form:input path="imageDirectory" id="imageDirectory" size="40" />
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<fmt:message key="admin.themes.makeThemeDefault" />:
-						</td>
-						<td>
-							<form:checkbox path="currentDefaultTheme" id="currentDefaultTheme" />
-						</td>
-					</tr>
-				</table>
-				
-				<div class="pull-right">
-				<div id="normalSave">
-					<a href="javascript:checkAndSubmit()" class="btn btn-default"><fmt:message key="admin.save" /></a>
+				<div class="mb-3">
+					<label for="name"><fmt:message key="admin.themes.name" /></label> <span class="text-danger">*</span>
+					<input class="form-control" id="name" name="name" type="text" value="" maxlength="40" required>
 				</div>
-				<div id="cancelEdit" style="display:none;">
-					<a href="javascript:cancelEdit()" class="btn btn-default"><fmt:message key="admin.cancel" /></a>
-					<a href="javascript:submitForm()" class="btn btn-default loffset5"><fmt:message key="admin.save" /></a>
+				<div class="mb-3">
+					<label for="description"><fmt:message key="admin.themes.description" /></label>:
+					<form:input class="form-control" path="description" id="description" />
 				</div>
+				<div class="mb-3">
+					<label class="form-check-label" for="imageDirectory"><fmt:message key="admin.themes.imageDir" /></label>:
+					<form:input class="form-control" path="imageDirectory" id="imageDirectory" size="40" />
 				</div>
-				</form:form>
+				<div class="form-check">
+					<form:checkbox class="form-check-input"  path="currentDefaultTheme" id="currentDefaultTheme" />
+					<label class="form-check-label" for="currentDefaultTheme"><fmt:message key="admin.themes.makeThemeDefault" /></label>
+				</div>
 				
-			</div>
-			</div>
-
-	</lams:Page>
+				<div id="normalSave" class="float-end">
+					<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary">
+						<fmt:message key="admin.cancel"/>
+					</a>
+					<a href="javascript:checkAndSubmit()" class="btn btn-primary"><fmt:message key="admin.save" /></a>
+				</div>
+				<div id="cancelEdit" style="display:none;" class="float-end">
+					<a href="javascript:cancelEdit()" class="btn btn-secondary"><fmt:message key="admin.cancel" /></a>
+					<a href="javascript:submitForm()" class="btn btn-primary"><fmt:message key="admin.save" /></a>
+				</div>
+			</form:form>
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/timezoneManagement.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/timezoneManagement.jsp	(.../timezoneManagement.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/timezoneManagement.jsp	(.../timezoneManagement.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -9,43 +9,57 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
-
+	
 	<script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
-	<lams:Page type="admin" title="${title}" formID="timezoneForm">
-		<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
-			
-		<h4>
-			<fmt:message key="admin.servertimezone.select.server.timezone" />
-		</h4>
-		
+<body class="component">
+	<c:set var="help"><fmt:message key="LAMS+Configuration"/></c:set>
+	<c:set var="help"><lams:help style="small" page="${help}" /></c:set>
+	
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="admin.timezone.title"/></c:set>
+	
+	<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
 		<form action="changeServerTimezone.do">
-			<select name="serverTimezone" style="display: block">
-				<c:forEach items="${timezoneDtos}" var="timezoneDto">
-					<option value="${timezoneDto.timeZoneId}" class="form-control" ${timezoneDto.timeZoneId eq serverTimezone ? "selected" : ""}>
-						${timezoneDto.timeZoneId}
-						&nbsp;&nbsp;-&nbsp;&nbsp;
-						<fmt:message key="admin.servertimezone.raw.offset" ><fmt:param><fmt:formatDate value="${timezoneDto.rawOffset}" pattern="H:mm" timeZone="GMT" /></fmt:param></fmt:message>
-						&nbsp;&nbsp;-&nbsp;&nbsp;
-						<fmt:message key="admin.servertimezone.dst.offset"><fmt:param>${timezoneDto.dstOffset}</fmt:param></fmt:message>
-						&nbsp;&nbsp;-&nbsp;&nbsp;
-						<fmt:message key="admin.servertimezone.name"><fmt:param>${timezoneDto.displayName}</fmt:param></fmt:message>
-					</option>
-				</c:forEach>
-			</select>
-			
-			<button class="btn btn-primary voffset20">
-				<c:if test="${param.saved eq 'true'}">
-					<i class="fa fa-check"></i>
-				</c:if>
-				<fmt:message key="admin.servertimezone.select" /> 
-			</button>
+			<div class="row">
+				<div class="col-6 offset-3">
+					<h4>
+						<fmt:message key="admin.servertimezone.select.server.timezone" />
+					</h4>
+					<select name="serverTimezone" class="form-select">
+						<c:forEach items="${timezoneDtos}" var="timezoneDto">
+							<option value="${timezoneDto.timeZoneId}" class="form-control" ${timezoneDto.timeZoneId eq serverTimezone ? "selected" : ""}>
+								${timezoneDto.timeZoneId}
+								&nbsp;&nbsp;-&nbsp;&nbsp;
+								<fmt:message key="admin.servertimezone.raw.offset" ><fmt:param><fmt:formatDate value="${timezoneDto.rawOffset}" pattern="H:mm" timeZone="GMT" /></fmt:param></fmt:message>
+								&nbsp;&nbsp;-&nbsp;&nbsp;
+								<fmt:message key="admin.servertimezone.dst.offset"><fmt:param>${timezoneDto.dstOffset}</fmt:param></fmt:message>
+								&nbsp;&nbsp;-&nbsp;&nbsp;
+								<fmt:message key="admin.servertimezone.name"><fmt:param>${timezoneDto.displayName}</fmt:param></fmt:message>
+							</option>
+						</c:forEach>
+					</select>
+				</div>
+			</div>
+			<div class="row mt-3">
+				<div class="col-6 offset-3 text-end">
+					<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-secondary"><fmt:message key="admin.cancel"/></a>
+					<button class="btn btn-primary">
+						<c:if test="${param.saved eq 'true'}">
+							<i class="fa fa-check"></i>
+						</c:if>
+						<fmt:message key="admin.servertimezone.select" /> 
+					</button>
+				</div>
+			</div>	
 		</form>
-	</lams:Page>
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/toolcontent/toolcontentlist.jsp
===================================================================
diff -u -r5b9f590b301c276f8df06b30c26981b0eb634e69 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/toolcontent/toolcontentlist.jsp	(.../toolcontentlist.jsp)	(revision 5b9f590b301c276f8df06b30c26981b0eb634e69)
+++ lams_admin/web/toolcontent/toolcontentlist.jsp	(.../toolcontentlist.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -8,91 +8,117 @@
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 
-	<lams:css/>
+	<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/jquery-ui-bootstrap-theme5.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
-	<lams:JSImport src="includes/javascript/dialog.js" />
-	
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 </lams:head>
     
-<body class="stripes">
+<body class="component">
 	
-	<lams:Page type="admin" title="${title}">
-				<p><a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default"><fmt:message key="appadmin.maintain" /></a></p>
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbActive">. | <fmt:message key="appadmin.tool.management" /></c:set>
+	<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
 
-				<h1><fmt:message key="appadmin.tool.management" /></h1>
+	
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+		<div class="card">
+			<div class="card-body">
+			<p class="card-text">
+				<fmt:message key="msg.edit.tool.content.1" />
+			</p>
+			<p class="card-text">
+				<fmt:message key="msg.edit.tool.content.2" />
+			</p>
+			<p class="card-text">
+				<fmt:message key="msg.edit.tool.content.3" />
+			</p>
+			<p class="card-text">${fn:length(toolLibrary)}&nbsp;<fmt:message key="appadmin.library.totals" /></p>
+			</div>
+		</div>	
 				
-				<div class="panel">
-					<p>
-						<fmt:message key="msg.edit.tool.content.1" />
-						&nbsp;
-						<fmt:message key="msg.edit.tool.content.2" />
-					</p>
-					<p>
-						<fmt:message key="msg.edit.tool.content.3" />
-					</p>
-					
-					<p>${fn:length(toolLibrary)}&nbsp;<fmt:message key="appadmin.library.totals" /></p>
-				</div>	
-				
-				<c:set var="displayToolManagement" value="false" />
-				<c:forEach var="dto" items="${toolLibrary}">
-					<c:if test="${dto.adminURL != null}">
-						<c:set var="displayToolManagement" value="true" />
-					</c:if>
-				</c:forEach>
-				
-				<table class="table table-striped table-condensed voffset10">
-					<tr>
-						<th><fmt:message key="label.tool" /></th>
-						<th><fmt:message key="label.tool.version" /></th>
-						<th><fmt:message key="label.database.version" /></th>
-						<th style="padding-right: 15px"><fmt:message key="admin.user.actions" /></th>
-					</tr>
-					<c:forEach items="${toolLibrary}" var="dto">
-						<tr>
-							<td>
-								<strong><c:out value="${dto.activityTitle}" /></strong>
-								<br/>
-								<c:out value="${dto.description}" />
-							</td>
-							<td>
-								<c:out value="${toolVersions[dto.toolID]}" />
-							</td>
-							<td>
-								<c:out value="${dbVersions[dto.toolSignature]}" />
-							</td>
-							<td>
-								<c:choose>
-									<c:when test="${learningLibraryValidity[dto.learningLibraryID]}">
-										<csrf:form style="display: inline-block;" id="disable${dto.activityTitle}" method="post" action="disable.do"><input type="hidden" name="libraryID" value="${dto.learningLibraryID}"/><input type="hidden" name="disable" value="false"/><input type="submit" class="btn btn-xs btn-primary" value="<fmt:message key="admin.disable" />"/></csrf:form>
-									</c:when>
-									<c:otherwise>
-										<csrf:form style="display: inline-block;" id="enable${dto.activityTitle}" method="post" action="enable.do"><input type="hidden" name="libraryID" value="${dto.learningLibraryID}"/><input type="hidden" name="enable" value="false"/><input type="submit" class="btn btn-success btn-xs" value="<fmt:message key="admin.enable" />"/></csrf:form>
-										
-									</c:otherwise>
-								</c:choose>
-								<c:if test="${not empty dto.toolContentID}">
-									<c:set var="editDefaultContentUrl">
-										<lams:LAMSURL /><c:out value="${dto.authoringURL}" />?toolContentID=${dto.toolContentID}&contentFolderID=-1"
-									</c:set>
-									&nbsp;
-									<a class="btn btn-xs btn-default" id="defaultContent${dto.activityTitle}" href="${editDefaultContentUrl}" target="_blank"><fmt:message key="appadmin.edit.default.tool.content" /></a>
-									<c:if test="${(displayToolManagement == 'true') and (dto.adminURL != null)}">
-										&nbsp;
-										<a class="btn btn-xs btn-default" id="toolManagement${dto.activityTitle}" href="<lams:LAMSURL /><c:out value="${dto.adminURL}" />" ><fmt:message key="msg.tool.management" /></a>
-									</c:if>
-								</c:if>
-							</td>
-						</tr>
-					</c:forEach>
-				</table>
-				</p>
-	</lams:Page>
+		<c:set var="displayToolManagement" value="false" />
+		<c:forEach var="dto" items="${toolLibrary}">
+			<c:if test="${dto.adminURL != null}">
+				<c:set var="displayToolManagement" value="true" />
+			</c:if>
+		</c:forEach>
+		
+		<table class="table table-striped table-bordered mt-3">
+			<thead>
+			<tr>
+				<th><fmt:message key="label.tool" /></th>
+				<th><fmt:message key="label.tool.version" /></th>
+				<th><fmt:message key="label.database.version" /></th>
+				<th class="text-center"><fmt:message key="admin.user.actions" /></th>
+			</tr>
+			</thead>
+			<tbody>
+			<c:forEach items="${toolLibrary}" var="dto">
+				<tr>
+					<td <c:if test="${learningLibraryValidity[dto.learningLibraryID] == 'false'}">class="table-danger"</c:if> >
+						<strong><c:out value="${dto.activityTitle}" escapeXml="true"/></strong>
+						<c:if test="${learningLibraryValidity[dto.learningLibraryID] == 'false'}">
+							<span class="badge bg-warning text-black"><fmt:message key="sysadmin.disabled" /></span> 
+						</c:if>
+						<br/>
+						<c:out value="${dto.description}" escapeXml="true"/>
+					</td>
+					<td>
+						<c:out value="${toolVersions[dto.toolID]}" />
+					</td>
+					<td>
+						<c:out value="${dbVersions[dto.toolSignature]}" />
+					</td>
+					<td>
+						<c:choose>
+							<c:when test="${learningLibraryValidity[dto.learningLibraryID]}">
+								<csrf:form style="display: inline-block;" id="disable${dto.activityTitle}" method="post" action="disable.do">
+									<input type="hidden" name="libraryID" value="${dto.learningLibraryID}"/>
+									<input type="hidden" name="disable" value="false"/>
+									<button type="submit" class="btn btn-secondary" title="<fmt:message key="admin.disable" />"/>
+										<i class="fa fa-eye-slash"></i>
+									</button>
+								</csrf:form>
+							</c:when>
+							<c:otherwise>
+								<csrf:form style="display: inline-block;" id="enable${dto.activityTitle}" method="post" action="enable.do">
+									<input type="hidden" name="libraryID" value="${dto.learningLibraryID}"/>
+									<input type="hidden" name="enable" value="false"/>
+									<button type="submit" class="btn btn-success" title="<fmt:message key="admin.enable" />"/>
+										<i class="fa fa-eye"></i>
+									</button>
+								</csrf:form>
+								
+							</c:otherwise>
+						</c:choose>
+						<c:if test="${not empty dto.toolContentID}">
+							<c:set var="editDefaultContentUrl">
+								<lams:LAMSURL /><c:out value="${dto.authoringURL}" />?toolContentID=${dto.toolContentID}&contentFolderID=-1"
+							</c:set>
+							&nbsp;
+							<a class="btn btn-primary" id="defaultContent${dto.activityTitle}" href="${editDefaultContentUrl}" target="_blank" title="<fmt:message key="appadmin.edit.default.tool.content" />">
+								<i class="fa fa-pencil fa-wa"></i>
+							</a>
+							<c:if test="${(displayToolManagement == 'true') and (dto.adminURL != null)}">
+								&nbsp;
+								<a title="<fmt:message key="msg.tool.management" />" class="btn btn-primary" id="toolManagement${dto.activityTitle}" href="<lams:LAMSURL /><c:out value="${dto.adminURL}" />" >
+									<i class="fa fa-cog fa-wa"></i>
+								</a>
+							</c:if>
+						</c:if>
+					</td>
+				</tr>
+			</c:forEach>
+			</tbody>
+		</table>
+	</lams:Page5>
 
 </body>
 </lams:html>
Index: lams_admin/web/user.jsp
===================================================================
diff -u -r3f3f34c22194aeaf302e1fd332925dffd35019aa -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/user.jsp	(.../user.jsp)	(revision 3f3f34c22194aeaf302e1fd332925dffd35019aa)
+++ lams_admin/web/user.jsp	(.../user.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -11,18 +11,41 @@
 
 <lams:html>
 <lams:head>
-	<c:set var="title"><fmt:message key="admin.user.entry"/></c:set>
+	<c:if test="${not empty userForm.userId}">
+		<c:set var="title">
+			<fmt:message key="admin.user.edit" />
+		</c:set>
+	</c:if>
+	<c:if test="${empty userForm.userId}">
+		<c:set var="title">
+			<fmt:message key="admin.user.create" />
+		</c:set>
+	</c:if>
 	<title>${title}</title>
-	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico"
+		type="image/x-icon" />
 
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
-	
-	<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/jquery.validate.js"></script>
-	<script type="text/javascript" src="/lams/includes/javascript/portrait.js"></script>
+	<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/jquery-ui-bootstrap-theme5.css"
+		type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css"
+		type="text/css" media="screen">
+
+	<script type="text/javascript"
+		src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript"
+		src="/lams/includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript"
+		src="<lams:LAMSURL/>includes/javascript/jquery.validate.js"></script>
+	<script type="text/javascript"
+		src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
+	<script type="text/javascript"
+		src="/lams/includes/javascript/portrait5.js"></script>
+
 	<script type="text/javascript">
 		var mustHaveUppercase = ${mustHaveUppercase},
 		mustHaveNumerics  = ${mustHaveNumerics},
@@ -48,7 +71,7 @@
 		$(function() {
 			// Setup form validation 
 			$("#userForm").validate({
-								errorClass : 'help-block',
+								errorClass : 'text-danger form-text font-italic',
 								//  validation rules
 								rules : {
 									login : {
@@ -163,435 +186,438 @@
 		</c:if>
 	</script>
 </lams:head>
-    
-<body class="stripes">
-	<c:set var="title">${title}: <fmt:message key="admin.user.edit"/></c:set>
-	<lams:Page type="admin" title="${title}" formID="userForm">
-	<form:form id="userForm" action="../usersave/saveUserDetails.do" modelAttribute="userForm" method="post">
-				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-				<form:hidden path="orgId" />
-				<form:hidden path="userId" />
 
-				<c:if test="${not empty userForm.orgId}">
-					<a href="<lams:LAMSURL/>admin/orgmanage.do?org=1" class="btn btn-default">
-						<fmt:message key="admin.course.manage" />
-					</a>
-					<c:if test="${not empty pOrgId}">
-						: <a href="<lams:LAMSURL/>admin/orgmanage.do?org=<c:out value="${pOrgId}" />" class="btn btn-default">
-							<c:out value="${parentName}" />
-						  </a>
-						: <a href="<lams:LAMSURL/>admin/usermanage.do?org=<c:out value="${userForm.orgId}" />" class="btn btn-default">
-							<c:out value="${orgName}" />
-						  </a>
-					</c:if>
-					<c:if test="${empty pOrgId}">
-						: <a href="<lams:LAMSURL/>admin/orgmanage.do?org=<c:out value="${userForm.orgId}" />" class="btn btn-default">
-							<c:out value="${orgName}" />
-						  </a>
-					</c:if>
-				</c:if>
-			
-				<c:if test="${empty userForm.orgId}">
-					<a href="<lams:LAMSURL/>admin/orgmanage.do?org=1" class="btn btn-default">
-						<fmt:message key="admin.course.manage" />
-					</a>
-				</c:if>
-			
-				<div class="panel panel-default voffset5">
-					<div class="panel-heading">
-						<span class="panel-title"> <c:if test="${not empty userForm.userId}">
-								<fmt:message key="admin.user.edit" />
-							</c:if> <c:if test="${empty userForm.userId}">
-								<fmt:message key="admin.user.create" />
+<body class="component pb-4">
+
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems">
+		<lams:LAMSURL />admin/appadminstart.do | <fmt:message
+			key="appadmin.maintain" />
+	</c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, <lams:LAMSURL />admin/orgmanage.do?org=1 | <fmt:message
+			key="admin.course.manage" />
+	</c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, <lams:LAMSURL />admin/usersearch.do | <fmt:message
+			key="admin.user.management" />
+	</c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message
+			key="admin.user.edit" />
+	</c:set>
+
+	<lams:Page5 type="admin" title="${title}" formID="userForm"	breadcrumbItems="${breadcrumbItems}">
+
+		<c:if test="${empty userForm.userId}">
+			<div class="row">
+				<div class="col-6 offset-3">
+					<lams:Alert type="info" id="passwordConditions" close="false">
+						<fmt:message key='label.password.must.contain' />:
+							<ul class="list-unstyled ml-2" style="line-height: 1.2">
+							<li><span class="fa fa-check" aria-hidden="true"></span> <fmt:message
+									key='label.password.min.length'>
+									<fmt:param value='${minNumChars}' />
+								</fmt:message></li>
+		
+							<c:if test="${mustHaveUppercase}">
+								<li><span class="fa fa-check" aria-hidden="true"></span> <fmt:message
+										key='label.password.must.ucase' /></li>
 							</c:if>
-						</span>
-					</div>
-			
-					<div class="panel-body">
-					    <div class="row">
-						<div class="col-md-12">
-						
-							<c:if test="${empty userForm.userId}">
-							<lams:Alert type="info" id="passwordConditions" close="false">
-							<fmt:message key='label.password.must.contain' />:
-								<ul class="list-unstyled" style="line-height: 1.2">
-									<li><span class="fa fa-check"></span> <fmt:message
-											key='label.password.min.length'>
-											<fmt:param value='${minNumChars}' />
-										</fmt:message></li>
-				
-									<c:if test="${mustHaveUppercase}">
-										<li><span class="fa fa-check"></span> <fmt:message
-												key='label.password.must.ucase' /></li>
-									</c:if>
-									<c:if test="${mustHaveLowercase}">
-												<li><span class="fa fa-check"></span> <fmt:message
-														key='label.password.must.lcase' /></li>
-											</c:if>
-				
-									<c:if test="${mustHaveNumerics}">
-										<li><span class="fa fa-check"></span> <fmt:message
-												key='label.password.must.number' /></li>
-									</c:if>
-				
-				
-									<c:if test="${mustHaveSymbols}">
-										<li><span class="fa fa-check"></span> <fmt:message
-												key='label.password.must.symbol' /></li>
-									</c:if>
-									
-									<li><span class="fa fa-check"></span>
-										<fmt:message key='label.password.user.details' />
-									</li>
-									<li><span class="fa fa-check"></span>
-										<fmt:message key='label.password.common' />
-									</li>
-								</ul>
-							</lams:Alert>
+		
+							<c:if test="${mustHaveLowercase}">
+								<li><span class="fa fa-check" aria-hidden="true""></span> <fmt:message
+										key='label.password.must.lcase' /></li>
+							</c:if>
+		
+							<c:if test="${mustHaveNumerics}">
+								<li><span class="fa fa-check" aria-hidden="true"></span> <fmt:message
+										key='label.password.must.number' /></li>
+							</c:if>
+		
+							<c:if test="${mustHaveSymbols}">
+								<li><span class="fa fa-check" aria-hidden="true"></span> <fmt:message
+										key='label.password.must.symbol' /></li>
+							</c:if>
+		
+							<li><span class="fa fa-check"></span> <fmt:message
+									key='label.password.user.details' /></li>
+							<li><span class="fa fa-check"></span> <fmt:message
+									key='label.password.common' /></li>
+						</ul>
+					</lams:Alert>
+				</div>
+			</div>
+		</c:if>
+
+		<!--  Main panel. Do not show portrait area for new user. -->
+		<c:choose>
+			<c:when test="${empty userForm.userId}">
+				<div class="row">
+					<div class="col-6 offset-3">
+			</c:when>
+			<c:otherwise>
+				<div class="row">
+					<div class="col-3">
+						<div class="text-center">
+							<div id="portraitPicture"></div>
+						</div>
+						<c:if test="${isAppadmin}">
+							<div id="portraitButton" class="text-center mt-2"
+								style="display: none; margin-bottom: 5px;">
+								<a href="#" onclick="javascript:deletePortrait();"
+									class="btn btn-secondary"><fmt:message
+										key="label.delete.portrait" /></a>
+							</div>
 						</c:if>
 					</div>
-					</div>
-					
-					<!--  Main panel. Do not show portrait area for new user. -->
-					<c:if test="${not empty userForm.userId}">
-				    <div class="row">
-					<div class="col-md-3">
-			    			<div class="text-center"><div id="portraitPicture" ></div></div>
-						<c:if test="${isAppadmin}">
-			    			<div id="portraitButton" class="text-center voffset10" style="display:none; margin-bottom: 5px;">
-			    			<a href="#" onclick="javascript:deletePortrait();" class="btn btn-primary btn-sm"><fmt:message key="label.delete.portrait" /></a></div>
-			    			</c:if>
-			    		</div>
-					<div class="col-md-9">
-					</c:if>
-					<c:if test="${empty userForm.userId}">
-				    <div class="row">
-					<div class="col-md-12">
-					</c:if>
-					
-						<table class="table table-condensed table-no-border">
-							<tr>
-								<td class="align-right"><fmt:message key="admin.user.login" />
-									*:</td>
-								<td><lams:errors path="login"/>
-								<form:input id="login" path="login"  maxlength="50"
-										cssClass="form-control"/></td>
-							</tr>
-							<c:if test="${empty userForm.userId}">
-							<tr>
-								<td class="align-right"><fmt:message key="admin.user.password" />
-									*:</td>
-								<td><lams:errors path="password"/>
-									<form:input type="password" path="password" 
-										maxlength="50" id="password" cssClass="form-control" /></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message
-										key="admin.user.password.confirm" /> *:</td>
-								<td><form:input type="password" path="password2" 
-										maxlength="50" id="password2" cssClass="form-control" /></td>
-							</tr>
-							</c:if>
-							<tr>
-								<td class="align-right"><fmt:message
-										key="admin.user.authentication.method" />:</td>
-								<td><form:select path="authenticationMethodId"
-										cssClass="form-control">
-										<c:forEach items="${authenticationMethods}" var="method">
-											<form:option value="${method.authenticationMethodId}">
-												<c:out value="${method.authenticationMethodName}" />
-											</form:option>
-										</c:forEach>
-									</form:select></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message key="admin.user.title" />:</td>
-								<td><form:input type="text" path="title" size="32" maxlength="32"
-										id="title" cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message
-										key="admin.user.first_name" /> *:</td>
-								<td><lams:errors path="firstName"/>
-									<form:input path="firstName" 
-										id="firstName" maxlength="128" cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message
-										key="admin.user.last_name" /> *:</td>
-								<td><lams:errors path="lastName"/>
-									<form:input path="lastName" 
-										id="lastName" maxlength="128" cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message key="admin.user.email" />
-									*:</td>
-								<td><lams:errors path="email"/>
-									<form:input path="email" maxlength="128"
-										cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message
-										key="admin.user.address_line_1" />:</td>
-								<td><form:input path="addressLine1" 
-										maxlength="64" cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message
-										key="admin.user.address_line_2" />:</td>
-								<td><form:input path="addressLine2" 
-										maxlength="64" cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message
-										key="admin.user.address_line_3" />:</td>
-								<td><form:input path="addressLine3" 
-										maxlength="64" cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right"><fmt:message key="admin.user.city" />:</td>
-								<td><form:input path="city"  maxlength="64"
-										cssClass="form-control"/></td>
-							</tr>
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.postcode" />:
-								</td>
-								<td>
-									<form:input path="postcode" size="10" maxlength="10" cssClass="form-control"/>
-								</td>
-							</tr>
-							<tr>
-								<td class="align-right">	
-									<fmt:message key="admin.user.state" />:
-								</td>
-								<td><form:input path="state"  maxlength="64"
-										cssClass="form-control" />
-								</td>
-							</tr>
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.country" />:
-								</td>
-								<td>
-									<form:select path="country" cssClass="form-control">
-										<form:option value="0"><fmt:message key="label.select.country" /></form:option>
-										<c:forEach items="${countryCodes}" var="countryCode">
-											<form:option value="${countryCode.key}">
+					<div class="col-6">
+			</c:otherwise>
+		</c:choose>
+
+		<form:form id="userForm" action="../usersave/saveUserDetails.do"
+			modelAttribute="userForm" method="post">
+			<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>" />
+			<form:hidden path="orgId" />
+			<form:hidden path="userId" />
+
+			<div class="mb-3">
+				<label class="form-label" for="login"> <fmt:message key="admin.user.login" />:&nbsp;<span
+					class="text-danger">*</span>
+				</label> <input id="login" name="login" class="form-control"
+					autocomplete="username" type="text" value="${userForm.login}"
+					maxlength="50" required> <small id="loginHelpBlock"
+					class="form-text text-muted"> <lams:errors path="login" />
+				</small>
+			</div>
+
+			<c:if test="${empty userForm.userId}">
+				<div class="mb-3">
+					<label class="form-label" for="password"> <fmt:message
+							key="admin.user.password" />:&nbsp;<span class="text-danger">*</span>
+					</label> <input id="password" name="password" class="form-control"
+						type="password" value="${userForm.password}" maxlength="50"
+						autocomplete="new-password" required> <small
+						id="passwordHelpBlock" class="form-text text-muted"> <lams:errors
+							path="password" />
+					</small>
+				</div>
+
+
+				<div class="mb-3">
+					<label class="form-label" for="password2"> <fmt:message
+							key="admin.user.password.confirm" />:&nbsp;<span
+						class="text-danger">*</span>
+					</label> <input id="password2" name="password2" class="form-control"
+						type="password" value="${userForm.password2}" maxlength="50"
+						autocomplete="new-password" required>
+				</div>
+			</c:if>
+
+			<div class="mb-3">
+				<label class="form-label" for="authenticationMethodId"> <fmt:message
+						key="admin.user.authentication.method" />:
+				</label>
+				<form:select id="authenticationMethodId"
+					path="authenticationMethodId" cssClass="form-select">
+					<c:forEach items="${authenticationMethods}" var="method">
+						<form:option value="${method.authenticationMethodId}">
+							<c:out value="${method.authenticationMethodName}" />
+						</form:option>
+					</c:forEach>
+				</form:select>
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="title"> <fmt:message key="admin.user.title" />:
+				</label> <input id="title" name="title" class="form-control" type="text"
+					value="${userForm.title}" size="32" maxlength="32"
+					autocomplete=honorific-prefix">
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="firstName"> <fmt:message
+						key="admin.user.first_name" />:&nbsp;<span class="text-danger">*</span>
+				</label> <input id="firstName" name="firstName" required
+					class="form-control" type="text" value="${userForm.firstName}"
+					maxlength="128" autocomplete="given-name"> <small
+					id="firstNameHelpBlock" class="form-text text-muted"> <lams:errors
+						path="firstName" />
+				</small>
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="lastName"> <fmt:message
+						key="admin.user.last_name" />:&nbsp;<span class="text-danger">*</span>
+				</label> <input id="lastName" name="lastName" class="form-control"
+					type="text" value="${userForm.lastName}" required maxlength="128"
+					autocomplete="family-name"> <small id="lastNameHelpBlock"
+					class="form-text text-muted"> <lams:errors path="lastName" />
+				</small>
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="email"> <fmt:message key="admin.user.email" />:&nbsp;<span
+					class="text-danger">*</span>
+				</label> <input id="email" name="email" class="form-control" type="text"
+					value="${userForm.email}" maxlength="128" required
+					autocomplete="email"> <small id="emailHelpBlock"
+					class="form-text text-muted"> <lams:errors path="email" />
+				</small>
+			</div>
+
+
+			<div class="mb-3">
+				<label class="form-label" for="addressLine1"> <fmt:message
+						key="admin.user.address_line_1" />:
+				</label> <input id="addressLine1" name="addressLine1" class="form-control"
+					type="text" value="${userForm.addressLine1}" maxlength="64"
+					autocomplete="address-line1">
+			</div>
+
+
+			<div class="mb-3">
+				<label class="form-label" for="addressLine2"> <fmt:message
+						key="admin.user.address_line_2" />:
+				</label> <input id="addressLine2" name="addressLine2" class="form-control"
+					type="text" value="${userForm.addressLine2}" maxlength="64"
+					autocomplete="address-line2">
+
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="addressLine3"> <fmt:message
+						key="admin.user.address_line_3" />:
+				</label> <input id="addressLine3" name="addressLine3" class="form-control"
+					type="text" value="${userForm.addressLine3}" maxlength="64"
+					autocomplete="address-line3">
+
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="city"> <fmt:message key="admin.user.city" />:
+				</label> <input id="city" name="city" class="form-control" type="text"
+					value="${userForm.city}" maxlength="64"
+					autocomplete="address=line4">
+
+
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="postcode"> <fmt:message
+						key="admin.user.postcode" />:
+				</label> <input id="postcode" name="postcode" class="form-control"
+					type="text" value="${userForm.postcode}"
+					value="${userForm.postcode}" maxlength="10">
+
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="state"> <fmt:message key="admin.user.state" />:
+				</label>
+				<form:input path="state" maxlength="64" cssClass="form-control" />
+
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="country"> <fmt:message key="admin.user.country" />:&nbsp;<span
+					class="text-danger">*</span>
+				</label>
+				<form:select path="country" cssClass="form-select">
+					<form:option value="0">
+						<fmt:message key="label.select.country" />
+					</form:option>
+					<c:forEach items="${countryCodes}" var="countryCode">
+						<form:option value="${countryCode.key}">
 												${countryCode.value}
 											</form:option>
-										</c:forEach>
-									</form:select>
-								</td>
-							</tr>
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.day_phone" />:
-								</td>
-								<td>
-									<form:input path="dayPhone"  maxlength="64" cssClass="form-control"/>
-								</td>
-							</tr>
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.evening_phone" />:
-								</td>
-								<td>
-									<form:input path="eveningPhone" maxlength="64" cssClass="form-control"/>		
-								</td>
-							</tr>
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.mobile_phone" />:
-								</td>
-								<td>
-									<form:input path="mobilePhone" maxlength="64" cssClass="form-control"/>
-								</td>
-							</tr>
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.fax" />:
-								</td>
-								<td>
-									<form:input path="fax"  maxlength="64" cssClass="form-control"/>
-								</td>
-							</tr>
-			
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.organisation.locale" />:
-								</td>
-								<td>
-									<form:select path="localeId" cssClass="form-control">
-										<c:forEach items="${locales}" var="locale">
-											<form:option value="${locale.localeId}">
-												<c:out value="${locale.description}" />
-											</form:option>
-										</c:forEach>
-									</form:select>
-								</td>
-							</tr>
-			
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.time.zone" />:
-								</td>
-								<td>
-									<form:select path="timeZone" cssClass="form-control">
-										<c:forEach items="${timezoneDtos}" var="timezoneDto">
-											<form:option value="${timezoneDto.timeZoneId}">
+					</c:forEach>
+				</form:select>
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="dayPhone"> <fmt:message
+						key="admin.user.day_phone" />:
+				</label> <input id="dayPhone" name="dayPhone" class="form-control"
+					type="text" value="${userForm.dayPhone}" maxlength="64"
+					autocomplete="tel">
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="eveningPhone"> <fmt:message
+						key="admin.user.evening_phone" />:
+				</label> <input id="eveningPhone" name="eveningPhone" class="form-control"
+					type="text" value="${userForm.eveningPhone}" maxlength="64"
+					autocomplete="tel">
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="mobilePhone"> <fmt:message
+						key="admin.user.mobile_phone" />:
+				</label> <input id="mobilePhone" name="mobilePhone" class="form-control"
+					type="text" value="${userForm.mobilePhone}" maxlength="64"
+					autocomplete="tel">
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="localeId"> <fmt:message
+						key="admin.organisation.locale" />:
+				</label>
+				<form:select path="localeId" cssClass="form-select">
+					<c:forEach items="${locales}" var="locale">
+						<form:option value="${locale.localeId}">
+							<c:out value="${locale.description}" />
+						</form:option>
+					</c:forEach>
+				</form:select>
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="timeZone"> <fmt:message
+						key="admin.user.time.zone" />:
+				</label>
+				<form:select path="timeZone" cssClass="form-select">
+					<c:forEach items="${timezoneDtos}" var="timezoneDto">
+						<form:option value="${timezoneDto.timeZoneId}">
 												${timezoneDto.timeZoneId} - ${timezoneDto.displayName}
 											</form:option>
-										</c:forEach>
-									</form:select>
-								</td>
-							</tr>
+					</c:forEach>
+				</form:select>
+			</div>
+
+			<div class="mb-3">
+				<label class="form-label" for="userTheme"> <fmt:message key="label.theme" />:
+				</label>
+				<form:select path="userTheme" class="form-select">
+					<c:forEach items="${themes}" var="theme">
+						<form:option value="${theme.themeId}">${theme.name}</form:option>
+					</c:forEach>
+				</form:select>
+			</div>
+
+			<div class="mb-3 form-check ml-3">
+				<form:checkbox cssClass="form-check-input" path="changePassword"
+					value="true" id="changePassword" />
+				<label class="form-check-label" for="changePassword"> <fmt:message
+						key="admin.user.change.password" />
+				</label>
+			</div>
+
+
+			<c:if test="${canSetTwoFactorAuthentication}">
+				<div class="mb-3 form-check ml-3">
+					<form:checkbox cssClass="form-check-input"
+						id="twoFactorAuthenticationEnabled"
+						path="twoFactorAuthenticationEnabled" value="true" />
+					<label class="form-check-label"
+						for="twoFactorAuthenticationEnabled"> <fmt:message
+							key="label.2FA.property.enable" />
+					</label>:
+				</div>
+			</c:if>
+
+			<c:if test="${not empty createDate}">
+				<div class="mb-3">
+					<label> <fmt:message key="admin.user.create.date" />
+					</label>:
+					<lams:Date value="${createDate}" />
+				</div>
+			</c:if>
+
+			</div>
+			</div>
 			
-							<tr>
-								<td class="align-right">
-									<fmt:message key="label.theme" />:
-								</td>
-								<td>
-									<form:select path="userTheme" class="form-control">
-										<c:forEach items="${themes}" var="theme">
-											<form:option value="${theme.themeId}">${theme.name}</form:option>
-										</c:forEach>
-									</form:select>
-								</td>
-							</tr>
-							
-							<tr>
-								<td class="align-right">
-									<fmt:message key="admin.user.change.password" />:
-								</td>
-								<td>
-									<form:checkbox path="changePassword" value="true" id="changePassword"  />
-								</td>
-							</tr>
-							
-							<c:if test="${canSetTwoFactorAuthentication}">
-								<tr>
-									<td class="align-right">
-										<fmt:message key="label.2FA.property.enable" />:
-									</td>
-									<td>
-										<form:checkbox path="twoFactorAuthenticationEnabled" value="true"  />
-									</td>
-								</tr>
-							</c:if>
-							
-							<c:if test="${not empty userForm.createDate}">
-								<tr>
-									<td class="align-right">
-										<fmt:message key="admin.user.create.date" />:
-									</td>
-									<td>
-										<lams:Date value="${userForm.createDate}"/>
-									</td>
-								</tr>
-							</c:if>
-				
-				
-						</table>
+			
+			<c:if test="${isAppadmin}">
+				<div class="row">
+					<div class="col-6 offset-3 text-end">
+						<c:if test="${isSysadmin and not empty userForm.userId}">
+							<a	href="<lams:LAMSURL/>admin/userChangePass.jsp?userId=${userForm.userId}&login=${userForm.login}"
+								class="btn btn-primary float-start">
+									<fmt:message key="admin.user.changePassword" />
+							</a>
+						</c:if>
+		
+						<a href="javascript:history.back();" class="btn btn-secondary">
+							<fmt:message key="admin.cancel" />
+						</a> <input type="submit" id="saveButton"
+							class="btn btn-primary"
+							value="<fmt:message key="admin.save" />" />
 					</div>
-					</div>
-					<c:if test="${isAppadmin}">
-						<div class="row">
-						<div class="col-md-12">
-							<c:if test="${isSysadmin and not empty userForm.userId}">
-								<div class="pull-left">
-								<a href="<lams:LAMSURL/>admin/userChangePass.jsp?userId=${userForm.userId}&login=${userForm.login}" class="btn btn-primary"><fmt:message key="admin.user.changePassword" /></a>
-								</div>
-							</c:if>
-						
-							<div class="pull-right">
-								<a href="javascript:history.back();" class="btn btn-default"> <fmt:message key="admin.cancel" /> </a>
-								<input type="submit" id="saveButton" class="btn btn-primary loffset5" value="<fmt:message key="admin.save" />" />
-							</div>
+				</div>
+			</c:if>
+
+
+		</form:form>
+		<!-- End of panel -->
+
+
+		<c:if test="${not empty globalRoles || not empty userOrgRoles}">
+
+			<div class="row">
+				<div class="col-6 offset-3">
+					<h4 class="mt-3">
+						<fmt:message key="admin.user.roles" />
+					</h4>
+
+
+					<c:if test="${not empty globalRoles}">
+						<div class="ml-2">
+							<h3>
+								<fmt:message key="label.global.roles" />
+							</h3>
+							<ul style="text-indent: 2em;">
+								<c:forEach var="role" items="${globalRoles.roles}">
+									<li><fmt:message>role.<lams:role
+												role="${role}" />
+										</fmt:message></li>
+								</c:forEach>
+							</ul>
 						</div>
-						</div>
 					</c:if>
-					
-					</div>
-				</div> <!-- End of panel -->
-			
-			
-				<c:if test="${not empty globalRoles || not empty userOrgRoles}">
-			
-					<div class="panel panel-default voffset5">
-						<div class="panel-heading">
-							<span class="panel-title"> <fmt:message
-									key="admin.organisation" />
-							</span>
-						</div>
-			
-						<table class="table table-no-border">
-			
-							<c:if test="${not empty globalRoles}">
-								<tr>
-									<td>
-										<table class="table table-striped table-condensed">
-											<tr>
-												<th><fmt:message key="label.global.roles" />:</th>
-											</tr>
-											<tr>
-												<td>
-													<c:forEach var="role" items="${globalRoles.roles}">
-														<fmt:message>role.<lams:role role="${role}" />
-														</fmt:message>&nbsp;
-													</c:forEach>
-												</td>
-											</tr>
-										</table>
-									</td>
-								</tr>
-							</c:if>
-			
-							<c:if test="${not empty userOrgRoles}">
-								<tr>
-									<td>
-										<table id="tableRoles" class="table table-striped table-condensed">
-											<tr>
-												<th><fmt:message key="label.member.of" />:</th>
-												<th><fmt:message key="label.with.roles" />:</th>
-											</tr>
-											
-											<c:forEach var="userOrgRole" items="${userOrgRoles}">
+
+					<c:if test="${not empty userOrgRoles}">
+						<div class="ml-2">
+							<h5>
+								<fmt:message key="admin.organisation" />
+							</h5>
+
+							<table id="tableRoles" class="table table-striped table-bordered">
+								<thead>
+									<tr>
+										<th><fmt:message key="label.member.of" />:</th>
+										<th><fmt:message key="label.with.roles" />:</th>
+									</tr>
+								</thead>
+								<tbody>
+									<c:forEach var="userOrgRole" items="${userOrgRoles}">
+										<tr>
+											<td><c:out value="${userOrgRole.orgName}" /></td>
+											<td><c:forEach var="role" items="${userOrgRole.roles}">
+													<fmt:message>role.<lams:role role="${role}" />
+													</fmt:message>&nbsp;
+														</c:forEach></td>
+										</tr>
+
+										<c:if test="${not empty userOrgRole.childDTOs}">
+											<c:forEach var="child" items="${userOrgRole.childDTOs}">
 												<tr>
-													<td><c:out value="${userOrgRole.orgName}" /></td>
-													<td><c:forEach var="role" items="${userOrgRole.roles}">
+													<td><span class="ml-3 font-italic"><c:out
+																value="${child.orgName}" /></span></td>
+													<td><c:forEach var="role" items="${child.roles}">
 															<fmt:message>role.<lams:role role="${role}" />
 															</fmt:message>&nbsp;
-														</c:forEach>
-													</td>
+																</c:forEach></td>
 												</tr>
-												
-												<c:if test="${not empty userOrgRole.childDTOs}">
-													<c:forEach var="child" items="${userOrgRole.childDTOs}">
-														<tr>
-															<td><i class="fa fa-square"></i>&nbsp;<c:out
-																	value="${child.orgName}" /></td>
-															<td><c:forEach var="role" items="${child.roles}">
-																	<fmt:message>role.<lams:role role="${role}" />
-																	</fmt:message>&nbsp;
-																</c:forEach>
-															</td>
-														</tr>
-													</c:forEach>
-												</c:if>
 											</c:forEach>
-											
-										</table>
-									</td>
-								</tr>
-							</c:if>
-			
-						</table>
-					</div>
-				</c:if>
-			
-			</form:form>
+										</c:if>
+									</c:forEach>
+								</tbody>
+							</table>
+						</div>
+					</c:if>
+				</div>
+			</div>
+		</c:if>
 
-	</lams:Page>
+
+	</lams:Page5>
 </body>
 </lams:html>
Index: lams_admin/web/user/basiclist.jsp
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/user/basiclist.jsp	(.../basiclist.jsp)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_admin/web/user/basiclist.jsp	(.../basiclist.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -1,7 +1,5 @@
 <%@ include file="/taglibs.jsp"%>
 
-<lams:css/>
-
 <c:forEach var="user" items="${users}">
-	<li id="<c:out value="${user.userId}"/>"><c:out value="${user.login}" /> (<c:out value="${user.firstName}" />&nbsp;<c:out value="${user.lastName}" />) - <c:out value="${user.email}" /></li>
+	<li role="presentation" id="<c:out value="${user.userId}"/>"><c:out value="${user.login}" /> (<c:out value="${user.firstName}" />&nbsp;<c:out value="${user.lastName}" />) - <c:out value="${user.email}" /></li>
 </c:forEach>
Index: lams_admin/web/userChangePass.jsp
===================================================================
diff -u -r5450d5a77ffff8d5c315afaef1db4dc96ecfde6a -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/userChangePass.jsp	(.../userChangePass.jsp)	(revision 5450d5a77ffff8d5c315afaef1db4dc96ecfde6a)
+++ lams_admin/web/userChangePass.jsp	(.../userChangePass.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <%@ include file="/taglibs.jsp"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 <%@ page import="org.lamsfoundation.lams.util.Configuration"%>
@@ -8,13 +9,21 @@
 <c:set var="mustHaveLowercase"><%=Configuration.get(ConfigurationKeys.PASSWORD_POLICY_LOWERCASE)%></c:set>
 <c:set var="mustHaveSymbols"><%=Configuration.get(ConfigurationKeys.PASSWORD_POLICY_SYMBOLS)%></c:set>
 
+<lams:html>
+<lams:head>
+
+	<c:set var="title"><fmt:message key="admin.user.changePassword"/></c:set>
+	
+	<title>${title}</title>
+	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+
 <lams:css/>
 
 <%-- javascript --%>
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.validate.js"></script>
-<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 <script type="text/javascript">
      var mustHaveUppercase = ${mustHaveUppercase},
      mustHaveNumerics  = ${mustHaveNumerics},
@@ -38,10 +47,6 @@
 							errorClass : 'help-block',
 							//  validation rules
 							rules : {
-								login : {
-									required: true,
-									maxlength : 50
-								},
 								password : {
 									required: true,
 									minlength : <c:out value="${minNumChars}"/>,
@@ -81,51 +86,44 @@
 
 	});
 </script>
+</lams:head>
 
-
 <body class="stripes">
-	<form id="userForm" modelAttribute="userForm" action="usersave/changePass.do" method="post">
-		<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
-		<input type="hidden" name="userId" value="${param.userId}" />
-		<div class="panel panel-default">
-			<div
-				class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
-				<div class="panel voffset20">
+	<%-- Build breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, <lams:LAMSURL/>admin/orgmanage.do?org=1 | <fmt:message key="admin.course.manage" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, <lams:LAMSURL/>admin/usersearch.do | <fmt:message key="admin.user.management"/></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, <lams:LAMSURL/>admin/user/edit.do?userId=${param.userId} | <fmt:message key="admin.user.edit"/></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, . | <fmt:message key="admin.user.changePassword" /></c:set>	
 
-					<div class="panel panel-default">
+<lams:Page5 type="admin" title="${title}" formID="userForm" breadcrumbItems="${breadcrumbItems}">	
 
-						<div class="panel-heading">
-							<div class="panel-title">
-								<fmt:message key="admin.user.edit" />
-							</div>
-						</div>
-					</div>
-					<div class="panel-body">
+
 						<lams:Alert type="info" id="passwordConditions" close="false">
 							<fmt:message key='label.password.must.contain' />:
-				<ul class="list-unstyled" style="line-height: 1.2">
-								<li><span class="fa fa-check"></span> <fmt:message
+		<ul class="list-unstyled ml-2" style="line-height: 1.2">
+			<li><span class="fa fa-check"  aria-hidden="true"></span> <fmt:message
 										key='label.password.min.length'>
 										<fmt:param value='${minNumChars}' />
 									</fmt:message></li>
 
 								<c:if test="${mustHaveUppercase}">
-									<li><span class="fa fa-check"></span> <fmt:message
+				<li><span class="fa fa-check" aria-hidden="true"></span> <fmt:message
 											key='label.password.must.ucase' /></li>
 								</c:if>
 								<c:if test="${mustHaveLowercase}">
-									<li><span class="fa fa-check"></span> <fmt:message
+						<li><span class="fa fa-check aria-hidden="true""></span> <fmt:message
 											key='label.password.must.lcase' /></li>
 								</c:if>
 
 								<c:if test="${mustHaveNumerics}">
-									<li><span class="fa fa-check"></span> <fmt:message
+				<li><span class="fa fa-check" aria-hidden="true"></span> <fmt:message
 											key='label.password.must.number' /></li>
 								</c:if>
 
 
 								<c:if test="${mustHaveSymbols}">
-									<li><span class="fa fa-check"></span> <fmt:message
+				<li><span class="fa fa-check" aria-hidden="true"></span> <fmt:message
 											key='label.password.must.symbol' /></li>
 								</c:if>
 								
@@ -138,33 +136,39 @@
 							</ul>
 						</lams:Alert>
 						
+	<div class="row">
+		<div class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
+
+			<form id="userForm" modelAttribute="userForm" action="usersave/changePass.do" method="post">
+				<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
+				<input type="hidden" name="userId" value="${param.userId}" />
+							
 						<lams:errors path="password"/>
 						
 						<div>
-							<label for="login"><fmt:message key="admin.user.login" />:</label>
-							<span>${param.login}</span>
+					<h2><fmt:message key="admin.user.login" />:
+					<span id="login"><c:out value="${param.login}" escapeXml="true"/></span></h2>
 						</div>
 						<div class="form-group">
-							<label for="password"><fmt:message
-									key="admin.user.password" />:</label> <input type="password"
-								name="password" maxlength="50" id="password"
-								class="form-control" />
-						</div>
-						<div class="form-group">
-							<label for="password2"><fmt:message
-									key="admin.user.password.confirm" />:</label> <input type="password"
-								name="password2" maxlength="50" id="password2"
-								class="form-control" />
-						</div>
+												<label for="password"><fmt:message
+							key="admin.user.password" />:</label> 
+					<input type="password" name="password" maxlength="50" id="password" minlength="${minNumChars}"
+						class="form-control  form-control-sm" required >
+				</div>
+				<div class="form-group">
+					<label for="password2"><fmt:message
+							key="admin.user.password.confirm" />:</label> 
+					<input type="password" name="password2" maxlength="50"  minlength="${minNumChars}" id="password2" class="form-control form-control-sm" required>
+				</div>
 						<div class="pull-right">
 							<a href="javascript:history.back();" class="btn btn-default">
 								<fmt:message key="admin.cancel" />
-							</a> <input type="submit" id="saveButton" class="btn btn-primary"
-								value="<fmt:message key="admin.save" />" />
+					</a> <input type="submit" id="saveButton" class="btn btn-primary" value="<fmt:message key="admin.save" />" />
 						</div>
+			</form>		
 					</div>
 				</div>
-			</div>
-		</div>
-	</form>
+	
+</lams:Page5>	
 </body>
+</lams:html>
Index: lams_admin/web/usersearchlist.jsp
===================================================================
diff -u -rd13f92ca7aa2afe69ccfc88656fa5e1afe8d5f31 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_admin/web/usersearchlist.jsp	(.../usersearchlist.jsp)	(revision d13f92ca7aa2afe69ccfc88656fa5e1afe8d5f31)
+++ lams_admin/web/usersearchlist.jsp	(.../usersearchlist.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -13,9 +13,9 @@
 
 	<lams:css/>
 	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme5.css" type="text/css" media="screen">
 	
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
+	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap5.css">
 	<link type="text/css" href="${lams}css/jquery.tablesorter.pager.css" rel="stylesheet">
 	<style>
 		#tablesorter thead .disabled {
@@ -27,7 +27,7 @@
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
-	<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/portrait.js" ></script>
 	<script type="text/javascript">
 	  	$(document).ready(function(){
@@ -86,25 +86,25 @@
 								rows += 	orgData["lastName"];
 								rows += '</td>';
 	
-								rows += '<td>';
+								rows += '<td class="d-none d-lg-table-cell">';
 								rows += 	orgData["email"];
 								rows += '</td>';
 								
-								rows += '<td>';
-								rows +=		'<form style="display: inline-block;" id="delete_' + orgData["userId"] +'" method="post" action="/lams/admin/user/remove.do"><input type="hidden" name="userId" value="' + orgData["userId"] + '"/><input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/><button class="btn btn-danger btn-xs" type="submit"><i class="fa fa-trash"></i> <span class="hidden-xs hidden-sm"><fmt:message key="admin.user.delete"/></span></button></form>';
+								rows += '<td class="text-center">';
+								rows +=		'<form style="display: inline-block;" id="delete_' + orgData["userId"] +'" method="post" action="/lams/admin/user/remove.do"><input type="hidden" name="userId" value="' + orgData["userId"] + '"/><input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/><button class="btn btn-outline-danger btn-sm" type="submit"><i class="fa fa-trash" title="<fmt:message key="admin.user.delete"/>"></i></button></form>';
 								rows += 	'&nbsp;';
-								rows +=     '<form style="display: inline-block;" id="delete_' + orgData["userId"] +'" method="post" action="/lams/admin/user/edit.do"><input type="hidden" name="userId" value="' + orgData["userId"] + '"/><input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/><button class="btn btn-primary btn-xs" type="submit"><i class="fa fa-pencil"></i> <span class="hidden-xs hidden-sm"><fmt:message key="admin.edit"/></span></button></form>';
+								rows +=     '<form style="display: inline-block;" id="edit_' + orgData["userId"] +'" method="post" action="/lams/admin/user/edit.do"><input type="hidden" name="userId" value="' + orgData["userId"] + '"/><input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/><button class="btn btn-outline-primary btn-sm" type="submit"><i class="fa fa-pencil" title="<fmt:message key="admin.edit"/>"></i></button></form>';
 								rows += 	'&nbsp;';
 								<c:if test="${loginAsEnable}">
-								rows += 	'<a title="<fmt:message key="label.login.as"/>" href="<lams:LAMSURL/>loginas.do?login=' + orgData["login"] + '" id="loginAs' + orgData["userId"] +'">';
-								rows += 		'<button type="button" class="btn btn-primary btn-xs"><i class="fa fa-sign-in"></i><span class="hidden-xs hidden-sm"> <fmt:message key="label.login.as"/></span></button>';
+								rows += 	'<a title="<fmt:message key="label.login.as"/>" href="<lams:LAMSURL/>loginas.do?login=' + orgData["login"] + '">';
+								rows += 		'<button type="button" class="btn btn-outline-primary btn-sm" title="<fmt:message key="label.login.as"/>"><i class="fa fa-sign-in"></i></button>';
 								rows += 	'</a>';
 								rows += 	'&nbsp;';
 								</c:if>
 	
 								if (${(useInternalSMTPServer || not empty smtpServer)} && orgData["email"] != null && orgData["email"] != "") {
 								rows += 	'<a title="<fmt:message key="label.email"/>" href="<lams:LAMSURL/>emailUser/composeMail.do?returnUrl=/lams/admin/usersearch.do&userID=' + orgData["userId"] + '">';
-								rows += 		'<button type="button" class="btn btn-primary btn-xs"><i class="fa fa-envelope"></i> <span class="hidden-xs hidden-sm"><fmt:message key="label.email"/></span></button>';
+								rows += 		'<button type="button" class="btn btn-outline-primary btn-sm"><i class="fa fa-envelope"></i> <span class="hidden-xs hidden-sm"><fmt:message key="label.email"/></span></button>';
 								rows += 	'</a>';
 								}
 								
@@ -142,39 +142,49 @@
     
 <body class="stripes">
 
-	<lams:Page type="admin" title="${title}">
-		<p><a href="<lams:LAMSURL/>admin/orgmanage.do?org=1" class="btn btn-default"><fmt:message key="admin.course.manage" /></a>
-		<a href="<lams:LAMSURL/>admin/appadminstart.do" class="btn btn-default loffset5"><fmt:message key="appadmin.maintain" /></a></p>
+	<%-- Build the breadcrumb --%>
+	<c:set var="breadcrumbItems"><lams:LAMSURL/>admin/appadminstart.do | <fmt:message key="appadmin.maintain" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems}, <lams:LAMSURL/>admin/orgmanage.do?org=1 | <fmt:message key="admin.course.manage" /></c:set>
+	<c:set var="breadcrumbItems">${breadcrumbItems},. | ${title}</c:set>
+
+
+	<lams:Page5 type="admin" title="${title}" breadcrumbItems="${breadcrumbItems}">
+	
+		<p><input class="btn btn-primary btn-sm" type="button" value="<fmt:message key="admin.user.create"/>" onclick="javascript:document.location='user/edit.do'" />
 		
-		<p><input class="btn btn-default" type="button" value="<fmt:message key="admin.user.create"/>" onclick="javascript:document.location='user/edit.do'" />
-		
 		<span class="pull-right">
-			<fmt:message key="admin.search" />:&nbsp;<input class="search form-control form-control-inline" type="search" name="term" data-column="1">
+			<label for="search"><fmt:message key="admin.search" /></label>:&nbsp;<input class="search form-control form-control-sm form-control-inline" type="search" id="search" name="term" data-column="1">
 		</span>
 		</p>
 		
 		<lams:TSTable numColumns="6"> 
 			<th width="3%">
 				<fmt:message key="admin.user.userid"/>
 			</th>
-			<th width="15%" align="center">
+			<th>
 				<fmt:message key="admin.user.login"/>
 			</th>
-			<th width="15%" align="center">
+			<th>
 				<fmt:message key="admin.user.first_name"/>
 			</th>
-			<th width="15%" align="center">
+			<th>
 				<fmt:message key="admin.user.last_name"/>
 			</th>
-			<th width="15%" align="center">
+			<th class="d-none d-lg-table-cell">
 				<fmt:message key="admin.user.email"/>
 			</th>
-			<th width="20%" align="center">
+			<th class="text-center">
 				<fmt:message key="admin.user.actions"/>
 			</th>
 		</lams:TSTable>			
+		<hr>
+		<div class="pull-right">
+			<a href="javascript:history.go(-1)" class="btn btn-outline-secondary btn-sm">
+				<fmt:message key="admin.cancel"/>
+			</a>
+		</div>		
 				
-	</lams:Page>
+	</lams:Page5>
 
 </body>
 </lams:html>
Index: lams_central/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_central/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_central/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_central/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_central/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_central/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_central/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_central/web/css/components.css
===================================================================
diff -u -r1024255b15cb1a0dcb4722623c6023ce6c5c8378 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/css/components.css	(.../components.css)	(revision 1024255b15cb1a0dcb4722623c6023ce6c5c8378)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -1,15 +1,5 @@
-@font-face {
-	font-family: mont-bold;
-	src: url(/lams/includes/fonts/FontsFree-Net-Mont-Bold.ttf);
-}
-
-@font-face {
-	font-family: mont-regular;
-	src: url(/lams/includes/fonts/FontsFree-Net-Mont1.ttf);
-}
-
 body.component {
-	font-family: mont-regular, sans-serif;
+	font-family: Arial, sans-serif;
 	background-color: var(--lams-background-gray);
 }
 
@@ -230,52 +220,86 @@
   border-radius: 50%;
 }
 
-.component-page-wrapper {
-	min-height: 100vh;
-	border-radius: 2rem;
-	overflow: hidden;
+body.component .cke_textarea_inline {
+  /* From bootstrap form-control */
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: var(--bs-white);
+  background-image: none;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  border: thin solid var(--bs-secondary);
+  overflow: hidden;
+  /* keeps floating objects within ckeditor area */
+  /* LAMS -  min height is set in ckconfig_custom.js but keep the default here too so that most fields 
+   * are the right size and only the ones where the height is overridden does the size change.  */
+  min-height: 60px;
+  -webkit-appearance: textfield;
 }
+body.component .cke_textarea_inline:focus {
+  border-color: var(--bs-blue);
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
 
-.component-page-wrapper .btn {
+body.component .cke_float {
+  width: 70% !important;
+}
+
+/** Overwrite CKEditor's default CSS, so that content in an editor is displayed the same way as in real life */
+body.component .cke_widget_inline {
+  display: block !important;
+}
+
+body.component .btn {
 	border-radius: 1.0rem;
 }
 
-.component-page-wrapper i.fa[role="button"] {
+body.component i.fa[role="button"] {
 	cursor: pointer;
 }
 
-.component-page-wrapper table.table thead th {
+body.component table.table thead th {
 	border: none;
 	border-bottom: 2px solid var(--bs-blue);
 }
 
-.component-page-wrapper table.table tbody td,
-.component-page-wrapper table.table tbody th,
-.ui-jqgrid-bdiv .ui-row-ltr.jqgrow td {
+body.component table.table tbody td,
+body.component table.table tbody th,
+body.component .ui-jqgrid-bdiv .ui-row-ltr.jqgrow td {
 	border: none;
 	border-bottom: 2px solid var(--bs-gray-200) !important;
 }
 
-.component-page-wrapper .card-header {
+body.component .card-header {
 	background-color: var(--bs-gray-200);
 }
 
-.component-page-wrapper input:focus,
-.component-page-wrapper button:focus,
-.component-page-wrapper textarea:focus {
+body.component input:focus,
+body.component button:focus,
+body.component textarea:focus {
 	outline: none;
 }
 
-.component-page-wrapper input::placeholder {
+body.component input::placeholder {
 	opacity: 0.7;
 }
 
-.component-page-wrapper a:hover,
-.component-page-wrapper a:focus {
+body.component a:hover,
+body.component a:focus {
 	text-decoration: none;
 }
 
-.component-page-wrapper .switch input {
+body.component .switch input {
 	position: absolute;
 	height: 1px;
 	width: 1px;
@@ -287,7 +311,7 @@
 	padding: 0;
 }
 
-.component-page-wrapper .switch input ~ label {
+body.component .switch input ~ label {
 	position: relative;
 	min-width: calc(calc(2.375rem * .8)* 2);
 	border-radius: calc(2.375rem * .8);
@@ -302,8 +326,8 @@
 	margin-bottom: 0;
 }
 
-.component-page-wrapper .switch input ~ label::before,
-.component-page-wrapper .switch input ~ label::after {
+body.component .switch input ~ label::before,
+body.component .switch input ~ label::after {
 	content: '';
 	position: absolute;
 	top: 0;
@@ -313,14 +337,14 @@
 	display: block;
 }
 
-.component-page-wrapper .switch input ~ label::before {
+body.component .switch input ~ label::before {
 	right: 0;
 	background-color: var(--bs-gray);
 	border-radius: calc(2.375rem * .8);
 	transition: 0.2s all;
 }
 
-.component-page-wrapper .switch input ~ label::after {
+body.component .switch input ~ label::after {
 	top: 2px;
 	left: 2px;
 	width: calc(calc(2.375rem * .8) - calc(2px * 2));
@@ -330,70 +354,76 @@
 	transition: 0.2s all;
 }
 
-.component-page-wrapper .switch input:checked ~ label::before {
+body.component .switch input:checked ~ label::before {
 	background-color: var(--bs-green);
 }
 
-.component-page-wrapper .switch input:checked ~ label::after {
+body.component .switch input:checked ~ label::after {
 	margin-left: calc(2.375rem * .8);
 }
 
-.component-page-wrapper .switch input:focus ~ label::before {
+body.component .switch input:focus ~ label::before {
 	outline: none;
 	box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
 }
 
-.component-page-wrapper .switch input:disabled ~ label {
+body.component .switch input:disabled ~ label {
 	color: #868e96;
 	cursor: not-allowed;
 }
 
-.component-page-wrapper .switch input:disabled ~ label::before {
+body.component .switch input:disabled ~ label::before {
 	background-color: #e9ecef;
 }
 
-.component-page-wrapper .switch.switch-sm {
+body.component .switch.switch-sm {
 	font-size: 1rem;
 }
 
-.component-page-wrapper .switch.switch-sm input ~ label {
+body.component .switch.switch-sm input ~ label {
 	min-width: calc(calc(1.9375rem * .8)* 2);
 	height: calc(1.9375rem * .8);
 	line-height: calc(1.9375rem * .8);
 	text-indent: calc(calc(calc(1.9375rem * .8)* 2)+ .5rem);
 }
 
-.component-page-wrapper .switch.switch-sm input ~ label::before {
+body.component .switch.switch-sm input ~ label::before {
 	width: calc(calc(1.9375rem * .8)* 2);
 }
 
-.component-page-wrapper .switch.switch-sm input ~ label::after {
+body.component .switch.switch-sm input ~ label::after {
 	width: calc(calc(1.9375rem * .8) - calc(2px * 2));
 	height: calc(calc(1.9375rem * .8) - calc(2px * 2));
 }
 
-.component-page-wrapper .switch.switch-sm input:checked ~ label::after {
+body.component .switch.switch-sm input:checked ~ label::after {
 	margin-left: calc(1.9375rem * .8);
 }
 
-.component-page-wrapper .switch+.switch {
+body.component .switch+.switch {
 	margin-left: 1rem;
 }
 
-.component-page-wrapper .editable-click,
-.component-page-wrapper a.editable-click,
-.component-page-wrapper a.editable-click:hover {
+body.component .editable-click,
+body.component a.editable-click,
+body.component a.editable-click:hover {
 	border-bottom: none;
 }
 
-.component-page-wrapper .card.ui-jqgrid-view {
+body.component .card.ui-jqgrid-view {
 	overflow-x: hidden;
 }
 
-.component-page-wrapper .ui-jqgrid.ui-jqgrid-bootstrap .ui-search-toolbar .ui-search-table td {
+body.component .ui-jqgrid.ui-jqgrid-bootstrap .ui-search-toolbar .ui-search-table td {
 	border-bottom: none !important;
 }
 
+.component-page-wrapper {
+	min-height: 100vh;
+	border-radius: 2rem;
+	overflow: hidden;
+}
+
 .component-page-wrapper .component-sidebar {
 	position: absolute;
 	height: initial;
Index: lams_central/web/css/inlineeditor.css
===================================================================
diff -u
--- lams_central/web/css/inlineeditor.css	(revision 0)
+++ lams_central/web/css/inlineeditor.css	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,17 @@
+/* Error: Undefined variable.
+ *    ,
+ * 12 |   border: $border-thin-default;
+ *    |           ^^^^^^^^^^^^^^^^^^^^
+ *    '
+ *   web\css\inlineeditor.scss 12:11  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Undefined variable.\a    \2577 \a 12 \2502    border: $border-thin-default;\d\a    \2502            ^^^^^^^^^^^^^^^^^^^^\a    \2575 \a   web\\css\\inlineeditor.scss 12:11  root stylesheet";
+}
Index: lams_central/web/css/jquery.tablesorter.pager5.css
===================================================================
diff -u -r0e00d2f9315bed9d5fcabd171807dee3ad8c557b -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/css/jquery.tablesorter.pager5.css	(.../jquery.tablesorter.pager5.css)	(revision 0e00d2f9315bed9d5fcabd171807dee3ad8c557b)
+++ lams_central/web/css/jquery.tablesorter.pager5.css	(.../jquery.tablesorter.pager5.css)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -1,5 +1,39 @@
-.tablesorter-pager{padding:5px}td.tablesorter-pager{background-color:#e6eeee;margin:0}.tablesorter-pager img{vertical-align:middle;margin-right:2px;cursor:pointer}.tablesorter-pager .pagedisplay{padding:0 5px 0 5px;width:auto;white-space:nowrap;text-align:center}.tablesorter-pager select{margin:0;padding:0}.tablesorter-pager.disabled{display:none}.tablesorter-pager .disabled{opacity:.5;cursor:default}
+.tablesorter-pager {
+	padding: 5px;
+}
 
+td.tablesorter-pager {
+	background-color: #e6eeee;
+	margin: 0
+}
+
+.tablesorter-pager img {
+	vertical-align: middle;
+	margin-right: 2px;
+	cursor: pointer
+}
+
+.tablesorter-pager .pagedisplay {
+	padding: 0 5px 0 5px;
+	width: auto;
+	white-space: nowrap;
+	text-align: center;
+}
+
+.tablesorter-pager select {
+	margin: 0;
+	padding: 0
+}
+
+.tablesorter-pager.disabled {
+	display: none
+}
+
+.tablesorter-pager .disabled {
+	opacity: .5;
+	cursor: default
+}
+
 .tablesorter-bootstrap .tablesorter-pager button.btn {
 	margin: .2em .4rem;
 	padding: .2em 0;
Index: lams_central/web/css/jquery.tablesorter.theme.bootstrap.css
===================================================================
diff -u -r44b704ab90830499ce816cba0ddbc04af2af0601 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/css/jquery.tablesorter.theme.bootstrap.css	(.../jquery.tablesorter.theme.bootstrap.css)	(revision 44b704ab90830499ce816cba0ddbc04af2af0601)
+++ lams_central/web/css/jquery.tablesorter.theme.bootstrap.css	(.../jquery.tablesorter.theme.bootstrap.css)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -1 +1,193 @@
-.tablesorter-bootstrap{width:100%}.tablesorter-bootstrap tfoot td,.tablesorter-bootstrap tfoot th,.tablesorter-bootstrap thead td,.tablesorter-bootstrap thead th{font:14px/20px Arial,Sans-serif;font-weight:700;padding:4px;margin:0 0 18px;background-color:#eee}.tablesorter-bootstrap .tablesorter-header{cursor:pointer}.tablesorter-bootstrap .sorter-false{cursor:default}.tablesorter-bootstrap .tablesorter-header.sorter-false i.tablesorter-icon{display:none}.tablesorter-bootstrap .tablesorter-header-inner{position:relative;padding:4px 18px 4px 4px}.tablesorter-bootstrap .sorter-false .tablesorter-header-inner{padding:4px}.tablesorter-bootstrap .tablesorter-header i.tablesorter-icon{font-size:11px;position:absolute;right:2px;top:50%;margin-top:-7px;width:14px;height:14px;background-repeat:no-repeat;line-height:14px;display:inline-block}.tablesorter-bootstrap .bootstrap-icon-unsorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAA20lEQVR4AWJABpKSkoxALCstLb0aUAsZaCAMhVEY6B0amx8YZWDDEDSBa2AGe7XeIiAAClYwVGBvsAcIllsf/mvcC9DgOOd8h90fxWvngVEUbZIkuWRZZlE8eQjcisgZMM9zi+LJ6ZfwegmWZflZDugdHMfxTcGqql7TNBlUB/QObtv2VBSFrev6OY7jngzFk9OT/fn73fWYpqnlXNyXDMWT0zuYx/Bvel9ej+LJ6R08DMOu67q7DkTkrSA5vYPneV71fX/QASdTkJwezhs0TfMARn0wMDDGXEPgF4oijqwM5YjNAAAAAElFTkSuQmCC)}.tablesorter-bootstrap .bootstrap-icon-white.bootstrap-icon-unsorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAe0lEQVR4AbXQoRWDMBiF0Sh2QLAAQ8SxJGugWSA6A2STW1PxTsnB9cnkfuYvv8OGC1t5G3Y0QMP+Bm857keAdQIzWBP3+Bw4MADQE18B6/etRnCV/w9nnGuLezfAmXhABGtAGIkruvk6auIFRwQJDywllsEAjCecB20GP59BQQ+gtlRLAAAAAElFTkSuQmCC)}.tablesorter-bootstrap>tbody>tr.odd>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover~tr.tablesorter-hasChildRow.odd~.tablesorter-childRow.odd>td{background-color:#f9f9f9}.tablesorter-bootstrap>tbody>tr.even:hover>td,.tablesorter-bootstrap>tbody>tr.hover>td,.tablesorter-bootstrap>tbody>tr.odd:hover>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover~.tablesorter-childRow.even>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover~.tablesorter-childRow.odd>td{background-color:#f5f5f5}.tablesorter-bootstrap>tbody>tr.even>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover~tr.tablesorter-hasChildRow.even~.tablesorter-childRow.even>td{background-color:#fff}.tablesorter-bootstrap .tablesorter-processing{background-image:url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=);background-position:center center!important;background-repeat:no-repeat!important}.tablesorter-bootstrap>tbody>tr.odd td.primary{background-color:#bfbfbf}.tablesorter-bootstrap>tbody>tr td.primary,.tablesorter-bootstrap>tbody>tr.even td.primary{background-color:#d9d9d9}.tablesorter-bootstrap>tbody>tr.odd td.secondary{background-color:#d9d9d9}.tablesorter-bootstrap>tbody>tr td.secondary,.tablesorter-bootstrap>tbody>tr.even td.secondary{background-color:#e6e6e6}.tablesorter-bootstrap>tbody>tr.odd td.tertiary{background-color:#e6e6e6}.tablesorter-bootstrap>tbody>tr td.tertiary,.tablesorter-bootstrap>tbody>tr.even td.tertiary{background-color:#f2f2f2}.tablesorter-bootstrap>.caption{background-color:#fff}.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter{width:98%;margin:0;padding:4px 6px;color:#333;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:height .1s ease;-moz-transition:height .1s ease;-o-transition:height .1s ease;transition:height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled{background-color:#eee;color:#555;cursor:not-allowed;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;box-sizing:border-box;transition:height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row{background-color:#efefef}.tablesorter-bootstrap .tablesorter-filter-row td{background-color:#efefef;line-height:normal;text-align:center;padding:4px 6px;vertical-align:middle;-webkit-transition:line-height .1s ease;-moz-transition:line-height .1s ease;-o-transition:line-height .1s ease;transition:line-height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row.hideme td{padding:2px;margin:0;line-height:0}.tablesorter-bootstrap .tablesorter-filter-row.hideme *{height:1px;min-height:0;border:0;padding:0;margin:0;opacity:0}.tablesorter .filtered{display:none}.tablesorter-bootstrap .tablesorter-pager select{padding:4px 6px}.tablesorter-bootstrap .tablesorter-pager .pagedisplay{border:0}.tablesorter-bootstrap tfoot i{font-size:11px}.tablesorter .tablesorter-errorRow td{text-align:center;cursor:pointer;background-color:#e6bf99}
\ No newline at end of file
+.tablesorter-bootstrap {
+	width: 100%
+}
+
+.tablesorter-bootstrap tfoot td, .tablesorter-bootstrap tfoot th,
+	.tablesorter-bootstrap thead td, .tablesorter-bootstrap thead th {
+	font: 14px/20px Arial, Sans-serif;
+	font-weight: 700;
+	padding: 4px;
+	margin: 0 0 18px;
+	background-color: #eee
+}
+
+.tablesorter-bootstrap .tablesorter-header {
+	cursor: pointer
+}
+
+.tablesorter-bootstrap .sorter-false {
+	cursor: default
+}
+
+.tablesorter-bootstrap .tablesorter-header.sorter-false i.tablesorter-icon
+	{
+	display: none
+}
+
+.tablesorter-bootstrap .tablesorter-header-inner {
+	position: relative;
+	padding: 4px 18px 4px 4px
+}
+
+.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
+	padding: 4px
+}
+
+.tablesorter-bootstrap .tablesorter-header i.tablesorter-icon {
+	font-size: 11px;
+	position: absolute;
+	right: 2px;
+	top: 50%;
+	margin-top: -7px;
+	width: 14px;
+	height: 14px;
+	background-repeat: no-repeat;
+	line-height: 14px;
+	display: inline-block
+}
+
+.tablesorter-bootstrap .bootstrap-icon-unsorted {
+	background-image:
+		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAA20lEQVR4AWJABpKSkoxALCstLb0aUAsZaCAMhVEY6B0amx8YZWDDEDSBa2AGe7XeIiAAClYwVGBvsAcIllsf/mvcC9DgOOd8h90fxWvngVEUbZIkuWRZZlE8eQjcisgZMM9zi+LJ6ZfwegmWZflZDugdHMfxTcGqql7TNBlUB/QObtv2VBSFrev6OY7jngzFk9OT/fn73fWYpqnlXNyXDMWT0zuYx/Bvel9ej+LJ6R08DMOu67q7DkTkrSA5vYPneV71fX/QASdTkJwezhs0TfMARn0wMDDGXEPgF4oijqwM5YjNAAAAAElFTkSuQmCC)
+}
+
+.tablesorter-bootstrap .bootstrap-icon-white.bootstrap-icon-unsorted {
+	background-image:
+		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAe0lEQVR4AbXQoRWDMBiF0Sh2QLAAQ8SxJGugWSA6A2STW1PxTsnB9cnkfuYvv8OGC1t5G3Y0QMP+Bm857keAdQIzWBP3+Bw4MADQE18B6/etRnCV/w9nnGuLezfAmXhABGtAGIkruvk6auIFRwQJDywllsEAjCecB20GP59BQQ+gtlRLAAAAAElFTkSuQmCC)
+}
+
+.tablesorter-bootstrap>tbody>tr.odd>td, .tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover
+	~tr.tablesorter-hasChildRow.odd ~.tablesorter-childRow.odd>td {
+	background-color: #f9f9f9
+}
+
+.tablesorter-bootstrap>tbody>tr.even:hover>td, .tablesorter-bootstrap>tbody>tr.hover>td,
+	.tablesorter-bootstrap>tbody>tr.odd:hover>td, .tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover
+	~.tablesorter-childRow.even>td, .tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover
+	~.tablesorter-childRow.odd>td {
+	background-color: #f5f5f5
+}
+
+.tablesorter-bootstrap>tbody>tr.even>td, .tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover
+	~tr.tablesorter-hasChildRow.even ~.tablesorter-childRow.even>td {
+	background-color: #fff
+}
+
+.tablesorter-bootstrap .tablesorter-processing {
+	background-image:
+		url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=);
+	background-position: center center !important;
+	background-repeat: no-repeat !important
+}
+
+.tablesorter-bootstrap>tbody>tr.odd td.primary {
+	background-color: #bfbfbf
+}
+
+.tablesorter-bootstrap>tbody>tr td.primary, .tablesorter-bootstrap>tbody>tr.even td.primary
+	{
+	background-color: #d9d9d9
+}
+
+.tablesorter-bootstrap>tbody>tr.odd td.secondary {
+	background-color: #d9d9d9
+}
+
+.tablesorter-bootstrap>tbody>tr td.secondary, .tablesorter-bootstrap>tbody>tr.even td.secondary
+	{
+	background-color: #e6e6e6
+}
+
+.tablesorter-bootstrap>tbody>tr.odd td.tertiary {
+	background-color: #e6e6e6
+}
+
+.tablesorter-bootstrap>tbody>tr td.tertiary, .tablesorter-bootstrap>tbody>tr.even td.tertiary
+	{
+	background-color: #f2f2f2
+}
+
+.tablesorter-bootstrap>.caption {
+	background-color: #fff
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,
+	.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter
+	{
+	width: 98%;
+	margin: 0;
+	padding: 4px 6px;
+	color: #333;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-transition: height .1s ease;
+	-moz-transition: height .1s ease;
+	-o-transition: height .1s ease;
+	transition: height .1s ease
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled
+	{
+	background-color: #eee;
+	color: #555;
+	cursor: not-allowed;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;
+	box-sizing: border-box;
+	transition: height .1s ease
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row {
+	background-color: #efefef
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row td {
+	background-color: #efefef;
+	line-height: normal;
+	text-align: center;
+	padding: 4px 6px;
+	vertical-align: middle;
+	-webkit-transition: line-height .1s ease;
+	-moz-transition: line-height .1s ease;
+	-o-transition: line-height .1s ease;
+	transition: line-height .1s ease
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
+	padding: 2px;
+	margin: 0;
+	line-height: 0
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row.hideme * {
+	height: 1px;
+	min-height: 0;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	opacity: 0
+}
+
+.tablesorter .filtered {
+	display: none
+}
+
+.tablesorter-bootstrap .tablesorter-pager select {
+	padding: 4px 6px
+}
+
+.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
+	border: 0
+}
+
+.tablesorter-bootstrap tfoot i {
+	font-size: 11px
+}
+
+.tablesorter .tablesorter-errorRow td {
+	text-align: center;
+	cursor: pointer;
+	background-color: #e6bf99
+}
\ No newline at end of file
Index: lams_central/web/css/jquery.tablesorter.theme.bootstrap4.css
===================================================================
diff -u
--- lams_central/web/css/jquery.tablesorter.theme.bootstrap4.css	(revision 0)
+++ lams_central/web/css/jquery.tablesorter.theme.bootstrap4.css	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,204 @@
+.tablesorter-bootstrap {
+	width: 100%
+}
+
+.tablesorter-bootstrap tfoot td, .tablesorter-bootstrap tfoot th,
+	.tablesorter-bootstrap thead td, .tablesorter-bootstrap thead th {
+	font: 14px/20px Arial, Sans-serif;
+	font-weight: 700;
+	padding: 4px;
+	margin: 0 0 18px
+}
+
+.tablesorter-bootstrap thead .tablesorter-header {
+	background-position: right 5px center;
+	background-repeat: no-repeat;
+	cursor: pointer;
+	white-space: normal
+}
+
+.tablesorter-bootstrap:not(.table-dark) tfoot td, .tablesorter-bootstrap:not(.table-dark) tfoot th,
+	.tablesorter-bootstrap:not(.table-dark) thead:not(.thead-dark) .tablesorter-header
+	{
+	background-color: #eee
+}
+
+.tablesorter-bootstrap thead .sorter-false {
+	cursor: default;
+	background-image: none
+}
+
+.tablesorter-bootstrap .tablesorter-header-inner {
+	position: relative;
+	padding: 4px 18px 4px 4px
+}
+
+.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
+	padding: 4px
+}
+
+.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false)
+	{
+	background-image:
+		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=)
+}
+
+.tablesorter-bootstrap thead .tablesorter-headerAsc {
+	background-image:
+		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=)
+}
+
+.tablesorter-bootstrap thead .tablesorter-headerDesc {
+	background-image:
+		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+)
+}
+
+.tablesorter-bootstrap thead.thead-dark .tablesorter-headerUnSorted:not(.sorter-false),
+	.tablesorter-bootstrap.table-dark thead .tablesorter-headerUnSorted:not(.sorter-false)
+	{
+	background-image:
+		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=)
+}
+
+.tablesorter-bootstrap thead.thead-dark .tablesorter-headerAsc,
+	.tablesorter-bootstrap.table-dark thead .tablesorter-headerAsc {
+	background-image:
+		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=)
+}
+
+.tablesorter-bootstrap thead.thead-dark .tablesorter-headerDesc,
+	.tablesorter-bootstrap.table-dark thead .tablesorter-headerDesc {
+	background-image:
+		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+)
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd>td,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.odd:hover
+	~tr.tablesorter-hasChildRow.odd ~.tablesorter-childRow.odd>td {
+	background-color: #f9f9f9
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even:hover>td,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.hover>td,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd:hover>td,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.even:hover
+	~.tablesorter-childRow.even>td, .tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.odd:hover
+	~.tablesorter-childRow.odd>td {
+	background-color: #f5f5f5
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even>td,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.even:hover
+	~tr.tablesorter-hasChildRow.even ~.tablesorter-childRow.even>td {
+	background-color: #fff
+}
+
+.tablesorter-bootstrap .tablesorter-processing {
+	background-image:
+		url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=);
+	background-position: center center !important;
+	background-repeat: no-repeat !important
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd td.primary {
+	background-color: #bfbfbf
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr td.primary,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even td.primary {
+	background-color: #d9d9d9
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd td.secondary {
+	background-color: #d9d9d9
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr td.secondary,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even td.secondary {
+	background-color: #e6e6e6
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd td.tertiary {
+	background-color: #e6e6e6
+}
+
+.tablesorter-bootstrap:not(.table-dark)>tbody>tr td.tertiary,
+	.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even td.tertiary {
+	background-color: #f2f2f2
+}
+
+.tablesorter-bootstrap:not(.table-dark)>.caption {
+	background-color: #fff
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,
+	.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter
+	{
+	width: 98%;
+	margin: 0;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-transition: height .1s ease;
+	-moz-transition: height .1s ease;
+	-o-transition: height .1s ease;
+	transition: height .1s ease
+}
+
+.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row {
+	background-color: #efefef
+}
+
+.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row input.tablesorter-filter,
+	.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row select.tablesorter-filter
+	{
+	color: #333
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled
+	{
+	cursor: not-allowed;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;
+	box-sizing: border-box;
+	transition: height .1s ease
+}
+
+.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row td {
+	line-height: normal;
+	text-align: center;
+	padding: 4px 6px;
+	vertical-align: middle;
+	-webkit-transition: line-height .1s ease;
+	-moz-transition: line-height .1s ease;
+	-o-transition: line-height .1s ease;
+	transition: line-height .1s ease
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
+	padding: 2px;
+	margin: 0;
+	line-height: 0
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row.hideme * {
+	height: 1px;
+	min-height: 0;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	opacity: 0
+}
+
+.tablesorter .filtered {
+	display: none
+}
+
+.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
+	border: 0
+}
+
+.tablesorter:not(.table-dark) .tablesorter-errorRow td {
+	text-align: center;
+	cursor: pointer;
+	background-color: #e6bf99
+}
\ No newline at end of file
Index: lams_central/web/css/jquery.tablesorter.theme.bootstrap5.css
===================================================================
diff -u
--- lams_central/web/css/jquery.tablesorter.theme.bootstrap5.css	(revision 0)
+++ lams_central/web/css/jquery.tablesorter.theme.bootstrap5.css	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1 @@
+.tablesorter-bootstrap{width:100%}.tablesorter-bootstrap tfoot td,.tablesorter-bootstrap tfoot th,.tablesorter-bootstrap thead td,.tablesorter-bootstrap thead th{font:14px/20px Arial,Sans-serif;font-weight:700;padding:4px;margin:0 0 18px}.tablesorter-bootstrap thead .tablesorter-header{background-position:right 5px center;background-repeat:no-repeat;cursor:pointer;white-space:normal}.tablesorter-bootstrap:not(.table-dark) tfoot td,.tablesorter-bootstrap:not(.table-dark) tfoot th,.tablesorter-bootstrap:not(.table-dark) thead:not(.thead-dark) .tablesorter-header{background-color:#eee}.tablesorter-bootstrap thead .sorter-false{cursor:default;background-image:none}.tablesorter-bootstrap .tablesorter-header-inner{position:relative;padding:4px 18px 4px 4px}.tablesorter-bootstrap .sorter-false .tablesorter-header-inner{padding:4px}.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=)}.tablesorter-bootstrap thead .tablesorter-headerAsc{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=)}.tablesorter-bootstrap thead .tablesorter-headerDesc{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+)}.tablesorter-bootstrap thead.thead-dark .tablesorter-headerUnSorted:not(.sorter-false),.tablesorter-bootstrap.table-dark thead .tablesorter-headerUnSorted:not(.sorter-false){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=)}.tablesorter-bootstrap thead.thead-dark .tablesorter-headerAsc,.tablesorter-bootstrap.table-dark thead .tablesorter-headerAsc{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=)}.tablesorter-bootstrap thead.thead-dark .tablesorter-headerDesc,.tablesorter-bootstrap.table-dark thead .tablesorter-headerDesc{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+)}.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd>td,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.odd:hover~tr.tablesorter-hasChildRow.odd~.tablesorter-childRow.odd>td{background-color:#f9f9f9}.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even:hover>td,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.hover>td,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd:hover>td,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.even:hover~.tablesorter-childRow.even>td,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.odd:hover~.tablesorter-childRow.odd>td{background-color:#f5f5f5}.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even>td,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.tablesorter-hasChildRow.even:hover~tr.tablesorter-hasChildRow.even~.tablesorter-childRow.even>td{background-color:#fff}.tablesorter-bootstrap .tablesorter-processing{background-image:url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=);background-position:center center!important;background-repeat:no-repeat!important}.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd td.primary{background-color:#bfbfbf}.tablesorter-bootstrap:not(.table-dark)>tbody>tr td.primary,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even td.primary{background-color:#d9d9d9}.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd td.secondary{background-color:#d9d9d9}.tablesorter-bootstrap:not(.table-dark)>tbody>tr td.secondary,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even td.secondary{background-color:#e6e6e6}.tablesorter-bootstrap:not(.table-dark)>tbody>tr.odd td.tertiary{background-color:#e6e6e6}.tablesorter-bootstrap:not(.table-dark)>tbody>tr td.tertiary,.tablesorter-bootstrap:not(.table-dark)>tbody>tr.even td.tertiary{background-color:#f2f2f2}.tablesorter-bootstrap:not(.table-dark)>.caption{background-color:#fff}.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter{width:98%;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:height .1s ease;-moz-transition:height .1s ease;-o-transition:height .1s ease;transition:height .1s ease}.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row{background-color:#efefef}.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row input.tablesorter-filter,.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row select.tablesorter-filter{color:#333}.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled{cursor:not-allowed;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;box-sizing:border-box;transition:height .1s ease}.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row td{line-height:normal;text-align:center;padding:4px 6px;vertical-align:middle;-webkit-transition:line-height .1s ease;-moz-transition:line-height .1s ease;-o-transition:line-height .1s ease;transition:line-height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row.hideme td{padding:2px;margin:0;line-height:0}.tablesorter-bootstrap .tablesorter-filter-row.hideme *{height:1px;min-height:0;border:0;padding:0;margin:0;opacity:0}.tablesorter .filtered{display:none}.tablesorter-bootstrap .tablesorter-pager .pagedisplay{border:0}.tablesorter:not(.table-dark) .tablesorter-errorRow td{text-align:center;cursor:pointer;background-color:#e6bf99}
\ No newline at end of file
Index: lams_central/web/includes/fonts/FontsFree-Net-Mont-Bold.ttf
===================================================================
diff -u -r3212cc9d3d44d485a7fb6971a82327db71d7cec9 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
Binary files differ
Index: lams_central/web/includes/fonts/FontsFree-Net-Mont1.ttf
===================================================================
diff -u -r3212cc9d3d44d485a7fb6971a82327db71d7cec9 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
Binary files differ
Index: lams_central/web/includes/javascript/outcome.js
===================================================================
diff -u -re6dc4db4137cfd6b07a4aa79711b9d12b39fb78e -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/includes/javascript/outcome.js	(.../outcome.js)	(revision e6dc4db4137cfd6b07a4aa79711b9d12b39fb78e)
+++ lams_central/web/includes/javascript/outcome.js	(.../outcome.js)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -22,7 +22,6 @@
 function openEditOutcomeDialog(outcomeId) {
 	window.parent.showDialog("dialogOutcomeEdit", {
 		'height': Math.max(380, Math.min(700, $(window.parent).height() - 30)),
-		'width' : Math.max(380, Math.min(850, $(window.parent).width() - 60)),
 		'title' : outcomeId ? LABELS.EDIT_OUTCOME_TITLE : LABELS.ADD_OUTCOME_TITLE,
 		'open'  : function() {
 			var dialog = $(this);
@@ -63,7 +62,7 @@
 					.attr('src', LAMS_URL
 						+ 'outcome/scaleManage.do');
 		}
-	});
+	}).addClass('modal-lg');
 }
 
 function submitOutcome(){
Index: lams_central/web/outcome/outcomeEdit.jsp
===================================================================
diff -u -r9dcc3e2d26b504f92d919f53f0d45dd4093a82a2 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/outcome/outcomeEdit.jsp	(.../outcomeEdit.jsp)	(revision 9dcc3e2d26b504f92d919f53f0d45dd4093a82a2)
+++ lams_central/web/outcome/outcomeEdit.jsp	(.../outcomeEdit.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -3,15 +3,19 @@
 
 <lams:html>
 <lams:head>
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen" />
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/outcome.css" type="text/css" media="screen" />
+	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 	
+	<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/jquery-ui-bootstrap-theme5.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/outcome.css" type="text/css" media="screen">
+	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/outcome.js"></script>
-	<lams:JSImport src="includes/javascript/dialog.js" />
+	<lams:JSImport src="includes/javascript/dialog5.js" />
 	<script type="text/javascript">
 		<c:if test="${saved}">
 			var outcomesFrame = $('#dialogOutcome iframe', window.parent.document);
@@ -37,56 +41,45 @@
 			};
 	</script>
 </lams:head>
-<body>
+<body class="component bg-white p-3">
 <form:form action="outcomeSave.do" method="post" modelAttribute="outcomeForm">
 	<input type="hidden" name="<csrf:tokenname/>" value="<csrf:tokenvalue/>"/>
 	<form:hidden path="outcomeId" />
 	
-	<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">
-					
-						<lams:errors/>
-						
-						<div class="form-group">
-							<label><fmt:message key="outcome.manage.add.name" />:
-								<form:input path="name" size="50" maxlength="255" cssClass="form-control" />
-							</label>
-						</div>
-						<div class="form-group">
-							<label><fmt:message key="outcome.manage.add.code" />:
-								<form:input path="code" size="50" maxlength="50" cssClass="form-control" />
-							</label>
-						</div>
-						<div class="form-group">
-							<label><fmt:message key="outcome.manage.add.scale" />:
-								<form:select path="scaleId"  cssClass="form-control">
-									<c:forEach items="${scales}" var="scale">
-										<form:option value="${scale.scaleId}">
-											<c:out value="${scale.name}" /> (<c:out value="${scale.code}" />)
-										</form:option>
-									</c:forEach>
-								</form:select>
-							</label>
-							<button type="button" class="btn btn-default" onClick="javascript:openOutcomeScaleDialog()">
-								<fmt:message key="scale.manage" />
-							</button>
-						</div>
-						<div class="form-group">
-							<fmt:message key="outcome.manage.add.description" />:
-							<lams:CKEditor id="description" value="${outcomeForm.description}" contentFolderID="${outcomeForm.contentFolderId}"></lams:CKEditor>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<button id="addButton" type="submit" class="btn btn-primary" onClick="javascript:submitOutcome()">
-			<fmt:message key="outcome.manage.add.save" />
+	<lams:errors/>
+	
+	<div class="mb-3">
+		<label class="form-label"><fmt:message key="outcome.manage.add.name" />:
+			<form:input path="name" size="50" maxlength="255" cssClass="form-control" />
+		</label>
+	</div>
+	<div class="mb-3">
+		<label class="form-label"><fmt:message key="outcome.manage.add.code" />:
+			<form:input path="code" size="50" maxlength="50" cssClass="form-control" />
+		</label>
+	</div>
+	<div class="mb-3">
+		<label class="form-label"><fmt:message key="outcome.manage.add.scale" />:
+			<form:select path="scaleId"  cssClass="form-control">
+				<c:forEach items="${scales}" var="scale">
+					<form:option value="${scale.scaleId}">
+						<c:out value="${scale.name}" /> (<c:out value="${scale.code}" />)
+					</form:option>
+				</c:forEach>
+			</form:select>
+		</label>
+		<button type="button" class="btn btn-secondary" onClick="javascript:openOutcomeScaleDialog()">
+			<fmt:message key="scale.manage" />
 		</button>
 	</div>
+	<div class="mb-3">
+		<fmt:message key="outcome.manage.add.description" />:
+		<lams:CKEditor id="description" value="${outcomeForm.description}" contentFolderID="${outcomeForm.contentFolderId}"></lams:CKEditor>
+	</div>
+
+	<button id="addButton" type="submit" class="btn btn-primary" onClick="javascript:submitOutcome()">
+		<fmt:message key="outcome.manage.add.save" />
+	</button>
 </form:form>
 </body>
 </lams:html>
Index: lams_central/web/outcome/outcomeManage.jsp
===================================================================
diff -u -r9dcc3e2d26b504f92d919f53f0d45dd4093a82a2 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/outcome/outcomeManage.jsp	(.../outcomeManage.jsp)	(revision 9dcc3e2d26b504f92d919f53f0d45dd4093a82a2)
+++ lams_central/web/outcome/outcomeManage.jsp	(.../outcomeManage.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -3,16 +3,20 @@
 <lams:html>
 <lams:head>
 	<title><fmt:message key="index.outcome.manage" /></title>
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen" />
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/outcome.css" type="text/css" media="screen" />
+	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+
+	<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/jquery-ui-bootstrap-theme5.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/outcome.css" type="text/css" media="screen">
 	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/outcome.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.cookie.js"></script>
-	<lams:JSImport src="includes/javascript/dialog.js" />
+	<lams:JSImport src="includes/javascript/dialog5.js" />
 	<script type="text/javascript">
 		var LAMS_URL = '<lams:LAMSURL/>',
 			
@@ -27,43 +31,43 @@
 			};
 	</script>
 </lams:head>
-<body class="stripes">
+<body class="component">
 <lams:Page type="admin" >
 	<lams:errors path="*"/>
 	
 	<div class="outcomeContainer">
 		<div class="row">
-			<div class="col-xs-5">
+			<div class="col-7">
 				<fmt:message key='outcome.manage.add.name' />
 			</div>
-			<div class="col-xs-3">
+			<div class="col-3">
 				<fmt:message key='outcome.manage.add.code' />
 			</div>
-			<div class="col-xs-1">
-			</div>
-			<div class="col-xs-1">
-			</div>
 		</div>
 		<c:forEach var="outcome" items="${outcomes}">
 			<div class="row">
-				<div class="col-xs-5">
+				<div class="col-7">
 					<c:out value="${outcome.name}" />
 				</div>
-				<div class="col-xs-3">
+				<div class="col-3">
 					<c:out value="${outcome.code}" />
 				</div>
-				<div class="col-xs-1">
-					<i class="manageButton fa fa-pencil" title="<fmt:message key='outcome.manage.edit' />"
-				   	   onClick="javascript:openEditOutcomeDialog(${outcome.outcomeId})" >
-					</i>
+				<div class="col-2">
+					<button class="btn btn-secondary" onClick="javascript:openEditOutcomeDialog(${outcome.outcomeId})"
+						 	title="<fmt:message key='outcome.manage.edit' />">
+						<i class="fa fa-pencil"></i>
+					</button>
+					<csrf:form style="display: inline-block;" id="remove_${outcome.outcomeId}" method="post" action="outcomeRemove.do">
+						<input type="hidden" name="outcomeId" value="${outcome.outcomeId}"/>
+						<button type="button" onClick="javascript:removeOutcome('remove_${outcome.outcomeId}')" class="btn btn-danger">
+							<i class="fa fa-trash" title="<fmt:message key='outcome.manage.remove' />"></i>
+						</button>
+					</csrf:form>
 				</div>
-				<div class="col-xs-1">
-					<csrf:form style="display: inline-block;" id="remove_${outcome.outcomeId}" method="post" action="outcomeRemove.do"><input type="hidden" name="outcomeId" value="${outcome.outcomeId}"/><button type="button" onClick="javascript:removeOutcome('remove_${outcome.outcomeId}')" class="btn btn-danger btn-xs"><i class="fa fa-trash" title="<fmt:message key='outcome.manage.remove' />"></i></button></csrf:form>
-				</div>
 			</div>
 		</c:forEach>
 		<c:if test="${not empty outcomes}">
-			<div id="exportButton" class="btn btn-default pull-left" onClick="javascript:exportOutcome()"
+			<div id="exportButton" class="btn btn-secondary float-start" onClick="javascript:exportOutcome()"
 				 data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i><span> <fmt:message key="outcome.export" /></span>">
 				<i class="fa fa-download"></i>
 				<span class="hidden-xs">
@@ -72,7 +76,7 @@
 			</div>
 		</c:if>
 		
-		<div id="importButton" class="btn btn-default pull-left" onClick="javascript:$('#importInput').click()">
+		<div id="importButton" class="btn btn-secondary float-start" onClick="javascript:$('#importInput').click()">
 			<i class="fa fa-upload"></i> <fmt:message key="outcome.import" />
 		</div>
 		<form id="importForm" action="outcomeImport.do" method="post" enctype="multipart/form-data">
Index: lams_central/web/outcome/scaleEdit.jsp
===================================================================
diff -u -r9dcc3e2d26b504f92d919f53f0d45dd4093a82a2 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/outcome/scaleEdit.jsp	(.../scaleEdit.jsp)	(revision 9dcc3e2d26b504f92d919f53f0d45dd4093a82a2)
+++ lams_central/web/outcome/scaleEdit.jsp	(.../scaleEdit.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -9,7 +9,7 @@
 	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/outcome.js"></script>
 	<lams:JSImport src="includes/javascript/dialog.js" />
 	<script type="text/javascript">
@@ -34,7 +34,7 @@
 	<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">
+				class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
 				<div class="panel">
 					<div class="panel-body">
 					
Index: lams_central/web/outcome/scaleManage.jsp
===================================================================
diff -u -r9dcc3e2d26b504f92d919f53f0d45dd4093a82a2 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_central/web/outcome/scaleManage.jsp	(.../scaleManage.jsp)	(revision 9dcc3e2d26b504f92d919f53f0d45dd4093a82a2)
+++ lams_central/web/outcome/scaleManage.jsp	(.../scaleManage.jsp)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -3,16 +3,20 @@
 
 <lams:html>
 <lams:head>
-	<lams:css/>
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen" />
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/outcome.css" type="text/css" media="screen" />
+	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
 	
+	<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/jquery-ui-bootstrap-theme5.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/outcome.css" type="text/css" media="screen">
+	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/outcome.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.cookie.js"></script>
-	<lams:JSImport src="includes/javascript/dialog.js" />
+	<lams:JSImport src="includes/javascript/dialog5.js" />
 	<script type="text/javascript">
 		var LAMS_URL = '<lams:LAMSURL/>',
 			
@@ -27,63 +31,59 @@
 			};
 	</script>
 </lams:head>
-<body class="stripes">
+<body class="component bg-white p-3">
 <lams:Page type="admin" >
 
 	<lams:errors/>	
 
 	<div class="outcomeContainer">
 		<div class="row">
-			<div class="col-xs-5">
+			<div class="col-7">
 				<fmt:message key='outcome.manage.add.name' />
 			</div>
-			<div class="col-xs-3">
+			<div class="col-3">
 				<fmt:message key='outcome.manage.add.code' />
 			</div>
-			<div class="col-xs-1">
-			</div>
-			<div class="col-xs-1">
-			</div>
 		</div>
 		<c:forEach var="scale" items="${scales}">
 			<div class="row">
-				<div class="col-xs-5">
+				<div class="col-7">
 					<c:out value="${scale.name}" />
 				</div>
-				<div class="col-xs-3">
+				<div class="col-3">
 					<c:out value="${scale.code}" />
 				</div>
-				<div class="col-xs-1">
+				<div class="col-2">
 					<c:choose>
 						<c:when test="${scale.scaleId != 1}">
-							<i class="manageButton fa fa-pencil" title="<fmt:message key='scale.manage.edit' />"
-						   	   onClick="javascript:openEditScaleDialog(${scale.scaleId})" >
-							</i>
+							<button class="btn btn-secondary" onClick="javascript:openEditScaleDialog(${scale.scaleId})"
+								 	title="<fmt:message key='scale.manage.edit' />">
+								<i class="fa fa-pencil"></i>
+							</button>
 						</c:when>
 						<c:otherwise>
-							<i class="manageButton fa fa-eye" title="<fmt:message key='scale.manage.view' />"
-						   	   onClick="javascript:openEditScaleDialog(${scale.scaleId})" >
-							</i>
+							<button class="btn btn-secondary" onClick="javascript:openEditScaleDialog(${scale.scaleId})"
+								 	title="<fmt:message key='scale.manage.view' />">
+								<i class="fa fa-eye"></i>
+							</button>
 						</c:otherwise>
 					</c:choose>
-				</div>
-				<div class="col-xs-1">
 					<c:if test="${scale.scaleId != 1}">
-						<i class="manageButton fa fa-remove" title="<fmt:message key='scale.manage.remove' />"
-					   	   onClick="javascript:removeScale(${scale.scaleId})" >
-						</i>
+						<button type="button" onClick="javascript:removeScale(${scale.scaleId})" class="btn btn-danger">
+							<i class="fa fa-trash" title="<fmt:message key='scale.manage.remove' />"></i>
+						</button>
 					</c:if>
 				</div>
 			</div>
 		</c:forEach>
-		<div id="exportButton" class="btn btn-default pull-left" onClick="javascript:exportOutcome(true)"
+		<div id="exportButton" class="btn btn-secondary float-start" onClick="javascript:exportOutcome(true)"
 			 data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i><span> <fmt:message key="outcome.export" /></span>">
 			<i class="fa fa-download"></i>
 			<span class="hidden-xs">
 				<fmt:message key="outcome.export" />
 			</span>
 		</div> 
-		<div id="importButton" class="btn btn-default pull-left" onClick="javascript:$('#importInput').click()">
+		<div id="importButton" class="btn btn-secondary float-start" onClick="javascript:$('#importInput').click()">
 			<i class="fa fa-upload"></i> <fmt:message key="outcome.import" />
 		</div>
 		<form id="importForm" action="scaleImport.do" method="post" enctype="multipart/form-data">
Index: lams_common/src/java/org/lamsfoundation/lams/dao/IBaseDAO.java
===================================================================
diff -u -r2188972474f8d186d6811e3dea2e4136be669335 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_common/src/java/org/lamsfoundation/lams/dao/IBaseDAO.java	(.../IBaseDAO.java)	(revision 2188972474f8d186d6811e3dea2e4136be669335)
+++ lams_common/src/java/org/lamsfoundation/lams/dao/IBaseDAO.java	(.../IBaseDAO.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -234,6 +234,8 @@
 
     <T> List<T> findByProperties(Class<T> clazz, Map<String, Object> properties, boolean cache);
 
+    List findNative(String nativeQueryString);
+
     public List find(String queryString);
 
     public List find(String queryString, Object value);
Index: lams_common/src/java/org/lamsfoundation/lams/dao/hibernate/LAMSBaseDAO.java
===================================================================
diff -u -r3248d9808412f06775532829889bb22b76da3a9e -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_common/src/java/org/lamsfoundation/lams/dao/hibernate/LAMSBaseDAO.java	(.../LAMSBaseDAO.java)	(revision 3248d9808412f06775532829889bb22b76da3a9e)
+++ lams_common/src/java/org/lamsfoundation/lams/dao/hibernate/LAMSBaseDAO.java	(.../LAMSBaseDAO.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -306,6 +306,11 @@
     }
 
     @Override
+    public List findNative(String nativeQueryString) {
+	return getSession().createNativeQuery(nativeQueryString).getResultList();
+    }
+
+    @Override
     public List find(String queryString) {
 	return doFind(queryString);
     }
Index: lams_common/src/java/org/lamsfoundation/lams/statistics/service/StatisticsService.java
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_common/src/java/org/lamsfoundation/lams/statistics/service/StatisticsService.java	(.../StatisticsService.java)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_common/src/java/org/lamsfoundation/lams/statistics/service/StatisticsService.java	(.../StatisticsService.java)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -9,7 +9,6 @@
 import org.lamsfoundation.lams.dao.IBaseDAO;
 import org.lamsfoundation.lams.learningdesign.Activity;
 import org.lamsfoundation.lams.learningdesign.LearningDesign;
-import org.lamsfoundation.lams.lesson.CompletedActivityProgress;
 import org.lamsfoundation.lams.lesson.Lesson;
 import org.lamsfoundation.lams.statistics.dto.GroupStatisticsDTO;
 import org.lamsfoundation.lams.statistics.dto.StatisticsDTO;
@@ -26,7 +25,7 @@
 
     /*
      * (non-Javadoc)
-     * 
+     *
      * @see org.lamsfoundation.lams.statistics.service.IStatisticsService#getOverallStatistics()
      */
     @Override
@@ -35,18 +34,21 @@
 	StatisticsDTO statisticsDTO = new StatisticsDTO();
 
 	// Counting the organisations
-	HashMap<String, Object> groupMap = new HashMap<String, Object>();
+	HashMap<String, Object> groupMap = new HashMap<>();
 	groupMap.put("organisationType.organisationTypeId", OrganisationType.COURSE_TYPE);
 	statisticsDTO.setGroups(baseDAO.countByProperties(Organisation.class, groupMap));
 
 	// Counting the sub-organisations
-	HashMap<String, Object> subGroupMap = new HashMap<String, Object>();
+	HashMap<String, Object> subGroupMap = new HashMap<>();
 	subGroupMap.put("organisationType.organisationTypeId", OrganisationType.CLASS_TYPE);
 	statisticsDTO.setSubGroups(baseDAO.countByProperties(Organisation.class, subGroupMap));
 
 	// Getting the rest of the counts
 	statisticsDTO.setActivities(baseDAO.countAll(Activity.class));
-	statisticsDTO.setCompletedActivities(baseDAO.countAll(CompletedActivityProgress.class));
+	List<Number> completedActivitiesCount = baseDAO.findNative("SELECT COUNT(*) FROM lams_progress_completed");
+	if (!completedActivitiesCount.isEmpty()) {
+	    statisticsDTO.setCompletedActivities(completedActivitiesCount.get(0).longValue());
+	}
 	statisticsDTO.setLessons(baseDAO.countAll(Lesson.class));
 	statisticsDTO.setSequences(baseDAO.countAll(LearningDesign.class));
 	statisticsDTO.setUsers(baseDAO.countAll(User.class));
@@ -56,13 +58,13 @@
 
     /*
      * (non-Javadoc)
-     * 
+     *
      * @see org.lamsfoundation.lams.statistics.service.IStatisticsService#getGroupStatisticsDTO(java.lang.Integer)
      */
     @Override
     public GroupStatisticsDTO getGroupStatisticsDTO(Integer orgId) throws Exception {
 
-	Organisation group = (Organisation) baseDAO.find(Organisation.class, orgId);
+	Organisation group = baseDAO.find(Organisation.class, orgId);
 	GroupStatisticsDTO groupStats = new GroupStatisticsDTO();
 	if (group != null) {
 
@@ -78,7 +80,7 @@
 
 	    Set<Organisation> subGroups = group.getChildOrganisations();
 
-	    ArrayList<GroupStatisticsDTO> subGroupStatsList = new ArrayList<GroupStatisticsDTO>();
+	    ArrayList<GroupStatisticsDTO> subGroupStatsList = new ArrayList<>();
 	    if (subGroups != null) {
 		for (Organisation subGroup : subGroups) {
 		    GroupStatisticsDTO subGroupStats = new GroupStatisticsDTO();
Index: lams_gradebook/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_gradebook/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_gradebook/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_gradebook/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_gradebook/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_gradebook/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_gradebook/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_gradebook/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_gradebook/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_gradebook/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_gradebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_gradebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_learning/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_learning/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_learning/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_learning/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_learning/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_learning/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_learning/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_learning/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_learning/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_learning/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_learning/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_learning/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_monitoring/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_monitoring/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r1024255b15cb1a0dcb4722623c6023ce6c5c8378 -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 1024255b15cb1a0dcb4722623c6023ce6c5c8378)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -131,8 +131,7 @@
 }
 
 .monitoring-page-wrapper .component-sidebar .lesson-properties #lessonDetails dt {
-	font-weight: normal;
-	font-family: mont-bold, sans-serif;
+	font-weight: bold;
 	margin-top: 1rem;
 }
 
@@ -149,7 +148,7 @@
 
 .monitoring-page-wrapper .monitoring-panel h6 {
 	color: var(--bs-gray);
-	font-family: mont-bold, sans-serif;
+	font-weight: bold;
 	text-transform: uppercase;
 	letter-spacing: 1.4px;
 	margin-bottom: 2rem;
@@ -190,7 +189,7 @@
 }
 
 .monitoring-page-wrapper #sequence-tab-content #required-tasks .label.contribute-activity-title {
-	font-family: mont-bold, sans-serif;
+	font-weight: bold;
 }
 
 .monitoring-page-wrapper #sequence-tab-content #required-tasks button.contribute-go-button {
Index: lams_tool_assessment/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_assessment/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_assessment/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_assessment/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_assessment/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_assessment/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_assessment/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_assessment/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_assessment/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_assessment/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_assessment/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_assessment/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_chat/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_chat/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_chat/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_chat/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_chat/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_chat/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_chat/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_chat/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_chat/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_daco/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_daco/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_daco/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_doku/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_doku/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_doku/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_doku/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_doku/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_doku/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_doku/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_doku/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_doku/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_doku/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_doku/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_doku/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_forum/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_forum/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_gmap/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_gmap/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_gmap/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_gmap/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_gmap/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_gmap/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_gmap/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_gmap/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_gmap/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_gmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_images/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_images/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_imscc/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_imscc/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_imscc/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_imscc/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_imscc/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_imscc/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_imscc/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_imscc/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_imscc/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_imscc/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_imscc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_imscc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_lamc/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_lamc/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_lamc/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_lamc/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_lamc/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_lamc/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_lamc/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_lamc/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_lamc/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_laqa/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_laqa/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_laqa/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_larsrc/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_larsrc/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_larsrc/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_larsrc/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_larsrc/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_larsrc/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_larsrc/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_larsrc/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_larsrc/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_larsrc/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_larsrc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_larsrc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_leader/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_leader/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_leader/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_leader/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_leader/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_leader/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_leader/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_leader/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_leader/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_mindmap/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_mindmap/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_mindmap/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_mindmap/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_mindmap/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_mindmap/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_mindmap/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_mindmap/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_mindmap/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_mindmap/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_mindmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_mindmap/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_nb/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_nb/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_notebook/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_notebook/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_notebook/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_notebook/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_notebook/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_notebook/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_notebook/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_notebook/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_notebook/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_notebook/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_notebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_notebook/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_pixlr/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_pixlr/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_pixlr/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_preview/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_preview/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_preview/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_preview/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_preview/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_preview/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_preview/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_preview/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_preview/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_sbmt/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_sbmt/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_sbmt/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_sbmt/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_sbmt/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_sbmt/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_sbmt/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_sbmt/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_sbmt/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_scratchie/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_scratchie/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_scratchie/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_scratchie/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_scratchie/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_scratchie/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_scratchie/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_scratchie/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_scratchie/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_scribe/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_scribe/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_scribe/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_scribe/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_scribe/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_scribe/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_scribe/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_scribe/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_scribe/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_survey/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_survey/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_task/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_task/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_task/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_task/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_task/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_task/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_task/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_task/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_task/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_task/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_task/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_task/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_vote/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_vote/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_vote/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_vote/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_vote/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_vote/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_vote/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_vote/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_vote/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_vote/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_vote/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_vote/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_whiteboard/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_whiteboard/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_whiteboard/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_whiteboard/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_whiteboard/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_whiteboard/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_whiteboard/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_whiteboard/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_whiteboard/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_whiteboard/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_wiki/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_wiki/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_wiki/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_wiki/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_wiki/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_wiki/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_wiki/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_wiki/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_wiki/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_wiki/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_wiki/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_wiki/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_tool_zoom/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_tool_zoom/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_tool_zoom/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_zoom/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_tool_zoom/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_tool_zoom/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_zoom/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_tool_zoom/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_tool_zoom/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_tool_zoom/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_tool_zoom/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_tool_zoom/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
Index: lams_www/web/WEB-INF/tags/Page5.tag
===================================================================
diff -u
--- lams_www/web/WEB-INF/tags/Page5.tag	(revision 0)
+++ lams_www/web/WEB-INF/tags/Page5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,534 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="formID" required="false" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+<%@ attribute name="usePanel" required="false" rtexprvalue="true"%>
+<%@ attribute name="hideProgressBar" required="false" rtexprvalue="true"%>
+<%@ attribute name="breadcrumbItems" required="false" rtexprvalue="true"%>
+
+<%@ tag  import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ tag  import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+
+<c:if test="${empty usePanel}">				
+	<c:set var="usePanel">true</c:set>
+</c:if>
+<c:set var="displayPortrait"><%=Configuration.get(ConfigurationKeys.DISPLAY_PORTRAIT)%></c:set>
+
+<c:choose>
+
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter no-margin">
+		<div class="col-xs-12">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
+			<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+
+	<%-- Try to get authoring preview/learning/monitoring from the tool activity so we don't show the progress bar in monitoring --%>
+	<c:if test="${empty mode}">
+		<c:set var="mode" value="${param.mode}" />
+	</c:if>
+	<c:if test="${empty mode}">
+		<c:if test="${empty sessionMapID}">
+			<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+		</c:if>
+		<c:set var="mode" value="${sessionScope[sessionMapID].mode}" />
+	</c:if>
+
+	<%--  only have sidebar and presence in learner main window, not in popup windows --%>
+	<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<lams:css suffix="progressBar"/>
+		<script type="text/javascript">
+			// Adding jquery-ui.js if it hasn't been loaded already
+			jQuery.ui || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"><\/script>');
+		
+			// Adding bootstrap.js if it hasn't been loaded already
+			(typeof($.fn.modal) != 'undefined') || document.write('<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"><\/script>');
+		</script>
+		<lams:JSImport src="includes/javascript/dialog.js" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
+		
+		<c:if test="${empty lessonID}">
+			<c:set var="lessonID" value="${param.lessonID}" />
+		</c:if>
+
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionID}" />
+			</c:if>
+ 			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+ 				<c:if test="${not empty sessionMapID}">
+					<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+					<c:if test="${empty toolSessionId}">
+						<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionId}" />
+					</c:if>
+				</c:if>
+			</c:if>
+			<c:if test="${empty toolSessionId and not empty formID}">
+				<c:set var="toolForm" value="${requestScope[formID]}" />
+				<c:if test="${not empty toolForm}"> 
+				    <c:set var="toolSessionId"><c:catch var="exception">${toolForm.toolSessionID}</c:catch></c:set>
+				</c:if>
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				mode = '${mode}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				LEARNING_URL = LAMS_URL + 'learning/',
+
+				// it gets initialised along with progress bar
+				commandWebsocketInitTime = null,
+				commandWebsocket = null,
+				commandWebsocketPingTimeout = null,
+				commandWebsocketPingFunc = null,
+				commandWebsocketReconnectAttempts = 0,
+				commandWebsocketHookTrigger = null,
+				commandWebsocketHook = null,
+				
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+				
+			commandWebsocketPingFunc = function(skipPing){
+				if (commandWebsocket.readyState == commandWebsocket.CLOSING 
+						|| commandWebsocket.readyState == commandWebsocket.CLOSED){
+					return;
+				}
+				
+				// check and ping every 3 minutes
+				commandWebsocketPingTimeout = setTimeout(commandWebsocketPingFunc, 3*60*1000);
+				// initial set up does not send ping
+				if (!skipPing) {
+					commandWebsocket.send("ping");
+				}
+			};
+				
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = LEARNING_URL + 'learner/restartLesson.do?lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(LEARNING_URL + "notebook/viewAll.do?lessonID=" + lessonId,
+						"Notebook",
+						648,1152,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				hideProgressBars();
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				$('#supportlabel').html(LABELS.SUPPORT_ACTIVITIES);
+				$('#progresslabel').html(LABELS.PROGRESS_BAR);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+				$('#sidebar').show();
+			}
+
+			function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
+				let currentTime = new Date().getTime(),
+					lamsAutosaveTimestamp = +localStorage.getItem('lamsAutosaveTimestamp');
+				// check if autosave does not happen too often
+				if (autosaveInterval > 0 && lamsAutosaveTimestamp && lamsAutosaveTimestamp + autosaveInterval/2 > currentTime) {
+					// this label is required only in tool which implement autosave
+					alert('<fmt:message key="label.prevent.learner.autosave.mutliple.tabs" />');
+					return false;
+				}
+				localStorage.setItem('lamsAutosaveTimestamp', currentTime);
+				return true;
+			}
+
+			function initCommandWebsocket(){
+				commandWebsocketInitTime = Date.now();
+				// it is not an obvious place to init the websocket, but we need lesson ID
+				commandWebsocket = new WebSocket(LEARNING_URL.replace('http', 'ws')
+						+ 'commandWebsocket?lessonID=' + lessonId);
+
+				commandWebsocket.onclose = function(e){
+					// check reason and whether the close did not happen immediately after websocket creation
+					// (possible access denied, user logged out?)
+					if (e.code === 1006 &&
+						Date.now() - commandWebsocketInitTime > 1000 &&
+						commandWebsocketReconnectAttempts < 20) {
+						commandWebsocketReconnectAttempts++;
+						// maybe iPad went into sleep mode?
+						// we need this websocket working, so init it again after delay
+						setTimeout(initCommandWebsocket, 3000);
+					}
+				};
+
+				// set up timer for the first time
+				commandWebsocketPingFunc(true);
+				
+				// when the server pushes new commands
+				commandWebsocket.onmessage = function(e){
+					// read JSON object
+					var command = JSON.parse(e.data);
+					if (command.message) {
+						// some tools implement autosave feature
+						// if it is such a tool, trigger it
+						if (command.message === 'autosave') {
+							// the name of this function is same in all tools
+							if (typeof learnerAutosave == 'function') {
+								learnerAutosave(true);
+							}
+						} else {
+							alert(command.message);
+						}
+					}
+					
+					// if learner's currently displayed page has hookTrigger same as in the JSON
+					// then a function also defined on that page will run
+					if (command.hookTrigger && command.hookTrigger == commandWebsocketHookTrigger 
+										    && typeof commandWebsocketHook === 'function') {
+					    commandWebsocketHook(command.hookParams);
+					}
+
+					if (command.redirectURL) {
+						window.location.href = command.redirectURL;
+					}
+
+					if (command.discussion) {
+						var discussionCommand = $('#discussion-sentiment-command');
+						if (discussionCommand.length === 0) {
+							discussionCommand = $('<div />').attr('id', 'discussion-sentiment-command').appendTo('body');
+						}
+						discussionCommand.load(LEARNING_URL + "discussionSentiment/" + command.discussion + ".do", {
+							lessonId : lessonId
+						});
+					}
+
+					// reset ping timer
+					clearTimeout(commandWebsocketPingTimeout);
+					commandWebsocketPingFunc(true);
+				};
+
+				// check if there is a running discussion; if so, a websocket command will come to display the widget
+				$.ajax({
+					url : LEARNING_URL + "discussionSentiment/checkLearner.do",
+					data: {
+						lessonId : lessonId
+					}
+				});
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = 1; // 0/1/2 none/full/keep space
+				var showIM = true;
+				if ( window.name.match("LearnerActivity") || window.parent.name.match("LearnerActivity")) { 
+					// popup window
+					showControlBar = 0;
+					showIM = false;
+				} else 	if ( window.frameElement ) { // parallel
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1') {
+							showControlBar = 2;
+						}
+					}
+				}
+
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : LEARNING_URL + 'learner/getLessonDetails.do',
+						data : {
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							lessonId = result.lessonID;
+							
+							if ( showControlBar == 1  ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title.replace(/_/g, " "));
+								fillProgressBar('learnerMainBar');
+								$('#navcontent').addClass('navcontent');
+							} else if ( showControlBar == 2 ) {
+								$('#navcontent').addClass('navcontent');
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = LEARNING_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								<c:if test="${not usePanel}">
+								presenceURL = presenceURL + "&reloadBootstrap=true";
+								</c:if>
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+
+							initCommandWebsocket();
+						}
+					});
+				}
+
+
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only visually-hidden">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li>
+							<c:if test="${displayPortrait}">
+								<a id="navbar-portrait" href="#" onclick="javascript:showMyPortraitDialog(); return false;">
+									<c:set var="userId"><lams:user property="userID" /></c:set>
+									<lams:Portrait userId="${userId}"/>	
+								</a>
+							</c:if>
+					
+							<a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<c:if test="${!displayPortrait}">
+									<i class="float-end fa fa-bars"></i>
+								</c:if>
+								
+								<p class="lessonName <c:if test='${!displayPortrait}'>no-portrait</c:if>"></p>
+							</a>
+						</li>
+						<li>
+							<a href="#" onClick="javascript:viewNotebookEntries(); return false;" >
+								<span id="notebooklabel">Notebook</span>
+								<i class="float-end fa fa-book"></i>
+							</a>
+						</li>
+						<li id="restartitem" style="display:none">
+							<a href="#" onClick="javascript:restartLesson()">
+								<span id="restartlabel">Restart</span>
+								<i class="float-end fa fa-fast-backward "></i>
+							</a>
+						</li>
+						<li id="supportitem" style="display:none">
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="supportlabel">Support Activities</span>
+								<i class="float-end fa fa-th-large"></i>
+							</a>
+							<div id="supportPart" class="progressBarContainer"></div>
+						</li>
+						<li>
+							<a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu(); return false;">
+								<span id="progresslabel">My Progress</span>
+								<i class="float-end fa fa-map"></i>
+							</a>
+							<div id="progressBarDiv" class="progressBarContainer"></div>
+							
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<div class="progress-bar-tooltip" id="progress-bar-tooltip"></div>
+		
+	</c:if> <%--  end of sidebar stuff - only used if in learner screen --%>
+
+		<div id="navcontent" class="content">
+			<div class="row no-gutter no-margin">
+			<div class="col-xs-12">
+			<div class="container">
+				<c:choose>
+				<c:when test="${usePanel}">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="float-end">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
+						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<jsp:doBody />
+				</c:otherwise>
+				</c:choose>						
+				<%--  only have sidebar and presence in learner --%>
+				<c:if test="${ not hideProgressBar && ( empty mode || mode == 'author' || mode == 'learner') }">
+					<div id="presenceEnabledPatchDiv"></div>
+				</c:if>
+			</div>
+				</div>
+			</div>
+		</div>
+
+	</c:when>
+
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="container-fluid" style="max-width: 1600px">
+
+
+		<a href="#content" class="sr-only sr-only-focusable visually-hidden visually-hidden-focusable">Skip to main content</a>
+		<c:choose>
+		<c:when test="${usePanel}">
+			<%-- The Breadcrumb
+			
+				We need to build the breadcrumb in the tag rather than on the page jsp as it is easier to do 
+				accessibility this way. Also ensure that all pages implement the same breadcrumb element
+				
+				BreadcrumbItems is an array that includes the breadcrumb details as follows
+				
+				String[] breadcrumbItem = ["breadcrumbURL1|breadcrumbLabel1", "breadcrumbURL2|breadcrumbLabel2",...]
+				
+				In the page, you build these as follows:
+				
+					<c:set var="breadcrumbTop"><lams:LAMSURL/>admin/sysadminstart.do | <fmt:message key="sysadmin.maintain" /></c:set>
+					<c:set var="breadcrumbActive">. | <fmt:message key="admin.timezone.title"/></c:set>
+					<c:set var="breadcrumbItems" value="${breadcrumbTop}, ${breadcrumbActive}"/>
+				
+				Then you pass breadcrumbItems to the Page.tag as:
+				
+				<lams:Page5 type="admin" title="${title}" titleHelpURL="${help}" breadcrumbItems="${breadcrumbItems}" formID="timezoneForm">
+
+			
+			--%>
+			
+			
+			<header>
+			<c:if test="${not empty breadcrumbItems}">
+
+				<nav aria-label="breadcrumb" role="navigation">
+				  <ol class="breadcrumb">
+
+					<c:forEach var="breadcrumbItem" items="${breadcrumbItems}">
+
+						<c:forEach var="item" items="${breadcrumbItem}">
+							<!--  <p>${breadcrumbItem.toString()}</p> -->
+							<c:set var="bURL">${fn:trim(fn:split(item,'|')[0])}</c:set>
+							<c:set var="bLabel">${fn:trim(fn:split(item,'|')[1])}</c:set>
+							
+							<c:choose>
+								<c:when test="${bURL eq '.'}">
+									<li class="breadcrumb-item active" aria-current="page">${bLabel}</li>
+								</c:when>
+								<c:otherwise>
+									<li class="breadcrumb-item"><a href="${bURL}">${bLabel}</a></li>	
+								</c:otherwise>
+							</c:choose>
+					    </c:forEach>
+					</c:forEach>
+					  </ol>
+				</nav>						    
+			
+			</c:if>
+			</header>
+			
+			<c:if test="${not empty title}">
+				<c:if test="${not empty titleHelpURL}">
+					<span class="float-end">${titleHelpURL}</span>
+				</c:if>
+				<c:if test="${not empty headingContent}">
+					<c:out value="${headingContent}" escapeXml="true" />
+				</c:if>
+			</c:if>
+			
+			
+			<div id="content">
+				<main role="main">
+					<c:if test="${not empty title}"><h2><c:out value="${title}" escapeXml="true" /></h2></c:if>
+					<jsp:doBody />
+				</main>
+			</div>
+		</div>
+		</c:when>
+
+		<c:otherwise>
+		<jsp:doBody />
+		</c:otherwise>
+		</c:choose>						
+		
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
Index: lams_www/web/WEB-INF/tags/TSTable5.tag
===================================================================
diff -u
--- lams_www/web/WEB-INF/tags/TSTable5.tag	(revision 0)
+++ lams_www/web/WEB-INF/tags/TSTable5.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} text-center">
+	        <button type="button" class="btn btn-secondary btn-sm rounded first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-secondary btn-sm rounded next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-secondary btn-sm rounded last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_www/web/WEB-INF/tags/Widget.tag
===================================================================
diff -u
--- lams_www/web/WEB-INF/tags/Widget.tag	(revision 0)
+++ lams_www/web/WEB-INF/tags/Widget.tag	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -0,0 +1,105 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="shadow" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyText" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextAlignment" required="false" rtexprvalue="true"%>
+<%@ attribute name="bodyTextFontSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="escapeXml" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="icon" required="false" rtexprvalue="true"%>
+<%@ attribute name="iconLink" required="false" rtexprvalue="true"%>
+<%@ attribute name="footerText" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty style}">				
+	<c:set var="style">info</c:set>
+</c:if>
+
+<c:if test="${empty titleAlignment}">				
+	<c:set var="titleAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty titleFontSize}">				
+	<c:set var="titleFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextAlignment}">				
+	<c:set var="bodyTextAlignment">text-left</c:set>
+</c:if>
+
+<c:if test="${empty bodyTextFontSize}">				
+	<c:set var="bodyTextFontSize">inherit</c:set>
+</c:if>
+
+<c:if test="${empty shadow}">				
+	<c:set var="shadow">shadow-none</c:set>
+</c:if>
+
+<c:if test="${empty escapeXml}">				
+	<c:set var="escapeXml">true</c:set>
+</c:if>
+
+<c:choose>
+	<c:when test="${type eq 'w1' }">
+
+	<div class="card mb-1 ${shadow}">
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}">
+	        	<c:choose>
+	        		<c:when test="${escapeXml}">
+	        			<c:out value="${bodyText}" escapeXml="true" />
+	        		</c:when>
+	        		<c:otherwise>	
+	        			${bodyText}
+	        		</c:otherwise>
+	        	</c:choose>
+	        </div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      	<div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>
+	
+	
+	<c:when test="${type eq 'w2' }">
+	
+	<div class="card mb-1 ${shadow}">
+		<div class="card-body">
+			<span class="card-title"></span>
+	  <div class="row no-gutters">
+	    <div class="col-4 d-flex  bg-${style} border border-${style} align-items-center justify-content-center" style="border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;">
+	      <i class="fa ${icon}" aria-hidden="true"></i>
+	    </div>
+	    <div class="col-8">
+	      <div class="card-body m-0">
+	        <div class="card-text ${titleAlignment}">${title}</div>
+	        <div class="card-text ${bodyTextAlignment}" style="font-size: ${bodyTextFontSize}"><c:out value="${bodyText}" escapeXml="true" /></div>
+	      </div>
+	      <c:if test="{not empty footerText}">
+	      <div class="card-footer">${footerText}</div>
+	      </c:if>
+	    </div>
+	  </div>
+	</div>
+	</c:when>	
+	
+</c:choose>	
\ No newline at end of file
Index: lams_www/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d -r85121f2d5a0394c96ef2ad1859c22b82391279b7
--- lams_www/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d70c1d800c7dece7e8a2d7d479353cb4ca1f1b6d)
+++ lams_www/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 85121f2d5a0394c96ef2ad1859c22b82391279b7)
@@ -351,7 +351,19 @@
 	<tag-file>
 	    <name>errors</name>
 		<path>/WEB-INF/tags/Errors.tag</path>
-   	</tag-file>  
+   	</tag-file> 
+   	<tag-file>
+	    <name>Widget</name>
+		<path>/WEB-INF/tags/Widget.tag</path>
+   	</tag-file>   
+   	<tag-file>
+	    <name>Page5</name>
+		<path>/WEB-INF/tags/Page5.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable5</name>
+		<path>/WEB-INF/tags/TSTable5.tag</path>
+   	</tag-file>    
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>