Index: lams_tool_lamc/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_lamc/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_lamc/web/WEB-INF/tags/Alert.tag	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -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_lamc/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rfef442a88ab05c91db8a551081c4abc060d4da5e -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fef442a88ab05c91db8a551081c4abc060d4da5e)
+++ lams_tool_lamc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -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_lamc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_lamc/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_lamc/web/WEB-INF/tags/Page.tag	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -0,0 +1,36 @@
+<%@ 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="content">
+			<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_lamc/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r86a2855c49422f236ac31c35df38fa3c66220dcc -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 86a2855c49422f236ac31c35df38fa3c66220dcc)
+++ lams_tool_lamc/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -440,6 +440,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_lamc/web/learning/AnswersContent.jsp
===================================================================
diff -u -r732f77a31113c5838d0704829b99418d90053471 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 732f77a31113c5838d0704829b99418d90053471)
+++ lams_tool_lamc/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,164 +1,181 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
-
+<!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-
 <c:set var="lams">
 	<lams:LAMSURL />
 </c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" scope="request"/>
-<c:set var="isUserLeader" value="${sessionMap.isUserLeader}" scope="request"/>
-<c:set var="mode" value="${sessionMap.mode}" scope="request"/>
-<c:set var="isLeadershipEnabled" value="${sessionMap.content.useSelectLeaderToolOuput}" scope="request"/>
-<c:set var="isPrefixAnswersWithLetters" value="${sessionMap.content.prefixAnswersWithLetters}" scope="request"/>
-<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" scope="request"/>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" scope="request" />
+<c:set var="isUserLeader" value="${sessionMap.isUserLeader}" scope="request" />
+<c:set var="mode" value="${sessionMap.mode}" scope="request" />
+<c:set var="isLeadershipEnabled" value="${sessionMap.content.useSelectLeaderToolOuput}" scope="request" />
+<c:set var="isPrefixAnswersWithLetters" value="${sessionMap.content.prefixAnswersWithLetters}" scope="request" />
+<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" scope="request" />
 
 <lams:html>
 <lams:head>
 	<html:base />
 	<title><fmt:message key="activity.title" /></title>
-	
 	<lams:css />
 	<style media="screen,projection" type="text/css">
-		div.growlUI { background: url(check48.png) no-repeat 10px 10px }
-		div.growlUI h1, div.growlUI h2 {
-			color: white; padding: 5px 5px 5px 0px; text-align: center;
-		}
-	</style>
-	
+div.growlUI {
+	background: url(check48.png) no-repeat 10px 10px
+}
+
+div.growlUI h1, div.growlUI h2 {
+	color: white;
+	padding: 5px 5px 5px 0px;
+	text-align: center;
+}
+</style>
+
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>	
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	<script language="JavaScript" type="text/JavaScript">
 
-		//autoSaveAnswers if hasEditRight
-		if (${hasEditRight}) {
-			var interval = "30000"; // = 30 seconds
-			window.setInterval(
-				function(){
-					//ajax form submit
-					$('#learningForm').ajaxSubmit({
-						url: "<c:url value='/learning.do?method=autoSaveAnswers&date='/>" + new Date().getTime(),
-		                success: function() {
-		                	$.growlUI('<fmt:message key="label.learning.draft.autosaved" />');
-		                }
-					});
-	        	}, interval
-	        );
-		}
-			
-			function submitNextQuestionSelected() {
-				if (verifyAllQuestionsAnswered()) {
-					++document.McLearningForm.questionIndex.value;
-					document.McLearningForm.nextQuestionSelected.value = 1;
-					disableContinueButton();
-					document.McLearningForm.submit();
-				}
-			}
+        //autoSaveAnswers if hasEditRight
+        if (${hasEditRight}) {
+          var interval = "30000"; // = 30 seconds
+          window.setInterval(
+            function(){
+              //ajax form submit
+              $('#learningForm').ajaxSubmit({
+                url: "<c:url value='/learning.do?method=autoSaveAnswers&date='/>" + new Date().getTime(),
+                success: function() {
+                  $.growlUI('<fmt:message key="label.learning.draft.autosaved" />');
+                }
+              });
+            }, interval
+          );
+        }
 
-			function submitAllAnswers() {
-				document.McLearningForm.continueOptionsCombined.value = 1;			
-				doSubmit();
-			}
-			
-			function doSubmit() {
-				if (verifyAllQuestionsAnswered()) {
-					disableContinueButton();
-					document.McLearningForm.submit();
-				}
-			}
+        function submitNextQuestionSelected() {
+          if (verifyAllQuestionsAnswered()) {
+            ++document.McLearningForm.questionIndex.value;
+            document.McLearningForm.nextQuestionSelected.value = 1;
+            disableContinueButton();
+            document.McLearningForm.submit();
+          }
+        }
 
-			function verifyAllQuestionsAnswered() {
-				// in case oneQuestionPerPage option is ON user has to select 1 answer, and all answers otherwise
-				var isOneQuestionPerPage = ${mcGeneralLearnerFlowDTO.questionListingMode == 'questionListingModeSequential'};
-				var answersRequiredNumber = (isOneQuestionPerPage) ? 1 : ${fn:length(requestScope.learnerAnswersDTOList)};
-				
-				//check each question is answered
-				if ($(':radio:checked').length == answersRequiredNumber) {
-					return true;
-					
-				} else {
-					var msg = "<fmt:message key="answers.submitted.none"/>";
-					alert(msg);
-					return false;
-				}
-			}
-			
-			function disableContinueButton() {
-				var elem = document.getElementById("continueButton");
-				if (elem != null) {
-					elem.disabled = true;
-				}				
-			}
-			
-			if (${!hasEditRight && mode != "teacher"}) {
-				setInterval("checkLeaderProgress();",60000);// Auto-Refresh every 1 minute for non-leaders
-			}
-			
-			function checkLeaderProgress() {
-				
-		        $.ajax({
-		        	async: false,
-		            url: '<c:url value="/learning.do"/>',
-		            data: 'method=checkLeaderProgress&toolSessionID=' + $("#tool-session-id").val(),
-		            dataType: 'json',
-		            type: 'post',
-		            success: function (json) {
-		            	if (json.isLeaderResponseFinalized) {
-		            		location.reload();
-		            	}
-		            }
-		       	});
-			}
-			
-		</script>
+        function submitAllAnswers() {
+          document.McLearningForm.continueOptionsCombined.value = 1;			
+          doSubmit();
+        }
+
+        function doSubmit() {
+          if (verifyAllQuestionsAnswered()) {
+            disableContinueButton();
+            document.McLearningForm.submit();
+          }
+        }
+
+        function verifyAllQuestionsAnswered() {
+          // in case oneQuestionPerPage option is ON user has to select 1 answer, and all answers otherwise
+          var isOneQuestionPerPage = ${mcGeneralLearnerFlowDTO.questionListingMode == 'questionListingModeSequential'};
+          var answersRequiredNumber = (isOneQuestionPerPage) ? 1 : ${fn:length(requestScope.learnerAnswersDTOList)};
+
+          //check each question is answered
+          if ($(':radio:checked').length == answersRequiredNumber) {
+            return true;
+
+          } else {
+            var msg = "<fmt:message key="answers.submitted.none"/>";
+            alert(msg);
+            return false;
+          }
+        }
+
+        function disableContinueButton() {
+          var elem = document.getElementById("continueButton");
+          if (elem != null) {
+            elem.disabled = true;
+          }				
+        }
+
+        if (${!hasEditRight && mode != "teacher"}) {
+          setInterval("checkLeaderProgress();",60000);// Auto-Refresh every 1 minute for non-leaders
+        }
+
+        function checkLeaderProgress() {
+
+          $.ajax({
+            async: false,
+            url: '<c:url value="/learning.do"/>',
+            data: 'method=checkLeaderProgress&toolSessionID=' + $("#tool-session-id").val(),
+            dataType: 'json',
+            type: 'post',
+            success: function (json) {
+            if (json.isLeaderResponseFinalized) {
+            location.reload();
+          }
+                 }
+                 });
+        }
+
+      </script>
 </lams:head>
 
 <body class="stripes">
 
-<div id="content">
+	<lams:Page type="learner" title="${mcGeneralLearnerFlowDTO.activityTitle}">
 
-	<h1>
-		<c:out value="${mcGeneralLearnerFlowDTO.activityTitle}" escapeXml="true" />
-	</h1>
+		<div class="panel">
+			<c:out value="${mcGeneralLearnerFlowDTO.activityInstructions}" escapeXml="false" />
+		</div>
 
