Index: lams_tool_sbmt/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_sbmt/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_sbmt/web/WEB-INF/tags/Alert.tag	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -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_sbmt/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rfef442a88ab05c91db8a551081c4abc060d4da5e -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fef442a88ab05c91db8a551081c4abc060d4da5e)
+++ lams_tool_sbmt/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -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_sbmt/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_sbmt/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_sbmt/web/WEB-INF/tags/Page.tag	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -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_sbmt/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r86a2855c49422f236ac31c35df38fa3c66220dcc -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 86a2855c49422f236ac31c35df38fa3c66220dcc)
+++ lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -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_sbmt/web/common/header.jsp
===================================================================
diff -u -r843aa271bd7b90368cc12ce6547069eaedffa066 -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/common/header.jsp	(.../header.jsp)	(revision 843aa271bd7b90368cc12ce6547069eaedffa066)
+++ lams_tool_sbmt/web/common/header.jsp	(.../header.jsp)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -20,5 +20,8 @@
 	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 
 	
\ No newline at end of file
Index: lams_tool_sbmt/web/common/messages.jsp
===================================================================
diff -u -r896248d87ee3eb2da93ba7a9f11ca2de11eb4040 -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/common/messages.jsp	(.../messages.jsp)	(revision 896248d87ee3eb2da93ba7a9f11ca2de11eb4040)
+++ lams_tool_sbmt/web/common/messages.jsp	(.../messages.jsp)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -2,9 +2,9 @@
 
 <%-- Error Messages --%>
 <logic:messagesPresent>
-	<p class="warning">
+	<lams:Alert id="errors" type="danger" close="true">
 	        <html:messages id="error">
 	            <c:out value="${error}" escapeXml="false"/><br/>
 	        </html:messages>
-	</p>
+	</lams:Alert>
 </logic:messagesPresent>
\ No newline at end of file
Index: lams_tool_sbmt/web/learner/definelater.jsp
===================================================================
diff -u -r18e5e690d2e1a7c3d918759f7a2827c8205feaac -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/learner/definelater.jsp	(.../definelater.jsp)	(revision 18e5e690d2e1a7c3d918759f7a2827c8205feaac)
+++ lams_tool_sbmt/web/learner/definelater.jsp	(.../definelater.jsp)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -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"%>
 
@@ -9,13 +8,16 @@
 </lams:head>
 
 <body class="stripes">
-	<div id="content">
-		<h1>
-			<fmt:message key="activity.title" />
-		</h1>
+
+	<c:set var="title" scope="request">
+		<fmt:message key="activity.title"></fmt:message>
+	</c:set>
+
+	<lams:Page type="learner" title="${title}">
 		<lams:DefineLater />
-	</div>
-	<div id="footer"></div>
+		<div id="footer"></div>
+	</lams:Page>
+
 </body>
 </lams:html>
 
Index: lams_tool_sbmt/web/learner/notebook.jsp
===================================================================
diff -u -r223502c7884deaf414065ca1b3695fb6e56b6e8a -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/learner/notebook.jsp	(.../notebook.jsp)	(revision 223502c7884deaf414065ca1b3695fb6e56b6e8a)
+++ lams_tool_sbmt/web/learner/notebook.jsp	(.../notebook.jsp)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -1,60 +1,69 @@
+<!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
 
 <lams:html>
 <lams:head>
-	<title><fmt:message key="label.learning.title" />
-	</title>
+	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
 	<script type="text/javascript">
 		function disableFinishButton() {
 			document.getElementById("finishButton").disabled = true;
 		}
-	         function submitForm(methodName){
-	                var f = document.getElementById('messageForm');
-	                f.submit();
-	        }
-	</script>	
+		function submitForm(methodName) {
+			var f = document.getElementById('messageForm');
+			f.submit();
+		}
+	</script>
 </lams:head>
 
 <body class="stripes">
 
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
 	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	<html:form action="/learning/submitReflection" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
-		<html:hidden property="userID" />
-		<html:hidden property="sessionMapID" />
-		<div id="content">
-			<h1>
-				<c:out value="${sessionMap.title}"/>
-			</h1>
 
