Index: lams_central/web/css/components.css
===================================================================
diff -u -rccc1c4ab6e987bbf3680c88de5eca4ab1eb38bc7 -r84204c571e0ab10c9006730dc413cebec8a66167
--- lams_central/web/css/components.css	(.../components.css)	(revision ccc1c4ab6e987bbf3680c88de5eca4ab1eb38bc7)
+++ lams_central/web/css/components.css	(.../components.css)	(revision 84204c571e0ab10c9006730dc413cebec8a66167)
@@ -424,23 +424,8 @@
 	color: #ACB5CC;
 }
 
-.component-page-wrapper .graph-con {
-	position: relative;
-	min-height: 12rem;
-	width: calc(100% - 8rem);
-}
-
-.component-page-wrapper .graph-con #myChart {
-	width: 25rem !important;
-	height: 12rem !important;
-	margin-left: -5rem;
-	margin-bottom: -5rem;
-	border: 0;
-}
-
 .component-page-wrapper .graph-col {
-	display: flex;
-	justify-content: space-between;
+		
 }
 
 .component-page-wrapper .graph-col ul {
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -rccc1c4ab6e987bbf3680c88de5eca4ab1eb38bc7 -r84204c571e0ab10c9006730dc413cebec8a66167
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision ccc1c4ab6e987bbf3680c88de5eca4ab1eb38bc7)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 84204c571e0ab10c9006730dc413cebec8a66167)
@@ -46,83 +46,23 @@
 	padding-left: 4.8rem;
 }
 
