Index: lams_tool_gmap/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r3399163940c61c9132223c758d274486e57ff9b7 -r0006e57acf98a677de6aaeca56102c2b35466e5d
--- lams_tool_gmap/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 3399163940c61c9132223c758d274486e57ff9b7)
+++ lams_tool_gmap/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 0006e57acf98a677de6aaeca56102c2b35466e5d)
@@ -109,6 +109,6 @@
 button.placeMarker  =Place marker
 label.nogroups  =No groups found for activity.
 button.submit  =Finish
+label.show.on.map=Show on Map
 
-
 #======= End labels: Exported 104 labels for en AU =====
Index: lams_tool_gmap/web/pages/monitoring/advancedOptions.jsp
===================================================================
diff -u
--- lams_tool_gmap/web/pages/monitoring/advancedOptions.jsp	(revision 0)
+++ lams_tool_gmap/web/pages/monitoring/advancedOptions.jsp	(revision 0006e57acf98a677de6aaeca56102c2b35466e5d)
@@ -0,0 +1,167 @@
+<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="advanced.lockOnFinished" />
+		</td>
+		
+		<td>
+			<c:choose>
+				<c:when test="${dto.lockOnFinish == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	<tr>
+		<td>
+			<fmt:message key="advanced.allowEditMarkers" />
+		</td>
+		<td>
+			<c:choose>
+				<c:when test="${dto.allowEditMarkers == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+
+	<tr>
+		<td>
+			<fmt:message key="advanced.allowShowAllMarkers" />
+		</td>
+		<td>	
+			<c:choose>
+				<c:when test="${dto.allowShowAllMarkers == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	
+	<tr>
+		<td>
+			<fmt:message key="advanced.markerLimitsMessage" />
+		</td>	
+		<td>
+			<c:choose>
+				<c:when test="${dto.limitMarkers == true}">
+					<fmt:message key="label.on" />, ${dto.maxMarkers}
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>
+		</td>
+	</tr>
+	 		
+	<tr>
+	 	<td>
+			<fmt:message key="advanced.allowZoom" />
+		</td>
+		<td>	
+			<c:choose>
+				<c:when test="${dto.allowZoom == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+
+	<tr>
+		<td>
+			<fmt:message key="advanced.allowTerrain" />
+		</td>
+		<td>	
+			<c:choose>
+				<c:when test="${dto.allowTerrain == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+
+	<tr>
+		<td>
+			<fmt:message key="advanced.allowSatellite" />
+		</td>
+		<td>	
+			<c:choose>
+				<c:when test="${dto.allowSatellite == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	<tr>
+		<td>
+			<fmt:message key="advanced.allowHybrid" />
+		</td>
+		<td>	
+			<c:choose>	
+				<c:when test="${dto.allowHybrid == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	<tr>
+		<td>
+			<fmt:message key="monitor.summary.td.addNotebook" />
+		</td>
+		
+		<td>
+			<c:choose>
+				<c:when test="${dto.reflectOnActivity == true}">
+					<fmt:message key="label.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	<c:choose>
+		<c:when test="${dto.reflectOnActivity == true}">
+			<tr>
+				<td>
+					<fmt:message key="monitor.summary.td.notebookInstructions" />
+				</td>
+				<td>
+					<lams:out value="${dto.reflectInstructions}" escapeHtml="true"/>
+				</td>
+			</tr>
+		</c:when>
+	</c:choose>
+</table>
+
+</lams:AdvancedAccordian>
Index: lams_tool_gmap/web/pages/monitoring/editActivity.jsp
===================================================================
diff -u -rd9fea0d214dfaae43a89801f03bd4cc7d617fffa -r0006e57acf98a677de6aaeca56102c2b35466e5d
--- lams_tool_gmap/web/pages/monitoring/editActivity.jsp	(.../editActivity.jsp)	(revision d9fea0d214dfaae43a89801f03bd4cc7d617fffa)
+++ lams_tool_gmap/web/pages/monitoring/editActivity.jsp	(.../editActivity.jsp)	(revision 0006e57acf98a677de6aaeca56102c2b35466e5d)
@@ -3,12 +3,12 @@
 <c:set var="dto" value="${gmapDTO}" />
 
 <c:if test="${dto.contentInUse}">
