Index: lams_tool_notebook/src/java/org/lamsfoundation/lams/tool/notebook/util/NotebookConstants.java
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0883d2881bdb1b40071f47d5de807c59a75f6c62
--- lams_tool_notebook/src/java/org/lamsfoundation/lams/tool/notebook/util/NotebookConstants.java	(.../NotebookConstants.java)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_notebook/src/java/org/lamsfoundation/lams/tool/notebook/util/NotebookConstants.java	(.../NotebookConstants.java)	(revision 0883d2881bdb1b40071f47d5de807c59a75f6c62)
@@ -63,6 +63,7 @@
     public static final String PARAM_ENTRY = "entry";
     public static final String PARAM_NAME = "userName";
     public static final String PARAM_MODIFIED_DATE = "lastEdited";
+    public static final String PARAM_MODIFIED_DATE_TIMEAGO = "lastEditedTimeago";
     public static final String PARAM_COMMENT = "comment";
     public static final String PARAM_COMMENT_SORT = "commentsort"; // used to trigger sorting on comments
 
Index: lams_tool_notebook/src/java/org/lamsfoundation/lams/tool/notebook/web/actions/MonitoringAction.java
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0883d2881bdb1b40071f47d5de807c59a75f6c62
--- lams_tool_notebook/src/java/org/lamsfoundation/lams/tool/notebook/web/actions/MonitoringAction.java	(.../MonitoringAction.java)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_notebook/src/java/org/lamsfoundation/lams/tool/notebook/web/actions/MonitoringAction.java	(.../MonitoringAction.java)	(revision 0883d2881bdb1b40071f47d5de807c59a75f6c62)
@@ -167,6 +167,8 @@
 		Date modifiedDate = (Date) userAndReflection[2];
 		responseRow.put(NotebookConstants.PARAM_MODIFIED_DATE,
 			DateUtil.convertToStringForJSON(modifiedDate, request.getLocale()));
+		responseRow.put(NotebookConstants.PARAM_MODIFIED_DATE_TIMEAGO, 
+			DateUtil.convertToStringForTimeagoJSON(modifiedDate));
 	    } else {
 		responseRow.put(NotebookConstants.PARAM_MODIFIED_DATE, noEntry);
 	    }
Index: lams_tool_notebook/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7712648410bc57755e64aa3cc3488d3070d67aa4 -r0883d2881bdb1b40071f47d5de807c59a75f6c62
--- lams_tool_notebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7712648410bc57755e64aa3cc3488d3070d67aa4)
+++ lams_tool_notebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 0883d2881bdb1b40071f47d5de807c59a75f6c62)
@@ -1,49 +1,261 @@
 <%@ tag body-content="scriptless"%>
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
 
 <%@ attribute name="type" required="true" rtexprvalue="true"%>
 <%@ attribute name="style" required="false" rtexprvalue="true"%>
 <%@ attribute name="title" required="false" rtexprvalue="true"%>
 <%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
 <%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
 
+			
+<c:choose>
 
-
-<div class="row no-gutter">
-	<div class="col-xs-12">
+	<c:when test='${type == "navbar"}'>
+	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
+		<div class="row no-gutter">
+		<div class="col-xs-12">
 		<div class="container" id="content">
+		<jsp:doBody />
+		</div>
+		</div>
+		</div>
+	</c:when> 
+
+	<c:when test='${type == "learner"}'>
+	<%-- Learner --%>
+	
+		<%-- Links placed in body instead of head. Ugly, but it works. --%>
+		<link rel="stylesheet" href="<lams:LAMSURL/>css/progressBar.css" type="text/css" />
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
 		