-	<html:form styleId="learningForm" action="/learning?method=displayMc&validate=false" enctype="multipart/form-data" method="POST" target="_self">
-		<html:hidden property="toolContentID"/>						
-		<html:hidden property="toolSessionID" styleId="tool-session-id"/>						
-		<html:hidden property="httpSessionID"/>			
-		<html:hidden property="userID"/>								
-		<html:hidden property="userOverPassMark"/>						
-		<html:hidden property="passMarkApplicable"/>										
-		<html:hidden property="learnerProgress"/>										
-		<html:hidden property="learnerProgressUserId"/>										
-		<html:hidden property="questionListingMode"/>
-		
-		<%@ include file="/common/messages.jsp"%>
-				
-		<c:if test="${isLeadershipEnabled}">
-			<h4>
-				<fmt:message key="label.group.leader" >
-					<fmt:param>${sessionMap.groupLeader.fullname}</fmt:param>
+		<!-- Announcements and advanced settings -->
+		<c:if test="${not empty mcLearnerStarterDTO.submissionDeadline}">
+			<lams:Alert close="false" id="submissionDeadline" type="danger">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${mcLearnerStarterDTO.submissionDeadline}" />
+					</fmt:param>
 				</fmt:message>
-			</h4>
+			</lams:Alert>
 		</c:if>
-		
-		<c:choose> 
-		  <c:when test="${(mcGeneralLearnerFlowDTO.questionListingMode == 'questionListingModeSequential') && hasEditRight}" > 
-				<jsp:include page="/learning/SingleQuestionAnswersContent.jsp" /> 
-		  </c:when> 
-		  <c:otherwise>
-			  	<jsp:include page="/learning/CombinedAnswersContent.jsp" /> 
-		  </c:otherwise>
-		</c:choose> 
-	</html:form>
-</div>
 
-<div id="footer"></div>
+		<c:if test="${mcGeneralLearnerFlowDTO.retries == 'true' && mcGeneralLearnerFlowDTO.passMark != '0'}">
+			<lams:Alert close="true" id="passingMark" type="info">
+				<fmt:message key="label.learner.message" /> ( <c:out value="${mcGeneralLearnerFlowDTO.passMark}" /> )
+			</lams:Alert>
+		</c:if>
+		<!-- End announcements and advanced settings -->
 
+		<div class="form-group">
+			<html:form styleId="learningForm" action="/learning?method=displayMc&validate=false" enctype="multipart/form-data"
+				method="POST" target="_self">
+				<html:hidden property="toolContentID" />
+				<html:hidden property="toolSessionID" styleId="tool-session-id" />
+				<html:hidden property="httpSessionID" />
+				<html:hidden property="userID" />
+				<html:hidden property="userOverPassMark" />
+				<html:hidden property="passMarkApplicable" />
+				<html:hidden property="learnerProgress" />
+				<html:hidden property="learnerProgressUserId" />
+				<html:hidden property="questionListingMode" />
+
+				<%@ include file="/common/messages.jsp"%>
+
+				<c:if test="${isLeadershipEnabled}">
+					<h4>
+						<fmt:message key="label.group.leader">
+							<fmt:param>${sessionMap.groupLeader.fullname}</fmt:param>
+						</fmt:message>
+					</h4>
+				</c:if>
+
+				<c:choose>
+					<c:when test="${(mcGeneralLearnerFlowDTO.questionListingMode == 'questionListingModeSequential') && hasEditRight}">
+						<jsp:include page="/learning/SingleQuestionAnswersContent.jsp" />
+					</c:when>
+					<c:otherwise>
+						<jsp:include page="/learning/CombinedAnswersContent.jsp" />
+					</c:otherwise>
+				</c:choose>
+			</html:form>
+		</div>
+	</lams:Page>
 </body>
 </lams:html>
-	
+
Index: lams_tool_lamc/web/learning/CombinedAnswersContent.jsp
===================================================================
diff -u -r816baa75867795676ea15c9dfcc4feef712edc47 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision 816baa75867795676ea15c9dfcc4feef712edc47)
+++ lams_tool_lamc/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,104 +1,88 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
+  <!--options content goes here-->
 
-<!--options content goes here-->
+  <c:forEach var="dto" items="${requestScope.learnerAnswersDTOList}">
 
-<p>
-	<c:out value="${mcGeneralLearnerFlowDTO.activityInstructions}" escapeXml="false" /> 
-</p>
+    <div class="row no-gutter">
+      <div class="col-xs-12">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <table>
+              <tr>
+                <td style="vertical-align: top;">${dto.displayOrder})
+                </td>
+                <td width="100%" style="padding-left: 5px"><c:out value="${dto.question}" escapeXml="false" />
+                </td>
+              </tr>
+              <c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">			
+                <tr>
+                  <td width="100%" colspan="2">
+                    [
+                    <strong><fmt:message key="label.mark" /></strong>
+                    <c:out value="${dto.mark}" />
+                    ]                    
+                  </td>
+                </tr>
+              </c:if>
+            </table>
+          </div>
+          <div class="panel-body">
+            <!-- Answer options begin -->
+            <div class="table-responsive">
+              <table class="table table-hover table-condensed">
+                <tbody>
+                  <c:forEach var="option" items="${dto.options}" varStatus="status">
+                    <tr>
+                      <td class="text-nowrap" style="vertical-align: top;">
+                          <c:choose>
+                            <c:when test="${hasEditRight}">		
+                              <input type="radio" id="${dto.questionUid}-${option.uid}" name="checkedCa${dto.questionUid}" class="noBorder" value="${dto.questionUid}-${option.uid}"
+                                     <c:if test="${option.selected}">checked="checked"</c:if>/>
+                            
+                            </c:when>
+                          <c:otherwise>
+                            <input type="radio" id="${dto.questionUid}-${option.uid}" name="checkedCa${dto.questionUid}" class="noBorder" value="${dto.questionUid}-${option.uid}" <c:if test="${option.selected}">checked="checked"</c:if> disabled="disabled">
+                          </c:otherwise>
+                    </c:choose>
+                    <c:if test="${isPrefixAnswersWithLetters}">
+                      <c:set var="seqLetter" value="${status.index}"/>
+                      <%=Character.toChars(97 + (Integer)pageContext.getAttribute("seqLetter"))%>)
+                    </c:if>
+                      
+                    </td>
+                  <td width="100%">
+                    <label for="${dto.questionUid}-${option.uid}">
+                      <c:out value="${option.mcQueOptionText}" escapeXml="false" />
+                    </label>
+                  </td>
+                </tr>
+              </c:forEach>
+            </tbody>
+          </table>            
+      </div>
+      <!-- End answer options -->            
 
-<c:if test="${not empty mcLearnerStarterDTO.submissionDeadline}">
-	<div class="info">
-		<fmt:message key="authoring.info.teacher.set.restriction" >
-			<fmt:param><lams:Date value="${mcLearnerStarterDTO.submissionDeadline}" /></fmt:param>
-		</fmt:message>	
-	</div>
-</c:if>
+    </div>
+    </div>
+  </div>
+</div>
 
-<c:if test="${mcGeneralLearnerFlowDTO.retries == 'true' && mcGeneralLearnerFlowDTO.passMark != '0'}">
 
-	<p>
-		<fmt:message key="label.learner.message" />
-		(
-		<c:out value="${mcGeneralLearnerFlowDTO.passMark}" />
-		)
-	</p>
 
-</c:if>
 
-<c:forEach var="dto" items="${requestScope.learnerAnswersDTOList}">
 