-			<%@ include file="/common/messages.jsp"%>
+	<lams:Page type="learner" title="${sessionMap.title}">
 
-			<p>
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-			</p>
+		<%@ include file="/common/messages.jsp"%>
 
-			<html:textarea cols="60" rows="8" property="entryText"
-				styleClass="text-area" />
+		<div class="panel">
+			<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+		</div>
 
-			<div class="space-bottom-top align-right">
-				<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-					<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>
+		<div class="form-group">
+			<html:form action="/learning/submitReflection" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
+				<html:hidden property="userID" />
+				<html:hidden property="sessionMapID" />
+				<html:textarea property="entryText" styleClass="form-control" styleId="focused" />
+
+
+				<html:link href="#nogo" styleClass="btn btn-primary voffset10 pull-right na" styleId="finishButton"
+					onclick="submitForm('finish')">
+
+					<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>
+
 				</html:link>
-			</div>
-	</html:form>
-	<div id="footer"></div>
 
+			</html:form>
+
+		</div>
+
+		<div id="footer"></div>
+
+
+	</lams:Page>
+
+	<script type="text/javascript">
+		window.onload = function() {
+			document.getElementById("focused").focus();
+		}
+	</script>
+
 </body>
 </lams:html>
Index: lams_tool_sbmt/web/learner/sbmtlearner.jsp
===================================================================
diff -u -rf7005b417bda67aee1226b46546e74e82aad6538 -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision f7005b417bda67aee1226b46546e74e82aad6538)
+++ lams_tool_sbmt/web/learner/sbmtlearner.jsp	(.../sbmtlearner.jsp)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -1,8 +1,5 @@
-<!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="sessionMap" value="${sessionScope[sessionMapID]}" />
 
 <lams:html>
@@ -12,35 +9,39 @@
 	<%@ include file="/common/header.jsp"%>
 
 	<script type="text/javascript">