-		<c:choose>
-		<c:when test='${type == "navbar"}'>
-			<jsp:doBody />
-		</c:when> 
-		<c:otherwise>
-			<div class="panel panel-default panel-${type}-page">
-				<c:if test="${not empty title}">
-					<div class="panel-heading">
-						<div class="panel-title panel-${type}-title">
-							<c:out value="${title}" escapeXml="true" />
-							<c:if test="${not empty titleHelpURL}">
-								<span class="pull-right">${titleHelpURL}</span>
-							</c:if>
-						</div>
-						<c:if test="${not empty headingContent}">
-							<c:out value="${headingContent}" escapeXml="true" />
+		<c:if test="${empty lessonID}">
+			<%-- Desperately try to get tool session ID from the tool activity --%>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolSessionId" value="${param.toolSessionId}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:set var="toolForm" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+				<c:set var="toolSessionId" value="${toolForm.toolSessionID}" />
+			</c:if>
+			<c:if test="${empty toolSessionId}">
+				<c:if test="${empty sessionMapID}">
+					<c:set var="sessionMapID" value="${param.sessionMapID}"/>
+				</c:if>
+				<c:set var="toolSessionId" value="${sessionScope[sessionMapID].toolSessionID}" />
+			</c:if>
+		</c:if>
+		
+		<script type="text/javascript">
+			var allowRestart = false,
+				restartLessonConfirmation = "Are you sure you want to start the lesson from the beginning?",
+				toolSessionId = '${toolSessionId}',
+				lessonId = '${lessonID}',
+				
+				LAMS_URL = '<lams:LAMSURL/>',
+				APP_URL = LAMS_URL + 'learning/',
+						
+				bars = {
+					'learnerMainBar' : {
+						'containerId' : 'progressBarDiv'
+					}
+				};
+
+			function restartLesson(){
+				if (confirm(restartLessonConfirmation)) {
+					window.location.href = APP_URL + 'learner.do?method=restartLesson&lessonID=' + lessonId;
+				}
+			}
+
+			function viewNotebookEntries(){
+				openPopUp(APP_URL + "notebook.do?method=viewAll&lessonID=" + lessonId,
+						"Notebook",
+						570,796,
+						"no");
+				hideSlideMenu(); /* For touch screen */
+			}
+		
+			function closeWindow() {
+	 			top.window.close();
+			}
+
+			function toggleSlideMenu() {	
+				if ( $("nav.sidebar").hasClass("expandmenu") ) {
+					hideSlideMenu();
+				}
+				else 
+					$("nav.sidebar").addClass("expandmenu");
+			}
+
+			function hideSlideMenu() {	
+				$("nav.sidebar").removeClass("expandmenu");
+			}
+			
+			function onProgressBarLoaded() {
+				$('#exitlabel').html(LABELS.EXIT);
+				$('#notebooklabel').html(LABELS.NOTEBOOK);
+				if ( allowRestart ) {
+					$('#restartlabel').html(LABELS.RESTART);
+					restartLessonConfirmation = LABELS.CONFIRM_RESTART;
+					$('#restartitem').show();
+				}
+			}
+			
+			$(document).ready(function() {
+				var showControlBar = true;
+				var showIM = true;
+				debugger;
+				if ( window.frameElement ) {
+					var myId = window.frameElement.id;
+					if ( myId ) {
+						if ( myId == 'lamsDynamicFrame0' ) {
+							showIM = false;
+						} else if ( myId == 'lamsDynamicFrame1' ) {
+							showControlBar = false;
+						}
+					}
+				}
+
+					debugger;
+				if ( lessonId != "" || toolSessionId != "" ) {
+					$.ajax({
+						url : APP_URL + 'learner.do',
+						data : {
+							'method'   : 'getLessonDetails',
+							'lessonID' : lessonId,
+							'toolSessionID' : toolSessionId,
+						},
+						cache : false,
+						dataType : 'json',
+						success : function(result) {
+							
+							debugger;
+							lessonId = result.lessonID;
+							
+							if ( showControlBar ) {
+								allowRestart = result.allowRestart;
+								$('.lessonName').html(result.title);
+								fillProgressBar('learnerMainBar');
+								$('#sidebar').show();
+							}
+							
+							var presenceEnabledPatch = result.presenceEnabledPatch;
+							var presenceImEnabled = result.presenceImEnabled;
+							if ( showIM && (presenceEnabledPatch || presenceImEnabled) ) {
+								presenceURL = APP_URL+"presenceChat.jsp?presenceEnabledPatch="+presenceEnabledPatch
+										+"&presenceImEnabled="+presenceImEnabled+"&lessonID="+lessonId;
+								$('#presenceEnabledPatchDiv').load(presenceURL, function( response, status, xhr ) {
+									if ( status == "error" ) {
+										alert("Unable to load IM: " + xhr.status);
+									} 
+								});
+							}
+						}
+					});
+				}
+			});
+			
+		</script>
+	
+		<nav class="navbar navbar-default sidebar" id="sidebar" role="navigation" onMouseEnter="javascript:toggleSlideMenu()" onMouseLeave="javascript:hideSlideMenu()" style="display:none" >
+		    <div class="container-fluid">
+				<!-- Brand and toggle get grouped for better mobile display -->
+				<div class="navbar-header">
+					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
+						<span class="sr-only">Toggle navigation</span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+					</button>
+					<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#"><span class="lessonName"></span></a>
+				</div>
+				<!-- Collect the nav links, forms, and other content for toggling -->
+				<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
+					<ul class="nav navbar-nav">
+						<li><a href="#" class="hidden-xs visible-sm visible-md visible-lg slidesidemenu" onClick="javascript:toggleSlideMenu()">
+							<i class="pull-right fa fa-bars" style="color:#337ab7"></i>
+							<p class="lessonName"></p></a></li>
+						<li><a href="#" onClick="javascript:closeWindow()" ><span id="exitlabel">ExitX</span><i class="pull-right fa fa-times"></i></a></li>
+						<li><a href="#" onClick="javascript:viewNotebookEntries()" ><span id="notebooklabel">NotebookX</span><i class="pull-right fa fa-book"></i></a></li>
+						<li id="restartitem" style="display:none"><a href="#" onClick="javascript:restartLesson()"><span id="restartlabel">RestartX</span><i class="pull-right fa fa-recycle"></i></a></li>
+						<li><a href="#" class="slidesidemenu" onClick="javascript:toggleSlideMenu()">
+							<i class="pull-right fa fa-map"></i></a>
+							<div id="progressBarDiv" class="progressBarContainer"></div></li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+
+		<div class="content">
+	
+			<div class="row no-gutter">
+			<div class="col-xs-12">
+			<div class="container">
+					<div class="panel panel-default panel-${type}-page">
+						<c:if test="${not empty title}">
+							<div class="panel-heading">
+								<div class="panel-title panel-${type}-title">
+									<c:out value="${title}" escapeXml="true" />
+									<c:if test="${not empty titleHelpURL}">
+										<span class="pull-right">${titleHelpURL}</span>
+									</c:if>
+								</div>
+								<c:if test="${not empty headingContent}">
+									<c:out value="${headingContent}" escapeXml="true" />
+								</c:if>
+							</div>
 						</c:if>
