Index: lams_tool_preview/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_preview/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -81,6 +81,7 @@
 label.sort.by.user.name  =Sort by user name
 label.user.name  =User name
 label.rating  =Rating
+label.ratings  =Ratings
 label.comment  =Comment
 label.show.ratings.left.for.user  =After completion, show feedback left for student
 label.ratings.by.others  =Ratings by other users
Index: lams_tool_preview/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_preview/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_preview/web/WEB-INF/tags/Alert.tag	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -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_preview/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -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_preview/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_preview/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_preview/web/WEB-INF/tags/Page.tag	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -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_preview/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_preview/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -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_preview/web/common/messages.jsp
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/common/messages.jsp	(.../messages.jsp)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/common/messages.jsp	(.../messages.jsp)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -1,8 +1,8 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-	<p class="warning">
-	        <html:messages id="error">
-	            <c:out value="${error}" escapeXml="false"/><br/>
-	        </html:messages>
-	</p>
+		<lams:Alert id="errorMessages" type="danger" close="false">
+        <html:messages id="error">
+            <c:out value="${error}" escapeXml="false"/>
+        </html:messages>
+    </lams:Alert>
 </logic:messagesPresent>
Index: lams_tool_preview/web/includes/css/learning.css
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/includes/css/learning.css	(.../learning.css)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/includes/css/learning.css	(.../learning.css)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -3,8 +3,10 @@
 		tr.odd:hover .jStar {background-image: url(/lams/images/css/jquery.jRating-stars-grey.png)!important;}
 		tr.even:hover .jStar {background-image: url(/lams/images/css/jquery.jRating-stars-light-grey.png)!important;}
 		tr.odd .jStar {background-image: url(/lams/images/css/jquery.jRating-stars-light-blue.png)!important;}
-		.tablesorter-blue {margin-bottom: 5px;}
-		.pager {padding-bottom: 20px;}
+		td.username {min-width: 250px;}
+		td.rating {width:150px;}
+		td.comment {min-width: 250px;}
+		.alert {padding:8px}
 		.extra-controls-inner:after {
 		   margin-top: -10px;
 		}
Index: lams_tool_preview/web/pages/learning/definelater.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_preview/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -13,15 +13,18 @@
 </lams:head>
 
 <body class="stripes">
-	<div id="content">
-		<h1>
-			<fmt:message key="activity.title" />
-		</h1>
+	<c:set scope="request" var="title">
+		<fmt:message key="activity.title" />
+	</c:set>
+
+	<lams:Page type="learner" title="${title}">
 		<c:choose>
 		<c:when test="${creatingUsers == 'true'}"><lams:DefineLater defineLaterMessageKey="creating.users.message"></lams:DefineLater></c:when>
 		<c:otherwise><lams:DefineLater /></c:otherwise>
 		</c:choose>
-	</div>
+	</lams:Page>
+
 	<div id="footer"></div>
+
 </body>
 </lams:html>
Index: lams_tool_preview/web/pages/learning/learning.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -44,6 +44,7 @@
 	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/common.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/rating.js" type="text/javascript" ></script> 	
+	<script src="${lams}includes/javascript/bootstrap.min.js" type="text/javascript"></script>
 	<script type="text/javascript">
 	
 	var YOUR_RATING_LABEL = '<fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message>',
@@ -87,21 +88,18 @@
 							var isMaximumRatesPerUserReached = (${peerreview.maximumRatesPerUser} != 0) && (userData.ratesPerUser >= ${peerreview.maximumRatesPerUser});
 							
 							rows += '<tr>';
-							rows += '<td>';
-							
-							rows += 	'<div>';
-							rows += 		'<span class="field-name">';
-							rows += 			userData["userName"];
-							rows += 		'</span> ';
-							rows += 	'</div>';
-							
+
+							rows += '<td class="username"><span>';
+							rows += userData["userName"];
+							rows += '</span>'
+
 							if (isMaximumRatesPerUserReached) {
-								rows += "<div class='info'><fmt:message key='label.cant.rate' /></div>";
+								rows += '<br/><div class="alert alert-warning"><i class="fa fa-exclamation-circle text-muted"></i> <fmt:message key="label.cant.rate" /></div>';
 							}
-							
+
 							rows += '</td>';
 							
-							rows += '<td style="width:150px;">';
+							rows += '<td class="rating">';
 							rows += 	'<div class="rating-stars-holder">';
 
 							// if the user has left a comment or done a rating in a batch of ratings, we need to keep all related ratings open.