-	<p class="warning">
+	<lams:Alert type="warn" id="no-edit" close="false">
 		<fmt:message key="message.alertContentEdit" />
-	</p>
+	</lams:Alert>
 </c:if>
 
-<table cellspacing="0">
+<table class="table table-condensed">
 	<tbody>
 		<tr>
 			<td class="field-name" width="30%">
@@ -29,15 +29,13 @@
 	</tbody>
 </table>
 
-<p class="align-right">
-	<c:url value="/authoring.do" var="authoringUrl">
-		<c:param name="toolContentID" value="${dto.toolContentId}" />
-		<c:param name="mode" value="teacher" />
-		<c:param name="contentFolderID" value="${contentFolderID}" />
-	</c:url>
-	<html:link href="${authoringUrl}" styleClass="button" target="_blank">
-		<fmt:message key="button.editActivity" />
-	</html:link>
-</p>
+<c:url value="/authoring.do" var="authoringUrl">
+	<c:param name="toolContentID" value="${dto.toolContentId}" />
+	<c:param name="mode" value="teacher" />
+	<c:param name="contentFolderID" value="${contentFolderID}" />
+</c:url>
+<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}')" styleClass="btn btn-default">
+	<fmt:message key="button.editActivity" />
+</html:link>
 
 
Index: lams_tool_gmap/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r6d674e346dea6ce7a824366c8a7c315660677744 -r0006e57acf98a677de6aaeca56102c2b35466e5d
--- lams_tool_gmap/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 6d674e346dea6ce7a824366c8a7c315660677744)
+++ lams_tool_gmap/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 0006e57acf98a677de6aaeca56102c2b35466e5d)
@@ -1,20 +1,19 @@
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.gmap.util.GmapConstants"%>
 
-<div id="header">
-	<lams:Tabs>
-		<lams:Tab id="1" key="button.summary" />
-		<lams:Tab id="2" key="button.editActivity" />
-		<lams:Tab id="3" key="button.statistics" />
-	</lams:Tabs>
-</div>
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
 
-<div id="content">
-	<lams:help toolSignature="<%= GmapConstants.TOOL_SIGNATURE %>" module="monitoring"/>
+<lams:Tabs control="true" title="${title}" helpToolSignature="<%= GmapConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
+	<lams:Tab id="1" key="button.summary" />
+	<lams:Tab id="2" key="button.editActivity" />
+	<lams:Tab id="3" key="button.statistics" />
+</lams:Tabs>
 