-	<div class="shading-bg">
-		<div style="overflow: auto;">
-			<span class="float-left space-right">
-				${dto.displayOrder})
-			</span>		
-			<c:out value="${dto.question}" escapeXml="false" />
-
-			<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">			
-				[
-				<strong><fmt:message key="label.mark" /></strong>
-				<c:out value="${dto.mark}" />
-				]
-			</c:if>							
-		</div>
-	</div>
-	
-	<table class="indent">
-		<tbody>
-			<c:forEach var="option" items="${dto.options}" varStatus="status">
-			
-				<tr>
-		
-					<td>
-						<c:choose>
-							<c:when test="${hasEditRight}">		
-								<input type="radio" name="checkedCa${dto.questionUid}" class="noBorder" value="${dto.questionUid}-${option.uid}"
-									<c:if test="${option.selected}">checked="checked"</c:if>>
-							</c:when>
-							
-							<c:otherwise>
-								<input type="radio" name="checkedCa${dto.questionUid}" class="noBorder" value="${dto.questionUid}-${option.uid}" 
-									<c:if test="${option.selected}">checked="checked"</c:if> disabled="disabled">
-							</c:otherwise>
-						</c:choose>
-					</td>
-		
-					<td width="100%">
-						<c:if test="${isPrefixAnswersWithLetters}">
-							<c:set var="seqLetter" value="${status.index}"/>
-							<span class="float-left">
-								<%=Character.toChars(97 + (Integer)pageContext.getAttribute("seqLetter"))%>)
-							</span>
-						</c:if>
-								
-						<c:out value="${option.mcQueOptionText}" escapeXml="false" />
-					</td>
-					
-				</tr>
-			</c:forEach>
-		</tbody>
-	</table>
-
 </c:forEach>
 
 <html:hidden property="donePreview" />
 
-<div class="space-bottom-top align-right">
-	<html:hidden property="continueOptionsCombined" value="Continue" />
+<html:hidden property="continueOptionsCombined" value="Continue" />
 
-	<c:if test="${hasEditRight}">
-		<html:button property="continueButton" styleClass="button" onclick="doSubmit();" styleId="continueButton">
-			<fmt:message key="button.continue" />
-		</html:button>
-	</c:if>
-</div>
+<c:if test="${hasEditRight}">
+  <html:button property="continueButton" styleClass="btn btn-sm btn-primary pull-right" onclick="doSubmit();" styleId="continueButton">
+    <fmt:message key="button.continue" />
+  </html:button>
+</c:if>
 
 <!--options content ends here-->
 
Index: lams_tool_lamc/web/learning/IndividualLearnerResults.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_lamc/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,14 +1,5 @@
 <!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>
 	<html:base />
@@ -21,192 +12,195 @@
 				elem.disabled = true;
 			}
 		}
-		
-	    function submitForm(methodName){
-	        var f = document.getElementById('Form1');
-	        f.submit();
-	    }
+
+		function submitForm(methodName) {
+			var f = document.getElementById('Form1');
+			f.submit();
+		}
 	</script>
 </lams:head>
 
 <body class="stripes">
 
-	<div id="content">
+	<lams:Page type="learner" title="${mcGeneralLearnerFlowDTO.activityTitle}">
 
-		<h1>
-			<c:out value="${mcGeneralLearnerFlowDTO.activityTitle}" escapeXml="true" />
-		</h1>
+		<c:choose>
+			<c:when test="${mcGeneralLearnerFlowDTO.retries == 'true'}">
+				<h4>
+					<fmt:message key="label.individual.results.withRetries" />
+				</h4>
+			</c:when>
 
-		<html:form action="/learning?method=displayMc&validate=false" method="POST" target="_self" onsubmit="disableFinishButton();"  styleId="Form1">
-			<html:hidden property="toolContentID" />
-			<html:hidden property="toolSessionID" />
-			<html:hidden property="httpSessionID" />
-			<html:hidden property="userID" />
-			<html:hidden property="userOverPassMark" />
-			<html:hidden property="passMarkApplicable" />
-			<html:hidden property="learnerProgress" />
-			<html:hidden property="learnerProgressUserId" />
-			<html:hidden property="questionListingMode" />
+			<c:when test="${mcGeneralLearnerFlowDTO.retries != 'true'}">
+				<h4>
+					<fmt:message key="label.individual.results.withoutRetries" />
+				</h4>
+			</c:when>
+		</c:choose>
 
-			<c:choose>
-				<c:when test="${mcGeneralLearnerFlowDTO.retries == 'true'}">
-					<h3>
-						<fmt:message key="label.individual.results.withRetries" />
-					</h3>
-				</c:when>
-				
-				<c:when test="${mcGeneralLearnerFlowDTO.retries != 'true'}">
-					<h3>
-						<fmt:message key="label.individual.results.withoutRetries" />
-					</h3>
-				</c:when>
-			</c:choose>
-			
-			<c:if test="${(mcGeneralLearnerFlowDTO.retries == 'true') or (mcGeneralLearnerFlowDTO.displayAnswers == 'true')}">
-				<p>
-					<strong><fmt:message key="label.mark" /> </strong>
-					<c:out value="${mcGeneralLearnerFlowDTO.learnerMark}" />
-					<fmt:message key="label.outof" />
-					<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
-				</p>
-			</c:if>
-			
+		<c:if test="${(mcGeneralLearnerFlowDTO.retries == 'true') or (mcGeneralLearnerFlowDTO.displayAnswers == 'true')}">
 			<p>
-				<c:if test="${mcGeneralLearnerFlowDTO.retries == 'true'
-					&& mcGeneralLearnerFlowDTO.userOverPassMark != 'true'
-					&& mcGeneralLearnerFlowDTO.passMarkApplicable == 'true'}">
-
-					<fmt:message key="label.notEnoughMarks">
-						<fmt:param>
-							<c:if test="${mcGeneralLearnerFlowDTO.passMark != mcGeneralLearnerFlowDTO.totalMarksPossible}">
-								<fmt:message key="label.atleast" />
-							</c:if>
-								
-							<c:out value="${mcGeneralLearnerFlowDTO.passMark}" />
-							<fmt:message key="label.outof" />
-							<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
-						</fmt:param>
-					</fmt:message>
-				</c:if>
+				<strong><fmt:message key="label.mark" /></strong>
+				<c:out value="${mcGeneralLearnerFlowDTO.learnerMark}" />
+				<fmt:message key="label.outof" />
+				<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
 			</p>
+		</c:if>
 
-			<h4>
-				<fmt:message key="label.yourAnswers" />
-			</h4>
+		<p>
+			<c:if
+				test="${mcGeneralLearnerFlowDTO.retries == 'true'
+                              && mcGeneralLearnerFlowDTO.userOverPassMark != 'true'
+                              && mcGeneralLearnerFlowDTO.passMarkApplicable == 'true'}">
 
-			<c:forEach var="dto" varStatus="status" items="${requestScope.listSelectedQuestionCandidateAnswersDto}">
+				<fmt:message key="label.notEnoughMarks">
+					<fmt:param>
+						<c:if test="${mcGeneralLearnerFlowDTO.passMark != mcGeneralLearnerFlowDTO.totalMarksPossible}">
+							<fmt:message key="label.atleast" />
+						</c:if>
 
-				<div class="shading-bg">
+						<c:out value="${mcGeneralLearnerFlowDTO.passMark}" />
+						<fmt:message key="label.outof" />
+						<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
+					</fmt:param>
+				</fmt:message>
+			</c:if>
+		</p>
+		<h4>
+			<fmt:message key="label.yourAnswers" />
+		</h4>
 
-					<div style="overflow: auto;">
-						<span class="float-left space-right">
-							${dto.displayOrder})
-						</span>
+		<c:forEach var="dto" varStatus="status" items="${requestScope.listSelectedQuestionCandidateAnswersDto}">
 
-						<strong> <fmt:message key="label.question.col" /> </strong>
-					
-						<c:out value="${dto.question}" escapeXml="false" />
-						
+			<div class="panel panel-default">
+
+				<div class="panel-heading">
+					<table>
+						<tr>
+							<td>${dto.displayOrder})</td>
+							<td width="100%" style="padding-left: 5px"><c:out value="${dto.question}" escapeXml="false" /></td>
+						</tr>
 						<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
-							<strong> <fmt:message key="label.mark" /> </strong>
-							<c:out value="${dto.mark}" /> 
+							<tr>
+								<td width="100%" colspan="2"><strong><fmt:message key="label.mark" /></strong> <c:out value="${dto.mark}" /></td>
+							</tr>
 						</c:if>
-					</div>		
+					</table>
+				</div>
+				<div class="panel-body">
 
-					<p>
-						<c:out value="${dto.answerOption.mcQueOptionText}" escapeXml="false" />
-								
-                    	<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
-							<c:if test="${dto.attemptCorrect == 'true'}">
-								<img src="<c:out value="${tool}"/>images/tick.gif" border="0" class="middle">
+					<table class="table table-condensed">
+						<tr>
+							<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
+								<!-- show right/wrong -->
+								<c:if test="${dto.attemptCorrect == 'true'}">
+									<td class="bg-success" style="vertical-align: top;"><i class="fa fa-check"
+										style="color: green; font-size: 22px"></i></td>
+								</c:if>
+								<c:if test="${dto.attemptCorrect != 'true'}">
+									<td class="bg-danger" style="vertical-align: top;"><i class="fa fa-times"
+										style="color: red; font-size: 22px"></i></td>
+								</c:if>
 							</c:if>
