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 {