-		function submitCount(tUrl){
+		jQuery(document).ready(function() {
+			jQuery("time.timeago").timeago();
+		});
+
+		function submitCount(tUrl) {
 			var lockOnFinished = <c:out value="${sessionMap.lockOnFinish}"/>;
 			var uploadFileNum = <c:choose><c:when test="${empty learner.filesUploaded}">0</c:when><c:otherwise>1</c:otherwise></c:choose>;
-			if(lockOnFinished && uploadFileNum==0){
-				if(confirm("<fmt:message key='learner.finish.without.upload'/>"))
-					location.href= tUrl;
+			if (lockOnFinished && uploadFileNum == 0) {
+				if (confirm("<fmt:message key='learner.finish.without.upload'/>"))
+					location.href = tUrl;
 				else
 					return false;
-//			}else{
-//				if(confirm("<fmt:message key='messsage.learner.finish.confirm'/>"))
-//					location.href= tUrl;
-//				else
-//					return false;
-//			}
-			}else if(uploadFileNum==0){
-				if(confirm("<fmt:message key='messsage.learner.finish.confirm'/>"))
-					location.href= tUrl;
+				//			}else{
+				//				if(confirm("<fmt:message key='messsage.learner.finish.confirm'/>"))
+				//					location.href= tUrl;
+				//				else
+				//					return false;
+				//			}
+			} else if (uploadFileNum == 0) {
+				if (confirm("<fmt:message key='messsage.learner.finish.confirm'/>"))
+					location.href = tUrl;
 				else
 					return false;
-			}else
-				location.href= tUrl;
+			} else
+				location.href = tUrl;
 		}
-		function finish(){
+		function finish() {
 			document.getElementById("finishButton").disabled = true;
-			var finishUrl= "<html:rewrite page='/learner.do?method=finish&sessionMapID=${sessionMapID}'/>";
+			var finishUrl = "<html:rewrite page='/learner.do?method=finish&sessionMapID=${sessionMapID}'/>";
 			return submitCount(finishUrl);
 		}
-		function notebook(){
-			var continueUrl= "<html:rewrite page='/learning/newReflection.do?sessionMapID=${sessionMapID}'/>";
+		function notebook() {
+			var continueUrl = "<html:rewrite page='/learning/newReflection.do?sessionMapID=${sessionMapID}'/>";
 			return submitCount(continueUrl);
 		}
 	</script>
@@ -49,17 +50,16 @@
 
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${sessionMap.title}" escapeXml="true" />
-		</h1>
-
-		<p>
+	<lams:Page type="learner" title="${sessionMap.title}">
+		<div class="panel">
 			<c:out value="${sessionMap.instruction}" escapeXml="false" />
-		</p>
-	    <c:if test="${sessionMap.mode == 'author' || sessionMap.mode == 'learner'}">
+		</div>
+
+		<!-- notices and announcements -->
+		<c:if test="${sessionMap.mode == 'author' || sessionMap.mode == 'learner'}">
 			<c:if test="${sessionMap.lockOnFinish}">
-				<div class="info">
+				<!--  Lock when finished -->
+				<lams:Alert id="lockWhenFinished" type="info" close="true">
 					<c:choose>
 						<c:when test="${sessionMap.userFinished}">
 							<fmt:message key="message.activityLocked" />
@@ -68,191 +68,222 @@
 							<fmt:message key="message.warnLockOnFinish" />
 						</c:otherwise>
 					</c:choose>
-				</div>
+				</lams:Alert>
 			</c:if>
-			
+
 			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<div class="info">
-					<fmt:message key="authoring.info.teacher.set.restriction" >
-						<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+				<lams:Alert id="submissionDeadline" type="info" close="true">
+					<fmt:message key="authoring.info.teacher.set.restriction">
+						<fmt:param>
+							<lams:Date value="${sessionMap.submissionDeadline}" />
+						</fmt:param>
 					</fmt:message>
-				</div>
-			</c:if>			
+				</lams:Alert>
+			</c:if>
+
+			<c:if test="${sessionMap.limitUpload}">
+				<c:choose>
+					<c:when test="${not sessionMap.userFinished || not sessionMap.lockOnFinish}">
+						<lams:Alert id="limitUploads" close="true" type="info">
+							<fmt:message key="message.left.upload.limit">
+								<fmt:param value="${learner.limitUploadLeft}" />
+							</fmt:message>
+						</lams:Alert>
+					</c:when>
+				</c:choose>
+			</c:if>
+
 		</c:if>
+		<!-- End notices and announcements -->
 
 		<%@include file="/common/messages.jsp"%>
-		<c:if test="${sessionMap.limitUpload}">
-			<c:choose>
-			 <c:when test="${not sessionMap.userFinished || not sessionMap.lockOnFinish}">
-				<p>		
-				<fmt:message key="message.left.upload.limit">
-					<fmt:param value="${learner.limitUploadLeft}" />
-				</fmt:message>
-				</p>
-			</c:when>
-			</c:choose>
-		</c:if>
+
+
 		<!--Checks if the filesUploaded property of the SbmtLearnerForm is set -->
 		<c:choose>
 
 			<c:when test="${empty learner.filesUploaded}">
-				<p>
+				<div class="alert">
 					<fmt:message key="label.learner.noUpload" />
-				</p>
+				</div>
 			</c:when>
 
 			<c:otherwise>
-				<c:forEach var="file" items="${learner.filesUploaded}">
+				<!-- Start uploaded files -->
+				<div class="row no-gutter">
+					<div class="col-xs-12">
+						<div class="panel panel-success">
+							<div class="panel-heading panel-title">
+								<fmt:message key="monitoring.user.submittedFiles" />
+								<small>[<c:out value="${fn:length(learner.filesUploaded)}" />]
+								</small>
+							</div>
+							<div class="panel-body">
+								<!-- iteration files uploaded -->
+								<c:set var="counter" value="0" scope="page" />
+								<div class="row no-gutter">
+									<c:forEach var="file" items="${learner.filesUploaded}">
 
-					<div class="shading-bg">
-						<table>
-							<tr>
-								<!--First Row displaying the name of the File -->
-								<td class="field-name">
-									<fmt:message key="label.learner.fileName" />
-								</td>
-								<td>
-									<c:out value="${file.filePath}" />
-									<c:if test="${file.currentLearner}">
-										<c:set var="downloadURL">
-											<c:url
-												value="/download?uuid=${file.uuID}&versionID=${file.versionID}&preferDownload=true" />
-										</c:set>
-										<a href="${downloadURL}"><fmt:message key="label.download" />
-										</a>
-									</c:if>
-								</td>
-							</tr>
+										<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
+											<div class="table-responsive">
+												<table class="table table-condensed">
+													<tbody>
+														<c:set var="counter" value="${counter + 1}" scope="page" />
+														<tr class="bg-success">
+															<!--First Row displaying the name of the File -->
+															<td colspan="2"><strong> <c:out value="${counter}" />) <c:out value="${file.filePath}" />
+																	<c:if test="${file.currentLearner}">
+																		<c:set var="downloadURL">
+																			<c:url value="/download?uuid=${file.uuID}&versionID=${file.versionID}&preferDownload=true" />
+																		</c:set>
+																		<a class="btn btn-default btn-xs pull-right" title="<fmt:message key='label.download'/>"
+																			href="${downloadURL}"><i class="fa fa-download"></i> </a>
+																	</c:if>
+															</strong></td>
+														</tr>
+														<tr>
+															<!--Second Row displaying the description of the File -->
+															<td class="text-nowrap"><fmt:message key="label.learner.fileDescription" /></td>
+															<td><lams:out value="${file.fileDescription}" escapeHtml="true" /></td>
+														</tr>
 
-							<tr>
-								<!--Second Row displaying the description of the File -->
-								<td class="field-name">
-									<fmt:message key="label.learner.fileDescription" />
-								</td>
-								<td>
-									<lams:out value="${file.fileDescription}" escapeHtml="true"/>
-								</td>
-							</tr>
+														<tr>
+															<!--Third row displaying the date of submission of the File -->
+															<td class="text-nowrap"><fmt:message key="label.learner.time" /></td>
+															<td><time class="timeago" datetime="${file.dateOfSubmission}">
+																	<lams:Date value='${file.dateOfSubmission}' />
+																</time></td>
+														</tr>
 
-							<tr>
-								<!--Third row displaying the date of submission of the File -->
-								<td class="field-name">
-									<fmt:message key="label.learner.time" />
-								</td>
-								<td>
-									<lams:Date value="${file.dateOfSubmission}" />
-								</td>
-							</tr>
+														<tr>
+															<!--Fourth row displaying the comments -->
+															<td class="text-nowrap"><fmt:message key="label.learner.comments" /></td>
+															<td><c:choose>
+																	<c:when test="${empty file.comments}">
+																		<fmt:message key="label.learner.notAvailable" />
+																	</c:when>
+																	<c:otherwise>
+																		<c:out value="${file.comments}" escapeXml="false" />
+																	</c:otherwise>
+																</c:choose></td>
+														</tr>
 
-							<tr>
-								<!--Fourth row displaying the comments -->
-								<td class="field-name">
-									<fmt:message key="label.learner.comments" />
-								</td>
-								<td>
-									<c:choose>
-										<c:when test="${empty file.comments}">
-											<fmt:message key="label.learner.notAvailable" />
-										</c:when>
-										<c:otherwise>
-											<c:out value="${file.comments}" escapeXml="false" />
-										</c:otherwise>
-									</c:choose>
-								</td>
-							</tr>
+														<tr>
+															<!--Fifth row displaying the marks-->
+															<td class="text-nowrap"><fmt:message key="label.learner.marks" /></td>
+															<td><c:choose>
+																	<c:when test="${empty file.marks}">
+																		<fmt:message key="label.learner.notAvailable" />
+																	</c:when>
+																	<c:otherwise>
+																		<c:out value="${file.marks}" escapeXml="true" />
+																	</c:otherwise>
+																</c:choose></td>
+														</tr>
+														<tr style="margin-bottom: 5px; border-bottom: 5px solid #ddd">
+															<!--Sixth row displaying the marked file-->
+															<td class="text-nowrap"><fmt:message key="label.monitor.mark.markedFile" /></td>
+															<td><c:choose>
+																	<c:when test="${empty file.markFileUUID}">
+																		<fmt:message key="label.learner.notAvailable" />
+																	</c:when>
+																	<c:otherwise>
+																		<c:out value="${file.markFileName}" />
+																		<c:set var="markFileDownloadURL">
+																			<c:url
+																				value="/download?uuid=${file.markFileUUID}&versionID=${file.markFileVersionID}&preferDownload=true" />
+																		</c:set>
+																		<a href="${markFileDownloadURL}"><fmt:message key="label.download" /> </a>
 
-							<tr>
-								<!--Fifth row displaying the marks-->
-								<td class="field-name">
-									<fmt:message key="label.learner.marks" />
-								</td>
-								<td>
-									<c:choose>
-										<c:when test="${empty file.marks}">
-											<fmt:message key="label.learner.notAvailable" />
-										</c:when>
-										<c:otherwise>
-											<c:out value="${file.marks}" escapeXml="true" />
-										</c:otherwise>
-									</c:choose>
-								</td>
-							</tr>
-							<tr>
-								<!--Sixth row displaying the marked file-->
-								<td class="field-name">
-									<fmt:message key="label.monitor.mark.markedFile" />
-								</td>
-								<td>
-									<c:choose>
-										<c:when test="${empty file.markFileUUID}">
-											<fmt:message key="label.learner.notAvailable" />
-										</c:when>
-										<c:otherwise>
-											<c:out value="${file.markFileName}" />
-											<c:set var="markFileDownloadURL">
-											<c:url
-												value="/download?uuid=${file.markFileUUID}&versionID=${file.markFileVersionID}&preferDownload=true" />
-											</c:set>
-											<a href="${markFileDownloadURL}"><fmt:message key="label.download" />
-											</a>
+																	</c:otherwise>
+																</c:choose></td>
+														</tr>
 
-										</c:otherwise>
-									</c:choose>
-								</td>
-							</tr>
-						</table>
-					</div>
-				</c:forEach>
+													</tbody>
+												</table>
+											</div>
+											<!-- end table responsive -->
+										</div>
+									</c:forEach>
+									<!-- End iteration files uploaded -->
+								</div>
+								<!-- end row no-gutter -->
 
+
+							</div>
+							<!-- end panel-body -->
+						</div>
+					</div>
+				</div>
+				<!-- End row -->
 			</c:otherwise>
 		</c:choose>
 
 
+		<!-- Form -->
 
-		<div class="last-item"></div>
-
 		<c:if test="${sessionMap.mode != 'teacher'}">
-			<html:form action="/learner?method=uploadFile" method="post"
-				enctype="multipart/form-data">
-				<html:hidden property="sessionMapID" />
+			<!-- dont display form if teacher -->
 
-				<!-- Hidden fields -->
-				<html:hidden property="toolSessionID"
-					value="${sessionMap.toolSessionID}" />
+			<!-- now check if the user is (finished + lockedWhenFinished) or no more files allowed -->
+			<c:set var="displayForm" value="${sessionMap.finishLock || sessionMap.arriveLimit}" />
 
-				<!--File path row -->
-				<div class="field-name">
-					<fmt:message key="label.learner.filePath" /> <span style="color: red">*</span>
-				</div>
+			<c:if test="${!displayForm}">
 
-				<html:file property="file"
-					disabled="${sessionMap.finishLock || sessionMap.arriveLimit}"
-					size="40" tabindex="1" />
+				<html:form action="/learner?method=uploadFile" method="post" enctype="multipart/form-data">
+					<html:hidden property="sessionMapID" />
 
-				<!--File Description row -->
-				<div class="field-name space-top">
-					<fmt:message key="label.learner.fileDescription" /> <span style="color: red">*</span>
-				</div>
-				<html:textarea rows="5" cols="40" tabindex="2"
-					styleClass="text-area" property="description"
-					disabled="${sessionMap.finishLock || sessionMap.arriveLimit}" />
+					<!-- Hidden fields -->
+					<html:hidden property="toolSessionID" value="${sessionMap.toolSessionID}" />
 
-				<div class="small-space-top">
-					<html:submit
-						disabled="${sessionMap.finishLock || sessionMap.arriveLimit}"
-						styleClass="button">
-						<fmt:message key="label.learner.upload" />
-					</html:submit>
-				</div>
+					<!--File path row -->
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<fmt:message key="label.learner.upload" />
+						</div>
+						<div class="panel-body">
 
-				<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-					<div class="small-space-top">
-						<h3> <fmt:message key="title.reflection" /></h3>
-						<p>
-							<strong><lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}"/></strong>
-						</p>
-						
+							<div class="form-group">
+								<label for="file"><fmt:message key="label.learner.filePath" />&nbsp;<span style="color: red">*</span></label>
+								<html:file property="file" styleClass="btn btn-sm btn-file"
+									disabled="${sessionMap.finishLock || sessionMap.arriveLimit}" />
+							</div>
+							<div class="form-group">
+								<!--File Description row -->
+								<label for="description"><fmt:message key="label.learner.fileDescription" />&nbsp;<span
+									style="color: red">*</span></label>
+								<html:textarea styleClass="form-control" property="description"
+									disabled="${sessionMap.finishLock || sessionMap.arriveLimit}" />
+									<p class="help-block"><small><fmt:message key="errors.required"><fmt:param>*</fmt:param></fmt:message></small></p>
+							</div>
+							<div class="form-group">
+								<button type="submit" <c:if test="${sessionMap.finishLock || sessionMap.arriveLimit}">disabled="disabled"</c:if>
+									class="btn btn-sm btn-default btn-primary">
+									<fmt:message key="label.learner.upload" />
+									&nbsp;<i class="fa fa-xs fa-upload"></i>
+								</button>
+							</div>
+						</div>
+					</div>
+				</html:form>
+			</c:if>
+		</c:if>
+		<!-- end form -->
 
+
+
+		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
+			<!-- reflection -->
+			<div class="panel panel-default">
+				<div class="panel-heading panel-title">
+					<fmt:message key="title.reflection" />
+				</div>
+				<div class="panel-body">
+					<div class="panel">
+						<lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}" />
+					</div>
+
+					<div class="bg-warning" style="padding: 5px">
 						<c:choose>
 							<c:when test="${empty learner.reflect}">
 								<p>