-/*
-.monitoring-page-wrapper .component-sidebar .menu-li a svg .c,
-	.monitoring-page-wrapper .component-sidebar .menu-li a svg .d,
-	.monitoring-page-wrapper .component-sidebar .menu-li a svg rect {
-	stroke: #ACB5CC;
-	transition: all .3s ease;
+.monitoring-page-content {
+	vertical-align: top;
+	text-align: center;	
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li a svg .a,
-	.monitoring-page-wrapper .component-sidebar .menu-li a svg .b {
-	stroke: transparent;
-	transition: all .3s ease;
+.monitoring-page-content .monitoring-layout-element {
+	display: inline-block;
+	max-width: 80%;
+	min-width: 30%;
+	margin-bottom: 2rem;
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li a svg rect.b {
-	fill: transparent;
-	stroke: #ACB5CC;
-	transition: all .3s ease;
+.monitoring-page-content .monitoring-layout-element > div {
+	margin: 1.8rem auto 0 auto;
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .a
-	{
-	stroke: #ACB5CC;
-}
-
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .b
-	{
-	stroke: transparent;
-}
-
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg rect.b,
-	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg .d,
-	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg .c
-	{
-	stroke: #3C42E0;
-}
-
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg rect.b,
-	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg .d,
-	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg .c
-	{
-	stroke: #3C42E0;
-}
-
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3):hover a svg .a
-	{
-	stroke: #3C42E0;
-}
-
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3).active a svg .a
-	{
-	stroke: #3C42E0;
-}
-
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(4):hover a svg path.b
-	{
-	fill: #3C42E0;
-}
-*/
-
-.monitoring-page-wrapper .top-menu-btn a:nth-child(3) img {
-	width: 1.3rem;
-}
-
-.monitoring-page-wrapper .content-left {
-	-ms-flex: 0 0 26.5rem;
-	flex: 0 0 26.5rem;
-	max-width: 26.5rem;
-}
-
-.monitoring-page-wrapper .content-right {
-	-ms-flex: 0 0 calc(100% - 26.5rem);
-	flex: 0 0 calc(100% - 26.5rem);
-	max-width: calc(100% - 26.5rem);
-}
-
-.monitoring-page-wrapper .graph-grades {
+.monitoring-page-content .graph-grades {
 	background-color: #fff;
 	box-shadow: 0px 20px 20px #2E384D1A;
 	border-radius: 1.2rem;
@@ -132,16 +72,16 @@
 	justify-content: space-between;
 }
 
-.monitoring-page-wrapper .graph-star-col {
+.monitoring-page-content .graph-star-col {
 	width: 5rem;
 }
 
-.monitoring-page-wrapper .graph-star-col img {
+.monitoring-page-content .graph-star-col img {
 	width: 3rem;
 	max-width: 100%;
 }
 
-.monitoring-page-wrapper .graph-star-col p {
+.monitoring-page-content .graph-star-col p {
 	color: #ACB5CC;
 	font-family: mont-bold, sans-serif;
 	text-transform: uppercase;
@@ -151,11 +91,11 @@
 	letter-spacing: 2px;
 }
 
-.monitoring-page-wrapper .grades-progress-col {
+.monitoring-page-content .grades-progress-col {
 	width: calc(100% - 5rem);
 }
 
-.monitoring-page-wrapper .grades-score p {
+.monitoring-page-content .grades-score p {
 	width: 6rem;
 	text-align: right;
 	color: #2E384D;
@@ -165,13 +105,13 @@
 	margin-bottom: .5rem;
 }
 
-.monitoring-page-wrapper .grades-progress-bar {
+.monitoring-page-content .grades-progress-bar {
 	margin-bottom: .5rem;
 	padding-left: 1.5rem;
 	width: calc(100% - 6rem);
 }
 
-.monitoring-page-wrapper .grades-score p span {
+.monitoring-page-content .grades-score p span {
 	color: #ACB5CC;
 	margin-right: .4rem;
 }
@@ -307,28 +247,40 @@
 	margin-bottom: 2rem;
 }
 
-.monitoring-page-wrapper #required-tasks-content .row {
+.monitoring-page-wrapper #completion-chart-panel {
+	max-width: 300px;
+	min-width: 250px
+}
+
+.monitoring-page-wrapper #chartDiv {
+  width: 200px;
+  height: 200px;
+  padding: 0;
+}
+
+
+.monitoring-page-wrapper #required-tasks .row {
 	margin-bottom: 1.5rem;
 }
 
-.monitoring-page-wrapper #required-tasks-content .label {
+.monitoring-page-wrapper #required-tasks .label {
 	color: #2E384D;
 	font-family: mont-regular, sans-serif;
 	font-size: .8rem;
 	margin: 0;
 }
 
-.monitoring-page-wrapper #required-tasks-content .label.contribute-activity-title
+.monitoring-page-wrapper #required-taskst .label.contribute-activity-title
 	{
 	font-family: mont-bold, sans-serif;
 }
 
-.monitoring-page-wrapper #required-tasks-content .badge {
+.monitoring-page-wrapper #required-tasks .badge {
 	padding: .5rem 1rem;
 	vertical-align: middle;
 }
 
-.monitoring-page-wrapper #required-tasks-content button {
+.monitoring-page-wrapper #required-tasks button {
 	background-color: #3C42E0;
 	border: 0;
 	color: #fff;
@@ -337,27 +289,26 @@
 	box-shadow: 0px 3px 6px #3C42E040;
 }
 
-.monitoring-page-wrapper #required-tasks-content button.contribute-gate-opened-button
+.monitoring-page-wrapper #required-tasks button.contribute-gate-opened-button
 	{
 	background-color: #05CCD6;
 }
 
-.monitoring-page-wrapper #required-tasks-content button.contribute-go-button
+.monitoring-page-wrapper #required-tasks button.contribute-go-button
 	{
 	min-width: 5rem;
 }
 
-.monitoring-page-wrapper #required-tasks-content button:hover {
+.monitoring-page-wrapper #required-tasks button:hover {
 	background-color: #878bea;
 }
 
