Index: lams_tool_leader/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_leader/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_leader/web/WEB-INF/tags/Alert.tag	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -0,0 +1,46 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="close" required="false" rtexprvalue="true"%>
+<%@ attribute name="id" required="false" rtexprvalue="true"%>
+<%@ attribute name="type" required="false" rtexprvalue="true"%>
+
+<c:set var="idName" value="alert-${type}" />
+<c:if test="${not empty id}">
+	<c:set var="idName" value="${id}" />
+</c:if>
+
+<c:set var="alertType" value="info" />
+<c:set var="iconType" value="info-circle" />
+<c:choose>
+	<c:when test="${type == 'danger'}">
+		<c:set var="alertType" value="danger" />
+		<c:set var="iconType" value="times-circle" />
+	</c:when>
+	<c:when test="${type == 'success'}">
+		<c:set var="alertType" value="success" />
+		<c:set var="iconType" value="check-circle" />
+	</c:when>
+	<c:when test="${type == 'warning'}">
+		<c:set var="alertType" value="warning" />
+		<c:set var="iconType" value="exclamation-circle" />
+	</c:when>
+</c:choose>
+
+<div class="row no-gutter">
+	<div class="col-xs-12 col-sm-offset-2 col-sm-8">
+		<div id="${idName}" class="alert alert-${alertType}" style="margin-bottom: 10px; padding: 8px">
+			<div class="media">
+				<div class="media-left">
+					<i class="fa fa-lg fa-${iconType} text-muted"></i>
+				</div>
+				<div class="media-body">
+					<c:if test="${close}">
+							<a href="#" class="close pull-right" data-dismiss="alert" aria-label="close">&times;</a>
+					</c:if>
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
Index: lams_tool_leader/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r60ea4cec0c4eda3f207fdb3ec900a4ba897400a8 -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 60ea4cec0c4eda3f207fdb3ec900a4ba897400a8)
+++ lams_tool_leader/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -1,6 +1,6 @@
 
 <%