+						
+						<div class="panel-body panel-${type}-body">
+							<jsp:doBody />
+						</div>
 					</div>
-				</c:if>
-				<div class="panel-body panel-${type}-body">
-					<jsp:doBody />
+					
+						<div id="presenceEnabledPatchDiv"></div>
+						
+			</div>
 				</div>
 			</div>
-		</c:otherwise>
-		</c:choose>
-			
-		</div>
-		<!-- End content container -->
 	</div>
-</div>
 
+	</c:when>
 
+	<c:otherwise>
+	<!-- Standard Screens  --> 
+		<div class="row no-gutter">
+		<div class="col-xs-12">
+		<div class="container" id="content">
 		
+		<div class="panel panel-default panel-${type}-page">
+			<c:if test="${not empty title}">
+				<div class="panel-heading">
+					<div class="panel-title panel-${type}-title">
+						<c:out value="${title}" escapeXml="true" />
+						<c:if test="${not empty titleHelpURL}">
+							<span class="pull-right">${titleHelpURL}</span>
+						</c:if>
+					</div>
+					<c:if test="${not empty headingContent}">
+						<c:out value="${headingContent}" escapeXml="true" />
+					</c:if>
+				</div>
+			</c:if>
 			
+			<div class="panel-body panel-${type}-body">
+				<jsp:doBody />
+			</div>
+		</div>
+		</div>
+		</div>
+		</div>
+	</c:otherwise>
+</c:choose>
+
+
+		
+			
\ No newline at end of file
Index: lams_tool_notebook/web/pages/monitoring/headItems.jsp
===================================================================
diff -u -r326a22552c270b321496ebb84887c1124f1881f1 -r0883d2881bdb1b40071f47d5de807c59a75f6c62
--- lams_tool_notebook/web/pages/monitoring/headItems.jsp	(.../headItems.jsp)	(revision 326a22552c270b321496ebb84887c1124f1881f1)
+++ lams_tool_notebook/web/pages/monitoring/headItems.jsp	(.../headItems.jsp)	(revision 0883d2881bdb1b40071f47d5de807c59a75f6c62)
@@ -17,4 +17,6 @@
 <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" src="<lams:LAMSURL />/includes/javascript/jquery.timeago.js"></script>
