Index: lams_central/web/css/components.scss
===================================================================
diff -u -r56ec8d9806c22331d9483e197f0e270b638471be -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_central/web/css/components.scss	(.../components.scss)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
+++ lams_central/web/css/components.scss	(.../components.scss)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -479,7 +479,7 @@
 	border-radius: 2.8rem;
 	overflow: hidden;
 	background-color: var(--bs-white);
-	margin: var(--component_page_wrapper_margin);
+	margin: var(--lams-component-page-wrapper-margin);
 }
 
 .component-page-wrapper button.no-decoration {
@@ -562,7 +562,7 @@
 .ltable {
 	margin-bottom: 1rem;	
 }
-.ltable:not(.table-striped)>div:first-child {
+.ltable:not(.no-header)>div:first-child {
 	border-top: 1px solid #ddd;
     background-color: rgba(var(--bs-light-rgb), 1);
     font-style: italic;
@@ -582,6 +582,9 @@
     background-color: var(--bs-gray-200);
   }
 }
+.ltable.table-hover>div:not(:first-child):hover{
+	background-color: var(--bs-gray-200);
+}
 
 /* jqGrid text wrapping */
 .ui-jqgrid tr.jqgrow td, .ui-jqgrid tr.ui-subgrid td {
Index: lams_learning/web/branching/preview.jsp
===================================================================
diff -u -r56ec8d9806c22331d9483e197f0e270b638471be -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_learning/web/branching/preview.jsp	(.../preview.jsp)	(revision 56ec8d9806c22331d9483e197f0e270b638471be)
+++ lams_learning/web/branching/preview.jsp	(.../preview.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -59,7 +59,7 @@
 				<fmt:message key="message.activity.options.noActivitySelected" />
 			</legend>
 		
-			<div class="ltable table-striped">
+			<div class="ltable table-striped no-header">
 				<c:forEach items="${branchingForm.activityURLs}" var="activityURL" varStatus="loop">
 					<div class="row">
 						<div class="col">
Index: lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/dao/hibernate/QaQueUsrDAO.java
===================================================================
diff -u -r69092337b728f903f824a74377bd0ebf9391120c -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/dao/hibernate/QaQueUsrDAO.java	(.../QaQueUsrDAO.java)	(revision 69092337b728f903f824a74377bd0ebf9391120c)
+++ lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/dao/hibernate/QaQueUsrDAO.java	(.../QaQueUsrDAO.java)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -56,8 +56,8 @@
     public QaQueUsr getQaUserBySession(final Long queUsrId, final Long qaSessionId) {
 
 	String strGetUser = "from qaQueUsr in class QaQueUsr where qaQueUsr.queUsrId=:queUsrId and qaQueUsr.qaSession.qaSessionId=:qaSessionId";
-	List<?> list = getSession().createQuery(strGetUser).setParameter("queUsrId", queUsrId.longValue())
-		.setParameter("qaSessionId", qaSessionId.longValue()).list();
+	List<?> list = getSession().createQuery(strGetUser).setParameter("queUsrId", queUsrId)
+		.setParameter("qaSessionId", qaSessionId).list();
 
 	if (list != null && list.size() > 0) {
 	    QaQueUsr usr = (QaQueUsr) list.get(0);
Index: lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/web/controller/LearningController.java
===================================================================
diff -u -ra21e768a73d42a3f0389aea1c5cd6a9d49387664 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/web/controller/LearningController.java	(.../LearningController.java)	(revision a21e768a73d42a3f0389aea1c5cd6a9d49387664)
+++ lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/web/controller/LearningController.java	(.../LearningController.java)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -31,6 +31,7 @@
 import java.util.Set;
 import java.util.TimeZone;
 import java.util.TreeMap;
+import java.util.stream.Collectors;
 
 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServletRequest;
@@ -60,6 +61,7 @@
 import org.lamsfoundation.lams.tool.qa.util.QaComparator;
 import org.lamsfoundation.lams.tool.qa.util.QaStringComparator;
 import org.lamsfoundation.lams.tool.qa.web.form.QaLearningForm;
+import org.lamsfoundation.lams.usermanagement.User;
 import org.lamsfoundation.lams.usermanagement.dto.UserDTO;
 import org.lamsfoundation.lams.util.DateUtil;
 import org.lamsfoundation.lams.util.MessageService;
@@ -126,8 +128,14 @@
 
 	    // forwards to the leaderSelection page
 	    if (groupLeader == null && !mode.equals(ToolAccessMode.TEACHER.toString())) {
-
-		List<QaQueUsr> groupUsers = qaService.getUsersBySessionId(new Long(toolSessionID).longValue());
+		List<QaQueUsr> groupQaUsers = qaService.getUsersBySessionId(new Long(toolSessionID).longValue());
+		List<User> groupUsers = groupQaUsers.stream().map(qaUser -> {
+		    User userI = new User();
+		    userI.setUserId(qaUser.getQueUsrId().intValue());
+		    userI.setFirstName(qaUser.getFullname());
+	            return userI;
+	        }).collect(Collectors.toList());
+		
 		request.setAttribute(ATTR_GROUP_USERS, groupUsers);
 		request.setAttribute(TOOL_SESSION_ID, toolSessionID);
 		request.setAttribute(ATTR_CONTENT, qaContent);
Index: lams_tool_vote/src/java/org/lamsfoundation/lams/tool/vote/dao/hibernate/VoteUserDAO.java
===================================================================
diff -u -r374f1e3729c3892074184bbd480ae87bce110cfd -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/src/java/org/lamsfoundation/lams/tool/vote/dao/hibernate/VoteUserDAO.java	(.../VoteUserDAO.java)	(revision 374f1e3729c3892074184bbd480ae87bce110cfd)
+++ lams_tool_vote/src/java/org/lamsfoundation/lams/tool/vote/dao/hibernate/VoteUserDAO.java	(.../VoteUserDAO.java)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -84,7 +84,7 @@
 
 	String strGetUser = "from voteQueUsr in class VoteQueUsr where voteQueUsr.queUsrId=:queUsrId and voteQueUsr.voteSession.uid=:voteSessionId";
 	List<VoteQueUsr> list = getSessionFactory().getCurrentSession().createQuery(strGetUser)
-		.setParameter("queUsrId", queUsrId.longValue()).setParameter("voteSessionId", voteSessionId.longValue())
+		.setParameter("queUsrId", queUsrId).setParameter("voteSessionId", voteSessionId)
 		.list();
 
 	if (list != null && list.size() > 0) {
Index: lams_tool_vote/src/java/org/lamsfoundation/lams/tool/vote/web/controller/LearningController.java
===================================================================
diff -u -r4506f2f22412fe355a36c51e0ce06b483b85c2e3 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/src/java/org/lamsfoundation/lams/tool/vote/web/controller/LearningController.java	(.../LearningController.java)	(revision 4506f2f22412fe355a36c51e0ce06b483b85c2e3)
+++ lams_tool_vote/src/java/org/lamsfoundation/lams/tool/vote/web/controller/LearningController.java	(.../LearningController.java)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -32,6 +32,7 @@
 import java.util.TimeZone;
 import java.util.TreeMap;
 import java.util.TreeSet;
+import java.util.stream.Collectors;
 
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
@@ -54,6 +55,7 @@
 import org.lamsfoundation.lams.tool.vote.util.VoteApplicationException;
 import org.lamsfoundation.lams.tool.vote.util.VoteComparator;
 import org.lamsfoundation.lams.tool.vote.web.form.VoteLearningForm;
+import org.lamsfoundation.lams.usermanagement.User;
 import org.lamsfoundation.lams.usermanagement.dto.UserDTO;
 import org.lamsfoundation.lams.util.DateUtil;
 import org.lamsfoundation.lams.util.MessageService;
@@ -751,8 +753,14 @@
 
 	    // forwards to the leaderSelection page
 	    if (groupLeader == null && !mode.equals(ToolAccessMode.TEACHER.toString())) {
-
-		Set<VoteQueUsr> groupUsers = voteSession.getVoteQueUsers();
+		Set<VoteQueUsr> groupVoteUsers = voteSession.getVoteQueUsers();
+		List<User> groupUsers = groupVoteUsers.stream().map(qaUser -> {
+		    User userI = new User();
+		    userI.setUserId(qaUser.getQueUsrId().intValue());
+		    userI.setFirstName(qaUser.getFullname());
+	            return userI;
+	        }).collect(Collectors.toList());
+		
 		request.setAttribute(ATTR_GROUP_USERS, groupUsers);
 		request.setAttribute(TOOL_SESSION_ID, toolSessionID);
 		request.setAttribute(ATTR_CONTENT, voteContent);
Index: lams_tool_vote/web/WEB-INF/tags/Alert5.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_vote/web/WEB-INF/tags/Alert5.tag	(.../Alert5.tag)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -5,6 +5,10 @@
 <%@ attribute name="id" required="false" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="type" required="false" rtexprvalue="true"%>
+<%@ attribute name="isIconDisplayed" required="false" rtexprvalue="true"%>
+<c:if test="${empty isIconDisplayed}">
+	<c:set var="isIconDisplayed" value="true" />
+</c:if>
 
 <c:set var="idName" value="alert-${type}" />
 <c:if test="${not empty id}">
@@ -24,20 +28,26 @@
 	</c:when>
 	<c:when test="${type == 'warning'}">
 		<c:set var="alertType" value="warning" />
-		<c:set var="iconType" value="exclamation-circle" />
+		<c:set var="iconType" value="circle-exclamation" />
 	</c:when>
 </c:choose>
 
 <div class="row justify-content-md-center">
 	<div class="col-md-auto">
 		<div id="${idName}" class="alert alert-${alertType} shadow" role="alert">
-			<c:if test="${not empty title}">
-				<span class="fa fa-${iconType} "></span> <span class="alert-heading fw-bold">${title}</span>
+			<c:if test="${close}">
+				<button type="button" class="btn-close btn-sm float-end ms-4" data-bs-dismiss="alert" aria-label="Close"></button>
+			</c:if>
+				
+			<c:if test="${not empty pageScope.title}">
+				<span class="alert-heading fw-bold">${pageScope.title}</span>
 				<hr>
 			</c:if>
-			<p class="mb-0">
-			<jsp:doBody />
-			</p>
+			
+			<c:if test="${isIconDisplayed}">
+				<i class="fa fa-lg fa-${iconType} text-muted me-1"></i>
+			</c:if>
+			<jsp:doBody />	
 		</div>
 	</div>
-</div>	
\ No newline at end of file
+</div>
Index: lams_tool_vote/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r955865d255f86a5447f729ec1ce573b2b6f94b27 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
+++ lams_tool_vote/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -6,6 +6,7 @@
 <%@ attribute name="toolSessionID" required="true" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="refresh" required="false" rtexprvalue="true"%>
+<%@ attribute name="lessonID" required="false" rtexprvalue="true"%>
 
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="pageLearnerPortraitUuid"><lams:user property="portraitUuid" /></c:set>
@@ -55,7 +56,9 @@
                 decoderDiv = $('<div />');
 
             $(document).ready(function (){
-                initLearnerPage(${toolSessionID});
+                const toolSessionID = ${empty lessonID ? toolSessionID : 'null'},
+            		lessonID = ${empty lessonID ? 'null' : lessonID};
+                initLearnerPage(toolSessionID, lessonID);
             });
 
             function preventLearnerAutosaveFromMultipleTabs(autosaveInterval) {
@@ -75,56 +78,75 @@
 
     <body class="component">
     <div class="component-page-wrapper">
-        <nav inert class="component-sidebar" role="navigation dialog"
-             aria-label="Side menu" aria-expanded="false"  aria-modal="true">
-            <button class="sidebar-toggle-button no-decoration" aria-labelledby="progress-bar-title">
-                <i class="fa-solid fa-xmark"></i>
-            </button>
-            <a href="/" title="Return to course page" class="lams-logo">
-                <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="false"/>
-            </a>
+		<div class="offcanvas offcanvas-start" tabindex="-1" id="component-offcanvas" aria-label="Side menu">
+			<div class="offcanvas-body">
+				<button type="button" class="btn-close float-end" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+				
+	            <span class="lams-logo mt-3">
+	                <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="false"/>
+	            </span>
+			
+	            <div id="offcanvas-support-bar" class="offcanvas-bar lcard d-none pb-3">
+	                <div class="offcanvas-title py-3">
+	                	Support activities
+	                </div>
+	                <ul id="support-bar-items" class="progress-bar-items list-group text-start">
+	                </ul>
+	            </div>
+	
+				<div class="offcanvas-bar lcard pb-3">
+		            <div class="offcanvas-title py-3" id="offcanvas-progress-bar-title">
+		            	My progress
+		            </div>
+		            <ul id="progress-bar-items" class="progress-bar-items list-group text-start">
+		            </ul>
+	            </div>
+			</div>
+		</div>
 
-            <div id="support-bar" class="d-none pb-4 w-100">
-                <span class="sidebar-title"><i class="fa-solid fa-toolbox sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="support-bar-title">Support activities</span></span>
-                <ul id="support-bar-items" class="progress-bar-items" role="menu">
-                </ul>
-            </div>
-
-            <span class="sidebar-title"><i class="fa-solid fa-fw fa-bars-progress sidebar-title-icon"></i>&nbsp;<span tabindex="0" id="progress-bar-title">Progress bar</span></span>
-            <ul id="progress-bar-items" class="progress-bar-items w-100" role="menu">
-            </ul>
-        </nav>
-
-        <div class="component-page-content">
+		<div class="component-page-content">
             <a href="#component-main-content" class="visually-hidden-focusable p-2">Skip to main content</a>
 
             <header id="header" class="d-flex justify-content-between" role="banner">
                 <div class="d-flex">
-                    <button class="sidebar-toggle-button no-decoration" accesskey="p" id="hamb"
-                            data-closed-class="fa-bars" data-opened-class="fa-bars-staggered"
-                            aria-labelledby="progress-bar-title" aria-expanded="false">
-                        <i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
-                    </button>
-                    <h1 id="lesson-name"></h1>
+					<button class="no-decoration" id="hamb" type="button" accesskey="p" 
+							data-bs-toggle="offcanvas" data-bs-target="#component-offcanvas"
+							aria-controls="component-offcanvas"
+							aria-labelledby="offcanvas-progress-bar-title"
+							title="Your lesson completion">
+						<i class="fa-solid fa-fw fa-bars" aria-hidden="true"></i>
+					</button>
+
+                    <h1 id="lesson-name" title="Lesson name"></h1>
                 </div>
+                
                 <div class="top-menu">
-                    <div id="progress-bar-widget" title="Your lesson completion" class="d-none d-sm-none d-md-block">
-                        <div class="row">
-                            <div class="col-6">
+                    <button id="profile-picture" class="no-decoration px-3" type="button"
+                            onclick="javascript:showMyPortraitDialog()" title="Your portrait" >
+                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" alt="Your profile portrait">
+                    </button>
+                    
+                    <button type="button" id="progress-bar-widget" class="no-decoration d-none d-sm-none d-md-block"
+                    		data-bs-toggle="offcanvas" data-bs-target="#component-offcanvas"
+							aria-controls="component-offcanvas"
+							aria-labelledby="offcanvas-progress-bar-title"
+							title="Your lesson completion">
+                        <div class="row m-0">
+                            <div class="col-6 text-start p-0">
                                 Progress
                             </div>
-                            <div class="col-6 text-end" id="progress-bar-widget-value">
+                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">
                             </div>
                         </div>
                         <div class="progress mt-1 mb-2">
                             <div class="progress-bar bg-success" role="progressbar" aria-label="Progress bar widget"
                                  aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
-                    </div>
-                    <button id="profile-picture" class="no-decoration px-3 py-1" type="button"
-                            onclick="javascript:showMyPortraitDialog()">
-                        <img class="portrait-sm portrait-round" src="${pageLearnerPortraitSrc}" aria-label="<c:out value="${pageLearnerFirstName} ${pageLearnerLastName}" escapeXml="true"/> profile picture" alt="User profile picture">
                     </button>
+                    
+                    <c:if test="${not isIntegrationLogin}">
+                    	<a href="/" id="return-to-index" class="btn-close btn-sm float-end ms-3" title="Close and return to the course page"></a>
+                    </c:if>
                 </div>
             </header>
 
Index: lams_tool_vote/web/WEB-INF/tags/WaitForLeader.tag
===================================================================
diff -u -r955865d255f86a5447f729ec1ce573b2b6f94b27 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision 955865d255f86a5447f729ec1ce573b2b6f94b27)
+++ lams_tool_vote/web/WEB-INF/tags/WaitForLeader.tag	(.../WaitForLeader.tag)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -12,7 +12,7 @@
 
 <%-- Default value for I18N keys --%>
 <c:if test="${empty isUserIdPropertyCapitalized}">
-	//org.lamsfoundation.lams.usermanagement.User has non-capitalized userId property
+	<%--org.lamsfoundation.lams.usermanagement.User has non-capitalized userId property--%>
 	<c:set var="isUserIdPropertyCapitalized" value="false" />
 </c:if> 
 <c:if test="${empty refreshKey}">
Index: lams_tool_vote/web/learning/AllNominations.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/AllNominations.jsp	(.../AllNominations.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_vote/web/learning/AllNominations.jsp	(.../AllNominations.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,26 +1,17 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set scope="request" var="lams"><lams:LAMSURL /></c:set>
+<c:set scope="request" var="tool"><lams:WebAppURL/></c:set>
+<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
+<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
+<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
 
-<c:set scope="request" var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set scope="request" var="tool">
-	<lams:WebAppURL />
-</c:set>
-<lams:html>
-<lams:head>
-	<lams:css />
+<lams:PageLearner title="${voteGeneralLearnerFlowDTO.activityTitle}" toolSessionID="${voteLearningForm.toolSessionID}">
 	<link type="text/css" href="${lams}/css/defaultHTML_chart.css" rel="stylesheet" />
 
-	<title><fmt:message key="activity.title" /></title>
-
-	<lams:JSImport src="includes/javascript/common.js" />
-	<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>
+	<!--<lams:JSImport src="includes/javascript/common.js" />-->
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/d3.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/chart.js"></script>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${voteLearningForm.toolSessionID}', '', function() {
 			submitMethod('learnerFinished');
@@ -32,77 +23,67 @@
 			document.forms.voteLearningForm.submit();
 		}
 	</script>
-</lams:head>
 
-<body class="stripes">
+	<div id="container-main">
+		<form:form modelAttribute="voteLearningForm" method="POST">
+			<form:hidden path="toolSessionID" />
+			<form:hidden path="userID" />
+			<form:hidden path="revisitingUser" />
+			<form:hidden path="previewOnly" />
+			<form:hidden path="maxNominationCount" />
+			<form:hidden path="minNominationCount" />
+			<form:hidden path="allowTextEntry" />
+			<form:hidden path="lockOnFinish" />
+			<form:hidden path="reportViewOnly" />
+			<form:hidden path="userEntry" />
+			<form:hidden path="showResults" />
+			<form:hidden path="userLeader" />
+			<form:hidden path="groupLeaderName" />
+			<form:hidden path="groupLeaderUserId" />
+			<form:hidden path="useSelectLeaderToolOuput" />
 
-	<form:form modelAttribute="voteLearningForm" method="POST">
-		<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
-		<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
-		<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
-
-		<form:hidden path="toolSessionID" />
-		<form:hidden path="userID" />
-		<form:hidden path="revisitingUser" />
-		<form:hidden path="previewOnly" />
-		<form:hidden path="maxNominationCount" />
-		<form:hidden path="minNominationCount" />
-		<form:hidden path="allowTextEntry" />
-		<form:hidden path="lockOnFinish" />
-		<form:hidden path="reportViewOnly" />
-		<form:hidden path="userEntry" />
-		<form:hidden path="showResults" />
-		<form:hidden path="userLeader" />
-		<form:hidden path="groupLeaderName" />
-		<form:hidden path="groupLeaderUserId" />
-		<form:hidden path="useSelectLeaderToolOuput" />
-
-		<lams:Page type="learner" title="${voteGeneralLearnerFlowDTO.activityTitle}">
-
-
-
 			<c:if test="${isLeadershipEnabled}">
 				<lams:LeaderDisplay idName="leaderEnabled" username="${voteLearningForm.groupLeaderName}" userId="${voteLearningForm.groupLeaderUserId}"/>
 			</c:if>
 
-			<h4>
+			<div class="card-subheader">
 				<fmt:message key="label.progressiveResults" />
-			</h4>
+			</div>
 
 			<!--present  a mini summary table here -->
 
-			<table class="table table-sm table-hover">
-				<tr>
-					<th><fmt:message key="label.nomination" /></th>
-					<th class="text-center"><fmt:message key="label.total.votes" /></th>
-				</tr>
+			<div class="ltable table-hover">
+				<div class="row">
+					<div class="col"><fmt:message key="label.nomination" /></div>
+					<div class="col-2 text-center"><fmt:message key="label.total.votes" /></div>
+				</div>
 
 				<c:forEach var="currentNomination" items="${voteGeneralLearnerFlowDTO.mapStandardNominationsHTMLedContent}">
 					<c:set var="currentNominationKey" scope="request" value="${currentNomination.key}" />
-					<tr>
-						<td class="text-left"><c:out value="${currentNomination.value}" escapeXml="false" /></td>
+					<div class="row">
+						<div class="col text-left">
+							<c:out value="${currentNomination.value}" escapeXml="false" />
+						</div>
 
-						<td class="text-center"><c:forEach var="currentUserCount"
+						<div class="col-2 text-center"><c:forEach var="currentUserCount"
 								items="${voteGeneralLearnerFlowDTO.mapStandardUserCount}">
-								<c:set var="currentUserKey" scope="request" value="${currentUserCount.key}" />
-								<c:if test="${currentNominationKey == currentUserKey}">
+							<c:set var="currentUserKey" scope="request" value="${currentUserCount.key}" />
+							<c:if test="${currentNominationKey == currentUserKey}">
 
-									<c:if test="${currentUserCount.value != '0' }">
+								<c:if test="${currentUserCount.value != '0' }">
 										<c:forEach var="currentQuestionUid" items="${voteGeneralLearnerFlowDTO.mapStandardQuestionUid}">
 											<c:set var="currentQuestionUidKey" scope="request" value="${currentQuestionUid.key}" />
 											<c:if test="${currentQuestionUidKey == currentUserKey}">
 
 												<c:forEach var="currentSessionUid" items="${voteGeneralLearnerFlowDTO.mapStandardToolSessionUid}">
 													<c:set var="currentSessionUidKey" scope="request" value="${currentSessionUid.key}" />
 													<c:if test="${currentSessionUidKey == currentQuestionUidKey}">
-
 														<c:if test="${currentNomination.value != 'Open Vote'}">
 															<c:set scope="request" var="viewURL">
 																<lams:WebAppURL />monitoring.do?method=getVoteNomination&questionUid=${currentQuestionUid.value}&sessionUid=${currentSessionUid.value}
-																						</c:set>
+															</c:set>
 
 															<c:out value="${currentUserCount.value}" />
-
 														</c:if>
 														<c:if test="${currentNomination.value == 'Open Vote'}">
 															<c:out value="${currentUserCount.value}" />
@@ -112,42 +93,45 @@
 
 											</c:if>
 										</c:forEach>
-									</c:if>
-									<c:if test="${currentUserCount.value == '0' }">
-										<c:out value="${currentUserCount.value}" />
-									</c:if>
-
 								</c:if>
+									
+								<c:if test="${currentUserCount.value == '0' }">
+									<c:out value="${currentUserCount.value}" />
+								</c:if>
+							</c:if>
+								
 							</c:forEach> <c:forEach var="currentRate" items="${voteGeneralLearnerFlowDTO.mapStandardRatesContent}">
 								<c:set var="currentRateKey" scope="request" value="${currentRate.key}" />
 								<c:if test="${currentNominationKey == currentRateKey}"> 				
 									&nbsp(<fmt:formatNumber type="number" maxFractionDigits="2" value="${currentRate.value}" />
 									<fmt:message key="label.percent" />) 
 								</c:if>
-							</c:forEach></td>
-					</tr>
+							</c:forEach>
+						</div>
+					</div>
 				</c:forEach>
+			</div>
 
-			</table>
-
-
 			<div class="float-end">
 				<c:set var="chartURL" value="${tool}chartGenerator.do?currentSessionId=${voteLearningForm.toolSessionID}" />
-				<a title="<fmt:message key='label.tip.displayPieChart'/>"
-					class="fa fa-pie-chart text-primary btn btn-md btn-primary"
-					onclick="javascript:drawChart('pie', 'chartDiv', '${chartURL}')"></a> <a
-					title="<fmt:message key='label.tip.displayBarChart'/>" class="fa fa-bar-chart text-primary btn btn-md btn-primary"
-					onclick="javascript:drawChart('bar', 'chartDiv', '${chartURL}')"></a>
+				<button type="button" title="<fmt:message key='label.tip.displayPieChart'/>"
+					class="fa fa-pie-chart text-primary btn btn-light"
+					onclick="javascript:drawChart('pie', 'chartDiv', '${chartURL}')"></button> 
+				<button type="button" title="<fmt:message key='label.tip.displayBarChart'/>"
+					class="fa fa-bar-chart text-primary btn btn-light"
+					onclick="javascript:drawChart('bar', 'chartDiv', '${chartURL}')"></button>
 			</div>
 			<div id="textEntries">
 				<c:if test="${voteLearningForm.allowTextEntry}">
-					<strong><fmt:message key="label.open.votes" /> </strong>
+					<div class="card-subheader">
+						<fmt:message key="label.open.votes" />
+					</div>
 
 					<c:forEach var="vote" items="${requestScope.listUserEntriesContent}">
 						<c:if test="${vote.userEntry != ''}">
 							<div class="d-flex">
 								<div class="flex-shrink-0">
-									<i class="fa fa-xs fa-check text-success"></i>
+									<i class="fa fa-check text-success"></i>
 								</div>
 								<div class="flex-grow-1 ms-3">
 									<c:choose>
@@ -164,19 +148,22 @@
 					</c:forEach>
 				</c:if>
 			</div>
-			<div id="nominations">
-				<c:choose>
-					<c:when test="${fn:length(requestScope.listGeneralCheckedOptionsContent) > 1}">
-						<strong><fmt:message key="label.learner.nominations" /> </strong>
-					</c:when>
-					<c:otherwise>
-						<strong><fmt:message key="label.learner.nomination" /> </strong>
-					</c:otherwise>
-				</c:choose>
+			<div id="nominations" class="mt-4">
+				<div class="card-subheader">
+					<c:choose>
+						<c:when test="${fn:length(requestScope.listGeneralCheckedOptionsContent) > 1}">
+							<fmt:message key="label.learner.nominations" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="label.learner.nomination" />
+						</c:otherwise>
+					</c:choose>
+				</div>
+				
 				<c:forEach var="entry" items="${requestScope.listGeneralCheckedOptionsContent}">
 					<div class="d-flex">
 						<div class="flex-shrink-0">
-							<i class="fa fa-xs fa-check text-success"></i>
+							<i class="fa fa-check text-success"></i>
 						</div>
 						<div class="flex-grow-1 ms-3">
 							<c:out value="${entry}" escapeXml="false" />
@@ -187,7 +174,7 @@
 				<c:if test="${not empty voteLearningForm.userEntry}">
 					<div class="d-flex">
 						<div class="flex-shrink-0">
-							<i class="fa fa-xs fa-check text-success"></i>
+							<i class="fa fa-check text-success"></i>
 						</div>
 						<div class="flex-grow-1 ms-3">
 							<c:out value="${voteLearningForm.userEntry}" escapeXml="true" />
@@ -196,35 +183,20 @@
 				</c:if>
 			</div>
 
-			<c:if test="${voteGeneralLearnerFlowDTO.notebookEntry != null && voteGeneralLearnerFlowDTO.notebookEntry != ''}">
-				<div class="panel panel-default">
-					<div class="panel-heading panel-title"></div>
-					<div class="panel-body">
-						<fmt:message key="label.notebook.entries" />
-						<div class="panel">
-							<lams:out value="${voteGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
-						</div>
-					</div>
-				</div>
+			<c:if test="${voteGeneralLearnerFlowDTO.notebookEntry != null && voteGeneralLearnerFlowDTO.notebookEntry != ''}">			
+				<lams:NotebookReedit
+					reflectInstructions="${voteGeneralLearnerFlowDTO.reflectionSubject}"
+					reflectEntry="${voteGeneralLearnerFlowDTO.notebookEntry}"
+					isEditButtonEnabled="false"
+					notebookHeaderLabelKey="label.notebook.entries"/>
 			</c:if>
 
 			<div id="chartDiv" style="height: 220px; display: none;"></div>
 
 			<c:if test="${voteGeneralLearnerFlowDTO.reportViewOnly != 'true' }">
 				<div class="activity-bottom-buttons">
-					<button class="btn btn-secondary float-start" onclick="submitMethod('viewAllResults');">
-						<fmt:message key="label.refresh" />
-					</button>
-	
-					<c:if test="${voteLearningForm.lockOnFinish != 'true' && hasEditRight}">
-						<button class="btn btn-secondary float-start " onclick="submitMethod('redoQuestionsOk');">
-							<fmt:message key="label.retake" />
-						</button>
-					</c:if>
-	
 					<c:if test="${voteGeneralLearnerFlowDTO.reflection != 'true' || !hasEditRight}">
-						<button type="button"
-							class="btn btn-primary na" id="finishButton">
+						<button type="button" class="btn btn-primary na" id="finishButton">
 							<c:choose>
 								<c:when test="${isLastActivity}">
 									<fmt:message key="button.submitActivity" />
@@ -237,16 +209,23 @@
 					</c:if>
 	
 					<c:if test="${voteGeneralLearnerFlowDTO.reflection == 'true' && hasEditRight}">
-						<button onclick="javascript:submitMethod('forwardtoReflection');" class="btn btn-primary">
+						<button onclick="javascript:submitMethod('forwardtoReflection');" class="btn btn-primary na">
 							<fmt:message key="label.continue" />
 						</button>
 					</c:if>
+	
+					<c:if test="${voteLearningForm.lockOnFinish != 'true' && hasEditRight}">
+						<button class="btn btn-secondary btn-icon-return me-2" onclick="submitMethod('redoQuestionsOk');">
+							<fmt:message key="label.retake" />
+						</button>
+					</c:if>
+					
+					<button class="btn btn-secondary btn-icon-refresh me-2" onclick="submitMethod('viewAllResults');">
+						<fmt:message key="label.refresh" />
+					</button>
 				</div>
 			</c:if>
-			</div>
-			<div id="footer"></div>
-		</lams:Page>
-	</form:form>
-
-</body>
-</lams:html>
\ No newline at end of file
+			
+		</form:form>
+	</div>
+</lams:PageLearner>
Index: lams_tool_vote/web/learning/AnswersContent.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_vote/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,20 +1,8 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
 
-<c:set scope="request" var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set scope="request" var="tool">
-	<lams:WebAppURL />
-</c:set>
-
-<lams:html>
-<lams:head>
-	<lams:css />
-	<title><fmt:message key="activity.title" /></title>
-
-	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-	<script language="JavaScript" type="text/JavaScript">
+<lams:PageLearner title="${voteGeneralLearnerFlowDTO.activityTitle}" toolSessionID="${voteLearningForm.toolSessionID}">
+	<script type="text/JavaScript">
 		var noSelected = 0;
 		var maxVotes = <c:out value="${voteLearningForm.maxNominationCount}"/>;
 		var minVotes = <c:out value="${voteLearningForm.minNominationCount}"/>;
@@ -36,7 +24,6 @@
 				noSelected--;
 				alertTooManyVotes(maxVotes);
 			}
-
 		}
 
 		function validate() {
@@ -73,7 +60,6 @@
 		}
 
 		function checkLeaderProgress() {
-
 			$.ajax({
 				async : false,
 				url : '<c:url value="/learning/checkLeaderProgress.do"/>',
@@ -89,7 +75,6 @@
 		}
 
 		$(document).ready(function() {
-
 			var mode = "${voteGeneralLearnerFlowDTO.learningMode}";
 			var isUserLeader = ($('[name="userLeader"]').val() === "true");
 			var isLeadershipEnabled = ($(
@@ -108,7 +93,6 @@
 				$('[name="continueOptionsCombined"]').hide();
 			}
 
-
 			<%-- Connect to command websocket only if it is learner UI --%>
 			<c:if test="${voteLearningForm.useSelectLeaderToolOuput and voteGeneralLearnerFlowDTO.learningMode == 'learner'}">
 				// command websocket stuff for refreshing
@@ -121,107 +105,110 @@
 			</c:if>
 		});
 	</script>
-</lams:head>
 
-<body class="stripes">
-	<form:form modelAttribute="voteLearningForm" onsubmit="return validate();" action="continueOptionsCombined.do" method="POST">
-		<form:hidden path="toolSessionID" />
-		<form:hidden path="userID" />
-		<form:hidden path="revisitingUser" />
-		<form:hidden path="previewOnly" />
-		<form:hidden path="maxNominationCount" />
-		<form:hidden path="minNominationCount" />
-		<form:hidden path="allowTextEntry" />
-		<form:hidden path="lockOnFinish" />
-		<form:hidden path="reportViewOnly" />
-		<form:hidden path="showResults" />
-		<form:hidden path="userLeader" />
-		<form:hidden path="groupLeaderName" />
-		<form:hidden path="groupLeaderUserId" />
-		<form:hidden path="useSelectLeaderToolOuput" />
+	<div id="container-main">
+		<form:form modelAttribute="voteLearningForm" onsubmit="return validate();" action="continueOptionsCombined.do" method="POST">
+			<form:hidden path="toolSessionID" />
+			<form:hidden path="userID" />
+			<form:hidden path="revisitingUser" />
+			<form:hidden path="previewOnly" />
+			<form:hidden path="maxNominationCount" />
+			<form:hidden path="minNominationCount" />
+			<form:hidden path="allowTextEntry" />
+			<form:hidden path="lockOnFinish" />
+			<form:hidden path="reportViewOnly" />
+			<form:hidden path="showResults" />
+			<form:hidden path="userLeader" />
+			<form:hidden path="groupLeaderName" />
+			<form:hidden path="groupLeaderUserId" />
+			<form:hidden path="useSelectLeaderToolOuput" />
 
-
-		<lams:Page type="learner" title="${voteGeneralLearnerFlowDTO.activityTitle}">
-
-
-
 			<!-- Announcements and advanced settings -->
 			<c:if test="${voteLearningForm.useSelectLeaderToolOuput}">
 				<lams:LeaderDisplay idName="groupLeader" username="${voteLearningForm.groupLeaderName}" userId="${voteLearningForm.groupLeaderUserId}"/>
 			</c:if>
 
 			<c:if test="${not empty voteGeneralLearnerFlowDTO.submissionDeadline}">
-				<lams:Alert id="submissionDeadline" type="warning" close="false">
+				<lams:Alert5 id="submissionDeadline" type="warning">
 					<fmt:message key="authoring.info.teacher.set.restriction">
 						<fmt:param>
 							<lams:Date value="${voteGeneralLearnerFlowDTO.submissionDeadline}" />
 						</fmt:param>
 					</fmt:message>
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
 
-			<c:if test="${voteGeneralLearnerFlowDTO.maxNominationCountReached == 'true'}">
-				<lams:Alert id="maxNominations" type="info" close="false">
+			<c:if test="${voteLearningForm.maxNominationCountReached == 'true'}">
+				<lams:Alert5 id="maxNominations" type="info">
 					<fmt:message key="error.maxNominationCount.reached" />
 					<c:out value="${voteGeneralLearnerFlowDTO.maxNominationCount}" />
 					<fmt:message key="label.nominations" />
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
-			<!-- End announcements and advanced settings -->
-			<div class="panel">
-				<c:out value="${voteGeneralLearnerFlowDTO.activityInstructions}" escapeXml="false" />
-			</div>
 
-			<c:if test="${voteGeneralLearnerFlowDTO.maxNominationCount > 1}">
-				<lams:Alert id="maxNominations" type="info" close="false">
+			<c:if test="${voteLearningForm.maxNominationCount > 1}">
+				<lams:Alert5 id="maxNominations" type="info">
 					<fmt:message key="label.nominations.available">
 						<fmt:param>
-							<c:out value="${voteGeneralLearnerFlowDTO.maxNominationCount}" />
+							<c:out value="${voteLearningForm.maxNominationCount}" />
 						</fmt:param>
 					</fmt:message>
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
+			
+			<!-- End announcements and advanced settings -->
+			<div id="instructions" class="instructions">
+				<c:out value="${voteGeneralLearnerFlowDTO.activityInstructions}" escapeXml="false" />
+			</div>
 
 			<!-- options  -->
-			<div class="table-responsive">
-				<table class="table table-hover table-sm">
-					<tbody>
+			<fieldset>
+				<legend class="visually-hidden">
+					<fmt:message key="label.vote.nominations" />
+				</legend>
+			
+				<div class="table-responsive">
+					<div class="div-hover">
 						<c:set var="count" value="0" scope="page" />
 						<c:forEach var="subEntry" varStatus="status" items="${requestScope.mapQuestionContentLearner}">
 							<c:set var="count" value="${count + 1}" scope="page" />
-
-							<tr>
-								<td width="100%">
+	
+							<div class="row">
+								<div class="col">
 									<div class="form-check">
 										<input type="checkbox" id="vote${count}" name="checkedVotes" value="${subEntry.key}" class="form-check-input"
 											onClick="updateCount(this);">
-	
+		
 										<label for="vote${count}" class="form-check-label">
 											<c:out value="${subEntry.value}" escapeXml="false" />
 										</label>
 									</div>
-								</td>
-							</tr>
+								</div>
+							</div>
 						</c:forEach>
-					</tbody>
-				</table>
-			</div>
+						
+						<c:if test="${voteLearningForm.allowTextEntry == 'true'}">
+							<div class="row">
+								<div class="col input-group">
+									<label for="userEntry" class="input-group-text">
+										<fmt:message key="label.other" />:
+									</label>
+									<form:input cssClass="form-control" path="userEntry" size="30" maxlength="100" />
+								</div>
+							</div>
+						</c:if>
+					</div>
+				</div>
+			</fieldset>
 			<!-- End options -->
 
-			<c:if test="${voteLearningForm.allowTextEntry == 'true'}">
-				<fmt:message key="label.other" />:
-				<form:input cssClass="form-control" path="userEntry" size="30" maxlength="100" />
-			</c:if>
-
 			<div class="activity-bottom-buttons">
 				<form:hidden path="donePreview" />
-				<input type="submit" name="continueOptionsCombined" class="btn btn-primary"
-					   value='<fmt:message key="label.submit.vote" />' />
+				<button type="submit" name="continueOptionsCombined" class="btn btn-primary na">
+					<fmt:message key="label.submit.vote" />
+				</button>
 			</div>
 
-		</lams:Page>
-
-	</form:form>
-
-</body>
-</lams:html>
+		</form:form>
+	</div>
+</lams:PageLearner>
Index: lams_tool_vote/web/learning/ExitLearning.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/ExitLearning.jsp	(.../ExitLearning.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_vote/web/learning/ExitLearning.jsp	(.../ExitLearning.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,64 +1,47 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
+<c:set scope="request" var="lams"><lams:LAMSURL /></c:set>
+<c:set scope="request" var="tool"><lams:WebAppURL /></c:set>
+<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
+<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
+<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
 
-<c:set scope="request" var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set scope="request" var="tool">
-	<lams:WebAppURL />
-</c:set>
-
-<lams:html>
-<lams:head>
-	<lams:css />
+<lams:PageLearner title="${voteGeneralLearnerFlowDTO.activityTitle}" toolSessionID="${voteLearningForm.toolSessionID}">
 	<link type="text/css" href="${lams}/css/defaultHTML_chart.css" rel="stylesheet" />
 
-	<title><fmt:message key="activity.title" /></title>
-
-	<lams:JSImport src="includes/javascript/common.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<!--<lams:JSImport src="includes/javascript/common.js" />-->
 	<script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/chart.js"></script>
-
 	<script type="text/javascript">
 		function submitMethod(actionMethod) {
 			$('.btn').prop('disabled', true);
 			document.forms.voteLearningForm.action = actionMethod + '.do';
 			document.forms.voteLearningForm.submit();
 		}
 	</script>
-</lams:head>
 
-<body class="stripes">
+	<div id="container-main">
+		<form:form modelAttribute="voteLearningForm" method="POST">
+			<form:hidden path="toolSessionID" />
+			<form:hidden path="userID" />
+			<form:hidden path="revisitingUser" />
+			<form:hidden path="previewOnly" />
+			<form:hidden path="maxNominationCount" />
+			<form:hidden path="minNominationCount" />
+			<form:hidden path="allowTextEntry" />
+			<form:hidden path="lockOnFinish" />
+			<form:hidden path="reportViewOnly" />
+			<form:hidden path="userEntry" />
+			<form:hidden path="showResults" />
+			<form:hidden path="userLeader" />
+			<form:hidden path="groupLeaderName" />
+			<form:hidden path="groupLeaderUserId" />
+			<form:hidden path="useSelectLeaderToolOuput" />
 
-	<form:form modelAttribute="voteLearningForm" method="POST">
-		<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
-		<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
-		<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
-
-		<form:hidden path="toolSessionID" />
-		<form:hidden path="userID" />
-		<form:hidden path="revisitingUser" />
-		<form:hidden path="previewOnly" />
-		<form:hidden path="maxNominationCount" />
-		<form:hidden path="minNominationCount" />
-		<form:hidden path="allowTextEntry" />
-		<form:hidden path="lockOnFinish" />
-		<form:hidden path="reportViewOnly" />
-		<form:hidden path="userEntry" />
-		<form:hidden path="showResults" />
-		<form:hidden path="userLeader" />
-		<form:hidden path="groupLeaderName" />
-		<form:hidden path="groupLeaderUserId" />
-		<form:hidden path="useSelectLeaderToolOuput" />
-
-		<lams:Page type="learner" title="${voteGeneralLearnerFlowDTO.activityTitle}">
-
 			<c:if test="${voteLearningForm.lockOnFinish and voteGeneralLearnerFlowDTO.learningMode != 'teacher'}">
-				<lams:Alert id="lockedActivity" type="info" close="false">
+				<lams:Alert5 id="lockedActivity" type="info" close="false">
 					<fmt:message key="message.activityLocked" />
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
 
 			<c:if test="${isLeadershipEnabled}">
@@ -74,35 +57,16 @@
 			</c:if>
 
 			<c:if test="${voteGeneralLearnerFlowDTO.reflection}">
-				<hr class="msg-hr">
-				<div class="panel panel-default">
-					<div class="panel-heading panel-title">
-						<fmt:message key="label.reflection" />
-					</div>
-					<div class="panel-body">
-
-						<lams:out value="${voteGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
-
-						<div class="panel-body mt-2 bg-warning">
-							<lams:out value="${voteGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
-						</div>
-
-						<c:if
-							test="${voteGeneralLearnerFlowDTO.lockOnFinish == 'false' && hasEditRight && voteGeneralLearnerFlowDTO.learningMode != 'teacher'}">
-							<form:button path="forwardtoReflection" cssClass="btn btn-sm btn-secondary mt-2 float-start"
-								onclick="submitMethod('forwardtoReflection');">
-								<fmt:message key="label.edit" />
-							</form:button>
-						</c:if>
-
-					</div>
-				</div>
+				<lams:NotebookReedit
+					reflectInstructions="${voteGeneralLearnerFlowDTO.reflectionSubject}"
+					reflectEntry="${voteGeneralLearnerFlowDTO.notebookEntry}"
+					isEditButtonEnabled="${voteGeneralLearnerFlowDTO.lockOnFinish == 'false' && hasEditRight && voteGeneralLearnerFlowDTO.learningMode != 'teacher'}"
+					notebookHeaderLabelKey="label.reflection"/>
 			</c:if>
 
 			<c:if test="${voteGeneralLearnerFlowDTO.learningMode != 'teacher'}">
 				<div class="activity-bottom-buttons">
-					<button type="submit" class="btn btn-primary na"
-						id="finishButton" onclick="submitMethod('learnerFinished')">
+					<button type="submit" class="btn btn-primary na" id="finishButton" onclick="submitMethod('learnerFinished')">
 						<c:choose>
 							<c:when test="${isLastActivity}">
 								<fmt:message key="button.submitActivity" />
@@ -115,10 +79,6 @@
 				</div>
 			</c:if>
 
-		</lams:Page>
-	</form:form>
-
-
-
-</body>
-</lams:html>
\ No newline at end of file
+		</form:form>
+	</div>
+</lams:PageLearner>
Index: lams_tool_vote/web/learning/IndividualLearnerResults.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_vote/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,22 +1,10 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
+<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
+<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
 
-<c:set scope="request" var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set scope="request" var="tool">
-	<lams:WebAppURL />
-</c:set>
-
-<lams:html>
-<lams:head>
-	<lams:css />
-	<title><fmt:message key="activity.title" /></title>
-
-	<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>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
+<lams:PageLearner title="${voteGeneralLearnerFlowDTO.activityTitle}" toolSessionID="${voteLearningForm.toolSessionID}">
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${voteLearningForm.toolSessionID}', '', function() {
 			submitMethod('learnerFinished');
@@ -28,120 +16,103 @@
 			document.forms.voteLearningForm.submit();
 		}
 	</script>
-</lams:head>
 
-<body class="stripes">
+	<div id="container-main">
+		<form:form modelAttribute="voteLearningForm" method="POST">
+			<form:hidden path="toolSessionID" />
+			<form:hidden path="userID" />
+			<form:hidden path="revisitingUser" />
+			<form:hidden path="previewOnly" />
+			<form:hidden path="maxNominationCount" />
+			<form:hidden path="minNominationCount" />
+			<form:hidden path="allowTextEntry" />
+			<form:hidden path="lockOnFinish" />
+			<form:hidden path="reportViewOnly" />
+			<form:hidden path="userEntry" />
+			<form:hidden path="showResults" />
+			<form:hidden path="userLeader" />
+			<form:hidden path="groupLeaderName" />
+			<form:hidden path="groupLeaderUserId" />
+			<form:hidden path="useSelectLeaderToolOuput" />
 
-	<form:form modelAttribute="voteLearningForm" method="POST">
-		<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
-		<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
-		<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
-
-		<form:hidden path="toolSessionID" />
-		<form:hidden path="userID" />
-		<form:hidden path="revisitingUser" />
-		<form:hidden path="previewOnly" />
-		<form:hidden path="maxNominationCount" />
-		<form:hidden path="minNominationCount" />
-		<form:hidden path="allowTextEntry" />
-		<form:hidden path="lockOnFinish" />
-		<form:hidden path="reportViewOnly" />
-		<form:hidden path="userEntry" />
-		<form:hidden path="showResults" />
-		<form:hidden path="userLeader" />
-		<form:hidden path="groupLeaderName" />
-		<form:hidden path="groupLeaderUserId" />
-		<form:hidden path="useSelectLeaderToolOuput" />
-
-		<lams:Page type="learner" title="${voteGeneralLearnerFlowDTO.activityTitle}">
-
 			<c:if test="${voteLearningForm.lockOnFinish and voteGeneralLearnerFlowDTO.learningMode != 'teacher'}">
-				<lams:Alert id="lockWhenFinished" type="info" close="false">
+				<lams:Alert5 id="lockWhenFinished" type="info" close="false">
 					<fmt:message key="message.warnLockOnFinish" />
-				</lams:Alert>
+				</lams:Alert5>
 			</c:if>
 
 			<c:if test="${isLeadershipEnabled}">
 				<lams:LeaderDisplay idName="leaderEnabled" username="${voteLearningForm.groupLeaderName}" userId="${voteLearningForm.groupLeaderUserId}"/>
 			</c:if>
 
-			<div class="row">
-				<div class="col-12">
-					<div class="panel panel-default">
-						<div class="panel-heading panel-title">
-							<fmt:message key="label.learning.reportMessage" />
+			<div class="card lcard">
+				<div class="card-header">
+					<fmt:message key="label.learning.reportMessage" />
+				</div>
+
+				<div class="card-body">
+					<c:forEach var="entry"
+						items="${requestScope.mapGeneralCheckedOptionsContent}">
+						<div class="d-flex">
+							<div class="flex-shrink-0">
+								<i class="fa fa-check text-success"></i>
+							</div>
+							<div class="flex-grow-1 ms-3">
+								<c:out value="${entry.value}" escapeXml="false" />
+							</div>
 						</div>
-						<div class="panel-body">
+					</c:forEach>
 
-							<c:forEach var="entry" items="${requestScope.mapGeneralCheckedOptionsContent}">
-								<div class="d-flex">
-									<div class="flex-shrink-0">
-										<i class="fa fa-xs fa-check text-success"></i>
-									</div>
-									<div class="flex-grow-1 ms-3">
-										<c:out value="${entry.value}" escapeXml="false" />
-									</div>
-								</div>
-							</c:forEach>
-
-							<c:if test="${not empty voteLearningForm.userEntry}">
-								<div class="d-flex">
-									<div class="flex-shrink-0">
-										<i class="fa fa-xs fa-check text-success"></i>
-									</div>
-									<div class="flex-grow-1 ms-3">
-										<c:out value="${voteLearningForm.userEntry}" escapeXml="true" />
-									</div>
-								</div>
-							</c:if>
-
-							<c:if test="${hasEditRight}">
-								<input type="submit" name="redoQuestions" class="btn btn-sm btn-secondary float-start mt-2"
-									onclick="submitMethod('redoQuestions');"
-									value='<fmt:message key="label.retake" />?' />
-							</c:if>
-
+					<c:if test="${not empty voteLearningForm.userEntry}">
+						<div class="d-flex">
+							<div class="flex-shrink-0">
+								<i class="fa fa-check text-success"></i>
+							</div>
+							<div class="flex-grow-1 ms-3">
+								<c:out value="${voteLearningForm.userEntry}" escapeXml="true" />
+							</div>
 						</div>
-					</div>
+					</c:if>
 
+					<c:if test="${hasEditRight}">
+						<button type="submit" name="redoQuestions"
+							class="btn btn-sm btn-secondary btn-icon-return float-end mt-2"
+							onclick="submitMethod('redoQuestions');">
+							<fmt:message key="label.retake" />
+						</button>
+					</c:if>
 				</div>
 			</div>
 
-
 			<div class="activity-bottom-buttons">
 				<c:choose>
 					<c:when test="${voteLearningForm.showResults=='true'}">
-						<input type="submit" name="viewAllResults" class="btn btn-primary"
-							onclick="submitMethod('viewAllResults');"
-							value='<fmt:message key="label.overAllResults" />' />
+						<button type="submit" name="viewAllResults" class="btn btn-primary na" onclick="submitMethod('viewAllResults');">
+							<fmt:message key="label.overAllResults" />
+						</button>
 					</c:when>
 	
 					<c:when test="${voteGeneralLearnerFlowDTO.reflection != 'true' || !hasEditRight}">
-						<button type="button" name="learnerFinished" id="finishButton"
-							class="btn btn-primary">
-								<c:choose>
-									<c:when test="${isLastActivity}">
-										<fmt:message key="button.submitActivity" />
-									</c:when>
-									<c:otherwise>
-										<fmt:message key="button.endLearning" />
-									</c:otherwise>
-								</c:choose>
+						<button type="button" name="learnerFinished" id="finishButton" class="btn btn-primary na">
+							<c:choose>
+								<c:when test="${isLastActivity}">
+									<fmt:message key="button.submitActivity" />
+								</c:when>
+								<c:otherwise>
+									<fmt:message key="button.endLearning" />
+								</c:otherwise>
+							</c:choose>
 						</button>
 					</c:when>
 	
 					<c:otherwise>
-						<input type="submit" name="forwardtoReflection" onclick="javascript:submitMethod('forwardtoReflection');"
-							class="btn btn-primary"
-							value='<fmt:message key="label.continue" />' />
+						<button type="submit" name="forwardtoReflection" onclick="javascript:submitMethod('forwardtoReflection');" class="btn btn-primary na">
+							<fmt:message key="label.continue" />
+						</button>
 					</c:otherwise>
 				</c:choose>
 			</div>
 
-		</lams:Page>
-	</form:form>
-
+		</form:form>
 	</div>
-	<div id="footer"></div>
-</body>
-</lams:html>
+</lams:PageLearner>
Index: lams_tool_vote/web/learning/Notebook.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/Notebook.jsp	(.../Notebook.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_vote/web/learning/Notebook.jsp	(.../Notebook.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,78 +1,20 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
 
-<lams:html>
-<lams:head>
-	<lams:css />
-	<title><fmt:message key="activity.title" /></title>
-	
-	<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>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
-	<script type="text/javascript">
-		checkNextGateActivity('finishButton', '${voteLearningForm.toolSessionID}', '', function() {
-			submitMethod('learnerFinished');
-		});
-		
-		function submitMethod(actionMethod) {
-			$('.btn').prop('disabled', true);
-			document.forms.voteLearningForm.action = actionMethod + '.do';
-			document.forms.voteLearningForm.submit();
-		}
-	</script>
+<lams:Notebook title="${voteGeneralLearnerFlowDTO.activityTitle}"
+	toolSessionID="${voteLearningForm.toolSessionID}"
+	instructions="${voteGeneralLearnerFlowDTO.reflectionSubject}"
+	formModelAttribute="voteLearningForm"
+	hiddenInputs="toolSessionID,userID,userLeader,groupLeaderName,groupLeaderUserId,useSelectLeaderToolOuput"
+	notebookLabelKey="label.reflection"
+	isNextActivityButtonSupported="false"
+	finishButtonLabelKey="button.endLearning"/>
 
-</lams:head>
 
-<body class="stripes">
 
-		<form:form modelAttribute="voteLearningForm" method="POST">
 
-		<lams:Page type="learner" title="${voteGeneralLearnerFlowDTO.activityTitle}">
 
-			<form:hidden path="toolSessionID" />
-			<form:hidden path="userID" />
-			<form:hidden path="userLeader" />
-			<form:hidden path="groupLeaderName" />
-			<form:hidden path="groupLeaderUserId" />
-			<form:hidden path="useSelectLeaderToolOuput" />
 
-			<div class="panel">
-				<lams:out value="${voteGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
-			</div>
 
-			<form:textarea rows="5" path="entryText" cssClass="form-control" styleId="focused" />
-			
-			<div class="activity-bottom-buttons">
-				<button type="button"
-					class="btn btn-primary na" id="finishButton">
-					<fmt:message key="button.endLearning" />
-				</button>
-			</div>
 
-		</lams:Page>
 
-		</form:form>
-
-	<script type="text/javascript">
-		window.onload = function() {
-			document.getElementById("focused").focus();
-		}
-	</script>
-	
-</body>
-</lams:html>
-
-
-
-
-
-
-
-
Index: lams_tool_vote/web/learning/RevisitedAllNominations.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/RevisitedAllNominations.jsp	(.../RevisitedAllNominations.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_vote/web/learning/RevisitedAllNominations.jsp	(.../RevisitedAllNominations.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,27 +1,17 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set scope="request" var="lams"><lams:LAMSURL /></c:set>
+<c:set scope="request" var="tool"><lams:WebAppURL/></c:set>
+<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
+<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
+<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
 
-<c:set scope="request" var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set scope="request" var="tool">
-	<lams:WebAppURL />
-</c:set>
-
-<lams:html>
-<lams:head>
-	<lams:css />
+<lams:PageLearner title="${voteGeneralLearnerFlowDTO.activityTitle}" toolSessionID="${voteLearningForm.toolSessionID}">
 	<link type="text/css" href="${lams}/css/defaultHTML_chart.css" rel="stylesheet" />
 
-	<title><fmt:message key="activity.title" /></title>
-
-	<lams:JSImport src="includes/javascript/common.js" />
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+	<!--<lams:JSImport src="includes/javascript/common.js" />-->
 	<script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/chart.js"></script>
-	<lams:JSImport src="learning/includes/javascript/gate-check.js" />
-	
 	<script type="text/javascript">
 		checkNextGateActivity('finishButton', '${voteLearningForm.toolSessionID}', '', function() {
 			submitMethod('learnerFinished');
@@ -32,103 +22,73 @@
 			document.forms.voteLearningForm.action = actionMethod + '.do';
 			document.forms.voteLearningForm.submit();
 		}
+
+		function continueReflect(){
+			submitMethod('forwardtoReflection');
+		}
 	</script>
-</lams:head>
 
-<body class="stripes">
+	<div id="container-main">
+		<form:form modelAttribute="voteLearningForm" method="POST">
+			<form:hidden path="toolSessionID" />
+			<form:hidden path="userID" />
+			<form:hidden path="revisitingUser" />
+			<form:hidden path="previewOnly" />
+			<form:hidden path="maxNominationCount" />
+			<form:hidden path="minNominationCount" />
+			<form:hidden path="allowTextEntry" />
+			<form:hidden path="lockOnFinish" />
+			<form:hidden path="reportViewOnly" />
+			<form:hidden path="userEntry" />
+			<form:hidden path="showResults" />
+			<form:hidden path="userLeader" />
+			<form:hidden path="groupLeaderName" />
+			<form:hidden path="groupLeaderUserId" />
+			<form:hidden path="useSelectLeaderToolOuput" />
 
-	<form:form modelAttribute="voteLearningForm" method="POST">
-		<c:set var="isUserLeader" value="${voteLearningForm.userLeader}" />
-		<c:set var="isLeadershipEnabled" value="${voteLearningForm.useSelectLeaderToolOuput}" />
-		<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
-
-		<form:hidden path="toolSessionID" />
-		<form:hidden path="userID" />
-		<form:hidden path="revisitingUser" />
-		<form:hidden path="previewOnly" />
-		<form:hidden path="maxNominationCount" />
-		<form:hidden path="minNominationCount" />
-		<form:hidden path="allowTextEntry" />
-		<form:hidden path="lockOnFinish" />
-		<form:hidden path="reportViewOnly" />
-		<form:hidden path="userEntry" />
-		<form:hidden path="showResults" />
-		<form:hidden path="userLeader" />
-		<form:hidden path="groupLeaderName" />
-		<form:hidden path="groupLeaderUserId" />
-		<form:hidden path="useSelectLeaderToolOuput" />
-
-		<lams:Page type="learner" title="${voteGeneralLearnerFlowDTO.activityTitle}">
-
 			<c:if test="${isLeadershipEnabled}">
 				<lams:LeaderDisplay idName="leaderEnabled" username="${voteLearningForm.groupLeaderName}" userId="${voteLearningForm.groupLeaderUserId}"/>
 			</c:if>
 
-			<div class="row">
-				<div class="col-xs12">
-					<div id="revisitedContent" class="panel-body">
+			<div id="revisitedContent" class="card-body">
+				<c:if test="${voteLearningForm.showResults == 'true'}">
+					<jsp:include page="/learning/RevisitedDisplay.jsp" />
+				</c:if>
 
-
-						<c:if test="${voteLearningForm.showResults == 'true'}">
-							<jsp:include page="/learning/RevisitedDisplay.jsp" />
-						</c:if>
-
-						<c:if test="${voteLearningForm.showResults != 'true'}">
-							<jsp:include page="/learning/RevisitedNoDisplay.jsp" />
-						</c:if>
-
-						<c:if test="${hasEditRight}">
-							<input type="submit" name="redoQuestionsOk" class="btn btn-sm btn-secondary mt-2 float-start"
-								onclick="submitMethod('redoQuestionsOk');"
-								value='<fmt:message key="label.retake" />' />
-						</c:if>
-					</div>
-				</div>
+				<c:if test="${voteLearningForm.showResults != 'true'}">
+					<jsp:include page="/learning/RevisitedNoDisplay.jsp" />
+				</c:if>
 			</div>
 
 			<c:if test="${voteGeneralLearnerFlowDTO.reflection == 'true'}">
-			<hr class="msg-hr">
-				<div class="panel panel-default">
-					<div class="panel-heading panel-title">
-						<fmt:message key="label.reflection" />
-					</div>
-					<div class="panel-body">
-
-						<lams:out value="${voteGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
-
-						<div class="panel-body mt-2 bg-warning">
-							<lams:out value="${voteGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
-						</div>
-
-						<c:if test="${voteGeneralLearnerFlowDTO.lockOnFinish == 'false' && hasEditRight}">
-							<form:button path="forwardtoReflection" cssClass="btn btn-sm btn-secondary mt-2 float-start"
-								onclick="submitMethod('forwardtoReflection');">
-								<fmt:message key="label.edit" />
-							</form:button>
-						</c:if>
-
-					</div>
-				</div>
+				<lams:NotebookReedit
+					reflectInstructions="${voteGeneralLearnerFlowDTO.reflectionSubject}"
+					reflectEntry="${voteGeneralLearnerFlowDTO.notebookEntry}"
+					isEditButtonEnabled="${voteGeneralLearnerFlowDTO.lockOnFinish == 'false' && hasEditRight}"
+					notebookHeaderLabelKey="label.reflection"/>
 			</c:if>
 
 			<div class="activity-bottom-buttons">
-				<button type="button" id="finishButton"
-					class="btn btn-primary na">
+				<button type="button" id="finishButton" class="btn btn-primary na">
 					<c:choose>
-							<c:when test="${isLastActivity}">
-								<fmt:message key="button.submitActivity" />
-							</c:when>
-							<c:otherwise>
-								<fmt:message key="button.endLearning" />
-							</c:otherwise>
+						<c:when test="${isLastActivity}">
+							<fmt:message key="button.submitActivity" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="button.endLearning" />
+						</c:otherwise>
 					</c:choose>
 				</button>
+
+				<c:if test="${hasEditRight}">
+					<button type="submit" name="redoQuestionsOk"
+						class="btn btn-secondary btn-icon-return me-2"
+						onclick="submitMethod('redoQuestionsOk');">
+						<fmt:message key="label.retake" />
+					</button>
+				</c:if>
 			</div>
 
-		</lams:Page>
-	</form:form>
-
-
-
-</body>
-</lams:html>
\ No newline at end of file
+		</form:form>
+	</div>
+</lams:PageLearner>
Index: lams_tool_vote/web/learning/RevisitedDisplay.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/RevisitedDisplay.jsp	(.../RevisitedDisplay.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_vote/web/learning/RevisitedDisplay.jsp	(.../RevisitedDisplay.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,22 +1,25 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<h4>
+<div class="card-subheader">
 	<fmt:message key="label.progressiveResults" />
-</h4>
+</div>
 
 <!--present  a mini summary table here -->
-<table class="table table-hover table-stripped" id="voteSummary">
-	<tr>
-		<th><fmt:message key="label.nomination" /></th>
-		<th class="text-center"><fmt:message key="label.total.votes" /></th>
-	</tr>
+<div class="ltable table-hover" id="voteSummary">
+	<div class="row">
+		<div class="col"><fmt:message key="label.nomination" /></div>
+		<div class="col-2 text-center"><fmt:message key="label.total.votes" /></div>
+	</div>
+	
 	<c:forEach var="currentNomination" items="${voteGeneralLearnerFlowDTO.mapStandardNominationsHTMLedContent}">
 		<c:set var="currentNominationKey" scope="request" value="${currentNomination.key}" />
-		<tr>
-			<td class="text-left"><c:out value="${currentNomination.value}" escapeXml="false" /></td>
+		<div class="row">
+			<div class="col text-left">
+				<c:out value="${currentNomination.value}" escapeXml="false" />
+			</div>
 
-			<td class="text-center"><c:forEach var="currentUserCount"
-					items="${voteGeneralLearnerFlowDTO.mapStandardUserCount}">
+			<div class="col-2 text-center">
+				<c:forEach var="currentUserCount" items="${voteGeneralLearnerFlowDTO.mapStandardUserCount}">
 					<c:set var="currentUserKey" scope="request" value="${currentUserCount.key}" />
 					<c:if test="${currentNominationKey == currentUserKey}">
 
@@ -50,36 +53,41 @@
 							<c:out value="${currentUserCount.value}" />
 						</c:if>
 					</c:if>
-				</c:forEach> <c:forEach var="currentRate" items="${voteGeneralLearnerFlowDTO.mapStandardRatesContent}">
+				</c:forEach> 
+				
+				<c:forEach var="currentRate" items="${voteGeneralLearnerFlowDTO.mapStandardRatesContent}">
 					<c:set var="currentRateKey" scope="request" value="${currentRate.key}" />
 					<c:if test="${currentNominationKey == currentRateKey}"> 				
 						&nbsp(<fmt:formatNumber type="number" maxFractionDigits="2" value="${currentRate.value}" />
 						<fmt:message key="label.percent" />) 
 					</c:if>
-				</c:forEach></td>
-		</tr>
+				</c:forEach>
+			</div>
+		</div>
 	</c:forEach>
+</div>
 
-</table>
-
-
 <div class="float-end">
-	<c:set var="chartURL" value="${tool}chartGenerator.do?currentSessionId=${VoteLearningForm.toolSessionID}" />
-	<a title="<fmt:message key='label.tip.displayPieChart'/>" class="fa fa-pie-chart text-primary btn btn-md btn-primary"
-		onclick="javascript:drawChart('pie', 'chartDiv', '${chartURL}')"></a> <a
-		title="<fmt:message key='label.tip.displayBarChart'/>" class="fa fa-bar-chart text-primary btn btn-md btn-primary"
-		onclick="javascript:drawChart('bar', 'chartDiv', '${chartURL}')"></a>
+	<c:set var="chartURL" value="${tool}chartGenerator.do?currentSessionId=${voteLearningForm.toolSessionID}" />
+	<button type="button" title="<fmt:message key='label.tip.displayPieChart'/>"
+		class="fa fa-pie-chart text-primary btn btn-light"
+		onclick="javascript:drawChart('pie', 'chartDiv', '${chartURL}')"></button> 
+	<button type="button"  title="<fmt:message key='label.tip.displayBarChart'/>"
+		class="fa fa-bar-chart text-primary btn btn-light"
+		onclick="javascript:drawChart('bar', 'chartDiv', '${chartURL}')"></button>
 </div>
 
 <div id="textEntries">
-	<c:if test="${VoteLearningForm.allowTextEntry}">
-		<strong> <fmt:message key="label.open.votes" />
-		</strong>
+	<c:if test="${voteLearningForm.allowTextEntry}">
+		<div class="card-subheader"> 
+			<fmt:message key="label.open.votes" />
+		</div>
+		
 		<c:forEach var="vote" items="${requestScope.listUserEntriesContent}">
 			<c:if test="${vote.userEntry != ''}">
 				<div class="d-flex">
 					<div class="flex-shrink-0">
-						<i class="fa fa-xs fa-check text-success"></i>
+						<i class="fa fa-check text-success"></i>
 					</div>
 					<div class="flex-grow-1 ms-3">
 						<c:choose>
@@ -97,34 +105,37 @@
 		</c:forEach>
 	</c:if>
 </div>
-<div id="nominations" class="mt-2">
-	<c:choose>
-		<c:when test="${fn:length(requestScope.listGeneralCheckedOptionsContent) > 1}">
-			<strong><fmt:message key="label.learner.nominations" /> </strong>
-		</c:when>
-		<c:otherwise>
-			<strong><fmt:message key="label.learner.nomination" /> </strong>
-		</c:otherwise>
-	</c:choose>
 
+<div id="nominations" class="mt-4">
+	<div class="card-subheader">
+		<c:choose>
+			<c:when test="${fn:length(requestScope.listGeneralCheckedOptionsContent) > 1}">
+				<fmt:message key="label.learner.nominations" />
+			</c:when>
+			<c:otherwise>
+				<fmt:message key="label.learner.nomination" />
+			</c:otherwise>
+		</c:choose>
+	</div>
+
 	<c:forEach var="entry" items="${requestScope.listGeneralCheckedOptionsContent}">
 		<div class="d-flex">
 			<div class="flex-shrink-0">
-				<i class="fa fa-xs fa-check text-success"></i>
+				<i class="fa fa-check text-success"></i>
 			</div>
 			<div class="flex-grow-1 ms-3">
 				<c:out value="${entry}" escapeXml="true" />
 			</div>
 		</div>
 	</c:forEach>
 
-	<c:if test="${not empty VoteLearningForm.userEntry}">
+	<c:if test="${not empty voteLearningForm.userEntry}">
 		<div class="d-flex">
 			<div class="flex-shrink-0">
-				<i class="fa fa-xs fa-check text-success"></i>
+				<i class="fa fa-check text-success"></i>
 			</div>
 			<div class="flex-grow-1 ms-3">
-				<c:out value="${VoteLearningForm.userEntry}" escapeXml="false" />
+				<c:out value="${voteLearningForm.userEntry}" escapeXml="false" />
 			</div>
 		</div>
 	</c:if>
Index: lams_tool_vote/web/learning/RevisitedNoDisplay.jsp
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/RevisitedNoDisplay.jsp	(.../RevisitedNoDisplay.jsp)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_tool_vote/web/learning/RevisitedNoDisplay.jsp	(.../RevisitedNoDisplay.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,37 +1,34 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<c:choose>
-	<c:when test="${fn:length(requestScope.listGeneralCheckedOptionsContent) > 1}">
-		<h4>
+<div class="card-subheader"> 
+	<c:choose>
+		<c:when test="${fn:length(requestScope.listGeneralCheckedOptionsContent) > 1}">
 			<fmt:message key="label.learner.nominations" />
-		</h4>
-	</c:when>
-
-	<c:otherwise>
-		<h4>
+		</c:when>
+		<c:otherwise>
 			<fmt:message key="label.learner.nomination" />
-		</h4>
-	</c:otherwise>
-</c:choose>
+		</c:otherwise>
+	</c:choose>
+</div>
 
 <c:forEach var="entry" items="${requestScope.listGeneralCheckedOptionsContent}">
 	<div class="d-flex">
 		<div class="flex-shrink-0">
-			<i class="fa fa-xs fa-check text-success"></i>
+			<i class="fa fa-check text-success"></i>
 		</div>
 		<div class="flex-grow-1 ms-3">
 			<c:out value="${entry}" escapeXml="false" />
 		</div>
 	</div>
 </c:forEach>
 
-<c:if test="${not empty VoteLearningForm.userEntry}">
+<c:if test="${not empty voteLearningForm.userEntry}">
 	<div class="d-flex">
 		<div class="flex-shrink-0">
-			<i class="fa fa-xs fa-check text-success"></i>
+			<i class="fa fa-check text-success"></i>
 		</div>
 		<div class="flex-grow-1 ms-3">
-			<c:out value="${VoteLearningForm.userEntry}" escapeXml="true" />
+			<c:out value="${voteLearningForm.userEntry}" escapeXml="true" />
 		</div>
 	</div>
 </c:if>
Index: lams_tool_vote/web/learning/WaitForLeader.jsp
===================================================================
diff -u -r94b2225ee897f0a10318b17e1c692f2ccbb1e36b -rb9f40a0836353109d362f2e1218cdf2b21163399
--- lams_tool_vote/web/learning/WaitForLeader.jsp	(.../WaitForLeader.jsp)	(revision 94b2225ee897f0a10318b17e1c692f2ccbb1e36b)
+++ lams_tool_vote/web/learning/WaitForLeader.jsp	(.../WaitForLeader.jsp)	(revision b9f40a0836353109d362f2e1218cdf2b21163399)
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<lams:PageLearner title="${sessionMap.content.title}" toolSessionID="${sessionMap.toolSessionID}">
+<lams:PageLearner title="${content.title}" toolSessionID="${toolSessionID}">
 	<lams:WaitForLeader mode="learner" groupUsers="${groupUsers}"/>	
 </lams:PageLearner>