-							<c:if test="${dto.attemptCorrect != 'true'}">
-								<img src="<c:out value="${tool}"/>images/cross.gif" border="0" class="middle">
-							</c:if>
-						</c:if>
-					</p>
+							<td width="100%"><c:out value="${dto.answerOption.mcQueOptionText}" escapeXml="false" /></td>
+						</tr>
+					</table>
 
 					<c:if test="${(dto.feedback != null) && (dto.feedback != '')}">
-						<div style="overflow: auto;">
-							<strong> <fmt:message key="label.feedback.simple" /> </strong> 
-							<c:out value="${dto.feedback}" escapeXml="true" /> 
-						</div>		
-					</c:if>	
+						<!-- answer feedback -->
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<h4 class="panel-title">
+									<fmt:message key="label.feedback.simple" />
+								</h4>
+							</div>
+							<div class="panel-body">
+								<c:out value="${dto.feedback}" escapeXml="true" />
+							</div>
+						</div>
+						<!-- end answer feedback -->
+					</c:if>
 				</div>
-			</c:forEach>
+			</div>
+		</c:forEach>
 
-			<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
-				<h4>
-					<fmt:message key="label.group.results" />
-				</h4>
-				
-				<table class="alternative-color" cellspacing="0">
-					<tr>
-				  		<td width="30%"> 
-							<strong> <fmt:message key="label.topMark"/> </strong>
-						</td> 
-						<td>	
-							<c:out value="${mcGeneralLearnerFlowDTO.topMark}"/>
-				  		</td>
-					</tr>	
-	
-				  	<tr>
-				  		<td> 
-					  		<strong><fmt:message key="label.avMark"/> </strong>
-				  		</td>
-				  		<td>
-							<c:out value="${mcGeneralLearnerFlowDTO.averageMark}"/>
-				  		</td>
-					</tr>	
-				</table>
-			</c:if>	
+		<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
+			<h4>
+				<fmt:message key="label.group.results" />
+			</h4>
 
+			<table class="table table-condensed" cellspacing="0">
+				<tr>
+					<td class="active" width="30%"><fmt:message key="label.topMark" /></td>
+					<td><c:out value="${mcGeneralLearnerFlowDTO.topMark}" /></td>
+				</tr>
+
+				<tr>
+					<td class="active"><fmt:message key="label.avMark" /></td>
+					<td><c:out value="${mcGeneralLearnerFlowDTO.averageMark}" /></td>
+				</tr>
+			</table>
+		</c:if>
+
+
+		<html:form action="/learning?method=displayMc&validate=false" method="POST" target="_self"
+			onsubmit="disableFinishButton();" styleId="Form1">
+			<html:hidden property="toolContentID" />
+			<html:hidden property="toolSessionID" />
+			<html:hidden property="httpSessionID" />
+			<html:hidden property="userID" />
+			<html:hidden property="userOverPassMark" />
+			<html:hidden property="passMarkApplicable" />
+			<html:hidden property="learnerProgress" />
+			<html:hidden property="learnerProgressUserId" />
+			<html:hidden property="questionListingMode" />
+
 			<c:if test="${mcGeneralLearnerFlowDTO.retries == 'true'}">
 				<p>
-					<fmt:message key="label.learner.bestMark"/>
-					<c:out value="${mcGeneralLearnerFlowDTO.latestAttemptMark}"/> 
-					<fmt:message key="label.outof"/> 
-					<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}"/> 
+					<fmt:message key="label.learner.bestMark" />
+					<c:out value="${mcGeneralLearnerFlowDTO.latestAttemptMark}" />
+					<fmt:message key="label.outof" />
+					<c:out value="${mcGeneralLearnerFlowDTO.totalMarksPossible}" />
 				</p>
-				
-				<html:submit property="redoQuestions" styleClass="button">
+
+				<html:submit property="redoQuestions" styleClass="btn btn-sm btn-primary buttons_column pull-left">
 					<fmt:message key="label.redo.questions" />
 				</html:submit>
 			</c:if>
 
-			<c:if test="${(mcGeneralLearnerFlowDTO.retries != 'true')
-				|| (mcGeneralLearnerFlowDTO.retries == 'true') && (mcGeneralLearnerFlowDTO.passMarkApplicable == 'true') 
-				&& (mcGeneralLearnerFlowDTO.userOverPassMark == 'true')}">
+			<c:if
+				test="${(mcGeneralLearnerFlowDTO.retries != 'true')
+                              || (mcGeneralLearnerFlowDTO.retries == 'true') && (mcGeneralLearnerFlowDTO.passMarkApplicable == 'true') 
+                              && (mcGeneralLearnerFlowDTO.userOverPassMark == 'true')}">
 
-				<div class="space-bottom-top align-right">
-					<c:if test="${mcGeneralLearnerFlowDTO.reflection != 'true'}">
-						<html:hidden property="learnerFinished" value="Finished" />
-																  			  		
-						<html:link href="#" styleClass="button" styleId="finishButton" onclick="submitForm('finish');return false">
-							<span class="nextActivity">
-								<c:choose>
-				 					<c:when test="${activityPosition.last}">
-				 						<fmt:message key="label.submit" />
-				 					</c:when>
-				 					<c:otherwise>
-				 		 				<fmt:message key="label.finished" />
-				 					</c:otherwise>
-					 			</c:choose>
-					 		</span>
-						</html:link>
-					</c:if>
 
-					<c:if test="${mcGeneralLearnerFlowDTO.reflection == 'true'}">
-						<html:submit property="forwardtoReflection" styleClass="button">
-							<fmt:message key="label.continue" />
-						</html:submit>
-					</c:if>
-				</div>
+				<c:if test="${mcGeneralLearnerFlowDTO.reflection != 'true'}">
+					<html:hidden property="learnerFinished" value="Finished" />
 
+					<html:link href="#" styleClass="btn btn-primary pull-right na" styleId="finishButton"
+						onclick="submitForm('finish');return false">
+							<c:choose>
+								<c:when test="${activityPosition.last}">
+									<fmt:message key="label.submit" />
+								</c:when>
+								<c:otherwise>
+									<fmt:message key="label.finished" />
+								</c:otherwise>
+							</c:choose>
+					</html:link>
+				</c:if>
+
+				<c:if test="${mcGeneralLearnerFlowDTO.reflection == 'true'}">
+					<html:submit property="forwardtoReflection" styleClass="btn btn-primary pull-right">
+						<fmt:message key="label.continue" />
+					</html:submit>
+				</c:if>
+
+
 			</c:if>
 
 		</html:form>
-	</div>
+	</lams:Page>
 </body>
 </lams:html>
 