@@ -266,46 +297,42 @@
 								</p>
 							</c:otherwise>
 						</c:choose>
+					</div>
 
-						<html:button property="notebookButton"
-							onclick="javascript:notebook();" styleClass="button">
-							<fmt:message key="label.edit" />
-						</html:button>
+					<html:button property="notebookButton" style="margin-top: 10px" onclick="javascript:notebook();"
+						styleClass="btn btn-sm btn-primary pull-left">
+						<fmt:message key="label.edit" />
+					</html:button>
+				</div>
+			</div>
+			<!-- end reflection -->
+		</c:if>
 
-					</div>
-				</c:if>
 
-				<div class="space-bottom-top" align="right">
+		<c:choose>
+			<c:when test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
+				<html:button property="notebookButton" onclick="javascript:notebook();" styleClass="btn btn-primary pull-right">
+					<fmt:message key="label.continue" />
+				</html:button>
+			</c:when>
+			<c:otherwise>
+				<html:link href="#nogo" property="finishButton" onclick="finish();return false"
+					styleClass="btn btn-primary pull-right na" styleId="finishButton">
 					<c:choose>
-						<c:when
-							test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
-							<html:button property="notebookButton"
-								onclick="javascript:notebook();" styleClass="button">
-								<fmt:message key="label.continue" />
-							</html:button>
+						<c:when test="${activityPosition.last}">
+							<fmt:message key="button.submit" />
 						</c:when>
 						<c:otherwise>
