Index: lams_tool_preview/web/includes/css/learning.css
===================================================================
diff -u -r2a9170f5c57793fac9f582e67904d6e001b2034d -r2504d197b72acb9a431160463483359209b94e9b
--- lams_tool_preview/web/includes/css/learning.css	(.../learning.css)	(revision 2a9170f5c57793fac9f582e67904d6e001b2034d)
+++ lams_tool_preview/web/includes/css/learning.css	(.../learning.css)	(revision 2504d197b72acb9a431160463483359209b94e9b)
@@ -32,4 +32,18 @@
 	.add-comment {
 		margin-top: 10px;
 	}
-}
\ No newline at end of file
+}
+
+.ui-jqgrid {
+	border-left-style: none !important;
+	border-right-style: none !important;
+	border-bottom-style: none !important;
+}
+
+.ui-jqgrid tr {
+	border-left-style: none !important;
+}
+
+.ui-jqgrid td {
+	border-style: none !important;
+}
Index: lams_tool_preview/web/pages/monitoring/advanceoptions.jsp
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -r2504d197b72acb9a431160463483359209b94e9b
--- lams_tool_preview/web/pages/monitoring/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/pages/monitoring/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 2504d197b72acb9a431160463483359209b94e9b)
@@ -1,16 +1,9 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<h1>
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="treeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'), '<lams:LAMSURL/>');" />
-
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.th.advancedSettings" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="advancedDiv" style="display:none">
-<table class="alternative-color">
+<c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+             
+<table class="table table-striped table-condensed">
 	<tr>
 		<td>
 			<fmt:message key="label.authoring.advance.lock.on.finished" />
@@ -109,4 +102,5 @@
 		</c:when>
 	</c:choose>
 </table>
-</div>
+
+</lams:AdvancedAccordian>
Index: lams_tool_preview/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -r2504d197b72acb9a431160463483359209b94e9b
--- lams_tool_preview/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 2504d197b72acb9a431160463483359209b94e9b)
@@ -2,13 +2,14 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="peerreview" value="${sessionMap.peerreview}"/>
 
+
 <c:if test="${sessionMap.isPageEditable}">
-	<div class="warning">
+	<lams:Alert type="warn" id="no-edit" close="false">
 		<fmt:message key="message.alertContentEdit" />
-	</div>
+	</lams:Alert>
 </c:if>
 
-<table cellpadding="0">
+<table class="table table-condensed">
 	<tr>
 		<td width="15%" nowrap>
 			<fmt:message key="label.authoring.basic.title" />:
@@ -33,7 +34,7 @@
 				<c:param name="toolContentID" value="${sessionMap.toolContentID}" />
 				<c:param name="contentFolderID" value="${sessionMap.contentFolderID}" />
 			</c:url>
-			<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="button">
+			<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="btn btn-default">
 				<fmt:message key="label.monitoring.edit.activity.edit" />
 			</html:link>
 		</td>
Index: lams_tool_preview/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r2504d197b72acb9a431160463483359209b94e9b
--- lams_tool_preview/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_preview/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 2504d197b72acb9a431160463483359209b94e9b)
@@ -7,15 +7,6 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/tabbedheader.jsp" %>
-		<style media="screen,projection" type="text/css">
-			#tabbody1 {
-				margin-left: 15px;
-			}
-			
-			table.forms {
-				margin-left: 15px;
-			}
-		</style>
 		 
 		<script>
 			var initialTabId = "${initialTabId}";
@@ -40,26 +31,27 @@
 		</script>		 
 	</lams:head>
 	<body class="stripes" onLoad="init()">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.monitoring.heading" />