Index: lams_tool_lamc/web/learning/Notebook.jsp
===================================================================
diff -u -r1a02559e19419af9991eaeb9363f809355b39bc7 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/Notebook.jsp	(.../Notebook.jsp)	(revision 1a02559e19419af9991eaeb9363f809355b39bc7)
+++ lams_tool_lamc/web/learning/Notebook.jsp	(.../Notebook.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,56 +1,47 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
-
+<!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>
 	<html:base />
 	<lams:css />
-	<title><fmt:message key="activity.title" />
-	</title>
+	<title><fmt:message key="activity.title" /></title>
 </lams:head>
 
 <body class="stripes">
 
-	<html:form action="/learning?method=displayMc&validate=false" styleId="reflectionForm" method="POST">
-		<html:hidden property="toolContentID" />
-		<html:hidden property="toolSessionID" />
-		<html:hidden property="httpSessionID" />
-		<html:hidden property="userID" />
-		<html:hidden property="submitReflection" />
-		<div id="content">
+	<lams:Page type="learner" title="${mcGeneralLearnerFlowDTO.activityTitle}">
 
-			<h1>
-				<c:out value="${mcGeneralLearnerFlowDTO.activityTitle}" escapeXml="true" />
-			</h1>
+		<div class="panel">
+			<lams:out value="${mcGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
+		</div>
 
-			<p>
-				<lams:out value="${mcGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
-			</p>
+		<div class="form-group">
+			<html:form action="/learning?method=displayMc&validate=false" styleId="reflectionForm" method="POST">
+				<html:hidden property="toolContentID" />
+				<html:hidden property="toolSessionID" />
+				<html:hidden property="httpSessionID" />
+				<html:hidden property="userID" />
+				<html:hidden property="submitReflection" />
+				<html:textarea rows="4" property="entryText" styleClass="form-control" styleId="focusedInput">
+					<c:if test="${not empty mcGeneralLearnerFlowDTO.notebookEntry}">
+						<lams:out value="${mcGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
+					</c:if>
+				</html:textarea>
 
-			<html:textarea cols="60" rows="8" property="entryText" styleClass="text-area">
-				<c:if test="${not empty mcGeneralLearnerFlowDTO.notebookEntry}">
-					<lams:out value="${mcGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true"/>		
-				</c:if>
-			</html:textarea>
 
-			<div class="space-bottom-top align-right">
-			    <html:link href="#" property="submitReflection" styleClass="button"
-			   		onclick="javascript:document.McLearningForm.submit();return false">
-					<span class="nextActivity"><fmt:message key="button.endLearning" /></span>
-			    </html:link>
-			</div>
+				<html:link href="#" property="submitReflection" styleClass="btn btn-primary pull-right voffset10 na"
+					onclick="javascript:document.McLearningForm.submit();return false">
+					<fmt:message key="button.endLearning" />
+				</html:link>
 
-		</div>
-	</html:form>
+			</html:form>
+	</lams:Page>
+	
+	<script type="text/javascript">
+		window.onload = function() {
+			document.getElementById("focusedInput").focus();
+		}
+	</script>
 
 </body>
 </lams:html>
Index: lams_tool_lamc/web/learning/SimpleLearnerError.jsp
===================================================================
diff -u -r1a02559e19419af9991eaeb9363f809355b39bc7 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/SimpleLearnerError.jsp	(.../SimpleLearnerError.jsp)	(revision 1a02559e19419af9991eaeb9363f809355b39bc7)
+++ lams_tool_lamc/web/learning/SimpleLearnerError.jsp	(.../SimpleLearnerError.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,29 +1,22 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
-
+<!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>
 	<html:base />
 	<lams:css />
-	<title><fmt:message key="label.learner.error" />
-	</title>
+	<title><fmt:message key="label.learner.error" /></title>
 </lams:head>
 
+<c:set var="title" scope="request">
+	<fmt:message key="activity.title" />
+</c:set>
+
 <body class="stripes">
-		<div id="content">
-			<div class="space-bottom-top align-right">
-				<%@ include file="/common/messages.jsp"%>
-			</div>
+	<lams:Page type="learner" title="${title}">
+		<div class="voffset10 pull-right">
+			<%@ include file="/common/messages.jsp"%>
 		</div>
-	<div id="footer"></div>
+		<div id="footer"></div>
+	</lams:Page>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp
===================================================================
diff -u -r1a02559e19419af9991eaeb9363f809355b39bc7 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp	(.../SingleQuestionAnswersContent.jsp)	(revision 1a02559e19419af9991eaeb9363f809355b39bc7)
+++ lams_tool_lamc/web/learning/SingleQuestionAnswersContent.jsp	(.../SingleQuestionAnswersContent.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,105 +1,88 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-
 <!--options content goes here-->
 
-<p>
-	<c:out value="${mcGeneralLearnerFlowDTO.activityInstructions}" escapeXml="false" />
-</p>
-
-<c:if test="${not empty mcLearnerStarterDTO.submissionDeadline}">
-	<div class="info">
-		<fmt:message key="authoring.info.teacher.set.restriction" >
-			<fmt:param><lams:Date value="${mcLearnerStarterDTO.submissionDeadline}" /></fmt:param>
-		</fmt:message>	
-	</div>
-</c:if>
-
-<c:if test="${mcGeneralLearnerFlowDTO.retries == 'true' && mcGeneralLearnerFlowDTO.passMark != '0'}">
-	<strong> <fmt:message key="label.learner.message" /> ( <c:out
-			value="${mcGeneralLearnerFlowDTO.passMark}" /> ) 
-	</strong>
-</c:if>
-
 <html:hidden property="nextQuestionSelected" />
 <html:hidden property="continueOptionsCombined" />
 <html:hidden property="questionIndex" value="${mcGeneralLearnerFlowDTO.questionIndex}" />
 
-<c:forEach var="dto" varStatus="status"	items="${requestScope.learnerAnswersDTOList}">
+<c:forEach var="dto" varStatus="status" items="${requestScope.learnerAnswersDTOList}">
 	<c:if test="${dto.displayOrder == mcGeneralLearnerFlowDTO.questionIndex}">
-	
-		<div class="shading-bg">
-			<div style="overflow: auto;">
-				<span class="float-left space-right">
-					${dto.displayOrder})
-				</span>
-				<c:out value="${dto.question}" escapeXml="false" />
-				
-				<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
-					[
-					<strong> <fmt:message key="label.mark" /> </strong>
-					<c:out value="${dto.mark}" />
-					]
-				</c:if>				
-			</div>
-		</div>
-		
-		<table class="indent">
-			<tbody>
-				<c:forEach var="option" varStatus="status" items="${dto.options}">
-					<tr>
-					
-						<td>
-							<input type="radio" name="checkedCa" class="noBorder" value="${dto.questionUid}-${option.uid}"
-								<c:if test="${option.selected}">checked="checked"</c:if>>
-						</td>
-		
-						<td width="100%">
-							<c:if test="${isPrefixAnswersWithLetters}">
-								<c:set var="seqLetter" value="${status.index}"/>
-								<span class="float-left">
-									<%=Character.toChars(97 + (Integer)pageContext.getAttribute("seqLetter"))%>)
-								</span>
+
+		<div class="row no-gutter">
+			<div class="col-xs-12">
+				<div class="panel panel-default">
+					<div class="panel-heading">
+						<table>
+							<tr>
+								<td style="vertical-align: top;">${dto.displayOrder})</td>
+								<td width="100%" style="padding-left: 5px"><c:out value="${dto.question}" escapeXml="false" /></td>
+							</tr>
+							<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
+								<tr>
+									<td width="100%" colspan="2">[ <strong><fmt:message key="label.mark" /></strong> <c:out
+											value="${dto.mark}" /> ]
+									</td>
+								</tr>
 							</c:if>
-								
-							<c:out value="${option.mcQueOptionText}" escapeXml="false" />
-						</td>
-					
-					</tr>
-				</c:forEach>
-			</tbody>
-		</table>
+						</table>
+					</div>
+					<!-- Display answers -->
+					<div class="panel-body">
+						<div class="table-responsive">
+							<table class="table table-hover table-condensed">
+								<tbody>
+									<c:forEach var="option" varStatus="status" items="${dto.options}">
+										<tr>
+											<td class="text-nowrap" style="vertical-align: top;"><input type="radio"
+												id="${dto.questionUid}-${option.uid}" name="checkedCa" class="noBorder"
+												value="${dto.questionUid}-${option.uid}" <c:if test="${option.selected}">checked="checked"</c:if> /> <c:if
+													test="${isPrefixAnswersWithLetters}">
+													<c:set var="seqLetter" value="${status.index}" />
+													<%=Character
+									.toChars(97 + (Integer) pageContext
+											.getAttribute("seqLetter"))%>)
+                              </c:if></td>
 
+											<td width="100%"><label for="${dto.questionUid}-${option.uid}"> <c:out
+														value="${option.mcQueOptionText}" escapeXml="false" />
+											</label></td>
+
+										</tr>
+									</c:forEach>
+
+								</tbody>
+							</table>
+						</div>
+					</div>
+					<!-- end display answers -->
+				</div>
+			</div>
+		</div>
 	</c:if>
 </c:forEach>
 
 <html:hidden property="donePreview" />
 
-<div class="space-bottom-top">
-    <c:if test="${mcGeneralLearnerFlowDTO.totalCountReached != 'true'  &&  mcGeneralLearnerFlowDTO.totalQuestionCount != '1'}"> 
-    	<html:button property="continueOptionsCombined" onclick="submitNextQuestionSelected();" styleClass="button"> 
-        	<fmt:message key="button.continue" /> 
-        </html:button> 
-    </c:if>
+<c:if
+	test="${mcGeneralLearnerFlowDTO.totalCountReached != 'true'  &&  mcGeneralLearnerFlowDTO.totalQuestionCount != '1'}">
+	<html:button property="continueOptionsCombined" onclick="submitNextQuestionSelected();"
+		styleClass="btn btn-sm btn-primary pull-right">
+		<fmt:message key="button.continue" />
+	</html:button>
+</c:if>
 