+
 <script type="text/javascript" src="${tool}includes/javascript/monitoring.js"></script>
\ No newline at end of file
Index: lams_tool_notebook/web/pages/monitoring/summary.jsp
===================================================================
diff -u -rbd5c8d7950febbad5a934b0958ff2eaf29397199 -r0883d2881bdb1b40071f47d5de807c59a75f6c62
--- lams_tool_notebook/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision bd5c8d7950febbad5a934b0958ff2eaf29397199)
+++ lams_tool_notebook/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 0883d2881bdb1b40071f47d5de807c59a75f6c62)
@@ -72,11 +72,18 @@
 						} else {
 							jQuery("#group${sessionId}").setCell(rowId, 'commentsort','<fmt:message key="label.no" />');
 						}
+ 	                	var lastEdited = jQuery("#group${sessionId}").getCell(rowId, 'lastEdited');
+ 	                	var lastEditedTimeagoFormat = jQuery("#group${sessionId}").getCell(rowId, 'lastEditedTimeago');
+ 	                	if ( lastEditedTimeagoFormat && lastEditedTimeagoFormat.length > 0) {
+ 	                		jQuery("#group${sessionId}").setCell(rowId, 'lastEditedTimeagoOutput', 
+ 	                				'<time class="timeago" title="'+lastEdited+'" datetime="'+lastEditedTimeagoFormat+'"></time>'); 
+ 	                	}
  	                	var entry = jQuery("#group${sessionId}").getCell(rowId, 'entry');
  	                	if (entry && entry.length > 0) {
  	                		$("#group${sessionId}").expandSubGridRow(rowId);
  	                	}
  	                });
+ 	               $("time.timeago").timeago();
  	            },
  				subGridRowExpanded: function(subgridDivId, rowId) {
  					var subgrid = jQuery("#"+subgridDivId);
@@ -129,6 +136,8 @@
 						'userUid',
 						"<fmt:message key="label.user.name" />",
 					    "<fmt:message key="label.lastModified" />",
+					    "<fmt:message key="label.lastModified" />",
+					    "<fmt:message key="label.lastModified" />",
 					    'entry',
 					    "<fmt:message key="label.comment" />",  // comment summary for sorting
 					    'actualComment'],
@@ -137,7 +146,9 @@
 			   		{name:'id',index:'id', width:10, hidden: true, search: false},
 			   		{name:'userUid',index:'userUid', width:0, hidden: true, search: false},
 			   		{name:'userName',index:'userName', width:200},
-			   		{name:'lastEdited',index:'lastEdited', width:120, search: false},		
+			   		{name:'lastEdited',index:'lastEdited', hidden: true, width:0, search: false},		
+			   		{name:'lastEditedTimeago',index:'lastEditedTimeago', hidden: true, width:0,  search: false},		
+			   		{name:'lastEditedTimeagoOutput',index:'lastEditedTimeagoOutput', width:120, search: false},		
 			   		{name:'entry',index:'entry', hidden: true, width:0, search: false},	
 			   		{name:'commentsort',index:'commentsort', width:40, search: false },
 			   		{name:'comment',index:'comment', hidden: true, width:0, search: false}		
@@ -166,6 +177,7 @@
             });
         };
         setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
+
 	});
 
 </script>