Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r84204c571e0ab10c9006730dc413cebec8a66167 -rab9c4c312eb687a2b58efc563dc1b824087548e3
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 84204c571e0ab10c9006730dc413cebec8a66167)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision ab9c4c312eb687a2b58efc563dc1b824087548e3)
@@ -38,19 +38,69 @@
 
 .monitoring-page-content {
 	min-height: 100%;
-	padding: 2rem 4.8rem 2rem 11.8rem;
+	padding: 2rem 4.8rem 2rem 4.8rem;
 	transition: all .3s ease;
+	vertical-align: top;
+	text-align: center;	
 }
 
 .monitoring-page-content.active {
-	padding-left: 4.8rem;
+	padding-left: 11.8rem;
 }
 
-.monitoring-page-content {
-	vertical-align: top;
-	text-align: center;	
+.component-sidebar {
+	align-items: center;
 }
 
+.component-sidebar .lams-logo {
+	width: 3.6rem;	
+}
+
+.component-sidebar.active.expanded {
+	width: 30rem;	
+}
+
+.component-sidebar.active.expanded ~ .monitoring-page-content.active {
+	padding-left: 30.8rem;
+}
+
+.component-sidebar .component-menu {
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+}
+
+.component-sidebar .component-menu-btn {
+	width: 3.6rem;
+	height: 100%;
+}
+
+.component-sidebar #edit-lesson-btn {
+	margin-bottom: 1.5rem;
+}
+
+.component-sidebar .lesson-properties {
+	width: 0;
+	height: 100%;
+	padding-left: 2rem;
+	overflow: hidden;
+	text-align: left;
+	transition: all .3s ease;
+}
+
+.component-sidebar .lesson-properties.active {
+	width: 100%;
+}
+
+.component-sidebar .lesson-properties #gradebookOnCompleteButton {
+	margin-top: 1rem;
+}
+
+.component-sidebar .lesson-properties .btn {
+	display: block;
+	margin-top: .5rem;
+}
+
 .monitoring-page-content .monitoring-layout-element {
 	display: inline-block;
 	max-width: 80%;