-	 /****************************************************************
+	/****************************************************************
 	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
 	 * =============================================================
 	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
@@ -49,10 +49,18 @@
 	<c:set var="buttonTryAgainKey" value="button.try.again" />
 </c:if>
 
-<p>
-	<fmt:message key="${defineLaterMessageKey}" />
-</p>
-<div align="right" class="space-bottom-top">
-	<a href="javascript:location.reload(true);" class="button"><fmt:message
-			key="${buttonTryAgainKey}" /> </a>
+<div class="row no-gutter">
+	<div
+		class="col-xs-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
+		<div class="alert alert-info">
+			<fmt:message key="${defineLaterMessageKey}" />
+		</div>
+	</div>
 </div>
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<a href="javascript:location.reload(true);"
+			class="btn btn-primary pull-right voffset5"><fmt:message
+				key="${buttonTryAgainKey}" /></a>
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_leader/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_leader/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_leader/web/WEB-INF/tags/Page.tag	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -0,0 +1,34 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+
+<%@ attribute name="type" required="true" 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"%>
+
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<div class="container" id="${idName}">
+			<div class="panel panel-default panel-${type}-page">
+				<div class="panel-heading">
+					<c:if test="${not empty title}">
+						<div class="panel-title panel-${type}-title">
+							<c:out value="${title}" escapeXml="true" />
+							<c:if test="${not empty titleHelpURL}">
+								<a style="float: right" href="${titleHelpURL}" target="_new"><span class="help" style="margin: 0px"></span></a>
+							</c:if>
+						</div>
+					</c:if>
+					<c:if test="${not empty headingContent}">
+						<c:out value="${headingContent}" escapeXml="true" />
+					</c:if>
+				</div>
+				<div class="panel-body panel-${type}-body">
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+		<! -- End content container -->
+	</div>
+</div>
Index: lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_leader/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -432,6 +432,14 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
+	    <name>Alert</name>
+		<path>/WEB-INF/tags/Alert.tag</path>
+   	</tag-file>  
+   	<tag-file>
+	    <name>Page</name>
+		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>  
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
Index: lams_tool_leader/web/common/learnerheader.jsp
===================================================================
diff -u -r17ddd3aac11d9fecc83159a9c829e989754accfb -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 17ddd3aac11d9fecc83159a9c829e989754accfb)
+++ lams_tool_leader/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -20,6 +20,6 @@
     </style>
 
 	<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/common.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 </lams:head>
Index: lams_tool_leader/web/common/messages.jsp
===================================================================
diff -u -r17ddd3aac11d9fecc83159a9c829e989754accfb -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/common/messages.jsp	(.../messages.jsp)	(revision 17ddd3aac11d9fecc83159a9c829e989754accfb)
+++ lams_tool_leader/web/common/messages.jsp	(.../messages.jsp)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -1,8 +1,8 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-	<p class="warning">
+	<lams:Alert id="error" type="danger" close="false">
         <html:messages id="error">
             <c:out value="${error}" escapeXml="false"/><br/>
         </html:messages>
-	</p>
+	</lams:Alert>
 </logic:messagesPresent>
Index: lams_tool_leader/web/layouts/defaultLayout.jsp
===================================================================
diff -u -r17ddd3aac11d9fecc83159a9c829e989754accfb -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/layouts/defaultLayout.jsp	(.../defaultLayout.jsp)	(revision 17ddd3aac11d9fecc83159a9c829e989754accfb)
+++ lams_tool_leader/web/layouts/defaultLayout.jsp	(.../defaultLayout.jsp)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -1,5 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
-	"http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
 
Index: lams_tool_leader/web/layouts/learningLayout.jsp
===================================================================
diff -u -r17ddd3aac11d9fecc83159a9c829e989754accfb -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/layouts/learningLayout.jsp	(.../learningLayout.jsp)	(revision 17ddd3aac11d9fecc83159a9c829e989754accfb)
+++ lams_tool_leader/web/layouts/learningLayout.jsp	(.../learningLayout.jsp)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -1,5 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
-	"http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
 
Index: lams_tool_leader/web/layouts/tabLayout.jsp
===================================================================
diff -u -r17ddd3aac11d9fecc83159a9c829e989754accfb -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/layouts/tabLayout.jsp	(.../tabLayout.jsp)	(revision 17ddd3aac11d9fecc83159a9c829e989754accfb)
+++ lams_tool_leader/web/layouts/tabLayout.jsp	(.../tabLayout.jsp)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -1,5 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-            "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
 
Index: lams_tool_leader/web/pages/learning/defineLater.jsp
===================================================================
diff -u -r17ddd3aac11d9fecc83159a9c829e989754accfb -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 17ddd3aac11d9fecc83159a9c829e989754accfb)
+++ lams_tool_leader/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -1,11 +1,12 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
-		<fmt:message key="activity.title" />
-	</h1>
+<c:set var="title" scope="request">
+	<fmt:message key="activity.title" />
+</c:set>
+
+<lams:Page type="learner" title="${title}">
 	<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
-</div>
+</lams:Page>
 
 
 
Index: lams_tool_leader/web/pages/learning/leaderselection.jsp
===================================================================
diff -u -r16b567192101542c3384bab025c218f6b3bfae9b -r10fc9107a51311d5661be69bde813ce5afdbdffd
--- lams_tool_leader/web/pages/learning/leaderselection.jsp	(.../leaderselection.jsp)	(revision 16b567192101542c3384bab025c218f6b3bfae9b)
+++ lams_tool_leader/web/pages/learning/leaderselection.jsp	(.../leaderselection.jsp)	(revision 10fc9107a51311d5661be69bde813ce5afdbdffd)
@@ -1,53 +1,44 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <script type="text/javascript">
-	$(function() {
-		$("#leaderSelectionDialog").dialog({
-			bgiframe: true,
-			autoOpen: ${isSelectLeaderActive},
-			height: 500,
-			width: 400,
-			modal: true,
-			buttons: {
-				'<fmt:message key="label.yes.become.leader" />': function() {
-			        $.ajax({
-			        	async: false,
-			            url: '<c:url value="/learning.do"/>',
-			            data: 'dispatch=becomeLeader&toolSessionID=${toolSessionID}',
-			            type: 'post',
-			            success: function (json) {
-			            	location.reload();
-			            }
-			       	});
-				},
-				
-				'<fmt:message key="label.no" />': function() {
-					$(this).dialog('close');
-				}
-			}
+
+		$(window).load(function(){
+			$("#leaderSelectionDialog").modal({
+				show: ${isSelectLeaderActive},
+				keyboard: true
+			});
+			
 		});
-	});
 
+		function leaderSelection() {
+	        $.ajax({
+	        	async: false,
+	            url: '<c:url value="/learning.do"/>',
+	            data: 'dispatch=becomeLeader&toolSessionID=${toolSessionID}',
+	            type: 'post',
+	            success: function (json) {
+	            	location.reload();
+	            }
+	       	});			
+		}
+		
+
     function finishActivity(){
     	document.getElementById("finishButton").disabled = true;
 		location.href = '<c:url value="/learning.do"/>?dispatch=finishActivity&toolSessionID=${toolSessionID}';
     }
 </script>
 
-<c:set var="contentTitle">
-  <c:out value="${content.title}" escapeXml="true"/>
-</c:set>
 
-<div id="content">
-	<h1>
-		<c:out value="${contentTitle}" escapeXml="false"/>
-	</h1>
-	
+<lams:Page type="learner" title="${content.title}">
+
+
 	<h4>
-		<fmt:message key="label.group.leader" />
+		<fmt:message key="label.group.leader" />&nbsp;
+		
 		<c:choose>
 			<c:when test="${not empty groupLeader}">
-				<c:out value="${groupLeader.firstName} ${groupLeader.lastName}" escapeXml="true"/>
+				<mark><c:out value="${groupLeader.firstName} ${groupLeader.lastName}" escapeXml="true" /></mark>
 			</c:when>
 			<c:otherwise>
 				<i><fmt:message key="label.no.leader.yet" /></i>
@@ -58,53 +49,82 @@
 	<div>
 		<fmt:message key="label.users.from.group" />
 	</div>
-		
-	<div>
-		<ul>
-			<c:forEach var="user" items="${groupUsers}" varStatus="status">
-				<li>
-					<c:out value="${user.firstName} ${user.lastName}" escapeXml="true"/>
-				</li>
-			</c:forEach>
-		</ul>
-	</div>
 
-	<div class="space-bottom-top align-right">
-		<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="finishActivity()">
-			<span class="nextActivity">
-				<c:choose>
-					<c:when test="${activityPosition.last}">
-						<fmt:message key="button.submit" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="button.finish" />
-					</c:otherwise>
-				</c:choose>
-			</span>
-		</html:link>
+	<div id="usersInGroup" class="voffset10">
+		<c:forEach var="user" items="${groupUsers}" varStatus="status">
+			<div id="user-${user.userId}">
+				<div class="user voffset2 loffset10">
+					<c:out value="${user.firstName} ${user.lastName}" escapeXml="true" />
+				</div>
+			</div>
+		</c:forEach>
 	</div>
 
-</div>
+
+	<html:link href="#nogo" styleClass="btn btn-primary pull-right na" styleId="finishButton" onclick="finishActivity()">
+		<span class="nextActivity"> <c:choose>
+				<c:when test="${activityPosition.last}">
+					<fmt:message key="button.submit" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="button.finish" />
+				</c:otherwise>
+			</c:choose>
+		</span>
+	</html:link>
+
+</lams:Page>
+
+
 <c:set var="title">
-	<c:out value="${contentTitle}" escapeXml="true"/>
+	<c:out value="" escapeXml="true" />
 </c:set>
-<div id="leaderSelectionDialog" title="${title}" class="dialog">
-	<div style="font-weight:bold; margin: 10px 0 20px;">
-		<c:out value="${content.instructions}" escapeXml="false"/>
-		<br>
-		<fmt:message key="label.are.you.going.to.be.leader" />
-	</div>
-		
-	<div>
-		<fmt:message key="label.users.from.group" />
-	</div>
-		
-	<div style="text-align: right;">
-		<c:forEach var="user" items="${groupUsers}" varStatus="status">
-			<div>
-				<c:out value="${user.firstName} ${user.lastName}" escapeXml="true"/>
+<div id="leaderSelectionDialog" class="modal fade">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true">&times;</span>
+				</button>
+				<div class="modal-title" id="exampleModalLabel">${content.title}</div>
 			</div>
-		</c:forEach>
+			<div class="modal-body">
+				<!-- begin -->
+				<div class="panel" id="leaderInstructions">
+					<c:out value="${content.instructions}" escapeXml="false" />
+				</div>
+				<div class="lead">
+					<fmt:message key="label.are.you.going.to.be.leader" />
+				</div>
+
+				<div class="voffset10">
+					<fmt:message key="label.users.from.group" />
+				</div>
+
+				<div id="usersInGroup" class="voffset10">
+					<c:forEach var="user" items="${groupUsers}" varStatus="status">
+						<div id="user-${user.userId}" class="voffset2">
+							<div class="user loffset10" id="user-${user.userId}">
+								<c:out value="${user.firstName} ${user.lastName}" escapeXml="true" />
+							</div>
+						</div>
+					</c:forEach>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<button onclick="leaderSelection();" class="btn btn-sm btn-primary">
+					<fmt:message key="label.yes.become.leader" />
+				</button>
+				<button data-dismiss="modal" class="btn btn-sm btn-primary">
+					<fmt:message key="label.no" />
+				</button>
+
+			</div>
+
+			<!-- ends -->
+		</div>
 	</div>
 </div>
+</div>
 
+