-	<lams:TabBody id="1" titleKey="button.summary" page="summary.jsp" />
-	<lams:TabBody id="2" titleKey="button.editActivity" page="editActivity.jsp" />
-	<lams:TabBody id="3" titleKey="button.statistics" page="statistics.jsp" />
-</div>
-
-<div id="footer"></div>
+<lams:TabBodyArea>
+	<lams:TabBodys>
+		<lams:TabBody id="1" titleKey="button.summary" page="summary.jsp" />
+		<lams:TabBody id="2" titleKey="button.editActivity" page="editActivity.jsp" />
+		<lams:TabBody id="3" titleKey="button.statistics" page="statistics.jsp" />
+	</lams:TabBodys>
+	
+</lams:TabBodyArea>
Index: lams_tool_gmap/web/pages/monitoring/notebook.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0006e57acf98a677de6aaeca56102c2b35466e5d
--- lams_tool_gmap/web/pages/monitoring/notebook.jsp	(.../notebook.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_gmap/web/pages/monitoring/notebook.jsp	(.../notebook.jsp)	(revision 0006e57acf98a677de6aaeca56102c2b35466e5d)
@@ -9,46 +9,20 @@
 </c:set>
 
 <lams:html>
-
 	<lams:head>  
 		<title>
 			<fmt:message>pageTitle.monitoring.notebook</fmt:message>
 		</title>
-		
 		<lams:css/>
-		<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-
-		
 	</lams:head>
-	
-	
+
 	<body class="stripes">
-	
-			<div id="content">
-			
-				<h1>
-					<fmt:message>pageTitle.monitoring.notebook</fmt:message>
-				</h1>
-				
-				<table>
-					<tr>
-						<td>
-							<h2>
-								<c:out value="${gmapUserDTO.firstName} ${gmapUserDTO.lastName}" escapeXml="true"/>
-							</h2>
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<p>
-								<lams:out value="${gmapUserDTO.notebookEntry}" escapeHtml="true"/>
-							</p>
-						</td>
-					</tr>
-				</table>
-				
-			</div>
+		<c:set var="title"><fmt:message>pageTitle.monitoring.notebook</fmt:message></c:set>
+		<lams:Page type="learner" title="${title}">
+			<p><c:out value="${gmapUserDTO.firstName} ${gmapUserDTO.lastName} (${gmapUserDTO.loginName})" escapeXml="true"/></p>
+			<p><lams:out value="${gmapUserDTO.notebookEntry}" escapeHtml="true"/></p>
 			<div class="footer"></div>
+		</lams:Page>
 	</body>
 </lams:html>
 
Index: lams_tool_gmap/web/pages/monitoring/statistics.jsp
===================================================================
diff -u -r3299d560146318cb6f26ec2b234e3af70ec21eba -r0006e57acf98a677de6aaeca56102c2b35466e5d
--- lams_tool_gmap/web/pages/monitoring/statistics.jsp	(.../statistics.jsp)	(revision 3299d560146318cb6f26ec2b234e3af70ec21eba)
+++ lams_tool_gmap/web/pages/monitoring/statistics.jsp	(.../statistics.jsp)	(revision 0006e57acf98a677de6aaeca56102c2b35466e5d)
@@ -1,34 +1,42 @@
 <%@ include file="/common/taglibs.jsp"%>
-
 <c:set var="dto" value="${gmapDTO}" />
+
+<c:if test="${empty dto.sessionDTOs}">
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="label.nogroups" />
+	</lams:Alert>
+</c:if>
+
 <c:forEach var="session" items="${dto.sessionDTOs}">
 
-	<table>
-		<tr>
-			<td>
-				<h2>
-					${session.sessionName}
-				</h2>
-			</td>
-		</tr>
-	</table>
+    <div class="panel panel-default" >
+		<div class="panel-heading" id="heading${toolSessionDto.sessionID}">
+		<span class="panel-title">
+			${session.sessionName}
+		</span>
+		</div>
 
-	<table cellpadding="0">
-		<tr>
-			<td class="field-name" width="40%">
-				<fmt:message>heading.totalLearnersInGroup</fmt:message>
-			</td>
-			<td width="70%">
-				${session.numberOfLearners}
-			</td>
-		</tr>
-		<tr>
-			<td class="field-name" width="40%">
-				<fmt:message>heading.totalFinishedLearnersInGroup</fmt:message>
-			</td>
-			<td width="70%">
-				${session.numberOfFinishedLearners}
-			</td>
-		</tr>
-	</table>
+		<div class="panel-body">
+
+		<table class="table table-condensed table-no-border">
+			<tr>
+				<td class="field-name" width="40%">
+					<fmt:message>heading.totalLearnersInGroup</fmt:message>
+				</td>
+				<td width="70%">
+					${session.numberOfLearners}
+				</td>
+			</tr>
+			<tr>
+				<td class="field-name" width="40%">
+					<fmt:message>heading.totalFinishedLearnersInGroup</fmt:message>
+				</td>
+				<td width="70%">
+					${session.numberOfFinishedLearners}
+				</td>
+			</tr>
+		</table>
+		</div>
+	</div>
+	
 </c:forEach>
Index: lams_tool_gmap/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rd9fea0d214dfaae43a89801f03bd4cc7d617fffa -r0006e57acf98a677de6aaeca56102c2b35466e5d
--- lams_tool_gmap/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision d9fea0d214dfaae43a89801f03bd4cc7d617fffa)
+++ lams_tool_gmap/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 0006e57acf98a677de6aaeca56102c2b35466e5d)
@@ -2,274 +2,58 @@
 <c:set var="tool"><lams:WebAppURL /></c:set>
 <c:set var="dto" value="${gmapDTO}" />
 
-
-<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">
-
-	<tr>
-		<td>
-			<fmt:message key="advanced.lockOnFinished" />
-		</td>
-		
-		<td>
-			<c:choose>
-				<c:when test="${dto.lockOnFinish == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
+<div class="panel">
+	<h4>
+	    <c:out value="${dto.title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+	    <c:out value="${dto.instructions}" escapeXml="false"/>
+	</div>
 	
