Index: lams_central/web/css/components.css
===================================================================
diff -u -r1f0a16d087d6fa08320096d2deaa70e87fc699cd -rc78cd9fc5b137a22bcc449e9b61a252a855c01ff
--- lams_central/web/css/components.css	(.../components.css)	(revision 1f0a16d087d6fa08320096d2deaa70e87fc699cd)
+++ lams_central/web/css/components.css	(.../components.css)	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -115,8 +115,6 @@
 .component-page-content {
 	width: 100%;
 	min-height: 100%;
-	background-color: #F6F5FA;
-	border-radius: 2rem;
 	padding: 1.5rem 4.8rem;
 }
 
@@ -264,6 +262,151 @@
 	margin-bottom: 1rem;
 }
 
+.component-page-wrapper .sidebar {
+	position: absolute;
+	height: 100%;
+	width: 7rem;
+	padding: 3.4rem 1.7rem 2rem 1.7rem;
+	background-color: #fff;
+	text-align: center;
+	display: flex;
+	align-items: flex-start;
+	flex-direction: column;
+	transition: all .3s ease;
+}
+
+.component-page-wrapper .sidebar.active {
+	transform: translateX(-7rem);
+}
+
+.component-page-wrapper .sidebar > ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	margin-bottom: auto;
+}
+
+.component-page-wrapper .sidebar .logo-li {
+	margin-bottom: 4rem;
+}
+
+.component-page-wrapper .sidebar .menu-li {
+	margin-bottom: 1.8rem;
+}
+
+.component-page-wrapper .sidebar .menu-li a {
+	background-color: #3C42E01A;
+	display: inline-block;
+	width: 3rem;
+	height: 3rem;
+	border-radius: 1.2rem;
+	color: #fff;
+	line-height: 2.8rem;
+	cursor: pointer;
+}
+
+.component-page-wrapper .sidebar .menu-li a svg {
+	height: 1.6rem;
+	width: 1.4rem;
+	transition: all .3s ease;
+}
+
+.component-page-wrapper .hamburger-box {
+	padding-top: .5rem;
+	display: flex;
+}
+
+.component-page-wrapper .hamburger {
+	width: 1rem;
+	margin-top: .8rem;
+	cursor: pointer;
+}
+
+.component-page-wrapper .hamburger span {
+	display: inline-block;
+	height: 2px;
+	background-color: #3C42E0;
+	width: 100%;
+	float: left;
+	margin-bottom: 3px;
+	transition: all .3s ease;
+}
+
+.component-page-wrapper .hamburger span:last-child {
+	margin: 0;
+	width: 70%;
+}
+
+.component-page-wrapper .hamburger.active span {
+	width: 100%;
+}
+
+.component-page-wrapper .hamburger-box p {
+	font-family: mont-semibold, sans-serif;
+	font-size: 2rem;
+	margin: 0;
+	line-height: 1;
+	color: #2E384D;
+	margin-left: 1.8rem;
+}
+
+.component-page-wrapper .top-menu {
+	display: flex;
+}
+
+.component-page-wrapper .top-menu-btn {
+	display: flex;
+}
+
+.component-page-wrapper .top-menu-btn a {
+	display: inline-block;
+	background-color: #3C42E0;
+	width: 3.1rem;
+	height: 3.1rem;
+	border-radius: 1rem;
+	margin-left: .6rem;
+	text-align: center;
+	line-height: 2.8rem;
+	box-shadow: 0px 3px 6px #3C42E040;
+	transition: all .3s ease;
+}
+
+.component-page-wrapper .top-menu-btn a:hover {
+	background-color: #878bea;
+}
+
+.component-page-wrapper .top-menu-btn a img {
+	width: 1rem;
+}
+
+.component-page-wrapper .top-menu form {
+	position: relative;
+	width: 18.8rem;
+	margin-right: 3rem;
+}
+
+.component-page-wrapper .top-menu input {
+	width: 100%;
+	height: 3.1rem;
+	border-radius: 1rem;
+	border: 0;
+	padding-left: 1.2rem;
+	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.02);
+	color: #ACB5CC;
+}
+
+.component-page-wrapper .top-menu form img {
+	position: absolute;
+	right: 1.2rem;
+	top: .9rem;
+	cursor: pointer;
+	width: 1.2rem;
+}
+
+.component-page-wrapper .top-menu input::placeholder {
+	color: #ACB5CC;
+}
+
 /* Switch */
 
 .switch input {
@@ -396,60 +539,7 @@
 
 /* Unused? */
 /* 
-.top-menu-btn a {
-	display: inline-block;
-	background-color: #3C42E0;
-	width: 3.1rem;
-	height: 3.1rem;
-	border-radius: 1rem;
-	margin-left: .6rem;
-	text-align: center;
-	line-height: 2.8rem;
-	box-shadow: 0px 3px 6px #3C42E040;
-	transition: all .3s ease;
-}
 
-.top-menu-btn a:hover {
-	background-color: #878bea;
-}
-
-.top-menu-btn a img {
-	width: 1rem;
-}
-
-.top-menu-btn a:nth-child(3) img {
-	width: 1.3rem;
-}
-
-.top-menu form {
-	position: relative;
-	width: 18.8rem;
-	margin-right: 3rem;
-}
-
-.top-menu input {
-	width: 100%;
-	height: 3.1rem;
-	border-radius: 1rem;
-	border: 0;
-	background-color: #fff;
-	padding-left: 1.2rem;
-	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.02);
-	font-size: .95rem;
-}
-
-.top-menu form img {
-	position: absolute;
-	right: 1.2rem;
-	top: .9rem;
-	cursor: pointer;
-	width: 1.2rem;
-}
-
-.top-menu input::placeholder {
-	color: #696f7d;
-}
-
 .content-left {
 	-ms-flex: 0 0 26.5rem;
 	flex: 0 0 26.5rem;
Index: lams_monitoring/web/WEB-INF/tags/Dropdown.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/Dropdown.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/Dropdown.tag	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -0,0 +1,40 @@
+<% 
+ /**
+  * Dropdown.tag
+  *	Author: Marcin Cieslak
+  *	Description: Displays a row with a label and a styled select widget
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
+
+<%@ attribute name="name" required="true" rtexprvalue="true" %>
+<%@ attribute name="labelKey" required="true" rtexprvalue="true" %>
+
+<%@ attribute name="id" required="false" rtexprvalue="true" %>
+<%@ attribute name="useSpringForm" required="false" rtexprvalue="true" %>
+<%@ attribute name="inputCellClass" required="false" rtexprvalue="true" %>
+<%@ attribute name="tooltipKey" required="false" rtexprvalue="true" %>
+<%@ attribute name="tooltipDescriptionKey" required="false" rtexprvalue="true" %>
+
+<c:set var="id" value="${empty id ? name : id}" />
+<c:set var="useSpringForm" value="${empty useSpringForm ? false : useSpringForm}" />
+
+<lams:Input id="${id}" labelKey="${labelKey}" inputCellClass="d-flex justify-content-end ${inputCellClass}"
+			tooltipKey="${tooltipKey}" tooltipDescriptionKey="${tooltipDescriptionKey}">
+	<c:choose>
+   		<c:when test="${useSpringForm}">
+   			<form:select path="${name}" id="${id}" cssClass="form-control form-control-select" aria-label="<fmt:message key='${tooltipKey}' />">
+   				<jsp:doBody />
+   			</form:select>
+   		</c:when>
+   		<c:otherwise>
+   			<select name="${name}" id="${id}" class="form-control form-control-select" >
+           		<jsp:doBody />
+       		</select>
+   		</c:otherwise>
+   	</c:choose>
+</lams:Input>
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tags/Input.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/Input.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/Input.tag	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -0,0 +1,41 @@
+<% 
+ /**
+  * Input.tag
+  *	Author: Marcin Cieslak
+  *	Description: Displays a row with a label and a styled input widget
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+
+<%@ attribute name="id" required="true" rtexprvalue="true" %>
+<%@ attribute name="labelKey" required="true" rtexprvalue="true" %>
+
+<%@ attribute name="inputCellClass" required="false" rtexprvalue="true" %>
+<%@ attribute name="labelCellSize" required="false" rtexprvalue="true" %>
+<%@ attribute name="tooltipKey" required="false" rtexprvalue="true" %>
+<%@ attribute name="tooltipDescriptionKey" required="false" rtexprvalue="true" %>
+
+<c:set var="inputCellClass" value="${empty inputCellClass ? 'd-flex justify-content-end' : inputCellClass}" />
+<c:set var="labelCellSize" value="${empty labelCellSize ? 8 : labelCellSize}" />
+
+<div class="form-group row">
+	<label class="col-sm-${labelCellSize} col-form-label" for="${id}">
+		<fmt:message key="${labelKey}" />
+		
+		<c:if test="${not empty tooltipKey}">
+			<a tabindex="0" role="button" data-toggle="tooltip" title="<fmt:message key='${tooltipKey}' />">
+				<i class="info_icon fa fa-info-circle text-info fa-fw"
+					<c:if test="${not empty tooltipDescriptionKey}">
+						aria-label="<fmt:message key="${tooltipDescriptionKey}" />"
+					</c:if>
+				></i>
+			</a>
+		</c:if>
+	</label>
+	
+    <div class="col-sm-${12 - labelCellSize} col-form-label ${inputCellClass}">
+    	<jsp:doBody />
+    </div>
+</div>
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tags/PageComponent.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/PageComponent.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/PageComponent.tag	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -0,0 +1,29 @@
+<% 
+ /**
+  * PageComponent.tag
+  *	Author: Marcin Cieslak
+  *	Description: Wrap contents in a standardised page template
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+
+<%@ attribute name="titleKey" required="false" rtexprvalue="true" %>
+
+<div class="component-page-wrapper d-flex">
+		<div class="component-page-content">
+            <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
+            
+            <c:if test="${not empty titleKey}">
+				<header class="header d-flex justify-content-between">
+					<div class="header-col d-flex">
+						<h1><fmt:message key="${titleKey}" /></h1>
+					</div>
+				</header>
+			</c:if>
+			
+			<jsp:doBody />
+			
+		</div>
+</div>
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tags/Panel.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/Panel.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/Panel.tag	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -0,0 +1,76 @@
+<% 
+ /**
+  * Panel.tag
+  *	Author: Marcin Cieslak
+  *	Description: Show a collapsible panel with decorations
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="id" required="true" rtexprvalue="true" %>
+<%@ attribute name="titleKey" required="false" rtexprvalue="true" %>
+<%@ attribute name="icon" required="false" rtexprvalue="true" %>
+<%@ attribute name="iconClass" required="false" rtexprvalue="true" %>
+<%@ attribute name="colorClass" required="false" rtexprvalue="true" %>
+<%@ attribute name="collapsible" required="false" rtexprvalue="true" %>
+<%@ attribute name="expanded" required="false" rtexprvalue="true" %>
+
+<c:set var="collapsible" value="${empty collapsible ? true : collapsible}" />
+<c:set var="expanded" value="${empty expanded ? true : expanded}" />
+<%-- Should left panel (icon, color) be displayed at all --%>
+<c:set var="hasLeftPanel" value="${not empty icon or not empty iconClass or not empty colorClass}" />
+
+<div class="banner-box-col d-flex" id="${id}-banner-box">
+	<c:if test="${hasLeftPanel}">
+		<div class="banner-box-left ${colorClass}">
+			<c:choose>
+				<c:when test="${not empty icon}">
+					<%-- Display regular icon --%>
+					<img src="${icon}">
+				</c:when>
+				<c:when test="${not empty iconClass}">
+					<%-- Display Font Awesome icon --%>
+					<i class="fa ${iconClass}" aria-hidden="true"></i>
+				</c:when>
+				<c:otherwise>
+					<%-- Blank character for padding --%>
+					<span class="no-icon" aria-hidden="true">&nbsp;</span>
+				</c:otherwise>
+			</c:choose>
+		</div>
+	</c:if>
+	
+	<div class="banner-box-body ${hasLeftPanel ? 'banner-box-right' : ''}">
+		<c:set var="contentId" value="${id}-content" />
+		
+		<c:if test="${collapsible or not empty titleKey}">
+	        <div class="banner-box-title">
+	           <c:if test="${collapsible}">
+		           	<a class="collapsible-link ${empty titleKey ? ' no-title' : ''}" role="button" href="#${contentId}"
+		           	   data-toggle="collapse" data-target="#${contentId}" aria-expanded="${expanded}" aria-controls="${contentId}">
+	           	</c:if>
+	           	
+	   	   		<c:choose>
+	   	   			<c:when test="${not empty titleKey}">
+	   	   				<h2><fmt:message key="${titleKey}" /></h2>
+	   	   			</c:when>
+	   	   			<c:otherwise>
+	   	   				&nbsp;
+	   	   			</c:otherwise>
+	   	   		</c:choose>
+	   	   		
+	   	   		 <c:if test="${collapsible}">
+	           		</a>
+	           	</c:if>
+			</div>
+		</c:if>
+		
+		<div id="${contentId}" class="${collapsible ? 'mt-3 collapse' : ''} ${collapsible and expanded ? ' show' : ''}">
+			<jsp:doBody />
+		</div>
+	</div>
+</div>
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tags/Switch.tag
===================================================================
diff -u
--- lams_monitoring/web/WEB-INF/tags/Switch.tag	(revision 0)
+++ lams_monitoring/web/WEB-INF/tags/Switch.tag	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -0,0 +1,40 @@
+<% 
+ /**
+  * Switch.tag
+  *	Author: Marcin Cieslak
+  *	Description: Displays a row with a label and a styled checkbox
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-lams" prefix="lams" %>
+<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
+
+<%@ attribute name="name" required="true" rtexprvalue="true" %>
+<%@ attribute name="labelKey" required="true" rtexprvalue="true" %>
+
+<%@ attribute name="checked" required="false" rtexprvalue="true" %>
+<%@ attribute name="id" required="false" rtexprvalue="true" %>
+<%@ attribute name="useSpringForm" required="false" rtexprvalue="true" %>
+<%@ attribute name="inputCellClass" required="false" rtexprvalue="true" %>
+<%@ attribute name="tooltipKey" required="false" rtexprvalue="true" %>
+<%@ attribute name="tooltipDescriptionKey" required="false" rtexprvalue="true" %>
+
+<c:set var="checked" value="${empty checked ? false : checked}" />
+<c:set var="id" value="${empty id ? name : id}" />
+<c:set var="useSpringForm" value="${empty useSpringForm ? false : useSpringForm}" />
+
+<lams:Input id="${id}" labelKey="${labelKey}" inputCellClass="d-flex justify-content-end switch switch-sm ${inputCellClass}"
+		    tooltipKey="${tooltipKey}" tooltipDescriptionKey="${tooltipDescriptionKey}" >
+    <c:choose>
+   		<c:when test="${useSpringForm}">
+   			<form:checkbox path="${name}" id="${id}" cssClass="switch" />
+   		</c:when>
+   		<c:otherwise>
+			<input type="checkbox" class="switch" name="${name}" id="${id}" ${checked ? ' checked' : ''}>
+   		</c:otherwise>
+   	</c:choose>
+	
+	<label for="${id}" />
+</lams:Input>			
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rb215f731b063b2e8e4c988355f23fd545d5192a1 -rc78cd9fc5b137a22bcc449e9b61a252a855c01ff
--- lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision b215f731b063b2e8e4c988355f23fd545d5192a1)
+++ lams_monitoring/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -409,5 +409,24 @@
        <name>WaitingSpinner</name>
        <path>/WEB-INF/tags/WaitingSpinner.tag</path>
    	</tag-file>
-
+   	<tag-file>
+	    <name>Panel</name>
+		<path>/WEB-INF/tags/Panel.tag</path>
+   	</tag-file>  
+   	<tag-file>
+	    <name>PageComponent</name>
+		<path>/WEB-INF/tags/PageComponent.tag</path>
+   	</tag-file>  
+   	<tag-file>
+	    <name>Switch</name>
+		<path>/WEB-INF/tags/Switch.tag</path>
+   	</tag-file>  
+   	<tag-file>
+	    <name>Dropdown</name>
+		<path>/WEB-INF/tags/Dropdown.tag</path>
+   	</tag-file> 
+   	<tag-file>
+	    <name>Input</name>
+		<path>/WEB-INF/tags/Input.tag</path>
+   	</tag-file> 
 </taglib>
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r0376b2f71e81bb69586546bcc2b16553c2817458 -rc78cd9fc5b137a22bcc449e9b61a252a855c01ff
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 0376b2f71e81bb69586546bcc2b16553c2817458)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -13,130 +13,98 @@
 	src: url(/lams/includes/fonts/FontsFree-Net-Mont1.ttf);
 }
 
-body, html {
-	margin: 0;
-	font-size: 16px;
-	background-color: #E4E4E4;
-}
-
-ul, ol {
+.monitoring-page-wrapper ul, .monitoring-page-wrapper ol {
 	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 
-input:focus, button:focus, textarea:focus {
+.monitoring-page-wrapper input:focus, .monitoring-page-wrapper button:focus, .monitoring-page-wrapper textarea:focus {
 	outline: none;
 }
 
-img {
+.monitoring-page-wrapper img {
 	max-width: 100%;
 }
 
-a:hover, a:focus {
+.monitoring-page-wrapper a:hover, .monitoring-page-wrapper a:focus {
 	text-decoration: none;
 }
 
-.sidebar {
-	min-height: 100vh;
+.monitoring-page-content {
+	display: flex;
 	background-color: #fff;
-	width: 7rem;
-	max-width: 100%;
-	padding: 3.4rem 1.7rem;
-	text-align: center;
-	padding-bottom: 2rem;
+	padding-left: 7rem;
+	transition: all .3s ease;
 }
 
-.wrapper {
-	border-radius: 2rem;
-	min-height: 100vh;
-	overflow: hidden;
-	background-color: #F6F5FA;
+.monitoring-page-content.active {
+	padding-left: 0;
 }
 
-.side-menu .logo-li {
-	margin-bottom: 4rem;
+.monitoring-page-content-inner {
+	min-height: 100%;
+	background-color: #F6F5FA;
+	border-radius: 2rem;
+	padding: 2rem 4.8rem;
 }
 
-.side-menu .menu-li {
-	margin-bottom: 1.8rem;
-}
-
-.side-menu .menu-li a {
-	background-color: #3C42E01A;
-	display: inline-block;
-	width: 3rem;
-	height: 3rem;
-	border-radius: 1.2rem;
-	color: #fff;
-	line-height: 2.8rem;
-	cursor: pointer;
-}
-
-.side-menu .menu-li a svg {
-	height: 1.6rem;
-	width: 1.4rem;
-	transition: all .3s ease;
-}
-
-.side-menu .menu-li a svg .c, .side-menu .menu-li a svg .d, .side-menu .menu-li a svg rect
-	{
+.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 {
 	stroke: #ACB5CC;
 	transition: all .3s ease;
 }
 
-.side-menu .menu-li a svg .a, .side-menu .menu-li a svg .b {
+.monitoring-page-wrapper .sidebar .menu-li a svg .a,
+.monitoring-page-wrapper .sidebar .menu-li a svg .b {
 	stroke: transparent;
 	transition: all .3s ease;
 }
 
-.side-menu .menu-li a svg rect.b {
+.monitoring-page-wrapper .sidebar .menu-li a svg rect.b {
 	fill: transparent;
 	stroke: #ACB5CC;
 	transition: all .3s ease;
 }
 
-.side-menu .menu-li:nth-child(3) a svg .a {
+.monitoring-page-wrapper .sidebar .menu-li:nth-child(3) a svg .a {
 	stroke: #ACB5CC;
 }
 
-.side-menu .menu-li:nth-child(3) a svg .b {
+.monitoring-page-wrapper .sidebar .menu-li:nth-child(3) a svg .b {
 	stroke: transparent;
 }
 
-.side-menu .menu-li:nth-child(2):hover a svg rect.b, .side-menu .menu-li:nth-child(2):hover a svg .d,
-	.side-menu .menu-li:nth-child(2):hover a svg .c {
+.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 {
 	stroke: #3C42E0;
 }
 
-.side-menu .menu-li:nth-child(2).active a svg rect.b, .side-menu .menu-li:nth-child(2).active a svg .d,
-	.side-menu .menu-li:nth-child(2).active a svg .c {
+.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 {
 	stroke: #3C42E0;
 }
 
-.side-menu .menu-li:nth-child(3):hover a svg .a {
+.monitoring-page-wrapper .sidebar .menu-li:nth-child(3):hover a svg .a {
 	stroke: #3C42E0;
 }
 
-.side-menu .menu-li:nth-child(3).active a svg .a {
+.monitoring-page-wrapper .sidebar .menu-li:nth-child(3).active a svg .a {
 	stroke: #3C42E0;
 }
 
-.side-menu .menu-li:nth-child(4):hover a svg path.b {
+.monitoring-page-wrapper .sidebar .menu-li:nth-child(4):hover a svg path.b {
 	fill: #3C42E0;
 }
 
-.main-content {
-	width: calc(100% - 7rem);
-	background-color: #fff;
+.monitoring-page-wrapper .top-menu-btn a:nth-child(3) img {
+	width: 1.3rem;
 }
 
-.main-content-inner {
-	min-height: 100%;
-	background-color: #F6F5FA;
-	border-radius: 2rem;
-}
-
+/* User icon in left lower corner - unused? 
 .user-col {
 	position: relative;
 	cursor: pointer;
@@ -165,105 +133,8 @@
 .user-col.active span {
 	display: block;
 }
+*/
 
-.main-content-inner {
-	padding: 2rem 4.8rem;
-}
-
-.hamburger {
-	width: 1rem;
-	margin-top: .8rem;
-	cursor: pointer;
-}
-
-.hamburger span {
-	display: inline-block;
-	height: 2px;
-	background-color: #3C42E0;
-	width: 100%;
-	float: left;
-	margin-bottom: 3px;
-	transition: all .3s ease;
-}
-
-.hamburger span:last-child {
-	margin: 0;
-	width: 70%;
-}
-
-.hamburger.active span {
-	width: 100%;
-}
-
-.menu-hamburger-col {
-	padding-top: .5rem;
-}
-
-.menu-hamburger-col p {
-	font-family: mont-semibold, sans-serif;
-	font-size: 2rem;
-	font-weight: 400;
-	margin: 0;
-	line-height: 1;
-	color: #2E384D;
-	margin-left: 1.8rem;
-}
-
-.top-menu-btn a {
-	display: inline-block;
-	background-color: #3C42E0;
-	width: 3.1rem;
-	height: 3.1rem;
-	border-radius: 1rem;
-	margin-left: .6rem;
-	text-align: center;
-	line-height: 2.8rem;
-	box-shadow: 0px 3px 6px #3C42E040;
-	transition: all .3s ease;
-}
-
-.top-menu-btn a:hover {
-	background-color: #878bea;
-}
-
-.top-menu-btn a img {
-	width: 1rem;
-}
-
-.top-menu-btn a:nth-child(3) img {
-	width: 1.3rem;
-}
-
-.top-menu form {
-	position: relative;
-	width: 18.8rem;
-	margin-right: 3rem;
-}
-
-.top-menu input {
-	width: 100%;
-	height: 3.1rem;
-	border-radius: 1rem;
-	border: 0;
-	background-color: #fff;
-	padding-left: 1.2rem;
-	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.02);
-	font-size: .95rem;
-	color: #ACB5CC;
-}
-
-.top-menu form img {
-	position: absolute;
-	right: 1.2rem;
-	top: .9rem;
-	cursor: pointer;
-	width: 1.2rem;
-}
-
-.top-menu input::placeholder {
-	color: #ACB5CC;
-}
-
 .user-map-col {
 	background-image: url(/lams/images/components/lines.png);
 	background-size: cover;
@@ -590,38 +461,6 @@
 	color: #3C42E0;
 }
 