-	<c:if test="${mcGeneralLearnerFlowDTO.totalQuestionCount == '1'}">
-		<html:button property="continueOptionsCombined" onclick="doSubmit();" styleClass="button">
-			<fmt:message key="button.continue" />
-		</html:button>
-	</c:if>
+<c:if test="${mcGeneralLearnerFlowDTO.totalQuestionCount == '1'}">
+	<html:button property="continueOptionsCombined" onclick="doSubmit();" styleClass="btn btn-sm btn-primary pull-right">
+		<fmt:message key="button.continue" />
+	</html:button>
+</c:if>
 
-	<c:if test="${mcGeneralLearnerFlowDTO.totalCountReached == 'true'}">
-		<html:button property="continueOptionsCombined" onclick="submitAllAnswers();" styleClass="button">
-			<fmt:message key="button.submit" />
-		</html:button>
-	</c:if>
+<c:if test="${mcGeneralLearnerFlowDTO.totalCountReached == 'true'}">
+	<html:button property="continueOptionsCombined" onclick="submitAllAnswers();"
+		styleClass="btn btn-sm btn-primary pull-right">
+		<fmt:message key="button.submit" />
+	</html:button>
+</c:if>
 
-	<p>&nbsp;</p>
-</div>
 <!--options content ends here-->
Index: lams_tool_lamc/web/learning/ViewAnswers.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/ViewAnswers.jsp	(.../ViewAnswers.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_lamc/web/learning/ViewAnswers.jsp	(.../ViewAnswers.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,23 +1,15 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
 <c:set var="mode" value="${sessionMap.mode}" />
 <c:set var="isLeadershipEnabled" value="${sessionMap.content.useSelectLeaderToolOuput}" />
 <c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
-
 <lams:html>
 <lams:head>
 	<html:base />
 	<lams:css />
+
 	<title><fmt:message key="activity.title" /></title>
 	<script type="text/javascript">
 		function disableFinishButton() {
@@ -26,7 +18,7 @@
 				elem.disabled = true;
 			}
 		}
-		
+
 		function submitForm(methodName) {
 			var f = document.getElementById('Form1');
 			f.submit();
@@ -36,197 +28,236 @@
 
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${mcGeneralLearnerFlowDTO.activityTitle}"	escapeXml="true" />
-		</h1>
-		
+	<lams:Page type="learner" title="${mcGeneralLearnerFlowDTO.activityTitle}">
 		<c:if test="${isLeadershipEnabled}">
 			<h4>
-				<fmt:message key="label.group.leader" >
+				<fmt:message key="label.group.leader">
 					<fmt:param>${sessionMap.groupLeader.fullname}</fmt:param>
 				</fmt:message>
 			</h4>
 		</c:if>
 
-		<html:form action="/learning?method=displayMc&validate=false" method="POST" target="_self" onsubmit="disableFinishButton();"  styleId="Form1">
-			<html:hidden property="toolContentID" />
-			<html:hidden property="toolSessionID" />
-			<html:hidden property="httpSessionID" />
-			<html:hidden property="userID" />
-			<html:hidden property="userOverPassMark" />
-			<html:hidden property="passMarkApplicable" />
-			<html:hidden property="learnerProgress" />
-			<html:hidden property="learnerProgressUserId" />
-			<html:hidden property="questionListingMode" />
+		<h4>
+			<c:if test="${mcGeneralLearnerFlowDTO.learnerProgress != 'true'}">
+				<fmt:message key="label.viewAnswers" />
+			</c:if>
 
-			<h2>
-				<c:if test="${mcGeneralLearnerFlowDTO.learnerProgress != 'true'}">
-					<fmt:message key="label.viewAnswers" />
-				</c:if>
+			<c:if test="${mcGeneralLearnerFlowDTO.learnerProgress == 'true'}">
+				<fmt:message key="label.learner.viewAnswers" />
+			</c:if>
+		</h4>
 
-				<c:if test="${mcGeneralLearnerFlowDTO.learnerProgress == 'true'}">
-					<fmt:message key="label.learner.viewAnswers" />
-				</c:if>
-			</h2>
+		<!--  QUESTIONS  -->
+		<c:set var="mainQueIndex" scope="request" value="0" />
+		<c:forEach var="questionEntry" varStatus="status" items="${mcGeneralLearnerFlowDTO.mapQuestionsContent}">
+			<c:set var="mainQueIndex" scope="request" value="${mainQueIndex +1}" />
 
-			<!--  QUESTIONS  -->
-			<c:set var="mainQueIndex" scope="request" value="0" />
-			<c:forEach var="questionEntry" varStatus="status" items="${mcGeneralLearnerFlowDTO.mapQuestionsContent}">
-				<c:set var="mainQueIndex" scope="request" value="${mainQueIndex +1}" />
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">
+							<table>
+								<tr>
+									<td>${status.count})</td>
+									<td width="100%" style="padding: 5px"><c:out value="${questionEntry.value}" escapeXml="false" /></td>
+								</tr>
+							</table>
+						</div>
+						<div class="panel-body">
 
-				<div class="shading-bg">
-					<div style="overflow: auto;">
-						<span class="float-left space-right">
-							${status.count})
-						</span>					
-						<c:out value="${questionEntry.value}" escapeXml="false" />
-					</div>
+							<!--  CANDIDATE ANSWERS  -->
+							<c:set var="queIndex" scope="request" value="0" />
+							<c:forEach var="mainEntry" items="${mcGeneralLearnerFlowDTO.mapGeneralOptionsContent}">
+								<c:set var="queIndex" scope="request" value="${queIndex +1}" />
 
-					<!--  CANDIDATE ANSWERS  -->
-					<c:set var="queIndex" scope="request" value="0" />
-					<c:forEach var="mainEntry" items="${mcGeneralLearnerFlowDTO.mapGeneralOptionsContent}">
-						<c:set var="queIndex" scope="request" value="${queIndex +1}" />
+								<c:if test="${requestScope.mainQueIndex == requestScope.queIndex}">
+									<!-- list of candidate answers -->
+									<ul>
+										<c:forEach var="subEntry" items="${mainEntry.value}">
+											<li><c:out value="${subEntry.value}" escapeXml="false" /></li>
+										</c:forEach>
+									</ul>
+									<!-- end list of candidate answers -->
 
-						<c:if test="${requestScope.mainQueIndex == requestScope.queIndex}">
-							<ul>
-								<c:forEach var="subEntry" items="${mainEntry.value}">
-									<li>
-										<c:out value="${subEntry.value}" escapeXml="false" /> 
-									</li>
-								</c:forEach>
-							</ul>
-						
-							<p>
-								<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
-									<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
-										<c:out value="${attemptEntry.value.mcOptionsContent.mcQueOptionText}" escapeXml="false"/>
-									</c:if>
-								</c:forEach>
-	
-								<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
-									<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
-										<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
-										
-											<c:choose>
-												<c:when test="${attemptEntry.value.mcOptionsContent.correctOption}">
-													<img src="<c:out value="${tool}"/>images/tick.gif" border="0" class="middle">
-												</c:when>
-												<c:otherwise>
-													<img src="<c:out value="${tool}"/>images/cross.gif" border="0" class="middle">
-												</c:otherwise>
-											</c:choose>
-											
-										</c:if>
-									</c:forEach>
+									<!-- display students answers -->
+									<div class="table-responsive">
+										<table class="table table-condensed">
+											<thead>
+												<tr>
+													<th colspan="2"><fmt:message key="label.yourAnswers" /></th>
+												</tr>
+											</thead>
+											<tr>
+												<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
+													<!-- show right/wrong -->
+													<c:forEach var="attemptEntry" items="${mcGeneralLearnerFlowDTO.attemptMap}">
+														<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
+															<c:choose>
+																<c:when test="${attemptEntry.value.mcOptionsContent.correctOption}">
+																	<td class="bg-success" style="vertical-align: top;"><i class="fa fa-check"
+																		style="color: green; font-size: 22px"></i>
+																</c:when>
+																<c:otherwise>
+																	<td class="bg-danger" style="vertical-align: top;"><i class="fa fa-times"
+																		style="color: red; font-size: 22px"></i></td>
+																</c:otherwise>
+															</c:choose>
+
+														</c:if>
+													</c:forEach>
+													<!-- end show right/wrong -->
+												</c:if>
+												<td width="100%">
+													<!-- display student selection --> <c:forEach var="attemptEntry"
+														items="${mcGeneralLearnerFlowDTO.attemptMap}">
+														<c:if test="${requestScope.mainQueIndex == attemptEntry.key}">
+															<c:out value="${attemptEntry.value.mcOptionsContent.mcQueOptionText}" escapeXml="false" />
+														</c:if>
+													</c:forEach> <!-- end student selection -->
+												</td>
+											</tr>
+										</table>
+									</div>
 								</c:if>