-							<html:link href="#nogo" property="finishButton"
-								onclick="finish();return false" styleClass="button"
-								styleId="finishButton">
-								<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>
+							<fmt:message key="button.finish" />
 						</c:otherwise>
 					</c:choose>
-				</div>
+				</html:link>
+			</c:otherwise>
+		</c:choose>
 
-			</html:form>
-		</c:if>
-	</div>
-	<div id="footer"></div>
+
+
+		<div id="footer"></div>
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_sbmt/web/learner/submissionDeadline.jsp
===================================================================
diff -u -rbe07c35c372d904a65581d98660e73f3b13b69db -r129b9d294bcaafb1b0aafa5dc613b103bb084c66
--- lams_tool_sbmt/web/learner/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision be07c35c372d904a65581d98660e73f3b13b69db)
+++ lams_tool_sbmt/web/learner/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision 129b9d294bcaafb1b0aafa5dc613b103bb084c66)
@@ -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"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
@@ -10,86 +9,59 @@
 	<%@ include file="/common/header.jsp"%>
 
 	<script type="text/javascript">
-		function finish(){
+		function finish() {
 			document.getElementById("finishButton").disabled = true;
-			var finishUrl= "<html:rewrite page='/learner.do?method=finish&sessionMapID=${sessionMapID}'/>";
-			location.href= finishUrl;
+			var finishUrl = "<html:rewrite page='/learner.do?method=finish&sessionMapID=${sessionMapID}'/>";
+			location.href = finishUrl;
 		}
-		function notebook(){
-			var finishUrl= "<html:rewrite page='/learning/newReflection.do?sessionMapID=${sessionMapID}'/>";
-			location.href= finishUrl;
+		function notebook() {
+			var finishUrl = "<html:rewrite page='/learning/newReflection.do?sessionMapID=${sessionMapID}'/>";
+			location.href = finishUrl;
 		}
 	</script>
 </lams:head>
 
 <body class="stripes">
-	<div id="content">
 
-		<h1>
-			<fmt:message key="activity.title"></fmt:message>
-		</h1>
+	<c:set var="title" scope="request">
+		<fmt:message key="activity.title"></fmt:message>
+	</c:set>
 
-		<div class="warning">
-			<fmt:message key="authoring.info.teacher.set.restriction" >
-				<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+	<lams:Page type="learner" title="${title}">
+
+		<lams:Alert id="submissionDeadline" close="false" type="danger">
+			<fmt:message key="authoring.info.teacher.set.restriction">
+				<fmt:param>
+					<lams:Date value="${sessionMap.submissionDeadline}" />
+				</fmt:param>
 			</fmt:message>
-		</div>
+		</lams:Alert>
 
-		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h2>
-					${sessionMap.reflectInstructions}
-				</h2>
-
-				<c:choose>
-					<c:when test="${empty learner.reflect}">
-						<p>
-							<em> <fmt:message key="message.no.reflection.available" />
-							</em>
-						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${learner.reflect}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
-
-				<html:button property="notebookButton"
-					onclick="javascript:notebook();" styleClass="button">
-					<fmt:message key="label.edit" />
+		<c:choose>
+			<c:when test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
+				<html:button property="continueButton" onclick="javascript:notebook();" styleClass="btn btn-primary pull-right">
+					<fmt:message key="label.continue" />
 				</html:button>
+			</c:when>
+			<c:otherwise>
+				<html:link href="#nogo" property="finishButton" onclick="javascript:finish();"
+					styleClass="btn btn-primary pull-right na" styleId="finishButton">
+					<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>
+			</c:otherwise>
+		</c:choose>
 
-			</div>
-		</c:if>
+		<div id="footer"></div>
 
-		<div class="space-bottom-top align-right">
-			<c:choose>
-				<c:when
-					test="${sessionMap.reflectOn and (not sessionMap.userFinished)}">
-					<html:button property="continueButton"
-						onclick="javascript:notebook();" styleClass="button">
-						<fmt:message key="label.continue" />
-					</html:button>
-				</c:when>
-				<c:otherwise>
-					<html:link href="#nogo" property="finishButton" onclick="javascript:finish();"
-						styleClass="button" styleId="finishButton">
-						<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>
-				</c:otherwise>
-			</c:choose>
-		</div>
-	</div>
-	<div id="footer"></div>
+	</lams:Page>
+
 </body>
 </lams:html>