-.sidebar, .main-content {
-	transition: all .3s ease;
-}
-
-.sidebar.active {
-	transform: translateX(-7rem);
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.main-content.active {
-	width: 100%;
-	padding-left: 0;
-}
-
-.sidebar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 100%;
-}
-
-.wrapper {
-	position: relative;
-}
-
-.main-content {
-	padding-left: 7rem;
-	width: 100%;
-}
-
 .graph-con {
 	min-height: 12rem;
 	width: calc(100% - 8rem);
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -r68f7bd83b76eb89564f3f3623eab33d8d18dac7b -rc78cd9fc5b137a22bcc449e9b61a252a855c01ff
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 68f7bd83b76eb89564f3f3623eab33d8d18dac7b)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision c78cd9fc5b137a22bcc449e9b61a252a855c01ff)
@@ -8,6 +8,7 @@
 		
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap4.min.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome/css/font-awesome.min.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">
 	
@@ -18,7 +19,7 @@
 		$(document).ready(function(){
 			$('.hamburger').click(function(){
 				$(this).toggleClass('active');
-				$('.sidebar, .main-content').toggleClass('active');
+				$('.monitoring-page-wrapper .sidebar, .monitoring-page-content').toggleClass('active');
 			});
 			
 			var ctx = document.getElementById('myChart').getContext('2d');
@@ -79,10 +80,10 @@
 		});
 	</script>
 </head>