-.monitoring-page-wrapper #required-tasks-content .dropdown-item {
+.monitoring-page-wrapper #required-tasks .dropdown-item {
 	font-size: .8rem;
 }
 
 .monitoring-page-wrapper .insight-col-content p {
 	margin: 0;
-	width: 100%;
 	color: #2E384D;
 	font-size: .78rem;
 	margin-bottom: 1rem;
@@ -821,14 +772,14 @@
   overflow: auto;
 }
 
-#chartDiv {
-  width: 200px;
-  height: 200px;
-  padding: 0;
+/********** CANVAS STYLES **********/
+#canvas-container {
+	float: right;
+	min-width: 50%;
+	max-width: 1000px;
+	margin-bottom: 2rem;
 }
 
-
-/********** CANVAS STYLES **********/
 #canvas-container div#sequenceCanvas {
 	width: 100%;
 	display: flex;
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rdec809c7a193cb1e2ba92e718ba5daa48d4c2ad5 -r84204c571e0ab10c9006730dc413cebec8a66167
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision dec809c7a193cb1e2ba92e718ba5daa48d4c2ad5)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 84204c571e0ab10c9006730dc413cebec8a66167)
@@ -71,8 +71,13 @@
 
 function updateContributeActivities(contributeActivities) {
 	let requiredTasksPanel = $('#required-tasks'),
-		requiredTasksContent = $('#required-tasks-content', requiredTasksPanel),
-		row = null;
+		requiredTasksContent = $('#required-tasks-content', requiredTasksPanel);
+		
+	if (!contributeActivities || contributeActivities.length === 0) {
+		requiredTasksPanel.remove();
+		return;
+	}
+	
 	$('.contribute-row', requiredTasksContent).remove();
 	
 	/*
@@ -89,22 +94,16 @@
 		row = row.append(cell);
 	}
 	*/
-	
+
 	if (contributeActivities) {
 		$.each(contributeActivities, function(){
 			let contributeActivity = this;
-			if (contributeActivity.title) {
-				$('<div />').addClass('label contribute-activity-title contribute-row')
-							.text(contributeActivity.title)
-							.attr('id', 'contribute' + contributeActivity.activityID)
-							.appendTo(requiredTasksContent);
-			}
 			
 			let row = $('<div />').addClass('row contribute-row' + (contributeActivity.title ? ' ml-1' : ''))
 								  .appendTo(requiredTasksContent);
 			
 			$.each(this.contributeEntries, function(){
-				var entryContent = '<div class="col-3 label">';
+				var entryContent = '<div class="col-8 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;
@@ -113,7 +112,10 @@
 					case 11 : entryContent += LABELS.CONTRIBUTE_CONTENT_EDITED; break; 
 					case 12 : entryContent += LABELS.CONTRIBUTE_GATE_PASSWORD; break; 
 				}
-				entryContent += '</div><div class="col-9 text-right">';
+				if (contributeActivity.title) {
+					entryContent += ')</small>';
+				}
+				entryContent += '</div><div class="col-4 text-right">';
 				switch (this.contributionType) {
 					case 3  : 
 					case 12 : if (this.isComplete) {
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -rccc1c4ab6e987bbf3680c88de5eca4ab1eb38bc7 -r84204c571e0ab10c9006730dc413cebec8a66167
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision ccc1c4ab6e987bbf3680c88de5eca4ab1eb38bc7)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 84204c571e0ab10c9006730dc413cebec8a66167)
@@ -9,7 +9,6 @@
 
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.min.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/all.css">
-	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome6/css/v4-shim.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
 	<link rel="stylesheet" href="<lams:WebAppURL/>css/components-monitoring.css">
 	<link rel="stylesheet" href="<lams:WebAppURL/>css/components-monitoring-responsive.css">
@@ -248,135 +247,137 @@
 				</div>
 			</div>
 		</header>
-		<div class="row pt-5">
-			<div class="col-12 col-md-3 content-left">
-				<div class="graph-col monitoring-panel">
-					<h6><fmt:message key="lesson.chart.title"/></h6>
-					<div id="chartDiv" class="panel-body"></div>
-				
+		
+		<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="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 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="graph-grades">
-					<div class="graph-star-col">
-						<img src="<lams:LAMSURL/>images/components/star.png" alt="#" />
-						<p>grades</p>
-					</div>
-					<div class="grades-progress-col">
-						<div class="grades-left">
-							<div class="grades-score d-flex">
-								<p><span>High:</span> 99</p>
-								<div class="grades-progress-bar">
-									<div class="progress-div" id="progress-bar-1" style="width: 99%">
-										<span></span>
-									</div>
+		<div class="monitoring-layout-element">
+			<div class="graph-grades">
+				<div class="graph-star-col">
+					<img src="<lams:LAMSURL/>images/components/star.png" alt="#" />
+					<p>grades</p>
+				</div>
+				<div class="grades-progress-col">
+					<div class="grades-left">
+						<div class="grades-score d-flex">
+							<p><span>High:</span> 99</p>
+							<div class="grades-progress-bar">
+								<div class="progress-div" id="progress-bar-1" style="width: 99%">
+									<span></span>
 								</div>
 							</div>
-							<div class="grades-score d-flex">
-								<p><span>Median:</span> 68</p>
-								<div class="grades-progress-bar">
-									<div class="progress-div" id="progress-bar-2" style="width: 68%">
-										<span></span>
-									</div>
+						</div>
+						<div class="grades-score d-flex">
+							<p><span>Median:</span> 68</p>
+							<div class="grades-progress-bar">
+								<div class="progress-div" id="progress-bar-2" style="width: 68%">
+									<span></span>
 								</div>
 							</div>
-							<div class="grades-score d-flex">
-								<p><span>Low:</span> 28</p>
-								<div class="grades-progress-bar">
-									<div class="progress-div" id="progress-bar-3" style="width: 28%">
-										<span></span>
-									</div>
+						</div>
+						<div class="grades-score d-flex">
+							<p><span>Low:</span> 28</p>
+							<div class="grades-progress-bar">
+								<div class="progress-div" id="progress-bar-3" style="width: 28%">
+									<span></span>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="score-col">
-					<div class="row">
-						<div class="col-12 col-sm-6">
-							<div class="score-col-inner" id="score-col1">
-								<h1>8<span>%</span></h1>
-								<p>Students <br>at risk</p>
-								<img src="<lams:LAMSURL/>images/components/icon1.png" alt="#" />
-							</div>
-						</div>
-						<div class="col-12 col-sm-6">
-							<div class="score-col-inner" id="score-col2">
-								<h1>98<span>%</span></h1>
-								<p>Average <br>Score</p>
-								<img src="<lams:LAMSURL/>images/components/icon2.png" alt="#" />
-							</div>
-						</div>
+			</div>
+		</div>	
+						
+		<div class="monitoring-layout-element">
+			<div class="row">
+				<div class="col-12 col-sm-6">
+					<div class="score-col-inner" id="score-col1">
+						<h1>8<span>%</span></h1>
+						<p>Students <br>at risk</p>
+						<img src="<lams:LAMSURL/>images/components/icon1.png" alt="#" />
 					</div>
 				</div>
-			</div>
-			<div id="canvas-container" class="svg-learner-draggable-area h-100 col-12 col-md-9 content-right">
-				<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 class="col-12 col-sm-6">
+					<div class="score-col-inner" id="score-col2">
+						<h1>98<span>%</span></h1>
+						<p>Average <br>Score</p>
+						<img src="<lams:LAMSURL/>images/components/icon2.png" alt="#" />
+					</div>
 				</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="row">
-			<div id="required-tasks" class="col-12 col-md-6 mb-4">
-				<div id="required-tasks-content" class="monitoring-panel">
-					<h6><fmt:message key="lesson.required.tasks"/></h6>
+
+		<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 class="col-12 col-md-6 mb-4">
-				<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>
-		</div>
+		</div>	
 	</div>
 </div>