Index: lams_tool_sbmt/src/java/org/lamsfoundation/lams/tool/sbmt/web/MonitoringAction.java
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/src/java/org/lamsfoundation/lams/tool/sbmt/web/MonitoringAction.java	(.../MonitoringAction.java)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_sbmt/src/java/org/lamsfoundation/lams/tool/sbmt/web/MonitoringAction.java	(.../MonitoringAction.java)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -79,17 +79,6 @@
 
 /**
  * @author Manpreet Minhas
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
  */
 public class MonitoringAction extends LamsDispatchAction {
 
@@ -144,7 +133,7 @@
 
 	AuthoringDTO authorDto = new AuthoringDTO(persistContent);
 	request.setAttribute(SbmtConstants.AUTHORING_DTO, authorDto);
-	request.setAttribute(SbmtConstants.PAGE_EDITABLE, persistContent.isContentInUse());
+	request.setAttribute(SbmtConstants.PAGE_EDITABLE, !persistContent.isContentInUse());
 	request.setAttribute(SbmtConstants.ATTR_IS_GROUPED_ACTIVITY, submitFilesService.isGroupedActivity(contentID));
 	request.setAttribute(SbmtConstants.ATTR_REFLECTION_ON, persistContent.isReflectOnActivity());
 
@@ -530,32 +519,4 @@
 	// request.setAttribute(AttributeNames.PARAM_TOOL_SESSION_ID,sessionID);
 	request.setAttribute("sessions", sessions);
     }
-
-    public ActionForward viewReflection(ActionMapping mapping, ActionForm form, HttpServletRequest request,
-	    HttpServletResponse response) {
-	Long userUid = WebUtil.readLongParam(request, SbmtConstants.ATTR_USER_UID);
-	Long sessionID = WebUtil.readLongParam(request, AttributeNames.PARAM_TOOL_SESSION_ID);
-
-	submitFilesService = getSubmitFilesService();
-	SubmitUser userDto = submitFilesService.getUserByUid(userUid);
-
-	submitFilesService = getSubmitFilesService();
-	NotebookEntry notebookEntry = submitFilesService.getEntry(sessionID, CoreNotebookConstants.NOTEBOOK_TOOL,
-		SbmtConstants.TOOL_SIGNATURE, userDto.getUserID());
-
-	SubmitFilesSession session = submitFilesService.getSessionById(sessionID);
-
-	SubmitUserDTO userDTO = new SubmitUserDTO(userDto);
-	if (notebookEntry == null) {
-	    userDTO.setFinishReflection(false);
-	    userDTO.setReflect(null);
-	} else {
-	    userDTO.setFinishReflection(true);
-	    userDTO.setReflect(notebookEntry.getEntry());
-	}
-	userDTO.setReflectInstrctions(session.getContent().getReflectInstructions());
-
-	request.setAttribute("userDTO", userDTO);
-	return mapping.findForward("viewReflect");
-    }
-}
+}
\ No newline at end of file
Index: lams_tool_sbmt/web/WEB-INF/struts-config.xml
===================================================================
diff -u -r6bed0e62245e6c9ce454d4bc54920a0b41dac9bc -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/WEB-INF/struts-config.xml	(.../struts-config.xml)	(revision 6bed0e62245e6c9ce454d4bc54920a0b41dac9bc)
+++ lams_tool_sbmt/web/WEB-INF/struts-config.xml	(.../struts-config.xml)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -184,11 +184,6 @@
         path="/monitoring/parts/statisticpart.jsp"
         redirect="false"
       />
-      <forward
-        name="viewReflect"
-        path="/monitoring/notebook.jsp"
-        redirect="false"
-      />
     </action>
 
 		<!--  ========= Reflection =============== -->
Index: lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_sbmt/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -178,7 +178,7 @@
       <name>css</name>
       <tag-class>org.lamsfoundation.lams.web.tag.CssTag</tag-class>
       <body-content>empty</body-content>
-
+      
       <attribute>
          <description>Output stylesheet based on the user preferences.</description>
          <name>style</name>
@@ -408,18 +408,34 @@
        <path>/WEB-INF/tags/TabBody.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodys</name>
+       <path>/WEB-INF/tags/TabBodys.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>TabName</name>
        <path>/WEB-INF/tags/TabName.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodyArea</name>
+       <path>/WEB-INF/tags/TabBodyArea.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>CKEditor</name>
        <path>/WEB-INF/tags/CKEditor.tag</path>
    	</tag-file>
    	<tag-file>
        <name>AuthoringButton</name>
        <path>/WEB-INF/tags/AuthoringButton.tag</path>
-   	</tag-file>   	
+   	</tag-file>   
    	<tag-file>
+       <name>AuthoringRatingCriteria</name>
+       <path>/WEB-INF/tags/AuthoringRatingCriteria.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>Rating</name>
+       <path>/WEB-INF/tags/Rating.tag</path>
+   	</tag-file>    		
+   	<tag-file>
        <name>headItems</name>
        <path>/WEB-INF/tags/headItems.tag</path>
    	</tag-file>
@@ -438,8 +454,24 @@
    	<tag-file>
 	    <name>Page</name>
 		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable</name>
+		<path>/WEB-INF/tags/TSTable.tag</path>
+   	</tag-file>    
+  	<tag-file>
+	    <name>Arrow</name>
+		<path>/WEB-INF/tags/Arrow.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>AdvancedAccordian</name>
+       <path>/WEB-INF/tags/AdvancedAccordian.tag</path>
    	</tag-file>  
    	<tag-file>
+   		<name>RestrictedUsageAccordian</name>
+   		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
+   	</tag-file>
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
@@ -481,5 +513,13 @@
 		<name>head</name>
 	    <path>/WEB-INF/tags/Head.tag</path>
 	</tag-file>
+   	<tag-file>
+       <name>Comments</name>
+       <path>/WEB-INF/tags/Comments.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>CommentsAuthor</name>
+       <path>/WEB-INF/tags/CommentsAuthor.tag</path>
+   	</tag-file>
 
 </taglib>