-	<tr>
-		<td>
-			<fmt:message key="advanced.allowEditMarkers" />
-		</td>
-		<td>
-			<c:choose>
-				<c:when test="${dto.allowEditMarkers == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
-
-	<tr>
-		<td>
-			<fmt:message key="advanced.allowShowAllMarkers" />
-		</td>
-		<td>	
-			<c:choose>
-				<c:when test="${dto.allowShowAllMarkers == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
-	
-	
-	<tr>
-		<td>
-			<fmt:message key="advanced.markerLimitsMessage" />
-		</td>	
-		<td>
-			<c:choose>
-				<c:when test="${dto.limitMarkers == true}">
-					<fmt:message key="label.on" />, ${dto.maxMarkers}
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>
-		</td>
-	</tr>
-	 		
-	<tr>
-	 	<td>
-			<fmt:message key="advanced.allowZoom" />
-		</td>
-		<td>	
-			<c:choose>
-				<c:when test="${dto.allowZoom == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
-
-	<tr>
-		<td>
-			<fmt:message key="advanced.allowTerrain" />
-		</td>
-		<td>	
-			<c:choose>
-				<c:when test="${dto.allowTerrain == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
-
-	<tr>
-		<td>
-			<fmt:message key="advanced.allowSatellite" />
-		</td>
-		<td>	
-			<c:choose>
-				<c:when test="${dto.allowSatellite == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
-	
-	<tr>
-		<td>
-			<fmt:message key="advanced.allowHybrid" />
-		</td>
-		<td>	
-			<c:choose>	
-				<c:when test="${dto.allowHybrid == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
-	
-	<tr>
-		<td>
-			<fmt:message key="monitor.summary.td.addNotebook" />
-		</td>
-		
-		<td>
-			<c:choose>
-				<c:when test="${dto.reflectOnActivity == true}">
-					<fmt:message key="label.on" />
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="label.off" />
-				</c:otherwise>
-			</c:choose>	
-		</td>
-	</tr>
-	
-	<c:choose>
-		<c:when test="${dto.reflectOnActivity == true}">
-			<tr>
-				<td>
-					<fmt:message key="monitor.summary.td.notebookInstructions" />
-				</td>
-				<td>
-					<lams:out value="${dto.reflectInstructions}" escapeHtml="true"/>
-				</td>
-			</tr>
-		</c:when>
-	</c:choose>
-</table>
 </div>
 
+<c:choose>
+<c:when test="${empty dto.sessionDTOs}">
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="label.nogroups" />
+	</lams:Alert>
+</c:when>
+<c:otherwise>
 
-
-	<div id="groupsTable">
-	<h1><fmt:message key="monitor.summary.title.groups"/></h1>
+	<h4><fmt:message key="monitor.summary.title.groups"/></h4>
 	
-	<br />
+<c:choose>
+<c:when test="${dto.reflectOnActivity}">
 	
-	<table class="alternative-color">
-	<tr>
-		<th>
-			<fmt:message key="heading.table.group" />
-		</th>
-		<th>
-			<fmt:message key="heading.totalLearners" />
-		</th>
-	</tr>
+	<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
 	
-	<c:if test="${empty dto.sessionDTOs}">
-		<td colspan="2"><i><fmt:message key="label.nogroups" /></i></td>
-	</c:if>
-	<c:forEach var="session" items="${dto.sessionDTOs}">
-		<tr>
-			<td>
-				<a href="javascript:clearMap();addUsersForSession${session.sessionID}();addMarkersForSession${session.sessionID}();makeReflectionDivVisible('reflectionDiv${session.sessionID}');">${session.sessionName}</a>
-			</td>
-			<td>
-				${session.numberOfLearners}
-			</td>
-		</tr>
-	</c:forEach>
-	</table>	
-	</div>
+	<c:forEach var="session" items="${dto.sessionDTOs}" varStatus="status">
+		<c:set var="toggleJS">javascript:clearMap();addUsersForSession${session.sessionID}();addMarkersForSession${session.sessionID}();</c:set>
+		<div id="sessionDiv${session.sessionID}">
 