-							</p>
-						</c:if>
-					</c:forEach>
+							</c:forEach>
 
-					<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
-						<c:forEach var="feedbackEntry" items="${mcGeneralLearnerFlowDTO.mapFeedbackContent}">
-							<c:if test="${(requestScope.mainQueIndex == feedbackEntry.key)
-								&& (feedbackEntry.value != null) && (feedbackEntry.value != '')}">
-								
-								<div style="overflow: auto;">									  							
-									<strong> <fmt:message key="label.feedback.simple" /> </strong> <c:out value="${feedbackEntry.value}" escapeXml="true" />
-								</div>	
-																									
+							<!-- answer feedback -->
+							<c:if test="${mcGeneralLearnerFlowDTO.displayAnswers == 'true'}">
+								<c:forEach var="feedbackEntry" items="${mcGeneralLearnerFlowDTO.mapFeedbackContent}">
+									<c:if
+										test="${(requestScope.mainQueIndex == feedbackEntry.key)
+                                          && (feedbackEntry.value != null) && (feedbackEntry.value != '')}">
+
+										<div class="panel panel-default">
+											<div class="panel-heading">
+												<h4 class="panel-title">
+													<fmt:message key="label.feedback.simple" />
+												</h4>
+											</div>
+											<div class="panel-body">
+												<c:out value="${feedbackEntry.value}" escapeXml="true" />
+											</div>
+										</div>
+
+									</c:if>
+								</c:forEach>
 							</c:if>
-						</c:forEach>
-					</c:if>
+							<!-- end answer feedback -->
+						</div>
+					</div>
 				</div>
-			</c:forEach>
-			<!-- END QUESTION  -->
-			
-			<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
-				<h4>
-					<fmt:message key="label.group.results" />
-				</h4>
-					
-				<table class="alternative-color" cellspacing="0">
-					<tr>
-						<td width="30%"> 
-							<strong> <fmt:message key="label.topMark"/> </strong>
-						</td> 
-						<td>	
-							<c:out value="${mcGeneralLearnerFlowDTO.topMark}"/>
-						</td>
-					</tr>	
-		
-					<tr>
-						<td> 
-							<strong><fmt:message key="label.avMark"/> </strong>
-						</td>
-					  	<td>
-							<c:out value="${mcGeneralLearnerFlowDTO.averageMark}"/>
-					  	</td>
-					</tr>	
-				</table>
-			</c:if>				
+			</div>
+		</c:forEach>
+		<!-- end page panel -->
 
-			<c:if test="${(mcGeneralLearnerFlowDTO.learnerProgress != 'true') && (mcGeneralLearnerFlowDTO.retries == 'true') && hasEditRight}">
-				<html:submit property="redoQuestions" styleClass="button">
-					<fmt:message key="label.redo.questions" />
-				</html:submit>
-			</c:if>
-									
-			<c:if test="${mcGeneralLearnerFlowDTO.reflection && hasEditRight}">
-				<h2>
-					<lams:out value="${mcGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />		
-				</h2>
+		<!-- END QUESTION  -->
 
-				<p>
-					<c:choose>
-						<c:when test="${not empty mcGeneralLearnerFlowDTO.notebookEntry}">
-							<lams:out value="${mcGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true"/>
-						</c:when>
-						<c:otherwise>
-							<em><fmt:message key="message.no.reflection.available" /></em>  
-						</c:otherwise>
-					</c:choose>
-				</p>
+		<c:if test="${mcGeneralLearnerFlowDTO.showMarks == 'true'}">
+			<h4>
+				<fmt:message key="label.group.results" />
+			</h4>
+
+			<table class="table table-condensed">
+				<tr>
+					<td class="active" width="30%"><fmt:message key="label.topMark" /></td>
+					<td><c:out value="${mcGeneralLearnerFlowDTO.topMark}" /></td>
+				</tr>
+
+				<tr>
+					<td class="active"><fmt:message key="label.avMark" /></td>
+					<td><c:out value="${mcGeneralLearnerFlowDTO.averageMark}" /></td>
+				</tr>
+			</table>
+		</c:if>
+
+
+		<c:if test="${mcGeneralLearnerFlowDTO.reflection && hasEditRight}">
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<h4>
+						<fmt:message key="label.reflection" />
+					</h4>
+
+					<div class="panel panel-default">
+						<div class="panel-heading">
+							<h2 class="panel-title">
+								<lams:out value="${mcGeneralLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
+							</h2>
+						</div>
+						<div class="panel-body">
+
+							<c:choose>
+								<c:when test="${not empty mcGeneralLearnerFlowDTO.notebookEntry}">
+									<lams:out value="${mcGeneralLearnerFlowDTO.notebookEntry}" escapeHtml="true" />
+								</c:when>
+								<c:otherwise>
+									<em><fmt:message key="message.no.reflection.available" /></em>
+								</c:otherwise>
+							</c:choose>
+						</div>
+					</div>
+				</div>
+			</div>
+		</c:if>
+
+		<div class="form-group">
+			<html:form action="/learning?method=displayMc&validate=false" method="POST" target="_self"
+				onsubmit="disableFinishButton();" styleId="Form1">
+				<html:hidden property="toolContentID" />
+				<html:hidden property="toolSessionID" />
+				<html:hidden property="httpSessionID" />
+				<html:hidden property="userID" />
+				<html:hidden property="userOverPassMark" />
+				<html:hidden property="passMarkApplicable" />
+				<html:hidden property="learnerProgress" />
+				<html:hidden property="learnerProgressUserId" />
+				<html:hidden property="questionListingMode" />
+
+
+				<c:if
+					test="${(mcGeneralLearnerFlowDTO.learnerProgress != 'true') && (mcGeneralLearnerFlowDTO.retries == 'true') && hasEditRight}">
+					<html:submit property="redoQuestions" styleClass="btn btn-primary pull-left">
+						<fmt:message key="label.redo.questions" />
+					</html:submit>
+				</c:if>
 				
-			</c:if>
+				<c:if test="${mcGeneralLearnerFlowDTO.learnerProgress != 'true'}">
+					<c:if
+						test="${(mcGeneralLearnerFlowDTO.retries != 'true') || (mcGeneralLearnerFlowDTO.retries == 'true') && (mcGeneralLearnerFlowDTO.passMarkApplicable == 'true') && (mcGeneralLearnerFlowDTO.userOverPassMark == 'true')}">
 
-			<c:if test="${mcGeneralLearnerFlowDTO.learnerProgress != 'true'}">
-				<c:if test="${(mcGeneralLearnerFlowDTO.retries != 'true') || (mcGeneralLearnerFlowDTO.retries == 'true') && (mcGeneralLearnerFlowDTO.passMarkApplicable == 'true') && (mcGeneralLearnerFlowDTO.userOverPassMark == 'true')}">
+						<div class="voffset5">
+							<c:if test="${(mcGeneralLearnerFlowDTO.reflection != 'true') || !hasEditRight}">
+								<html:hidden property="learnerFinished" value="Finished" />
 
-					<div class="space-bottom-top align-right">
-						<c:if test="${(mcGeneralLearnerFlowDTO.reflection != 'true') || !hasEditRight}">
-							<html:hidden property="learnerFinished" value="Finished" />
-									
-							<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish'); return false;">
-								<span class="nextActivity">
+								<html:link href="#nogo" styleClass="btn btn-primary pull-right na" styleId="finishButton"
+									onclick="submitForm('finish'); return false;">
 									<c:choose>
-					 					<c:when test="${activityPosition.last}">
-					 						<fmt:message key="label.submit" />
-					 					</c:when>
-					 					<c:otherwise>
-					 		 				<fmt:message key="label.finished" />
-					 					</c:otherwise>
-						 			</c:choose>
-								</span>
-							</html:link>
-						</c:if>
+										<c:when test="${activityPosition.last}">
+											<fmt:message key="label.submit" />
+										</c:when>
+										<c:otherwise>
+											<fmt:message key="label.finished" />
+										</c:otherwise>
+									</c:choose>
+								</html:link>
+							</c:if>
 