@@ -149,7 +147,7 @@
 							rows += '</td>';
 							
 							if (${isCommentsEnabled}) {
-								rows += '<td style="width:30%; min-width: 250px;" id="comments-area-' + itemId + '">';
+								rows += '<td class="comment" id="comments-area-' + itemId + '">';
 								
 								var commentsCriteriaId = userData["commentsCriteriaId"];
 								var commentPostedByUser = userData["commentPostedByUser"];
@@ -182,7 +180,7 @@
 						return json;
 			    	}
 				},
-			    container: $(this).next(".pager"),
+			    container: $(this).next(".tablesorter-pager"),
 			    output: '{startRow} to {endRow} ({totalRows})',
 			    cssNext: '.tablesorter-next',
 				cssPrev: '.tablesorter-prev',
@@ -230,17 +228,10 @@
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${peerreview.title}" escapeXml="true"/>
-		</h1>
+	<lams:Page type="learner" title="${peerreview.title}">
 
-		<p>
-			<c:out value="${peerreview.instructions}" escapeXml="false"/>
-		</p>
-
 		<c:if test="${sessionMap.lockOnFinish and mode != 'teacher'}">
-			<div class="info">
+			<lams:Alert type="danger" id="warn-lock" close="false">
 				<c:choose>
 					<c:when test="${sessionMap.userFinished}">
 						<fmt:message key="message.activityLocked" />
@@ -249,13 +240,13 @@
 						<fmt:message key="message.warnLockOnFinish" />
 					</c:otherwise>
 				</c:choose>
-			</div>
+			</lams:Alert>
 		</c:if>
 		
 		<!-- Rating limits info -->
 		<c:if test="${peerreview.minimumRates ne 0 || peerreview.maximumRates ne 0}">
 		
-			<div class="info">
+			<lams:Alert type="info" id="rate-limits-reminder" close="false">
 				<c:choose>
 					<c:when test="${peerreview.minimumRates ne 0 and peerreview.maximumRates ne 0}">
 						<fmt:message key="label.rate.limits.reminder">
@@ -276,35 +267,46 @@
 						</fmt:message>
 					</c:when>
 				</c:choose>
-				<br>
-						
+
+				<BR/>
 				<fmt:message key="label.rate.limits.topic.reminder">
 					<fmt:param value="<span id='count-rated-items'>${sessionMap.countRatedItems}</span>"/>
 				</fmt:message>
-			</div>
+			</lams:Alert>
+				
 			
 		</c:if>
 				
 		<c:if test="${isCommentsEnabled && sessionMap.commentsMinWordsLimit != 0}">
-			<br>
-			<div class="info rating-info">
+			<lams:Alert type="info" id="rate-limits-reminder" close="false">
 				<fmt:message key="label.comment.minimum.number.words">
 					<fmt:param>: ${sessionMap.commentsMinWordsLimit}</fmt:param>
 				</fmt:message>
-			</div>
+			</lams:Alert>
 		</c:if>
 				
+		<p>
+			<c:out value="${peerreview.instructions}" escapeXml="false"/>
+		</p>
+
+		<!-- Ratings UI -->
+		<div class="panel panel-default">
+		<div class="panel-heading panel-title">
+			<fmt:message key="label.ratings" />
+		</div>
+		<div class="panel-body">
+	
 		<table class="tablesorter">
 			<thead>
 				<tr>
-					<th title="<fmt:message key='label.sort.by.user.name'/>" >
+					<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" >
 						<fmt:message key="label.user.name" />
 					</th>
-					<th>
+					<th class="rating">
 						<fmt:message key="label.rating" />
 					</th>
 					<c:if test="${isCommentsEnabled}">
-						<th>
+						<th class="comment">
 							<fmt:message key="label.comment" />
 						</th>
 					</c:if>
@@ -316,14 +318,15 @@
 		</table>
 					
 		<!-- pager -->
-		<div class="pager">
+		<div class="tablesorter-pager">
 			<form>
 		   	<img class="tablesorter-first"/>
 		    	<img class="tablesorter-prev"/>
 		    	<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
 		   		<img class="tablesorter-next"/>
 		    	<img class="tablesorter-last"/>
 		    	<select class="pagesize">
+		      		<option value="2">2</option>
 		      		<option selected="selected" value="10">10</option>
 		      		<option value="20">20</option>
 		      		<option value="30">30</option>
@@ -337,77 +340,51 @@
 		<div id="no-users-info">
 			<fmt:message key="label.no.users" />
 		</div>
-
+	
+		</div>
+		</div>
+	
+		<!-- Reflection -->
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h3>
-					<fmt:message key="title.reflection" />
-				</h3>
-				
-				<strong>
-					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-				</strong>
-
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
-						<p>
-							<em> 
-								<fmt:message key="message.no.reflection.available" />
-							</em>
-						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
-
-				<c:if test="${mode != 'teacher'}">
-					<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
-						<fmt:message key="label.edit" />
-					</html:button>
-				</c:if>
-			</div>
+			<%@ include file="notebookdisplay.jsp"%>
 		</c:if>