-	<html:form action="/monitoring" method="post">
-		<html:hidden property="dispatch" styleId = "dispatch" value="unspecified" />
-		<html:hidden property="markersXML" value="" styleId="markersXML" />
-		<html:hidden property="toolSessionID" styleId="toolSessionID"/>
-		<html:hidden property="toolContentID" />
-		<html:hidden property="contentFolderID" />
-	
-	<div id="gmapDiv">	
-	<h1><fmt:message key="monitor.summary.title.map"/></h1>
-	
-	<br />
-	<table>
-		<tr>
-			 <td>
-			 	<div id="map_legend" style="width:100%;" >
-				<iframe marginwidth="0" align="left" height="60px" width="100%" frameborder="0" src="${tool}/common/mapLegend.jsp"></iframe>
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${session.sessionID}">
+			<div class="row no-gutter">
+				<div class="col-sm-5">
+					<span  class="collapsable-icon-left">
+		        	<a class="collapsed" role="button" data-toggle="collapse" href="#collapse${session.sessionID}" onClick="${toggleJS}"
+						aria-expanded="false" aria-controls="collapse${session.sessionID}" >
+					<b><c:out value="${session.sessionName}" /></b>
+					</span>
 				</div>
-			 	<div id="map_canvas" style="float: left; width:80%; height:400px"><fmt:message key="error.cantLoadMap"></fmt:message></div>
-				<div id="usersidebar" style="float: right; width:20%; overflow:auto; height:400px; background:WhiteSmoke; "></div>			 	
-			 </td> 			
-		</tr>
-		<tr>
-			<td>
-				<a href="javascript:addMarkerToCenterMonitoring()" class="button"/><fmt:message key="button.addMarker"/></a>
-				<a href="javascript:fitMapMarkers()" class="button"/><fmt:message key="button.fitMarkers"/></a>
-				<a href="javascript:if(confirmLeavePage()){refreshPage();}" class="button"/><fmt:message key="button.refresh"/></a>
-			</td>
-		</tr>
-	</table>
-	
-	<table>
-	<tr><td>
-		<input type="text" onkeypress="javascript:if (event.keyCode==13){showAddress();return false;}" size="60" name="address" id="address" value="${dto.defaultGeocoderAddress}" />			
-		<a href="javascript:showAddress()" class="button"/><fmt:message key="button.go"/></a>
-	</td></tr>
-	</table>
-	</div>
-	
-	<table><tr><td align="right">
-		<html:submit styleClass="button" styleId="finishButton" onclick="javascript:serialiseMarkers();document.getElementById('dispatch').value = 'saveMarkers';">
-			<fmt:message key="button.save"></fmt:message>
-		</html:submit>
-	</td></tr></table>
-	
-	<c:if test="${dto.reflectOnActivity}">
-	
-	
-	<c:forEach var="session" items="${dto.sessionDTOs}">
-		<div id="reflectionDiv${session.sessionID}" style="display:none;">
+				<div class="col-sm-5">
+					<fmt:message key="heading.totalLearners" />:&nbsp;${session.numberOfLearners}</a>
+				</div>
+				<div class="col-sm-2">
+					<a href="${toggleJS}"
+						class="btn btn-default btn-xs pull-right"><fmt:message key="label.show.on.map"/></a>
+				</div>
+			</div>
+        </div>
+        
+        <div id="collapse${session.sessionID}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading${session.sessionID}">
 		
-		<h1>
-			<c:if test="${isGroupedActivity}">
-				${session.sessionName}
-			</c:if>	
-			<fmt:message key="heading.reflection"></fmt:message>
-		</h1>
-		<br />
-		
-		
-		<table class="alternative-color">
+		<table class="table table-condensed table-striped">
 		<c:forEach var="user" items="${session.userDTOs}">
 			<tr>
 				<td>
@@ -283,20 +67,117 @@
 							<c:param name="toolSessionID" value="${session.sessionID}" />
 						</c:url>
 				
-						<html:link
+						<html:link styleClass="btn btn-default btn-xs pull-right"
 							href="javascript:launchPopup('${openNotebook}')">
-							<fmt:message key="link.view" />
+							<fmt:message key="pageTitle.monitoring.notebook" />
 						</html:link>
 					</c:if>
 				</td>
 			</tr>	
 		</c:forEach>
 		</table>
+		
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+
+		<c:if test="${!status.last}"><div class="voffset5">&nbsp;</div></c:if>
+		
 		</div>
 	</c:forEach>