-						<c:if test="${(mcGeneralLearnerFlowDTO.reflection == 'true') && hasEditRight}">
-							<html:submit property="forwardtoReflection" styleClass="button">
-								<fmt:message key="label.continue" />
-							</html:submit>
-						</c:if>
-					</div>
-					
+							<c:if test="${(mcGeneralLearnerFlowDTO.reflection == 'true') && hasEditRight}">
+								<html:submit property="forwardtoReflection" styleClass="btn btn-primary pull-right">
+									<fmt:message key="label.continue" />
+								</html:submit>
+							</c:if>
+						</div>
+
+					</c:if>
 				</c:if>
-			</c:if>
 
-			<p>							
-				<html:hidden property="doneLearnerProgress" />
-			</p>
-			
-		</html:form>
+				<p>
+					<html:hidden property="doneLearnerProgress" />
+				</p>
 
-	</div>
+			</html:form>
+		</div>
+		</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_lamc/web/learning/WaitForLeader.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/WaitForLeader.jsp	(.../WaitForLeader.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_lamc/web/learning/WaitForLeader.jsp	(.../WaitForLeader.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,56 +1,40 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-
 <lams:html>
 <lams:head>
 	<html:base />
 	<title><fmt:message key="activity.title" /></title>
-
 	<lams:css />
 
 	<script type="text/javascript">
 		function refresh() {
 			location.reload();
 		}
-		
+
 		//refresh page every 30 sec
-		setTimeout("refresh();",30000);
-    </script>
+		setTimeout("refresh();", 30000);
+	</script>
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${content.title}" escapeXml="true"/>
-		</h1>
-		
-		<h2>
+	<lams:Page type="learner" title="${content.title}">
+		<h4 class="text-left">
 			<fmt:message key="label.waiting.for.leader" />
-		</h2>
+		</h4>
 
-		<div>
+		<div class="voffset5">
 			<fmt:message key="label.users.from.group" />
 		</div>
-		
-		<div>
+
+		<ul class="voffset2">
 			<c:forEach var="user" items="${groupUsers}" varStatus="status">
-				<div>
-					<c:out value="${user.fullname}" escapeXml="true"/>
-				</div>
+				<li><i class="fa fa-user"></i> <c:out value="${user.fullname}" escapeXml="true" /></li>
 			</c:forEach>
-		</div>
-		
-		<div class="space-bottom-top align-right">
-			<html:button property="refreshButton" onclick="refresh();" styleClass="button">
-				<fmt:message key="label.refresh" />
-			</html:button>
-		</div>
+		</ul>
 
-	</div>
-
-	<div id="footer">
-	</div>
-
+		<html:button property="refreshButton" onclick="refresh();" styleClass="btn btn-primary pull-right">
+			<fmt:message key="label.refresh" />
+		</html:button>
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_lamc/web/learning/defineLater.jsp
===================================================================
diff -u -r9db7a5bb39fecf9a0f1ae5cf2a9f701d2aa1532f -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 9db7a5bb39fecf9a0f1ae5cf2a9f701d2aa1532f)
+++ lams_tool_lamc/web/learning/defineLater.jsp	(.../defineLater.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,29 +1,19 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
-
+<!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<lams:html>
+<lams:head>
+	<html:base />
+	<lams:css />
+	<title><fmt:message key="activity.title" /></title>
+</lams:head>
 
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
+<body class="stripes">
 
-<lams:html>
-	<lams:head>
-		<html:base />
-		<lams:css />
-		<title><fmt:message key="activity.title" /></title>
-	</lams:head>
-	
-	<body class="stripes">
-	
-		<div id="content">
-			<lams:DefineLater defineLaterMessageKey="error.defineLater" />
-		</div>
-	
-		<div id="footer"></div>
-	
-	</body>
+	<c:set var="title" scope="request">
+		<fmt:message key="activity.title" />
+	</c:set>
+	<lams:Page type="learner" title="${title}">
+		<lams:DefineLater defineLaterMessageKey="error.defineLater" />
+	</lams:Page>
+</body>
 </lams:html>
Index: lams_tool_lamc/web/learning/submissionDeadline.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc048314fbc71e9f6125f8298849b394f45ff6c55
--- lams_tool_lamc/web/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_lamc/web/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision c048314fbc71e9f6125f8298849b394f45ff6c55)
@@ -1,30 +1,22 @@
 <!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>
 	<html:base />
 	<lams:css />
-	<title><fmt:message key="activity.title" />
-	</title>
-	
+
+	<title><fmt:message key="activity.title" /></title>
+
 	<script type="text/javascript">
 		function disableFinishButton() {
 			var elem = document.getElementById("finishButton");
 			if (elem != null) {
 				elem.disabled = true;
 			}
 		}
-		
-		function submitForm(methodName){
+
+		function submitForm(methodName) {
 			var f = document.getElementById('messageForm');
 			f.submit();
 		}
@@ -33,53 +25,51 @@
 
 <body class="stripes">
 
-	<html:form action="/learning?method=displayMc&validate=false" method="POST" onsubmit="disableFinishButton();" styleId="messageForm">
-		<html:hidden property="toolContentID" />
-		<html:hidden property="toolSessionID" />
-		<html:hidden property="httpSessionID" />
-		<html:hidden property="userID" />
+	<c:set var="title" scope="request">
+		<fmt:message key="activity.title" />
+	</c:set>
 
-		<div id="content">
+	<lams:Page type="learner" title="${title}">
 
-			<h1>
-				<fmt:message key="activity.title" />
-			</h1>
-			
-			<div class="warning">
-				<fmt:message key="authoring.info.teacher.set.restriction" >
-					<fmt:param><lams:Date value="${mcLearnerStarterDTO.submissionDeadline}" /></fmt:param>
-				</fmt:message>							
-			</div>
-					
-			<div class="space-bottom-top align-right">
+		<html:form action="/learning?method=displayMc&validate=false" method="POST" onsubmit="disableFinishButton();"
+			styleId="messageForm">
+			<html:hidden property="toolContentID" />
+			<html:hidden property="toolSessionID" />
+			<html:hidden property="httpSessionID" />
+			<html:hidden property="userID" />
 
-				<c:if test="${mcGeneralLearnerFlowDTO.reflection != 'true'}">
-					<html:hidden property="learnerFinished" value="Finished" />
-					
-					<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="javascript:submitForm('finish');return false">
-						<span class="nextActivity">
-							<c:choose>
-			 					<c:when test="${activityPosition.last}">
-			 						<fmt:message key="label.submit" />
-			 					</c:when>
-			 					<c:otherwise>
-			 		 				<fmt:message key="label.finished" />
-			 					</c:otherwise>
-				 			</c:choose>
-				 		</span>
-					</html:link>
-				</c:if>
+			<lams:Alert id="submissionDeadline" type="danger" close="false">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${mcLearnerStarterDTO.submissionDeadline}" />
+					</fmt:param>
+				</fmt:message>
+			</lams:Alert>
 
-				<c:if test="${mcGeneralLearnerFlowDTO.reflection == 'true'}">
-					<html:submit property="forwardtoReflection" styleClass="button">
-						<fmt:message key="label.continue" />
-					</html:submit>
-				</c:if>
+			<c:if test="${mcGeneralLearnerFlowDTO.reflection != 'true'}">
+				<html:hidden property="learnerFinished" value="Finished" />
+
+				<html:link href="#nogo" styleClass="btn btn-primary pull-right voffset10 na" styleId="finishButton"
+					onclick="javascript:submitForm('finish');return false">
+					<c:choose>
+						<c:when test="${activityPosition.last}">
+							<fmt:message key="label.submit" />
+						</c:when>
+						<c:otherwise>
+							<fmt:message key="label.finished" />
+						</c:otherwise>
+					</c:choose>
+				</html:link>
+			</c:if>
+
+			<c:if test="${mcGeneralLearnerFlowDTO.reflection == 'true'}">
+				<html:submit property="forwardtoReflection" styleClass="button">
+					<fmt:message key="label.continue" />
+				</html:submit>
+			</c:if>
 			</div>
-			
-		</div>
-	</html:form>
-	
-	<div id="footer"></div>
+			<div id="footer"></div>
+		</html:form>
+	</lams:Page>
 </body>
 </lams:html>