Index: lams_central/web/css/components.css
===================================================================
diff -u -rcef0d9bb2b10841da2f2f948dcfd261f6ed7d644 -rbe7a59372762fcbc30a3bc00d449a7f1e4e2b0c6
--- lams_central/web/css/components.css	(.../components.css)	(revision cef0d9bb2b10841da2f2f948dcfd261f6ed7d644)
+++ lams_central/web/css/components.css	(.../components.css)	(revision be7a59372762fcbc30a3bc00d449a7f1e4e2b0c6)
@@ -26,7 +26,6 @@
 
 .component-page-wrapper {
 	border-radius: 2rem;
-	min-height: 100vh;
 	overflow: hidden;
 	background-color: #F6F5FA;
 }
@@ -262,11 +261,12 @@
 	margin-bottom: 1rem;
 }
 
-.component-page-wrapper .sidebar {
+.component-sidebar {
 	position: absolute;
 	height: 100%;
 	width: 7rem;
 	padding: 3.4rem 1.7rem 2rem 1.7rem;
+	border-radius: 2rem 0 0 2rem;
 	background-color: #fff;
 	text-align: center;
 	display: flex;
@@ -275,26 +275,26 @@
 	transition: all .3s ease;
 }
 
-.component-page-wrapper .sidebar.active {
+.component-sidebar.active {
 	transform: translateX(-7rem);
 }
 
-.component-page-wrapper .sidebar > ul {
+.component-sidebar > ul {
 	list-style: none;
 	padding: 0;
 	margin: 0;
 	margin-bottom: auto;
 }
 
-.component-page-wrapper .sidebar .logo-li {
+.component-sidebar .logo-li {
 	margin-bottom: 4rem;
 }
 
-.component-page-wrapper .sidebar .menu-li {
+.component-sidebar .menu-li {
 	margin-bottom: 1.8rem;
 }
 
-.component-page-wrapper .sidebar .menu-li a {
+.component-sidebar .menu-li a {
 	background-color: #3C42E01A;
 	display: inline-block;
 	width: 3rem;
@@ -305,7 +305,7 @@
 	cursor: pointer;
 }
 
-.component-page-wrapper .sidebar .menu-li a svg {
+.component-sidebar .menu-li a svg {
 	height: 1.6rem;
 	width: 1.4rem;
 	transition: all .3s ease;
@@ -407,6 +407,75 @@
 	color: #ACB5CC;
 }
 
+.component-page-wrapper .graph-con {
+	min-height: 12rem;
+}
+
+.component-page-wrapper .graph-col ul {
+	margin: auto 0;
+	width: 8rem;
+}
+
+.component-page-wrapper .graph-col ul li h6 {
+	color: #ACB5CC;
+	text-transform: uppercase;
+	font-family: mont-bold;
+	font-size: .7rem;
+	margin-bottom: 1.5rem;
+}
+
+.component-page-wrapper .graph-col ul li {
+	color: #2E384D;
+	font-family: mont-regular, sans-serif;
+	font-size: .8rem;
+	margin-bottom: .5rem;
+}
+
+.component-page-wrapper .graph-col ul li span {
+	width: .5rem;
+	height: .5rem;
+	border-radius: 50%;
+	display: inline-block;
+	background-color: #05CCD6;
+	margin-right: .3rem;
+}
+
+.component-page-wrapper .graph-col ul li:nth-child(3) span {
+	background-color: #FFC337;
+}
+
+.component-page-wrapper .graph-col ul li:nth-child(4) span {
+	background-color: #FD3CA5;
+}
+
+.component-page-wrapper .graph-grades-inner {
+	background-color: #fff;
+	box-shadow: 0px 20px 20px #2E384D1A;
+	border-radius: 1.2rem;
+	margin-top: 2rem;
+	padding: 1rem 1.5rem;
+}
+
+.component-page-wrapper .graph-star-col {
+	width: 5rem;
+}
+
+.component-page-wrapper .graph-star-col img {
+	width: 3rem;
+	max-width: 100%;
+}
+
+.component-page-wrapper .graph-star-col p {
+	color: #ACB5CC;
+	font-family: mont-bold, sans-serif;
+	text-transform: uppercase;
+	font-size: .7rem;
+	margin: 0;
+	margin-top: .4rem;
+	letter-spacing: 2px;
+}
+
+
 /* Switch */
 
 .switch input {
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -rcef0d9bb2b10841da2f2f948dcfd261f6ed7d644 -rbe7a59372762fcbc30a3bc00d449a7f1e4e2b0c6
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision cef0d9bb2b10841da2f2f948dcfd261f6ed7d644)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision be7a59372762fcbc30a3bc00d449a7f1e4e2b0c6)
@@ -13,6 +13,10 @@
 	src: url(/lams/includes/fonts/FontsFree-Net-Mont1.ttf);
 }
 
+.monitoring-page-wrapper {
+	position: relative;
+}
+
 .monitoring-page-wrapper ul, .monitoring-page-wrapper ol {
 	list-style: none;
 	padding: 0;
@@ -32,71 +36,63 @@
 }
 
 .monitoring-page-content {
-	display: flex;
-	background-color: #fff;
-	padding-left: 7rem;
+	min-height: 100%;
+	padding: 2rem 4.8rem 2rem 11.8rem;
 	transition: all .3s ease;
 }
 
 .monitoring-page-content.active {
-	padding-left: 0;
+	padding-left: 4.8rem;
 }
 
-.monitoring-page-content-inner {
-	min-height: 100%;
-	background-color: #F6F5FA;
-	border-radius: 2rem;
-	padding: 2rem 4.8rem;
-}
-
-.monitoring-page-wrapper .sidebar .menu-li a svg .c,
-.monitoring-page-wrapper .sidebar .menu-li a svg .d,
-.monitoring-page-wrapper .sidebar .menu-li a svg rect {
+.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-wrapper .sidebar .menu-li a svg .a,
-.monitoring-page-wrapper .sidebar .menu-li a svg .b {
+.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-wrapper .sidebar .menu-li a svg rect.b {
+.monitoring-page-wrapper .component-sidebar .menu-li a svg rect.b {
 	fill: transparent;
 	stroke: #ACB5CC;
 	transition: all .3s ease;
 }
 
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(3) a svg .a {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .a {
 	stroke: #ACB5CC;
 }
 
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(3) a svg .b {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .b {
 	stroke: transparent;
 }
 
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(2):hover a svg rect.b,
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(2):hover a svg .d,
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(2):hover a svg .c {
+.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 .sidebar .menu-li:nth-child(2).active a svg rect.b,
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(2).active a svg .d,
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(2).active a svg .c {
+.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 .sidebar .menu-li:nth-child(3):hover a svg .a {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3):hover a svg .a {
 	stroke: #3C42E0;
 }
 
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(3).active a svg .a {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3).active a svg .a {
 	stroke: #3C42E0;
 }
 
-.monitoring-page-wrapper .sidebar .menu-li:nth-child(4):hover a svg path.b {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(4):hover a svg path.b {
 	fill: #3C42E0;
 }
 
@@ -135,7 +131,7 @@
 }
 */
 
-.user-map-col {
+.monitoring-page-wrapper .user-map-col {
 	background-image: url(/lams/images/components/lines.png);
 	background-size: cover;
 	background-position: 50%;
@@ -145,78 +141,6 @@
 	overflow: hidden;
 }
 
-.content {
-	padding-top: 3rem;
-}
-
-.graph-con {
-	min-height: 12rem;
-}
-
-.graph-col ul {
-	margin: auto 0;
-	width: 8rem;
-}
-
-.graph-col ul li h6 {
-	color: #ACB5CC;
-	text-transform: uppercase;
-	font-family: mont-bold;
-	font-size: .7rem;
-	margin-bottom: 1.5rem;
-}
-
-.graph-col ul li {
-	color: #2E384D;
-	font-family: mont-regular, sans-serif;
-	font-size: .8rem;
-	margin-bottom: .5rem;
-}
-
-.graph-col ul li span {
-	width: .5rem;
-	height: .5rem;
-	border-radius: 50%;
-	display: inline-block;
-	background-color: #05CCD6;
-	margin-right: .3rem;
-}
-
-.graph-col ul li:nth-child(3) span {
-	background-color: #FFC337;
-}
-
-.graph-col ul li:nth-child(4) span {
-	background-color: #FD3CA5;
-}
-
-.graph-grades-inner {
-	background-color: #fff;
-	box-shadow: 0px 20px 20px #2E384D1A;
-	border-radius: 1.2rem;
-	margin-top: 2rem;
-	padding: 1rem 1.5rem;
-}
-
-.graph-star-col {
-	width: 5rem;
-}
-
-.graph-star-col img {
-	width: 3rem;
-	max-width: 100%;
-}
-
-.graph-star-col p {
-	color: #ACB5CC;
-	font-family: mont-bold, sans-serif;
-	text-transform: uppercase;
-	font-size: .7rem;
-	margin: 0;
-	margin-top: .4rem;
-	letter-spacing: 2px;
-}
-
 .grades-progress-col {
 	width: calc(100% - 5rem);
 }
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -rcef0d9bb2b10841da2f2f948dcfd261f6ed7d644 -rbe7a59372762fcbc30a3bc00d449a7f1e4e2b0c6
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision cef0d9bb2b10841da2f2f948dcfd261f6ed7d644)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision be7a59372762fcbc30a3bc00d449a7f1e4e2b0c6)
@@ -19,7 +19,7 @@
 		$(document).ready(function(){
 			$('.hamburger').click(function(){
 				$(this).toggleClass('active');
-				$('.monitoring-page-wrapper .sidebar, .monitoring-page-content').toggleClass('active');
+				$('.component-sidebar, .monitoring-page-content').toggleClass('active');
 			});
 			
 			var ctx = document.getElementById('myChart').getContext('2d');
@@ -81,8 +81,8 @@
 	</script>
 </head>
 <body class="component">
-<div class="component-page-wrapper monitoring-page-wrapper">
-	<div class="sidebar">
+<div class="monitoring-page-wrapper">
+	<div class="component-sidebar">
 		<ul>
 			<li class="logo-li">
 				<a href="#"><img src="<lams:LAMSURL/>images/components/lams_logo_white.png" alt="#" /></a>
@@ -104,140 +104,140 @@
 		</div>
 		 -->
 	</div>
-	<div class="monitoring-page-content">
-		<div class="monitoring-page-content-inner">
-			<header class="d-flex justify-content-between">
-				<div class="hamburger-box">
-					<div class="hamburger">
-						<span></span>
-						<span></span>
-						<span></span>
-					</div>
-					<p>Lesson Name</p>
+	<div class="component-page-wrapper monitoring-page-content">
+		<header class="d-flex justify-content-between">
+			<div class="hamburger-box">
+				<div class="hamburger">
+					<span></span>
+					<span></span>
+					<span></span>
 				</div>
-				<div class="top-menu">
-					<form>
-						<input type="text" name="" placeholder="Search Student">
-						<img src="<lams:LAMSURL/>images/components/search.svg" alt="#" />
-					</form>
-					<div class="top-menu-btn">
-						<a href="#"><img src="<lams:LAMSURL/>images/components/icon1.svg" alt="#" /></a>
-						<a href="#"><img src="<lams:LAMSURL/>images/components/icon2.svg" alt="#" /></a>
-						<a href="#"><img src="<lams:LAMSURL/>images/components/icon3.svg" alt="#" /></a>
-					</div>
+				<p>Lesson Name</p>
+			</div>
+			<div class="top-menu">
+				<form>
+					<input type="text" name="" placeholder="Search Student">
+					<img src="<lams:LAMSURL/>images/components/search.svg" alt="#" />
+				</form>
+				<div class="top-menu-btn">
+					<a href="#"><img src="<lams:LAMSURL/>images/components/icon1.svg" alt="#" /></a>
+					<a href="#"><img src="<lams:LAMSURL/>images/components/icon2.svg" alt="#" /></a>
+					<a href="#"><img src="<lams:LAMSURL/>images/components/icon3.svg" alt="#" /></a>
 				</div>
-			</header>
-			<div class="content row">
-				<div class="col-12 col-md-3 content-left">
-					<div class="row">
-						<div class="col-12 graph-col d-flex justify-content-between">
-							<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>
+		</header>
+		<div class="row pt-5">
+			<div class="col-12 col-md-3 content-left">
+				<div class="row">
+					<div class="col-12 graph-col d-flex justify-content-between">
+						<div class="graph-con">
+							<canvas id="myChart" class="chartjs-render-monitor"></canvas>
 						</div>
-						<div class="col-12 graph-grades">
-							<div class="graph-grades-inner d-flex justify-content-between">
-								<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>
+						<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 class="col-12 graph-grades">
+						<div class="graph-grades-inner d-flex justify-content-between">
+							<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>
-						<div class="col-12 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 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 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 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>
-				<div class="col-12 col-md-9 content-right">
-					<div class="user-map-col h-100">
-						<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="col-12 col-md-9 content-right">
+				<div class="user-map-col h-100">
+					<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="col-12 col-md-6 tasks">
-					<div class="tasks-col">
-						<h6>required tasks</h6>
-						<div class="tasks-col-gate d-flex justify-content-between">
-							<p>Gate</p>
-							<select>
-								<option>Open now</option>
-								<option>Open now</option>
-								<option>Open now</option>
-							</select>
-						</div>
-						<div class="tasks-col-gate d-flex justify-content-between">
-							<p>Grouping</p>
-							<button type="button">Set Groups</button>
-						</div>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-12 col-md-6 tasks">
+				<div class="tasks-col">
+					<h6>required tasks</h6>
+					<div class="tasks-col-gate d-flex justify-content-between">
+						<p>Gate</p>
+						<select>
+							<option>Open now</option>
+							<option>Open now</option>
+							<option>Open now</option>
+						</select>
 					</div>
+					<div class="tasks-col-gate d-flex justify-content-between">
+						<p>Grouping</p>
+						<button type="button">Set Groups</button>
+					</div>
 				</div>
-				<div class="col-12 col-md-6 insight">
-					<div class="insight-col">
-						<h6>insights</h6>
-						<div class="insight-col-gate">
-							<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 insight">
+				<div class="insight-col">
+					<h6>insights</h6>
+					<div class="insight-col-gate">
+						<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>