+		<!-- End Reflection -->
 
 		<c:if test="${mode != 'teacher'}">
 			<div class="space-bottom-top align-left">
-				<html:button property="FinishButton" styleId="finishButton" onclick="refresh()" styleClass="button">
+				<html:button property="FinishButton" styleId="finishButton" onclick="refresh()" styleClass="btn btn-default voffset5 pull-left">
 					<fmt:message key="label.refresh" />
 				</html:button>
 			</div>
 			<div class="space-bottom-top align-right" id="learner-submit">
 				<c:choose>
-					<c:when test="${peerreview.showRatingsLeftForUser}">
-						<html:button property="FinishButton" styleId="finishButton" onclick="return showResults()" styleClass="button">
-							<fmt:message key="label.submit" />
-						</html:button>
-					</c:when>				
 					<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
+						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-primary voffset5 pull-right">
 							<fmt:message key="label.continue" />
 						</html:button>
 					</c:when>
+					<c:when test="${peerreview.showRatingsLeftForUser}">
+						<html:button property="FinishButton" styleId="finishButton" onclick="return showResults()" styleClass="btn btn-primary voffset5 pull-right">
+							<fmt:message key="label.submit" />
+						</html:button>
+					</c:when>				
 					<c:otherwise>
-						<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()" styleClass="button">
-							<span class="nextActivity">
-								<c:choose>
-				 					<c:when test="${sessionMap.activityPosition.last}">
-				 						<fmt:message key="label.submit" />
-				 					</c:when>
-				 					<c:otherwise>
-				 		 				<fmt:message key="label.finished" />
-				 					</c:otherwise>
-				 				</c:choose>
-							</span>
+						<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()" styleClass="btn btn-primary voffset5 pull-right na">
+							<c:choose>
+			 					<c:when test="${sessionMap.activityPosition.last}">
+			 						<fmt:message key="label.submit" />
+			 					</c:when>
+			 					<c:otherwise>
+			 		 				<fmt:message key="label.finished" />
+			 					</c:otherwise>
+			 				</c:choose>
 						</html:link>
 					</c:otherwise>
 				</c:choose>
 			</div>
 		</c:if>
-
-	</div>
+		
+	</lams:Page>
 	<!--closes content-->
 
 	<div id="footer">
Index: lams_tool_preview/web/pages/learning/notebook.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_preview/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -28,22 +28,18 @@
 		<html:hidden property="userID" />
 		<html:hidden property="sessionMapID" />
 
-		<div id="content">
-			<h1>
-				<c:out value="${sessionMap.title}" escapeXml="true"/>
-			</h1>
+		<lams:Page type="learner" title="${sessionMap.title}">
 
 			<%@ include file="/common/messages.jsp"%>
 
 			<p>
 				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
 			</p>
+			
+			<html:textarea styleId="focused" rows="5" property="entryText" styleClass="form-control"></html:textarea>
 
-			<html:textarea cols="60" rows="8" property="entryText" styleClass="text-area" />
-
 			<div class="space-bottom-top align-right">
-				<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-					<span class="nextActivity">
+				<html:link href="#nogo" styleClass="btn btn-primary voffset5 pull-right na" styleId="finishButton" onclick="submitForm('finish')">
 						<c:choose>
 		 					<c:when test="${sessionMap.activityPosition.last}">
 		 						<fmt:message key="label.submit" />
@@ -52,15 +48,22 @@
 		 		 				<fmt:message key="label.finished" />
 		 					</c:otherwise>
 		 				</c:choose>
-		 			</span>
 				</html:link>
 			</div>
-		</div>
+		</lams:Page>
 	</html:form>
 
 	<div id="footer">
 	</div>
 	<!--closes footer-->
 
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("focused").focus();
+	}
+</script>
+
 </body>
 </lams:html>