Index: lams_tool_sbmt/web/monitoring/mark/allmarks.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/mark/allmarks.jsp	(.../allmarks.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_sbmt/web/monitoring/mark/allmarks.jsp	(.../allmarks.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,41 +1,49 @@
 <!DOCTYPE html>
         
-
 <%@include file="/common/taglibs.jsp"%>
+<c:set var="tool">
+	<lams:WebAppURL />
+</c:set>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
 <lams:html>
 <lams:head>
 	<title><fmt:message key="activity.title" /></title>
 	<lams:css/>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/common.js"></script>
+	
+	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	<script type="text/javascript">
 		function updateMark(detailId,reportId,sessionId,userId){
 			location.href="<lams:WebAppURL/>mark.do?method=newMark&updateMode=listAllMarks&userID="+userId+"&toolSessionID="+sessionId+"&detailID="+detailId+"&reportID="+reportId;
 		}
 	</script>
 </lams:head>
+
 <body class="stripes">
+<c:set var="title"><fmt:message key="label.monitoring.heading.marking" /></c:set>
+<lams:Page title="${title}" type="learner">
 
-		<div id="content">
-		<h1>
-			<fmt:message key="label.monitoring.heading.marking"/>
-		</h1>
-
-			<table cellpadding="0" class="alternative-color">
-				<c:forEach var="user" items="${reports}">
-					<c:forEach items="${user.value}" var="fileInfo" varStatus="status">
-						<%@include file="filelist.jsp"%>
-					</c:forEach>
-				</c:forEach>
-				<tr>
-					<td colspan="2">
-						<html:link href="javascript:window.close();" property="submit" styleClass="button">
-							<fmt:message key="label.monitoring.done.button" />
-						</html:link>
-					</td>
-				</tr>
-			</table>
-		</div>
-		<div id="footer"></div>
-
+	<table class="table table-condensed">
+		<c:forEach var="user" items="${reports}">
+			<c:forEach items="${user.value}" var="fileInfo" varStatus="status">
+				<%@include file="filelist.jsp"%>
+			</c:forEach>
+		</c:forEach>
+		<tr>
+			<td colspan="3">
+				<html:link href="javascript:window.close();" property="submit" styleClass="btn btn-default">
+					<fmt:message key="label.monitoring.done.button" />
+				</html:link>
+			</td>
+		</tr>
+	</table>
+	
+	<div id="footer"></div>
+	
+</lams:Page>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_tool_sbmt/web/monitoring/mark/fileinfo.jsp
===================================================================
diff -u -r223502c7884deaf414065ca1b3695fb6e56b6e8a -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/mark/fileinfo.jsp	(.../fileinfo.jsp)	(revision 223502c7884deaf414065ca1b3695fb6e56b6e8a)
+++ lams_tool_sbmt/web/monitoring/mark/fileinfo.jsp	(.../fileinfo.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,36 +1,40 @@
 <c:if test="${status.first}">
 	<tr>
-		<td colspan="2">
-			<c:out value="${fileInfo.owner.firstName}" />
-			<c:out value="${fileInfo.owner.lastName}" />
-			<fmt:message key="label.submit.file.suffix" />:
-		</td>
+		<th colspan="3" class="active">
+			<c:out value="${fileInfo.owner.firstName}" />&nbsp;<c:out value="${fileInfo.owner.lastName}" />&nbsp;<fmt:message key="label.submit.file.suffix" />:
+		</th>
 	<tr>
 </c:if> 
 
 <tr>
-	<td class="field-name">
+	<td>
 		<fmt:message key="label.learner.filePath" />
 		:
 	</td>
 	<td>
 		<c:out value="${fileInfo.filePath}" />
+	</td>
+	<td>
 		<c:set var="viewURL">
 			<html:rewrite page="/download/?uuid=${fileInfo.uuID}&versionID=${fileInfo.versionID}&preferDownload=false" />
 		</c:set>
-		<a href="javascript:launchInstructionsPopup('<c:out value='${viewURL}' escapeXml='false'/>')" class="button"> <fmt:message key="label.view" /> </a>&nbsp;
+		<html:link href="javascript:launchInstructionsPopup('${viewURL}')" styleClass="btn btn-default">
+			<fmt:message key="label.view" />
+		</html:link>
 		<c:set var="downloadURL">
 			<html:rewrite page="/download/?uuid=${fileInfo.uuID}&versionID=${fileInfo.versionID}&preferDownload=true" />
 		</c:set>
-		<a href="<c:out value='${downloadURL}' escapeXml='false'/>"  class="button"> <fmt:message key="label.download" /> </a>
+		<html:link href="${downloadURL}" styleClass="btn btn-default loffset10">
+			<fmt:message key="label.download" />
+		</html:link>
 	</td>
 </tr>
 <tr>
-	<td class="field-name">
+	<td>
 		<fmt:message key="label.learner.fileDescription" />
 		:
 	</td>
-	<td>
+	<td colspan="2">
 		<c:choose>
 			<c:when test="${empty fileInfo.fileDescription}">
 				<fmt:message key="label.learner.notAvailable" />
@@ -42,11 +46,11 @@
 	</td>
 </tr>
 <tr>
-	<td class="field-name">
+	<td>
 		<fmt:message key="label.learner.dateOfSubmission" />
 		:
 	</td>
-	<td>
+	<td colspan="2">
 		<lams:Date value="${fileInfo.dateOfSubmission}" />
 	</td>
 </tr>
\ No newline at end of file
Index: lams_tool_sbmt/web/monitoring/mark/filelist.jsp
===================================================================
diff -u -r223502c7884deaf414065ca1b3695fb6e56b6e8a -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/mark/filelist.jsp	(.../filelist.jsp)	(revision 223502c7884deaf414065ca1b3695fb6e56b6e8a)
+++ lams_tool_sbmt/web/monitoring/mark/filelist.jsp	(.../filelist.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,6 +1,7 @@
 <%@include file="fileinfo.jsp"%>
+
 <tr>
-	<td class="field-name">
+	<td>
 		<fmt:message key="label.learner.marks" />
 		:
 	</td>
@@ -13,18 +14,20 @@
 				<c:out value="${fileInfo.marks}" escapeXml="true" />
 			</c:otherwise>
 		</c:choose>
+	</td>
+	<td>
 		<html:link href="javascript:updateMark(${fileInfo.submissionID},${fileInfo.reportID},${toolSessionID},${fileInfo.owner.userID});" 
-			property="submit" styleClass="button">
+				  property="submit" styleClass="btn btn-default">
 			<fmt:message key="label.monitoring.updateMarks.button" />
 		</html:link>
 	</td> 
 </tr>
 <tr>
-	<td class="field-name">
+	<td>
 		<fmt:message key="label.learner.comments" />
 		:
 	</td>
-	<td>
+	<td colspan="2">
 		<c:choose>
 			<c:when test="${empty fileInfo.comments}">
 				<fmt:message key="label.learner.notAvailable" />
@@ -35,34 +38,36 @@
 		</c:choose>
 	</td>
 </tr>
-<tr>
-	<td class="field-name">
+<tr style="margin-bottom: 5px; border-bottom: 5px solid #ddd">
+	<td>
 		<fmt:message key="label.monitor.mark.markedFile" />
 		:
 	</td>
-	<td>
-		<c:choose>
-			<c:when test="${empty fileInfo.markFileUUID}">
+	
+	<c:choose>
+		<c:when test="${empty fileInfo.markFileUUID}">
+			<td colspan="2">
 				<fmt:message key="label.learner.notAvailable" />
-			</c:when>
-			<c:otherwise>
+			</td>
+		</c:when>
+		<c:otherwise>
+			<td>
 				<c:out value="${fileInfo.markFileName}" />
+			</td>
+			<td>
 				<c:set var="markFileViewURL">
 					<html:rewrite page="/download/?uuid=${fileInfo.markFileUUID}&versionID=${fileInfo.markFileVersionID}&preferDownload=false" />
 				</c:set>
-				<a href="javascript:launchInstructionsPopup('<c:out value='${markFileViewURL}' escapeXml='false'/>')" class="button"> <fmt:message key="label.view" /> </a>&nbsp;
+				<html:link href="javascript:launchInstructionsPopup('${markFileViewURL}')" styleClass="btn btn-default">
+					<fmt:message key="label.view" />
+				</html:link>
 				<c:set var="markFileDownloadURL">
 					<html:rewrite page="/download/?uuid=${fileInfo.markFileUUID}&versionID=${fileInfo.markFileVersionID}&preferDownload=true" />
 				</c:set>
-				<a href="<c:out value='${markFileDownloadURL}' escapeXml='false'/>"  class="button"> <fmt:message key="label.download" /> </a>
-			</c:otherwise>
-		</c:choose>
-	</td>
+				<html:link href="${markFileDownloadURL}" styleClass="btn btn-default loffset10">
+					<fmt:message key="label.download" />
+				</html:link>
+			</td>
+		</c:otherwise>
+	</c:choose>
 </tr>
-
-<tr>
-	<td colspan="2">
-		<hr size="1" style="width:500px"/>
-		<br />
-	</td>
-</tr>
Index: lams_tool_sbmt/web/monitoring/mark/mark.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/mark/mark.jsp	(.../mark.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_sbmt/web/monitoring/mark/mark.jsp	(.../mark.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,40 +1,48 @@
 <!DOCTYPE html>
         
-
 <%@include file="/common/taglibs.jsp"%>
+<c:set var="tool">
+	<lams:WebAppURL />
+</c:set>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
 <lams:html>
 <lams:head>
 	<title><fmt:message key="activity.title" /></title>
 	<lams:css/>
-	<c:set var="lams">
-		<lams:LAMSURL />
-	</c:set>
 	
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/common.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	<script type="text/javascript">
 		function updateMark(detailId,reportId,sessionId,userId){
 			location.href="<lams:WebAppURL/>mark.do?method=newMark&updateMode=listMark&userID="+userId+"&toolSessionID="+sessionId+"&detailID="+detailId+"&reportID="+reportId;
 		}
 	</script>
 </lams:head>
+
 <body class="stripes">
-		<div id="content">
-		<h1>
-			<fmt:message key="label.monitoring.heading.marking"/>
-		</h1>
-				<table cellpadding="0">
-					<c:forEach var="fileInfo" items="${report}" varStatus="status">
-						<%@include file="filelist.jsp"%>
-					</c:forEach>
-					<tr>
-						<td colspan="2">
-							<html:link href="javascript:window.close();" property="submit" styleClass="button">
-								<fmt:message key="label.monitoring.done.button" />
-							</html:link>
-						</td>
-					</tr>
-				</table>
-			</div>
-		<div id="footer"></div>
+<c:set var="title"><fmt:message key="label.monitoring.heading.marking" /></c:set>
+<lams:Page title="${title}" type="learner">
+
+	<table class="table table-condensed">
+		<c:forEach var="fileInfo" items="${report}" varStatus="status">
+			<%@include file="filelist.jsp"%>
+		</c:forEach>
+	
+		<tr>
+			<td colspan="3">
+				<html:link href="javascript:window.close();" property="submit" styleClass="btn btn-default">
+					<fmt:message key="label.monitoring.done.button" />
+				</html:link>
+			</td>
+		</tr>
+	</table>
+	
+	<div id="footer"></div>
+	
+</lams:Page>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_tool_sbmt/web/monitoring/mark/updatemark.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/mark/updatemark.jsp	(.../updatemark.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_sbmt/web/monitoring/mark/updatemark.jsp	(.../updatemark.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,16 +1,24 @@
 <!DOCTYPE html>
+
 <%@include file="/common/taglibs.jsp"%>
+<c:set var="tool">
+	<lams:WebAppURL />
+</c:set>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
 
 <lams:html>
 <lams:head>
 	<title><fmt:message key="activity.title" /></title>
 	<lams:css/>
 	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/common.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	
 	<script type="text/javascript">
 		function removeMarkFile() {
-
 			var answer = confirm("<fmt:message key="message.monitor.mark.confirmDeleteFile"/>");
 			if (answer) {	
 				document.getElementById("method").value = "removeMarkFile";
@@ -22,103 +30,125 @@
 </lams:head>
 
 <body class="stripes">
-		<div id="content">
-			<h1>
-				<fmt:message key="label.monitoring.updateMarks.button"/>
-			</h1>
-			<c:forEach var="fileInfo"  items="${report}" varStatus="status">	
-				<html:form action="/mark.do" method="post" styleId="updateMarkForm" enctype="multipart/form-data">
+<c:set var="title"><fmt:message key="label.monitoring.updateMarks.button" /></c:set>
+<lams:Page title="${title}" type="learner">
+
+	<table class="table table-condensed">
+		<c:forEach var="fileInfo" items="${report}" varStatus="status">
+			<html:form action="/mark.do" method="post" styleId="updateMarkForm" enctype="multipart/form-data">
+			
+				<html:hidden property="method" value="updateMark" styleId="method" />
+				<html:hidden property="toolSessionID" />
+				<html:hidden property="reportID" />
+				<html:hidden property="detailID"  />
+				<html:hidden property="userID"  />
+				<html:hidden property="updateMode" />
+				<html:hidden property="markFileUUID" />
+				<html:hidden property="markFileVersionID" />
 				
-					<html:hidden property="method" value="updateMark" styleId="method" />
-					<html:hidden property="toolSessionID" />
-					<html:hidden property="reportID" />
-					<html:hidden property="detailID"  />
-					<html:hidden property="userID"  />
-					<html:hidden property="updateMode" />
-					<html:hidden property="markFileUUID" />
-					<html:hidden property="markFileVersionID" />
-					
-					<table cellpadding="0">
-						<%@include file="fileinfo.jsp"%>
+				<%@include file="fileinfo.jsp"%>
+				
+				<logic:messagesPresent>
+					<tr>
+						<td colspan="3">
+							<%@include file="/common/messages.jsp"%>
+						</td>
+					</tr>
+				</logic:messagesPresent>
+				
+				<tr>
+					<td>
+						<fmt:message key="label.learner.marks" />
+					</td>
+					<td colspan="2">
+						<html:text property="marks" />
+					</td>
+				</tr>
+				
+				<c:choose>
+					<c:when test="${empty fileInfo.markFileUUID}">
 						<tr>
+							<td>
+								<fmt:message key="label.monitor.mark.updoad" />
+							</td>
 							<td colspan="2">
-								<%@include file="/common/messages.jsp"%>
+								<html:file property="markFile" />
 							</td>
 						</tr>
-					
+					</c:when>
+					<c:otherwise>
 						<tr>
-							<td class="field-name"  style="text-align: left;">
-								<fmt:message key="label.learner.marks" />
+							<td rowspan="2">
+								<fmt:message key="label.monitor.mark.updoad" />
 							</td>
 							<td>
-								<html:text property="marks" />
+								<c:out value='${fileInfo.markFileName}' escapeXml='true'/>
 							</td>
+							<td>
+								<c:set var="viewMarkFileURL">
+									<html:rewrite page="/download/?uuid=${fileInfo.markFileUUID}&versionID=${fileInfo.markFileVersionID}&preferDownload=false" />
+								</c:set>
+								<html:link href="javascript:launchInstructionsPopup('${viewMarkFileURL}')" styleClass="btn btn-default">
+									<fmt:message key="label.view" />
+								</html:link>
+								
+								<c:set var="downloadMarkFileURL">
+									<html:rewrite page="/download/?uuid=${fileInfo.markFileUUID}&versionID=${fileInfo.markFileVersionID}&preferDownload=true" />
+								</c:set>
+								<html:link href="${downloadMarkFileURL}" styleClass="btn btn-default loffset10">
+									<fmt:message key="label.download" />
+								</html:link>
+								
+								<html:link href="javascript:removeMarkFile()" styleClass="btn btn-default loffset10">
+									<fmt:message key="label.monitoring.file.delete" />
+								</html:link>
+							</td>
 						</tr>
 						<tr>
-							<td class="field-name"  style="text-align: left;">
-								<fmt:message key="label.monitor.mark.updoad" />
+							<td>
+								<fmt:message key="label.monitor.mark.replaceFile" />:
 							</td>
 							<td>
-								<c:if test="${not empty fileInfo.markFileUUID}">
-									${fileInfo.markFileName}
-									
-									
-									<c:set var="viewMarkFileURL">
-										<html:rewrite page="/download/?uuid=${fileInfo.markFileUUID}&versionID=${fileInfo.markFileVersionID}&preferDownload=false" />
-									</c:set>
-									<a href="javascript:launchInstructionsPopup('<c:out value='${viewMarkFileURL}' escapeXml='false'/>')" class="button"> <fmt:message key="label.view" /> </a>&nbsp;
-									
-									<c:set var="downloadMarkFileURL">
-										<html:rewrite page="/download/?uuid=${fileInfo.markFileUUID}&versionID=${fileInfo.markFileVersionID}&preferDownload=true" />
-									</c:set>
-									<a href="<c:out value='${downloadMarkFileURL}' escapeXml='false'/>"  class="button"> <fmt:message key="label.download" /> </a>&nbsp;
-									
-									<a href="javascript:removeMarkFile()"  class="button"> <fmt:message key="label.monitoring.file.delete" /> </a>
-									
-									<br />
-									<br />
-									<fmt:message key="label.monitor.mark.replaceFile" />: 
-								</c:if>
 								<html:file property="markFile" />
 							</td>
 						</tr>
-						<tr>
-							<td colspan="2">
-								<span  class="field-name"><fmt:message key="label.learner.comments" /><BR></span>
-								<lams:CKEditor id="comments"
-									value="${fileInfo.comments}"
-									toolbarSet="DefaultMonitor"></lams:CKEditor>
-							</td>
-						</tr>
-						<tr>
-							<td colspan="2">
-								<br />
-								<c:if test="${updateMode == 'listMark'}">
-									<c:set var="cancelUrl">
-										<c:url value="/monitoring.do"/>?method=listMark&userID=${fileInfo.owner.userID}&toolSessionID=${toolSessionID}
-									</c:set>
-								</c:if>
-								<c:if test="${updateMode == 'listAllMarks'}">
-									<c:set var="cancelUrl">
-										<c:url value="/monitoring.do"/>?method=listAllMarks&toolSessionID=${toolSessionID}
-									</c:set>
-								</c:if>
-								<a href="${cancelUrl}" class="button">
-									<fmt:message key="label.cancel" />
-								</a>
-								
-								&nbsp;&nbsp;
-								
-								<a href="javascript:document.getElementById('updateMarkForm').submit();" class="button">
-									<fmt:message key="label.monitoring.saveMarks.button" />
-								</a>
-							</td>
-						</tr>
-					</table>
-				</html:form>
-			</c:forEach>
-		</div>
+					</c:otherwise>
+				</c:choose>
+				
+				<tr>
+					<td colspan="3">
+						<fmt:message key="label.learner.comments" />
+						<lams:CKEditor id="comments"
+							value="${fileInfo.comments}"
+							toolbarSet="DefaultMonitor"></lams:CKEditor>
+					</td>
+				</tr>
+				<tr>
+					<td colspan="3">
+						<br />
+						<c:if test="${updateMode == 'listMark'}">
+							<c:set var="cancelUrl">
+								<c:url value="/monitoring.do"/>?method=listMark&userID=${fileInfo.owner.userID}&toolSessionID=${toolSessionID}
+							</c:set>
+						</c:if>
+						<c:if test="${updateMode == 'listAllMarks'}">
+							<c:set var="cancelUrl">
+								<c:url value="/monitoring.do"/>?method=listAllMarks&toolSessionID=${toolSessionID}
+							</c:set>
+						</c:if>
+						<html:link href="${cancelUrl}" styleClass="btn btn-default">
+							<fmt:message key="label.cancel" />
+						</html:link>
+						<html:link href="javascript:document.getElementById('updateMarkForm').submit()" styleClass="btn btn-default loffset10">
+							<fmt:message key="label.monitoring.saveMarks.button" />
+						</html:link>
+					</td>
+				</tr>
+			</html:form>
+		</c:forEach>
+	</table>
 
-		<div id="footer"></div>
+<div id="footer"></div>
+</lams:Page>
 </body>
-</lams:html>
+</lams:html>
\ No newline at end of file
Index: lams_tool_sbmt/web/monitoring/monitoring.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_sbmt/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,39 +1,42 @@
 <!DOCTYPE html>
 
 <%@include file="/common/taglibs.jsp"%>
-
 <%@ page import="org.lamsfoundation.lams.tool.sbmt.util.SbmtConstants"%>
+<c:set var="tool">
+	<lams:WebAppURL />
+</c:set>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
 
 <lams:html>
 <lams:head>
 	<title><fmt:message key="activity.title" /></title>
-	<lams:headItems />
+	<lams:css/>
+	<link type="text/css" href="${lams}/css/jquery-ui-smoothness-theme.css" rel="stylesheet">
+	<link type="text/css" href="${lams}/css/jquery-ui.timepicker.css" rel="stylesheet">
+	<link type="text/css" href="${lams}/css/jquery.tablesorter.theme.bootstrap.css" rel="stylesheet">
+	<link type="text/css" href="${lams}/css/jquery.tablesorter.pager.css" rel="stylesheet">
+
+	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
+
 	<script type="text/javascript">
-		 function init(){
-            var tag = document.getElementById("currentTab");
-	    	if(tag.value != "")
-	    		selectTab(tag.value);
-            else
-                selectTab(1); //select the default tab;
-        }   
-        
 		function doSelectTab(tabId) {
-        	// start optional tab controller stuff
-        	var tag = document.getElementById("currentTab");
-	    	tag.value = tabId;
+	    	if (tabId == 3){
+				doStatistic();
+	    	}
     		selectTab(tabId);
-	    		
-	    	//for statistic page change:
-	    	if(tabId == 3)
-	    		doStatistic();	  
         } 
-        
-        
-        function doSubmit(method) {
-        	document.SbmtMonitoringForm.method.value=method;
-        	document.SbmtMonitoringForm.submit();
-        }
-        
+		
 		function doStatistic(){
 			var url = "<c:url value="/monitoring.do"/>";
 			
@@ -50,45 +53,31 @@
 				}
 			);
 		}
-		
 	</script>
 </lams:head>
 
-<body class="stripes" onLoad="init()">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.monitoring.heading" />
-		</h1>
-		<div id="header">
-			<lams:Tabs control="true">
-				<lams:Tab id="1" key="label.monitoring.heading.userlist" />
-				<lams:Tab id="2" key="label.monitoring.heading.edit.activity" />
-				<lams:Tab id="3" key="label.monitoring.heading.stats" />
-			</lams:Tabs>
-		</div>
+<body class="stripes">
 
-		<div id="content">
-			<html:form action="monitoring" method="post" styleId="monitoringForm">
-				<html:hidden property="method" />
-				<html:hidden property="currentTab" styleId="currentTab" />
-				<html:errors />
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:Page title="${title}" type="navbar">
 
-				<lams:help toolSignature="<%= SbmtConstants.TOOL_SIGNATURE %>" module="monitoring"/>
+	<lams:Tabs title="${title}" control="true" helpToolSignature="<%= SbmtConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
+		<lams:Tab id="1" key="label.monitoring.heading.userlist" />
+		<lams:Tab id="2" key="label.monitoring.heading.edit.activity" />
+		<lams:Tab id="3" key="label.monitoring.heading.stats" />
+	</lams:Tabs>
 
-				<!-- tab content 1 (Summary) -->
-				<lams:TabBody id="1" titleKey="label.monitoring.heading.userlist.desc" page="parts/summary.jsp" />
-				<!-- end of content (Summary) -->
 
-				<!-- tab content 2 (Edit Activity) -->
-				<lams:TabBody id="2" titleKey="label.monitoring.heading.edit.activity.desc" page="parts/activity.jsp" />
-				<!-- end of content (Edit Activity) -->
+	<lams:TabBodyArea>
+		<lams:TabBodys>
+			<lams:TabBody id="1" titleKey="label.monitoring.heading.userlist.desc" page="parts/summary.jsp" />
+			<lams:TabBody id="2" titleKey="label.monitoring.heading.edit.activity.desc" page="parts/activity.jsp" />
+			<lams:TabBody id="3" titleKey="label.monitoring.heading.stats.desc" page="parts/statistic.jsp" />
+		</lams:TabBodys>
+	</lams:TabBodyArea>
+		
+	<div id="footer"></div>
 
-				<!-- tab content 3 (Stats) -->
-				<lams:TabBody id="3" titleKey="label.monitoring.heading.stats.desc" page="parts/statistic.jsp" />
-				<!-- end of content (Stats) -->
-			</html:form>
-		</div>
-		<div id="footer"></div>
-	</div>
+</lams:Page>
 </body>
-</lams:html>
+</lams:html>
\ No newline at end of file
Fisheye: Tag d41150b5c329af3aa1823fdcc9cc89b0c9a54416 refers to a dead (removed) revision in file `lams_tool_sbmt/web/monitoring/notebook.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_sbmt/web/monitoring/parts/activity.jsp
===================================================================
diff -u -r223502c7884deaf414065ca1b3695fb6e56b6e8a -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/parts/activity.jsp	(.../activity.jsp)	(revision 223502c7884deaf414065ca1b3695fb6e56b6e8a)
+++ lams_tool_sbmt/web/monitoring/parts/activity.jsp	(.../activity.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,43 +1,41 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<input type="hidden" name="toolContentID" value="<c:out value='${authoring.contentID}'/>" />
+<html:errors />
 
-<c:if test="${isPageEditable}">
-	<p class="warning">
+<c:if test="${!isPageEditable}">
+	<lams:Alert type="warn" id="no-edit" close="false">
 		<fmt:message key="message.alertContentEdit" />
-	</p>
+	</lams:Alert>
 </c:if>
 
-<table cellpadding="0">
+
+<table class="table table-condensed">
 	<tr>
-		<td class="field-name" width="10%" nowrap>
+		<td class="field-name" width="10%" valign="top">
 			<fmt:message key="label.authoring.basic.title" />
-			:
 		</td>
 		<td>
 			<c:out value="${authoring.title}" escapeXml="true" />
 		</td>
 	</tr>
-	<!-- Instructions Row -->
+
 	<tr>
-		<td class="field-name" width="10%" nowrap valign="top">
+		<td class="field-name" width="10%" valign="top" NOWRAP>
 			<fmt:message key="label.authoring.basic.instruction" />
-			:
 		</td>
 		<td>
 			<c:out value="${authoring.instruction}" escapeXml="false" />
 		</td>
 	</tr>
-	<tr>
-		<td colspan="2">
-			<c:url value="/definelater.do" var="authoringUrl">
-				<c:param name="mode" value="teacher" />
-				<c:param name="toolContentID" value="${authoring.contentID}" />
-				<c:param name="contentFolderID" value="${contentFolderID}" />
-			</c:url>
-			<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="button">
-					<fmt:message key="label.monitoring.edit.activity.edit" />
-			</html:link>
-		</td>
-	</tr>
 </table>
+
+<c:if test='${isPageEditable}'>
+	<c:url value="/authoring.do" var="authoringUrl">
+		<c:param name="mode" value="teacher" />
+		<c:param name="contentFolderID" value="${contentFolderID}" />
+		<c:param name="toolContentID" value="${toolContentID}" />
+	</c:url>
+	<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="btn btn-default">
+		<fmt:message key="label.monitoring.edit.activity.edit" />
+	</html:link>
+</c:if>
\ No newline at end of file
Index: lams_tool_sbmt/web/monitoring/parts/daterestriction.jsp
===================================================================
diff -u -reab46de044a4c899fb8c8759c375402c6dba8783 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/parts/daterestriction.jsp	(.../daterestriction.jsp)	(revision eab46de044a4c899fb8c8759c375402c6dba8783)
+++ lams_tool_sbmt/web/monitoring/parts/daterestriction.jsp	(.../daterestriction.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,43 +1,29 @@
 <%@include file="/common/taglibs.jsp"%>
 
-<h1>
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="restrictUsageTreeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'), '<lams:LAMSURL/>');" />
+<c:set var="ddTitle"><fmt:message key="monitor.summary.date.restriction" /></c:set>
+<lams:RestrictedUsageAccordian title="${ddTitle}">
 
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.date.restriction" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="restrictUsageDiv" style="display:none; ">
-
-	<div>
-		<fmt:message key="monitor.summary.when.date.restriction.is.set" />
-	</div>
+	<p><fmt:message key="monitor.summary.when.date.restriction.is.set" /></p>
 		
 	<div id="datetimeDiv" <c:if test='${not empty submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
-		<input type="text" name="datetime" id="datetime" value=""/>
-				
-		<html:link	href="javascript:setSubmissionDeadline();" styleClass="button">
+		<div class="form-group">
+		<label for="datetime"><fmt:message key="monitor.summary.after.date" />&nbsp;
+		<input type="text" name="datetime" id="datetime" value="" class="form-control form-control-inline"/>
+		</label>							
+		<html:link	href="javascript:setSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.set.restriction" />
 		</html:link>
+		</div>
 	</div>
 
 	<div id="dateInfoDiv" <c:if test='${empty submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
+		<label><fmt:message key="monitor.summary.after.date" /></span>
 		<span id="dateInfo">
 		</span>
-				
-		<html:link	href="javascript:removeSubmissionDeadline();" styleClass="button">
+		</label>
+		<html:link	href="javascript:removeSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.unset.restriction" />
 		</html:link>
 	</div>
-
-</div>
\ No newline at end of file
+	
+</lams:RestrictedUsageAccordian>
\ No newline at end of file
Index: lams_tool_sbmt/web/monitoring/parts/statistic.jsp
===================================================================
diff -u -r57cfee7c8588098f1a856bc78093cb10aa2b1482 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/parts/statistic.jsp	(.../statistic.jsp)	(revision 57cfee7c8588098f1a856bc78093cb10aa2b1482)
+++ lams_tool_sbmt/web/monitoring/parts/statistic.jsp	(.../statistic.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -1,5 +1,2 @@
 <%@ include file="/common/taglibs.jsp"%>
-<img src="${tool}/images/indicator.gif" style="display:none" id="statisticArea_Busy" />
-<div id="statisticArea">
-	<%@ include file="statisticpart.jsp"%>
-</div>
\ No newline at end of file
+<div id="statisticArea"></div>
\ No newline at end of file
Index: lams_tool_sbmt/web/monitoring/parts/statisticpart.jsp
===================================================================
diff -u -rf7005b417bda67aee1226b46546e74e82aad6538 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/parts/statisticpart.jsp	(.../statisticpart.jsp)	(revision f7005b417bda67aee1226b46546e74e82aad6538)
+++ lams_tool_sbmt/web/monitoring/parts/statisticpart.jsp	(.../statisticpart.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -2,39 +2,41 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:if test="${empty statisticList}">
-	<fmt:message key="label.no.user.available" />
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="label.no.user.available" />
+	</lams:Alert>
 </c:if>
 
 <c:forEach var="statistic" items="${statisticList}">
-
 	<c:if test="${isGroupedActivity}">
-		<h1>
-			<fmt:message key="label.session.name" />: 
-			<c:out value="${statistic.sessionName}" />
-		</h1>
+		<h4><c:out value="${statistic.sessionName}" /></h4>
 	</c:if>
-
-	<table  class="alternative-color">
+	
+	<table class="table table-condensed table-no-border">
 		<tr>
-			<td>
+			<td class="field-name" width="30%">
 				<fmt:message key="monitoring.statistic.marked" />
 			</td>
 			<td>
 				<c:out value="${statistic.markedCount}" />
 			</td>
+			
 		</tr>
 		<tr>
-			<td>
+			<td class="field-name" width="30%">
 				<fmt:message key="monitoring.statistic.not.marked" />
 			</td>
+			
 			<td>
 				<c:out value="${statistic.notMarkedCount}" />
 			</td>
 		</tr>
+		
 		<tr>
-			<td>
+			<td class="field-name" width="30%">
 				<fmt:message key="monitoring.statistic.total.uploaded.file" />
 			</td>
+			
 			<td>
 				<c:out value="${statistic.totalUploadedFiles}" />
 			</td>
Index: lams_tool_sbmt/web/monitoring/parts/summary.jsp
===================================================================
diff -u -rf7005b417bda67aee1226b46546e74e82aad6538 -rd41150b5c329af3aa1823fdcc9cc89b0c9a54416
--- lams_tool_sbmt/web/monitoring/parts/summary.jsp	(.../summary.jsp)	(revision f7005b417bda67aee1226b46546e74e82aad6538)
+++ lams_tool_sbmt/web/monitoring/parts/summary.jsp	(.../summary.jsp)	(revision d41150b5c329af3aa1823fdcc9cc89b0c9a54416)
@@ -8,15 +8,6 @@
 	<lams:LAMSURL />
 </c:set>
 
-<link type="text/css" href="${lams}/css/jquery-ui-smoothness-theme.css" rel="stylesheet">
-<link type="text/css" href="${lams}/css/jquery-ui.timepicker.css" rel="stylesheet">
-<link type="text/css" href="${lams}/css/jquery.tablesorter.theme-blue.css" rel="stylesheet">
-<link type="text/css" href="${lams}/css/jquery.tablesorter.pager.css" rel="stylesheet">
-
-<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>	
 <script type="text/javascript">
 	// pass settings to monitorToolSummaryAdvanced.js
 	var submissionDeadlineSettings = {
@@ -31,9 +22,6 @@
 </script>
 <script type="text/javascript" src="${lams}/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
 
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 <script type="text/javascript">
 	$(document).ready(function(){
 	    
@@ -117,11 +105,9 @@
 			})
 		});
   	})
-</script>
 
-
-<script type="text/javascript">
-	function launchPopup(url, title) {
+  	
+  	function launchPopup(url, title) {
 		var wd = null;
 		if (wd && wd.open && !wd.closed) {
 			wd.close();
@@ -158,120 +144,85 @@
 			}
 		);
 	}
-
-	function downloadMarks(sessionId) {
-		var url = "<c:url value="/monitoring.do"/>";
-		var reqIDVar = new Date();
-		var param = "?method=downloadMarks&toolSessionID=" + sessionId
-				+ "&reqID=" + reqIDVar.getTime();
-		url = url + param;
-		location.href = url;
-	}
 </script>
 
-<h1>
-	<c:out value="${authoring.title}" escapeXml="true" />
-</h1>
-<div class="instructions space-top">
-	<c:out value="${authoring.instruction}" escapeXml="false" />
+<div class="panel">
+	<h4>
+	    <c:out value="${authoring.title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+	    <c:out value="${authoring.instruction}" escapeXml="false"/>
+	</div>
+	
+	<c:if test="${empty sessions}">
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="label.no.user.available" />
+		</lams:Alert>
+	</c:if>
+	
+	<!--For release marks feature-->
+	<img src="${tool}/images/indicator.gif" style="display:none" id="messageArea_Busy" />
+	<div id="messageArea"></div>
+
 </div>
 
-<table cellpadding="0">
-<tr><td>
-	<img src="${tool}/images/indicator.gif" style="display:none" id="messageArea_Busy" />
-	<span id="messageArea"></span>
-</td></tr>
-</table>
-<c:if test="${empty sessions}">
-	<fmt:message key="label.no.user.available" />
-</c:if>
 
-<c:forEach var="sessionDto" items="${sessions}">
 
-		<c:if test="${isGroupedActivity}">
-			<h1>
-				<fmt:message key="label.session.name" />: 
-				<c:out value="${sessionDto.sessionName}" />
-			</h1>
-		</c:if>
-		<br/>
+<c:forEach var="sessionDto" items="${sessions}" varStatus="status">
 		
-		<div class="tablesorter-holder">
-		<table class="tablesorter" data-session-id="${sessionDto.sessionID}">
-			<thead>
-				<tr>
-					<th>
-						<fmt:message key="monitoring.user.fullname"/>
-					</th>
-					<th  width="15%" align="center">
-						<fmt:message key="monitoring.user.submittedFiles"/>
-					</th>
-					<th width="15%" align="center">
-						<fmt:message key="monitoring.marked.question"/>
-					</th>
-					<c:if test="${reflectOn}">			
-						<th align="center">
-							<fmt:message key="monitoring.user.reflection"/>
-						</th>
-					</c:if>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
+	<c:if test="${isGroupedActivity}">	
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${sessionDto.sessionID}">
+        	<span class="panel-title collapsable-icon-left">
+        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${sessionDto.sessionID}" 
+					aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${sessionDto.sessionID}" >
+			<fmt:message key="message.session.name" />:	<c:out value="${sessionDto.sessionName}" /></a>
+			</span>
+        </div>
+        
+        <div id="collapse${sessionDto.sessionID}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel" aria-labelledby="heading${sessionDto.sessionID}">
+	</c:if>
+	
+	<lams:TSTable numColumns="${reflectOn ? 4 : 3}" dataId="data-session-id='${sessionDto.sessionID}'">
+			<th><fmt:message key="monitoring.user.fullname"/></th>
+			<th width="15%" align="center"><fmt:message key="monitoring.user.submittedFiles"/></th>
+			<th width="10%" align="center"><fmt:message key="monitoring.marked.question"/></th>
+			<c:if test="${reflectOn}">
+				<th align="center" class="sorter-false"><fmt:message key="monitoring.user.reflection"/></th>
+			</c:if>
+	</lams:TSTable>
+	
+	<P style="display: inline"> 
+		<html:button property="viewAllMarks" onclick="javascript:viewAllMarks(${sessionDto.sessionID})"
+					 styleClass="btn btn-default loffset5 voffset10" >
+			<fmt:message key="label.monitoring.viewAllMarks.button" />
+		</html:button>
+		<html:button property="releaseMarks" onclick="releaseMarks(${sessionDto.sessionID})"
+					 styleClass="btn btn-default loffset5 voffset10" >
+			<fmt:message key="label.monitoring.releaseMarks.button" />
+		</html:button>
+		<html:form action="/monitoring" style="display:inline">
+			<html:hidden property="method" value="downloadMarks" />
+			<html:hidden property="toolSessionID" value="${sessionDto.sessionID}" />
+			<html:submit property="downloadMarks" styleClass="btn btn-default loffset5 voffset10" >
+				<fmt:message key="label.monitoring.downloadMarks.button" />
+			</html:submit>
+		</html:form>
+	</P>
 		
-		<!-- pager -->
-		<div class="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 selected="selected" value="10">10</option>
-					<option value="20">20</option>
-					<option value="30">30</option>
-					<option value="40">40</option>
-					<option value="50">50</option>
-					<option value="100">100</option>
-				</select>
-			</form>
-		</div>
-		</div>
+	<c:if test="${isGroupedActivity}">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+	${ !isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
 		
-		<table>
-		  <tr>
-			<td align="center"><html:link href="javascript:viewAllMarks(${sessionDto.sessionID});"
-				property="viewAllMarks" styleClass="button">
-				<fmt:message key="label.monitoring.viewAllMarks.button" />
-			</html:link></td>
-			<td align="center"><html:link href="javascript:releaseMarks(${sessionDto.sessionID});"
-				property="releaseMarks" styleClass="button">
-				<fmt:message key="label.monitoring.releaseMarks.button" />
-			</html:link></td>
-			<td align="center" style="border-bottom: 12px;border-bottom-color: gray;"><html:link href="javascript:downloadMarks(${sessionDto.sessionID});"
-				property="downloadMarks" styleClass="button">
-				<fmt:message key="label.monitoring.downloadMarks.button" />
-			</html:link></td>
-		</tr>
-	</table>
-	<br/>
 </c:forEach>
 
-<br/>
 
-<h1 style="padding-bottom: 10px;">
-	<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>
-
-<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" />
@@ -288,7 +239,7 @@
 			</c:choose>	
 		</td>
 	</tr>
-	
+		
 	<tr>
 		<td>
 			<fmt:message key="label.limit.number.upload" />
@@ -322,6 +273,7 @@
 			</c:choose>	
 		</td>
 	</tr>
+	
 	<tr>
 		<td>
 			<fmt:message key="label.authoring.advanced.notify.onfilesubmit" />
@@ -338,6 +290,7 @@
 			</c:choose>	
 		</td>
 	</tr>
+	
 	<tr>
 		<td>
 			<fmt:message key="monitor.summary.td.addNotebook" />
@@ -365,9 +318,9 @@
 					<lams:out value="${authoring.reflectInstructions}" escapeHtml="true"/>	
 				</td>
 			</tr>
-		</c:when>
+	</c:when>
 	</c:choose>
 </table>
-</div>
+</lams:AdvancedAccordian>		
 
 <%@include file="daterestriction.jsp"%>
\ No newline at end of file