-<body>
-<div class="wrapper d-flex">
-	<div class="sidebar d-flex align-items-start flex-column">
-		<ul class="side-menu mb-auto">
+<body class="component">
+<div class="component-page-wrapper monitoring-page-wrapper">
+	<div class="sidebar">
+		<ul>
 			<li class="logo-li">
 				<a href="#"><img src="<lams:LAMSURL/>images/components/lams_logo_white.png" alt="#" /></a>
 			</li>
@@ -96,28 +97,30 @@
 				<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{fill:#acb5cc;}</style></defs><path class="a" d="M0,0H24V24H0Z"/><path class="b" d="M18,2H6A2.006,2.006,0,0,0,4,4V20a2.006,2.006,0,0,0,2,2H18a2.006,2.006,0,0,0,2-2V4A2.006,2.006,0,0,0,18,2ZM9,4h2V9l-1-.75L9,9Zm9,16H6V4H7v9l3-2.25L13,13V4h5Z"/></svg></a>
 			</li>
 		</ul>
+		<!-- 
 		<div class="user-col active">
 			<img src="<lams:LAMSURL/>images/components/img1.png" alt="#" />
 			<span></span>
 		</div>
+		 -->
 	</div>
-	<div class="main-content">
-		<div class="main-content-inner">
-			<header class="header d-flex justify-content-between">
-				<div class="menu-hamburger-col d-flex">
+	<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>
-				<div class="top-menu d-flex">
+				<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 d-flex">
+					<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>