-		</h1>
-	<div id="header">
-		<lams:Tabs>
-			<lams:Tab id="1" key="monitoring.tab.summary" />
-			<lams:Tab id="2" key="monitoring.tab.edit.activity" />			
-			<lams:Tab id="3" key="monitoring.tab.statistics" />
-		</lams:Tabs>
-	</div>
-	<div id="content">
-			<lams:help toolSignature="<%= PeerreviewConstants.TOOL_SIGNATURE %>" module="monitoring"/>
+		<c:set var="title"><fmt:message key="activity.title" /></c:set>	
+        <lams:Page title="${title}" type="navbar">
+
+        	<lams:Tabs control="true" title="${title}" helpToolSignature="<%= PeerreviewConstants.TOOL_SIGNATURE %>" helpModule="monitoring">		
+				<lams:Tab id="1" key="monitoring.tab.summary" />
+				<lams:Tab id="2" key="monitoring.tab.edit.activity" />			
+				<%-- <lams:Tab id="3" key="monitoring.tab.statistics" /> --%>
+			</lams:Tabs>
+			
+			<lams:TabBodyArea>
+			
+			<lams:TabBodys>
+				<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
+				<lams:TabBody id="2" titleKey="monitoring.tab.edit.activity" page="editactivity.jsp" />			
+				<%-- <lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistic.jsp" /> --%>
+			</lams:TabBodys>
+
+			</lams:TabBodyArea>
+			
+			<div id="footer"></div>
 	
-			<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
-			<lams:TabBody id="2" titleKey="monitoring.tab.edit.activity" page="editactivity.jsp" />			
-			<lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistic.jsp" />
-	</div>
-	<div id="footer"></div>
-	
-	</div>
+		</lams:Page>
 	</body>
 </lams:html>
Index: lams_tool_preview/web/pages/monitoring/reflections.jsp
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -r2504d197b72acb9a431160463483359209b94e9b
--- lams_tool_preview/web/pages/monitoring/reflections.jsp	(.../reflections.jsp)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/pages/monitoring/reflections.jsp	(.../reflections.jsp)	(revision 2504d197b72acb9a431160463483359209b94e9b)
@@ -1,24 +1,29 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<br><br>
+<div class="panel panel-default" >
+   <div class="panel-heading" id="headingReflections">
+   	<span class="panel-title collapsable-icon-left">
+	   	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseReflections" 
+			aria-expanded="false" aria-controls="collapseReflections" >
+		<fmt:message key="title.reflection"/></a>
+	</span>
+    </div>
+     
+	<div id="collapseReflections" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingReflections">
 
-<table class="alternative-color">
-
-	<tr>
-		<th>
-			<fmt:message key="title.reflection"/>
-		</th>
-	</tr>
-										
-	<c:forEach var="reflectDTO" items="${sessionMap.reflectList}">
-		<tr>
-			<td>
-				<strong><c:out value="${reflectDTO.fullName}" escapeXml="true"/></strong> - <lams:Date value="${reflectDTO.date}"/>
-				<br>
-				<lams:out value="${reflectDTO.reflect}" escapeHtml="true" />
-			</td>
-		</tr>
-	</c:forEach>
-
-</table>
-<br>
+	<table class="table table-condensed table-striped">
+	
+		<c:forEach var="reflectDTO" items="${sessionMap.reflectList}">
+			<tr>
+				<td>
+					<strong><c:out value="${reflectDTO.fullName}" escapeXml="true"/></strong> - <lams:Date value="${reflectDTO.date}"/>
+					<br>
+					<lams:out value="${reflectDTO.reflect}" escapeHtml="true" />
+				</td>
+			</tr>
+		</c:forEach>
+	
+	</table>
+	
+	</div>
+</div>
Index: lams_tool_preview/web/pages/monitoring/statistic.jsp
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -r2504d197b72acb9a431160463483359209b94e9b
--- lams_tool_preview/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision 2504d197b72acb9a431160463483359209b94e9b)
@@ -2,88 +2,53 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 
-<%-- display group name on first row
 	<c:choose>
 	<c:when test="${empty summaryList}">
-		<div align="center">
-			<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
-		</div>
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="message.monitoring.summary.no.session" />
+		</lams:Alert>
 	</c:when>
 	<c:otherwise>
-		<div class="info">
+		<lams:Alert type="info" id="session-summary-note" close="false">
 			<fmt:message key="monitoring.summary.note" />
-		</div>
+		</lams:Alert>
 	</c:otherwise>
 	</c:choose>
 	
