Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -rbe7ab07a858dcfbf199f24b66f730c4a240df24e -r0566214ac49eed87e266c749887a82c1bacb7f4f
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision be7ab07a858dcfbf199f24b66f730c4a240df24e)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 0566214ac49eed87e266c749887a82c1bacb7f4f)
@@ -112,17 +112,9 @@
 	margin-top: .5rem;
 }
 
-.monitoring-page-content .monitoring-layout-element {
-	display: inline-block;
-	max-width: 80%;
-	min-width: 30%;
-	margin-bottom: 2rem;
-}
 
-.monitoring-page-content .monitoring-layout-element > div {
-	margin: 0 auto;
-}
 
+
 .monitoring-page-content .graph-grades {
 	background-color: #fff;
 	box-shadow: 0px 20px 20px #2E384D1A;
@@ -291,10 +283,10 @@
 }
 
 .monitoring-page-wrapper .monitoring-panel {
+	display: inline-block;
 	box-shadow: 0px 20px 20px #2E384D1A;
 	background-color: #fff;
 	border-radius: 1.2rem;
-	margin-bottom: 2rem;
 	padding: 1.5rem 2rem;
 }
 
@@ -318,6 +310,9 @@
   padding: 0;
 }
 
+.monitoring-page-wrapper #required-tasks {
+	min-width: 350px;
+}
 
 .monitoring-page-wrapper #required-tasks .row {
 	margin-bottom: 1.5rem;
@@ -349,13 +344,11 @@
 	box-shadow: 0px 3px 6px #3C42E040;
 }
 
-.monitoring-page-wrapper #required-tasks button.contribute-gate-opened-button
-	{
+.monitoring-page-wrapper #required-tasks button.contribute-gate-opened-button {
 	background-color: #05CCD6;
 }
 
-.monitoring-page-wrapper #required-tasks button.contribute-go-button
-	{
+.monitoring-page-wrapper #required-tasks button.contribute-go-button {
 	min-width: 5rem;
 }
 
@@ -367,6 +360,10 @@
 	font-size: .8rem;
 }
 
+.monitoring-page-wrapper #insights {
+	min-width: 350px;
+}
+
 .monitoring-page-wrapper .insight-col-content p {
 	margin: 0;
 	color: #2E384D;
@@ -833,13 +830,6 @@
 }
 
 /********** CANVAS STYLES **********/
-#canvas-container {
-	float: right;
-	min-width: 50%;
-	max-width: 1000px;
-	margin-bottom: 2rem;
-}
-
 #canvas-container div#sequenceCanvas {
 	width: 100%;
 	display: flex;
@@ -1127,6 +1117,8 @@
 	line-height: 200px;
 }
 
+
+
 .learners-accordion-item-template {
 	display: none;
 }
@@ -1142,4 +1134,8 @@
 #learners-accordion .vertical-timeline {
 	display: none;
 	transform: translateX(-25%);
-}
\ No newline at end of file
+}
+
+#learners-accordion .vertical-timeline:before  {
+	bottom: 30px;
+}	
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -r2b597b0a7065de9c0d4fe6ab70273268afd01f8d -r0566214ac49eed87e266c749887a82c1bacb7f4f
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 2b597b0a7065de9c0d4fe6ab70273268afd01f8d)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 0566214ac49eed87e266c749887a82c1bacb7f4f)
@@ -14,7 +14,7 @@
 	sequenceRefreshInProgress = false,
 
 //auto refresh all tabs every 30 seconds
-	autoRefreshInterval = 30 * 1000,
+	autoRefreshInterval = 99990 * 1000,
 	autoRefreshIntervalObject = null,
 // when user is doing something, do not auto refresh
 	autoRefreshBlocked = false,