-	</c:if>
+
+	</div> <!--  end panel group -->
+
+</c:when> 
+
+<c:otherwise>
+    <div class="panel panel-default" >
+	<table class="table table-condensed table-striped">
+		<tr>
+			<th>
+				<fmt:message key="heading.table.group" />
+			</th>
+			<th>
+				<fmt:message key="heading.totalLearners" />
+			</th>
+			<th></th>
+		</tr>
+		
+		<c:forEach var="session" items="${dto.sessionDTOs}">
+			<tr>
+				<td>
+					${session.sessionName}
+				</td>
+				<td>
+					${session.numberOfLearners}
+				</td>
+				<td>
+					<a href="javascript:clearMap();addUsersForSession${session.sessionID}();addMarkersForSession${session.sessionID}();"
+					class="btn btn-default btn-xs pull-right">Show On Map</a>
+				</td>
+			</tr>
+		</c:forEach>
+	</table>	
+	</div>
+</c:otherwise>
+</c:choose>
+
+</c:otherwise>
+</c:choose>
+
+	<html:form action="/monitoring" method="post">
+		<html:hidden property="dispatch" styleId = "dispatch" value="unspecified" />
+		<html:hidden property="markersXML" value="" styleId="markersXML" />
+		<html:hidden property="toolSessionID" styleId="toolSessionID"/>
+		<html:hidden property="toolContentID" />
+		<html:hidden property="contentFolderID" />
+	
+	<div id="gmapDiv">	
+	<h4><fmt:message key="monitor.summary.title.map"/></h4>
+	
+	<!-- map UI -->
+	<div class="panel panel-default">
+	<div class="panel-body">
+	    
+		<%@ include file="../../common/mapLegend.jsp"%>
+	
+		<div class="row no-gutter">
+			<div class="col-sm-9 col-md-7">
+				<div id="map_canvas" style="height:400px"><fmt:message key="error.cantLoadMap"></fmt:message></div>
+			</div>
+			<div class="col-sm-3 col-md-5">
+				<div id="usersidebar" style="border:1px"></div>		
+			</div>	
+		</div>
+				
+		<div class="row no-gutter">
+			<div class="col-sm-12">
+				<a href="javascript:addMarkerToCenterMonitoring()" class="btn btn-default btn-sm voffset5" role="button"/><fmt:message key="button.addMarker"/></a>
+				<a href="javascript:fitMapMarkers()" class="btn btn-default btn-sm voffset5" role="button"/><fmt:message key="button.fitMarkers"/></a>
+				<a href="javascript:if(confirmLeavePage()){refreshPage();}" class="btn btn-default btn-sm voffset5" role="button"/><fmt:message key="button.refresh"/></a>
+			</div>
+		</div>
+					
+		<div class="row no-gutter">
+			<div class="col-sm-10">
+				<c:set var="goText"><fmt:message key="button.go"/></c:set>
+				<input type="text" onkeypress="javascript:if (event.keyCode==13){showAddress();return false;}" size="60" name="address" 
+					id="address" value="${dto.defaultGeocoderAddress}" class="form-control form-control-inline input-sm  voffset5"/>			
+				<a href="javascript:showAddress()" class="btn btn-default btn-sm"/><i class="fa fa-search" title="${goText}"></i></a>
+			</div>
+			<div class="col-sm-2">
+				<html:submit styleClass="btn btn-default pull-right" styleId="finishButton" onclick="javascript:serialiseMarkers();document.getElementById('dispatch').value = 'saveMarkers';">
+				<fmt:message key="button.save"></fmt:message>
+				</html:submit>
+			</div>
+		</div>
+	</div>	
+	</div>
+	<!-- end map UI -->
+	</div>
+
 </html:form>
 
+<%@include file="advancedOptions.jsp"%>
 	
 <script type="text/javascript">
 <!--
@@ -338,18 +219,6 @@
 	</c:if>
 	</c:forEach>
 	
-	function makeReflectionDivVisible(id)
-	{
-		var i;
-		if (document.getElementById(id) != null)
-		{
-		<c:forEach var="session" items="${dto.sessionDTOs}">
-			document.getElementById("reflectionDiv${session.sessionID}").style.display = "none";
-		</c:forEach>
-		document.getElementById(id).style.display = "block";
-		}
-	}	
-	
 	function refreshPage()
 	{
 		var url = "<lams:WebAppURL/>/monitoring.do?toolContentID=${dto.toolContentId}&contentFolderID=${contentFolderID}";