-	<br/>
-	<c:forEach var="group" items="${summaryList}" varStatus="firstGroup">
-	  
-	  
-		<c:forEach var="item" items="${group.items}" varStatus="status">
-				
-			
-			<c:if test="${status.index == 0}">
-						<c:if test="${sessionMap.isGroupedActivity}">
-							<h1><fmt:message key="monitoring.label.group" /> ${group.sessionName}</h1> 
-						</c:if>
-				<table cellspacing="3" class="alternative-color">
-				<tr>
-					<th width="20%">
-						<fmt:message key="monitoring.label.type" />
-					</th>
-					<th width="35%">
-						<fmt:message key="monitoring.label.title" />
-					</th>
-					<th width="25%">
-						<fmt:message key="monitoring.label.suggest" />
-					</th>
-					<th width="20%" align="center">
-						<fmt:message key="monitoring.label.number.learners" />
-					</th>
-				</tr>
-			</c:if>
-				<tr>
-					<td>
-						<c:choose>
-							<c:when test="${item.itemType == 1}">
-								<fmt:message key="label.authoring.basic.resource.url" />
-							</c:when>
-							<c:when test="${item.itemType == 2}">
-								<fmt:message key="label.authoring.basic.resource.file" />
-							</c:when>
-							<c:when test="${item.itemType == 3}">
-								<fmt:message key="label.authoring.basic.resource.website" />
-							</c:when>
-							<c:when test="${item.itemType == 4}">
-								<fmt:message key="label.authoring.basic.resource.learning.object" />
-							</c:when>
-						</c:choose>
-					</td>
-					<td>
-						<c:out value="${item.itemTitle}" escapeXml="true"/>
-					</td>
-					<td>
-						<c:if test="${!item.itemCreateByAuthor}">
-							<c:out value="${item.username}" escapeXml="true"/>
-						</c:if>
-					</td>
-					<td align="center">
-						<c:choose>
-							<c:when test="${item.viewNumber > 0}">
-								<c:set var="listUrl">
-									<c:url value='/monitoring/listuser.do?toolSessionID=${group.sessionId}&itemUid=${item.itemUid}' />
-								</c:set>
-								<a href="#" onclick="launchPopup('${listUrl}','listuser')"> ${item.viewNumber}<a>
-							</c:when>
-							<c:otherwise>
-											0
-										</c:otherwise>
-						</c:choose>
-					</td>
-				</tr>
-		
-		</c:forEach>
-       </table>
+	<c:if test="${sessionMap.isGroupedActivity}">
+	<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
+	</c:if>
+	
+	<c:forEach var="groupSummary" items="${summaryList}" varStatus="status">
+		<c:if test="${sessionMap.isGroupedActivity}">	
+		    <div class="panel panel-default" >
+	        <div class="panel-heading" id="headingStats${groupSummary.sessionId}">
+				<span class="panel-title">
+					<fmt:message key="monitoring.label.group" />: <c:out value="${groupSummary.sessionName}" />
+				</span>
+	        </div>
+	
+	        <div class="panel-body">
+		</c:if>
+	
+		<table class="table table-condensed table-no-border">
+			<tr>
+				<td class="field-name" width="30%">
+					Session Id
+				</td>
+				<td>
+					${groupSummary.sessionId}
+				</td>
+			</tr>
+		</table>
+
+		<c:if test="${sessionMap.isGroupedActivity}">	
+			</div>
+			</div>
+		</c:if>
 	</c:forEach>
---%>
\ No newline at end of file
+
+	<c:if test="${sessionMap.isGroupedActivity}">
+	</div>
+	</c:if>
+	
\ No newline at end of file
Index: lams_tool_preview/web/pages/monitoring/summary.jsp
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -r2504d197b72acb9a431160463483359209b94e9b
--- lams_tool_preview/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 2504d197b72acb9a431160463483359209b94e9b)
@@ -3,14 +3,12 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 
-<link type="text/css" href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet">
+<link type="text/css" href="${lams}css/jquery-ui-smoothness-theme.css" rel="stylesheet">
 <link type="text/css" href="${lams}css/jquery.jqGrid.css" rel="stylesheet" />
 <link type="text/css" href="${lams}css/jquery.jRating.css" rel="stylesheet"/>
 <link rel="stylesheet" href="<html:rewrite page='/includes/css/learning.css'/>">
-<style media="screen,projection" type="text/css">
+<!-- <style media="screen,projection" type="text/css">
 	#user-dropdown-div {padding-left: 30px; margin-top: -5px; margin-bottom: 50px;}