@@ -702,7 +702,7 @@
 								  .appendTo(requiredTasksContent);
 			
 			$.each(this.contributeEntries, function(){
-				var entryContent = '<div class="col-8 label">' + (contributeActivity.title ? '<b>' + contributeActivity.title + '</b><br>(<small>' : '');
+				var entryContent = '<div class="col label">' + (contributeActivity.title ? '<b>' + contributeActivity.title + '</b><br>(<small>' : '');
 				switch (this.contributionType) {
 					case 3  : entryContent += LABELS.CONTRIBUTE_GATE; break;
 					case 6  : entryContent += LABELS.CONTRIBUTE_GROUPING; break;
@@ -714,7 +714,7 @@
 				if (contributeActivity.title) {
 					entryContent += ')</small>';
 				}
-				entryContent += '</div><div class="col-4 text-right">';
+				entryContent += '</div><div class="col text-right">';
 				switch (this.contributionType) {
 					case 3  : 
 					case 12 : if (this.isComplete) {
Index: lams_monitoring/web/monitor-sequence-tab.jsp
===================================================================
diff -u -r8b539226552978ff77efe129fff621ec8b660f59 -r0566214ac49eed87e266c749887a82c1bacb7f4f
--- lams_monitoring/web/monitor-sequence-tab.jsp	(.../monitor-sequence-tab.jsp)	(revision 8b539226552978ff77efe129fff621ec8b660f59)
+++ lams_monitoring/web/monitor-sequence-tab.jsp	(.../monitor-sequence-tab.jsp)	(revision 0566214ac49eed87e266c749887a82c1bacb7f4f)
@@ -1,74 +1,94 @@
 <!DOCTYPE html>
 <%@ include file="/taglibs.jsp"%>
 
-<div id="canvas-container" class="svg-learner-draggable-area ms-5 text-start monitoring-panel">
-	<div id="sequenceTopButtonsContainer" class="topButtonsContainer">
-		<a id="liveEditButton" class="btn btn-sm btn-default" style="display:none" title="<fmt:message key='button.live.edit.tooltip'/>"
-	       href="#" onClick="javascript:openLiveEdit()">
-			<i class="fa fa-pencil"></i> <span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
-		</a>
-		<!-- 
-			<a id="canvasFitScreenButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.fit.screen.tooltip'/>"
-		       href="#" onClick="javascript:canvasFitScreen(true)">
-				<i class="fa fa-arrows-alt"></i> <span class="hidden-xs"><fmt:message key='button.canvas.fit.screen'/></span>
-			</a>
-			<a id="canvasOriginalSizeButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.original.size.tooltip'/>"
-		       href="#" onClick="javascript:canvasFitScreen(false)">
-				<i class="fa fa-arrow-circle-o-up"></i> <span class="hidden-xs"><fmt:message key='button.canvas.original.size'/></span>
-			</a>
-		 -->
-	</div>
-	<div id="sequenceCanvas"></div>
-	<div id="completedLearnersContainer" class="mt-2" title="<fmt:message key='force.complete.end.lesson.tooltip' />">
-		<img id="completedLessonLearnersIcon" src="<lams:LAMSURL/>images/completed.svg" />
-	</div>
-	<img id="sequenceCanvasLoading"
-	     src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
-	<img id="sequenceSearchedLearnerHighlighter"
-	     src="<lams:LAMSURL/>images/pedag_down_arrow.gif" />
-	<!--
-	<img src="<lams:LAMSURL/>images/components/user-map.png" alt="#" />
-	<div class="map-pn">
-		<span><img src="<lams:LAMSURL/>images/components/plus.svg" alt="#" /></span>
-		<span><img src="<lams:LAMSURL/>images/components/minus.svg" alt="#" /></span>
-	</div>
-	-->
-</div>
+<div class="container-fluid">
+	<div class="row">
+		<div class="col mb-5">
+			<div id="canvas-container" class="svg-learner-draggable-area ms-5 text-start monitoring-panel">
+				<div id="sequenceTopButtonsContainer" class="topButtonsContainer">
+					<a id="liveEditButton" class="btn btn-sm btn-default" style="display:none" title="<fmt:message key='button.live.edit.tooltip'/>"
+				       href="#" onClick="javascript:openLiveEdit()">
+						<i class="fa fa-pencil"></i> <span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
+					</a>
+					<!-- 
+						<a id="canvasFitScreenButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.fit.screen.tooltip'/>"
+					       href="#" onClick="javascript:canvasFitScreen(true)">
+							<i class="fa fa-arrows-alt"></i> <span class="hidden-xs"><fmt:message key='button.canvas.fit.screen'/></span>
+						</a>
+						<a id="canvasOriginalSizeButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.original.size.tooltip'/>"
+					       href="#" onClick="javascript:canvasFitScreen(false)">
+							<i class="fa fa-arrow-circle-o-up"></i> <span class="hidden-xs"><fmt:message key='button.canvas.original.size'/></span>
+						</a>
+					 -->
+				</div>
+				<div id="sequenceCanvas"></div>
+				<div id="completedLearnersContainer" class="mt-2" title="<fmt:message key='force.complete.end.lesson.tooltip' />">
+					<img id="completedLessonLearnersIcon" src="<lams:LAMSURL/>images/completed.svg" />
+				</div>
+				<img id="sequenceCanvasLoading"
+				     src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
+				<img id="sequenceSearchedLearnerHighlighter"
+				     src="<lams:LAMSURL/>images/pedag_down_arrow.gif" />
+				<!--
+				<img src="<lams:LAMSURL/>images/components/user-map.png" alt="#" />
+				<div class="map-pn">
+					<span><img src="<lams:LAMSURL/>images/components/plus.svg" alt="#" /></span>
+					<span><img src="<lams:LAMSURL/>images/components/minus.svg" alt="#" /></span>
+				</div>
+				-->
+			</div>
+		</div>
+		<div class="col">
+			<div class="row">
+				<div class="col mb-5">
+					<div id="completion-chart-panel" class="monitoring-panel">
+						<h6><fmt:message key="lesson.chart.title"/></h6>
+						<div id="chartDiv" class="panel-body"></div>
+						<!--
+						<div class="graph-con">
+							<canvas id="myChart" class="chartjs-render-monitor"></canvas>
+						</div>
+						<ul>
+							<li>
+								<h6>completion</h6>
+							</li>
+							<li>
+								<span class="graph-count"></span> - Not started
+							</li>
+							<li>
+								<span class="graph-count"></span> - In process
+							</li>
+							<li>
+								<span class="graph-count"></span> - Completed
+							</li>
+						</ul>
+						-->
+					</div>
+				</div>
+				<div class="col mb-5">
+					<div id="required-tasks" class="monitoring-panel">
+						<h6><fmt:message key="lesson.required.tasks"/></h6>
+						<div id="required-tasks-content"></div>
+					</div>
+				</div>
+				<div class="col mb-5">
+					<div id="insights" class="monitoring-panel">
+						<h6>insights</h6>
+						<div class="insight-col-content">
+							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem</p>
+							<p><a href="#">read more...</a></p>
+						</div>
+					</div>
+				</div>
+			</div>
 
-<div class="monitoring-layout-element">
-	<div id="completion-chart-panel" class="monitoring-panel">
-		<h6><fmt:message key="lesson.chart.title"/></h6>
-		<div id="chartDiv" class="panel-body"></div>
-		<!--
-		<div class="graph-con">
-			<canvas id="myChart" class="chartjs-render-monitor"></canvas>
 		</div>
-		<ul>
-			<li>
-				<h6>completion</h6>
-			</li>
-			<li>
-				<span class="graph-count"></span> - Not started
-			</li>
-			<li>
-				<span class="graph-count"></span> - In process
-			</li>
-			<li>
-				<span class="graph-count"></span> - Completed
-			</li>
-		</ul>
-		-->
 	</div>
 </div>
-	
+
+
+<!-- 
 <div class="monitoring-layout-element">
-	<div id="required-tasks" class="monitoring-panel">
-		<h6><fmt:message key="lesson.required.tasks"/></h6>
-		<div id="required-tasks-content"></div>
-	</div>
-</div>	
-		
-<div class="monitoring-layout-element">
 	<div class="graph-grades">
 		<div class="graph-star-col">
 			<img src="<lams:LAMSURL/>images/components/star.png" alt="#" />
@@ -123,13 +143,4 @@
 		</div>
 	</div>
 </div>
-
-<div class="monitoring-layout-element">
-	<div class="monitoring-panel insight-col">
-		<h6>insights</h6>
-		<div class="insight-col-content">
-			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem</p>
-			<p><a href="#">read more...</a></p>
-		</div>
-	</div>
-</div>	
\ No newline at end of file
+-->
\ No newline at end of file