+
+
Index: lams_tool_preview/web/pages/learning/notebookdisplay.jsp
===================================================================
diff -u
--- lams_tool_preview/web/pages/learning/notebookdisplay.jsp	(revision 0)
+++ lams_tool_preview/web/pages/learning/notebookdisplay.jsp	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -0,0 +1,31 @@
+			<div class="panel panel-default">
+				<div class="panel-heading panel-title">
+					<fmt:message key="title.reflection" />
+				</div>
+				<div class="panel-body">
+					<div class="reflectionInstructions">
+						<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+					</div>
+
+					<c:choose>
+					<c:when test="${empty sessionMap.reflectEntry}">
+						<p>
+							<em> 
+								<fmt:message key="message.no.reflection.available" />
+							</em>
+						</p>
+					</c:when>
+					<c:otherwise>
+						<p>
+							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+						</p>
+					</c:otherwise>
+					</c:choose>
+
+					<c:if test="${mode != 'teacher'}">
+						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-sm btn-default voffset5">
+						<fmt:message key="label.edit" />
+						</html:button>
+					</c:if>
+				</div>
+			</div>
Index: lams_tool_preview/web/pages/learning/results.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb91f46a77fa9a30a9c970e61ca6a7a868f8dba4d
--- lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_preview/web/pages/learning/results.jsp	(.../results.jsp)	(revision b91f46a77fa9a30a9c970e61ca6a7a868f8dba4d)
@@ -86,18 +86,33 @@
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${peerreview.title}" escapeXml="true"/>
-		</h1>
+	<lams:Page type="learner" title="${peerreview.title}">
 
 		<c:if test="${sessionMap.lockOnFinish and mode != 'teacher'}">
-			<div class="info">
+			<lams:Alert type="danger" id="warn-lock" close="false">
 				<fmt:message key="message.activityLocked" />
-			</div>
+			</lams:Alert>
 		</c:if>
 		
 		<c:if test="${not empty itemRatingDtos}">
+
+		<!-- Ratings UI -->
+		<div class="panel panel-default">
+		<div class="panel-heading panel-title">
+			<fmt:message key="label.ratings" />
+		</div>
+		<div class="panel-body">
+	
+		<table class="tablesorter">
+			<thead>
+				<tr>
+					<th title="<fmt:message key='label.sort.by.user.name'/>" >
+						<fmt:message key="label.user.name" />
+					</th>
+					<th>
+						<fmt:message key="label.rating" />
+					</th>
+	
 			<table class="tablesorter">
 				<thead>
 					<tr>
@@ -123,62 +138,42 @@
 					</c:forEach>
 				</tbody>
 			</table>
+		</div>
+		</div>
 		</c:if>
 		
 		<c:if test="${peerreview.showRatingsLeftForUser}">
-			<h2>
-				<fmt:message key="label.ratings.by.others" />
-			</h2>
-			
+		<div class="panel panel-default">
+		<div class="panel-heading panel-title">
+			<fmt:message key="label.ratings.by.others" />
+		</div>
+		<div class="panel-body">
 			<lams:Rating itemRatingDto="${itemRatingDto}" disabled="true" isItemAuthoredByUser="true"/>
+		</div>
+		</div>
 		</c:if>
 
+		<!-- Reflection -->
 		<c:if test="${sessionMap.isSessionCompleted and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h3><fmt:message key="title.reflection" /></h3>
-				<strong>
-					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-				</strong>
-
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
-						<p>
-							<em> <fmt:message key="message.no.reflection.available" />
-							</em>
-						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
-
-				<c:if test="${mode != 'teacher'}">
-					<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
-						<fmt:message key="label.edit" />
-					</html:button>
-				</c:if>
-			</div>
+			<%@ include file="notebookdisplay.jsp"%>
 		</c:if>
+		<!-- End Reflection -->
 
 		<c:if test="${!peerreview.lockWhenFinished}">
-			<html:button property="redoRatings" styleClass="button" onclick="redoRatings();">
+			<html:button property="redoRatings" styleClass="btn btn-default voffset5 pull-left" onclick="redoRatings();">
 				<fmt:message key="label.redo" />
 			</html:button>
 		</c:if>	
 
 		<c:if test="${mode != 'teacher'}">
-			<div class="space-bottom-top align-right">
 				<c:choose>			
 					<c:when test="${sessionMap.reflectOn && (not sessionMap.isSessionCompleted)}">
-						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
+						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-primary voffset5 pull-right">
 							<fmt:message key="label.continue" />
 						</html:button>
 					</c:when>
 					<c:otherwise>
-						<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()" styleClass="button">
-							<span class="nextActivity">
+						<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()" styleClass="btn btn-primary voffset5 pull-right na">
 								<c:choose>
 				 					<c:when test="${sessionMap.activityPosition.last}">
 				 						<fmt:message key="label.submit" />
@@ -187,14 +182,13 @@
 				 		 				<fmt:message key="label.finished" />
 				 					</c:otherwise>
 				 				</c:choose>
-							</span>
 						</html:link>
 					</c:otherwise>
 				</c:choose>
 			</div>
 		</c:if>
 
-	</div>
+	</lams:Page>
 	<!--closes content-->
 
 	<div id="footer">