-	.bottom-buttons {margin: 20px 20px 0px; padding-bottom: 20px;}
-	.section-header {padding-left: 20px; margin-bottom: 15px; margin-top: 60px;}
 	.ui-jqgrid tr.jqgrow td {
 	    white-space: normal !important;
 	    height:auto;
@@ -22,15 +20,15 @@
 		display:none !important;
 	}
 	
-	.subgrid-data td[colspan]:not([colspan="1"]) {
+ 	.subgrid-data td[colspan]:not([colspan="1"]) {
 		background: #F0F0F0;
-	}
+	} 
 	
 	.ui-jqgrid tr.jqgrow td {
 		vertical-align: top;
 	}
 </style>
-
+ -->
 <script type="text/javascript">
 	//var for jquery.jRating.js
 	var pathToImageFolder = "${lams}images/css/";
@@ -81,7 +79,7 @@
 				loadComplete: function(){
 					initializeJRating();
 				},
-			   	caption: "${groupSummary.sessionName}",
+			   	// caption: "${groupSummary.sessionName}" use Bootstrap panels as the title bar
 				subGrid: true,
 				subGridOptions: {
 					reloadOnExpand : false 
@@ -133,7 +131,7 @@
 		//jqgrid autowidth (http://stackoverflow.com/a/1610197)
 		$(window).bind('resize', function() {
 			var grid;
-		    if (grid = jQuery(".ui-jqgrid-btable:visible")) {
+		    if (grid = jQuery(".ui-jqgrid-btable")) {
 		    	grid.each(function(index) {
 		        	var gridId = $(this).attr('id');
 		        	var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
@@ -148,39 +146,60 @@
 
 </script>
 
-<h1>
-	<c:out value="${sessionMap.peerreview.title}" escapeXml="true"/>
-</h1>
-
-<div class="instructions">
-	<c:out value="${sessionMap.peerreview.instructions}" escapeXml="false"/>
+<div class="panel">
+	<h4>
+	    <c:out value="${sessionMap.peerreview.title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+		<c:out value="${sessionMap.peerreview.instructions}" escapeXml="false"/>
+	</div>
+	
+	<c:if test="${empty summaryList}">
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="message.monitoring.summary.no.session" />
+		</lams:Alert>
+	</c:if>
+	
 </div>
 
-<br/>
-
-<c:if test="${empty summaryList}">
-	<div align="center">
-		<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
-	</div>
+<c:if test="${sessionMap.isGroupedActivity}">
+<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
 </c:if>
 
-<c:forEach var="groupSummary" items="${summaryList}">
+<c:forEach var="groupSummary" items="${summaryList}" varStatus="status">
 	
-	<c:if test="${sessionMap.isGroupedActivity}">
-		<h1>
-			<fmt:message key="monitoring.label.group" /> ${groupSummary.sessionName}
-		</h1>
-		<br>
+ 	<c:if test="${sessionMap.isGroupedActivity}">
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${groupSummary.sessionId}">
+        	<span class="panel-title collapsable-icon-left">
+        	<a role="button" data-toggle="collapse" href="#collapse${groupSummary.sessionId}" 
+					aria-expanded="true" aria-controls="collapse${groupSummary.sessionId}">
+			<fmt:message key="monitoring.label.group" />: ${groupSummary.sessionName}</a>
+			</span>
+        </div>
+        
+        <div id="collapse${groupSummary.sessionId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading${groupSummary.sessionId}">
 	</c:if>
-
+	
 	<table id="group${groupSummary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>
 	<div id="pager${groupSummary.sessionId}"></div> 
-	<br>
-		
-</c:forEach>
+	<div class="voffset5">&nbsp;</div>
 	
+	<c:if test="${sessionMap.isGroupedActivity}">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+	${ !sessionMap.isGroupedActivity || ! status.last || sessionMap.peerreview.reflectOnActivity ? '<div class="voffset5">&nbsp;</div>' :  ''}
+
+</c:forEach>
+
 <c:if test="${sessionMap.peerreview.reflectOnActivity}">
 	<%@ include file="reflections.jsp"%>
 </c:if>
 
+<c:if test="${sessionMap.isGroupedActivity}">
+	</div> <!--  end panel group -->
+</c:if>		
+
+
 <%@ include file="advanceoptions.jsp"%>