diff --git a/public/index.html b/public/index.html
index 8c36c36..78454bf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#007F60" />
    
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
diff --git a/src/PrivateRoutes.tsx b/src/PrivateRoutes.tsx
index c1cb0fa..9a01266 100644
--- a/src/PrivateRoutes.tsx
+++ b/src/PrivateRoutes.tsx
@@ -2,8 +2,9 @@ import React from "react";
 import {Redirect, Route, RouteProps} from "react-router-dom";
 
 const PrivateRoute: React.FC<RouteProps> = ({ ...rest }) => {
-    if(!localStorage.getItem('user'))  return <Redirect to="/"/>;
-    return <Route {...rest}/>;
+	//!localStorage.getItem('user')
+	if (localStorage.getItem("user")) return <Redirect to="/" />;
+	return <Route {...rest} />;
 }
 
 export default PrivateRoute;
diff --git a/src/assets/css/paper-dashboard.css b/src/assets/css/paper-dashboard.css
index 3b49a16..7654115 100644
--- a/src/assets/css/paper-dashboard.css
+++ b/src/assets/css/paper-dashboard.css
@@ -403,7 +403,7 @@ Copyright (c) 2015 Daniel Eden
 	border-radius: 3px;
 	padding: 11px 22px;
 	cursor: pointer;
-	background-color: #66615b;
+	background-color: #007f60;
 	color: #ffffff;
 	-webkit-transition: all 150ms linear;
 	-moz-transition: all 150ms linear;
@@ -489,13 +489,13 @@ fieldset[disabled] .navbar .navbar-nav > a.btn:focus,
 fieldset[disabled] .navbar .navbar-nav > a.btn.focus,
 fieldset[disabled] .navbar .navbar-nav > a.btn:active,
 fieldset[disabled] .navbar .navbar-nav > a.btn.active {
-	background-color: #66615b;
-	border-color: #66615b;
+	background-color: #007f60;
+	border-color: #007f60;
 }
 .btn.btn-simple,
 .navbar .navbar-nav > a.btn.btn-simple {
-	color: #66615b;
-	border-color: #66615b;
+	color: #007f60;
+	border-color: #007f60;
 }
 .btn.btn-simple:hover,
 .btn.btn-simple:focus,
@@ -510,7 +510,7 @@ fieldset[disabled] .navbar .navbar-nav > a.btn.active {
 }
 .btn.btn-link,
 .navbar .navbar-nav > a.btn.btn-link {
-	color: #66615b;
+	color: #007f60;
 }
 .btn.btn-link:hover,
 .btn.btn-link:focus,
@@ -991,8 +991,8 @@ fieldset[disabled] .btn-danger.active {
 
 .btn-outline-default {
 	background: transparent;
-	border: 2px solid #66615b !important;
-	color: #66615b;
+	border: 2px solid #007f60 !important;
+	color: #007f60;
 	opacity: 1;
 	filter: alpha(opacity=100);
 }
@@ -1002,9 +1002,9 @@ fieldset[disabled] .btn-danger.active {
 .btn-outline-default:focus:active,
 .btn-outline-default.active,
 .open > .btn-outline-default.dropdown-toggle {
-	background-color: #66615b !important;
+	background-color: #007f60 !important;
 	color: rgba(255, 255, 255, 0.8) !important;
-	border-color: #66615b !important;
+	border-color: #007f60 !important;
 }
 .btn-outline-default:hover .caret,
 .btn-outline-default:focus .caret,
@@ -1042,7 +1042,7 @@ fieldset[disabled] .btn-outline-default.focus,
 fieldset[disabled] .btn-outline-default:active,
 fieldset[disabled] .btn-outline-default.active {
 	background-color: transparent !important;
-	border-color: #66615b !important;
+	border-color: #007f60 !important;
 }
 
 .btn-outline-primary {
@@ -1389,7 +1389,7 @@ fieldset[disabled] .btn-outline-neutral.active {
 .btn-neutral {
 	background-color: #ffffff;
 	color: #51cbce;
-	color: #66615b;
+	color: #007f60;
 }
 .btn-neutral:hover,
 .btn-neutral:focus,
@@ -1473,7 +1473,7 @@ fieldset[disabled] .btn-neutral.active {
 	color: #44c47d !important;
 }
 .btn-neutral.btn-default {
-	color: #66615b !important;
+	color: #007f60 !important;
 }
 .btn-neutral.btn-default:hover,
 .btn-neutral.btn-default:focus,
@@ -1532,13 +1532,13 @@ fieldset[disabled] .btn-neutral.active {
 }
 .btn-neutral.btn-border:hover,
 .btn-neutral.btn-border:focus {
-	color: #66615b;
+	color: #007f60;
 }
 .btn-neutral.btn-border:active,
 .btn-neutral.btn-border.active,
 .open > .btn-neutral.btn-border.dropdown-toggle {
 	background-color: #ffffff;
-	color: #66615b;
+	color: #007f60;
 }
 .btn-neutral.btn-link:active,
 .btn-neutral.btn-link.active {
@@ -1555,7 +1555,7 @@ fieldset[disabled] .btn-neutral.active {
 
 .btn-simple {
 	border: 1px solid;
-	border-color: #66615b;
+	border-color: #007f60;
 	padding: 10px 22px;
 	background-color: transparent;
 }
@@ -1692,7 +1692,7 @@ fieldset[disabled] .btn-link.active {
 	background-color: #ffffff;
 	border: 1px solid #dddddd;
 	border-radius: 4px;
-	color: #66615b;
+	color: #007f60;
 	line-height: normal;
 	font-size: 14px;
 	-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
@@ -1713,7 +1713,7 @@ fieldset[disabled] .btn-link.active {
 	-webkit-box-shadow: none;
 	box-shadow: none;
 	outline: 0 !important;
-	color: #66615b;
+	color: #007f60;
 }
 .form-control:focus + .input-group-append .input-group-text,
 .form-control:focus ~ .input-group-append .input-group-text,
@@ -1732,7 +1732,7 @@ fieldset[disabled] .btn-link.active {
 }
 .has-success .form-control {
 	border: 1px solid #ccc;
-	color: #66615b;
+	color: #007f60;
 }
 .has-success .form-control.form-control-success {
 	padding-right: 2.5em !important;
@@ -1896,7 +1896,7 @@ fieldset[disabled] .btn-link.active {
 .input-group.has-success .input-group-prepend .input-group-text,
 .input-group.has-success .input-group-append .input-group-text {
 	border: 1px solid #ccc;
-	color: #66615b;
+	color: #007f60;
 	background-color: #ffffff;
 	border-right: none;
 }
@@ -2054,7 +2054,7 @@ fieldset[disabled] .btn-link.active {
 .input-group-prepend .input-group-text {
 	background-color: transparent;
 	border: 1px solid #e3e3e3;
-	color: #66615b;
+	color: #007f60;
 	border-top-right-radius: 4px;
 	border-bottom-right-radius: 4px;
 	-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
@@ -2166,7 +2166,7 @@ fieldset[disabled] .btn-link.active {
 .form-control[readonly],
 fieldset[disabled] .form-control {
 	background-color: #e3e3e3;
-	color: #66615b;
+	color: #007f60;
 	cursor: not-allowed;
 }
 
@@ -2413,13 +2413,13 @@ a.text-gray:hover {
 
 .blockquote {
 	border-left: none;
-	border: 1px solid #66615b;
+	border: 1px solid #007f60;
 	padding: 20px;
 	font-size: 1.1em;
 	line-height: 1.8;
 }
 .blockquote small {
-	color: #66615b;
+	color: #007f60;
 	font-size: 0.8571em;
 	text-transform: uppercase;
 }
@@ -2563,7 +2563,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 
 .offline-doc .page-header:after {
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: #007f60;
 	content: "";
 	display: block;
 	height: 100%;
@@ -2579,8 +2579,8 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 
 .badge.badge-default {
-	border-color: #66615b;
-	background-color: #66615b;
+	border-color: #007f60;
+	background-color: #007f60;
 }
 
 .badge.badge-primary {
@@ -2721,7 +2721,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 
 .form-check-label input[type="checkbox"]:checked + .form-check-sign:before {
-	background-color: #66615b;
+	background-color: #007f60;
 }
 
 .form-check-radio input[type="radio"] + .form-check-sign:after,
@@ -2768,29 +2768,29 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	color: #ffffff;
 }
 .navbar a.dropdown-item {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control,
 .navbar.bg-white .input-group.no-border .form-control {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control::-moz-placeholder,
 .navbar.bg-white .input-group.no-border .form-control::-moz-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control:-ms-input-placeholder,
 .navbar.bg-white .input-group.no-border .form-control:-ms-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control::-webkit-input-placeholder,
 .navbar.bg-white
 	.input-group.no-border
 	.form-control::-webkit-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group-prepend .input-group-text i,
 .navbar.bg-white .input-group-append .input-group-text i {
-	color: #66615b;
+	color: #007f60;
 	opacity: 0.5;
 }
 .navbar .form-group,
@@ -2805,7 +2805,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .navbar .input-group .form-group-addon,
 .navbar .input-group .input-group-prepend .input-group-text,
 .navbar .input-group .input-group-append .input-group-text {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group .form-group-addon i,
 .navbar .form-group .input-group-prepend .input-group-text i,
@@ -2817,19 +2817,19 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 .navbar .form-group.no-border .form-control,
 .navbar .input-group.no-border .form-control {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group.no-border .form-control::-moz-placeholder,
 .navbar .input-group.no-border .form-control::-moz-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group.no-border .form-control:-ms-input-placeholder,
 .navbar .input-group.no-border .form-control:-ms-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group.no-border .form-control::-webkit-input-placeholder,
 .navbar .input-group.no-border .form-control::-webkit-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar p {
 	display: inline-block;
@@ -2917,7 +2917,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .navbar .navbar-nav .nav-item .nav-link:not(.btn):hover,
 .navbar .navbar-nav .nav-item .nav-link:not(.btn):active {
 	border-radius: 3px;
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .logo-container {
 	width: 27px;
@@ -2956,17 +2956,17 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	border-bottom: 1px solid #ddd;
 }
 .navbar.navbar-transparent a:not(.dropdown-item):not(.btn) {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.navbar-transparent a:not(.dropdown-item):not(.btn).disabled {
 	opacity: 0.5;
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.navbar-transparent .button-bar {
-	background: #66615b;
+	background: #007f60;
 }
 .navbar.navbar-transparent .nav-item .nav-link:not(.btn) {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.navbar-transparent .nav-item.active .nav-link:not(.btn),
 .navbar.navbar-transparent .nav-item .nav-link:not(.btn):focus,
@@ -2976,14 +2976,14 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	color: #51cbce;
 }
 .navbar.bg-white a:not(.dropdown-item):not(.btn) {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white a:not(.dropdown-item):not(.btn).disabled {
 	opacity: 0.5;
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .button-bar {
-	background: #66615b;
+	background: #007f60;
 }
 .navbar.bg-white .nav-item.active .nav-link:not(.btn),
 .navbar.bg-white .nav-item .nav-link:not(.btn):focus,
@@ -2992,14 +2992,14 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	color: #51bcda;
 }
 .navbar.bg-white .logo-container {
-	border: 1px solid #66615b;
+	border: 1px solid #007f60;
 }
 .navbar .navbar-collapse .nav-item a {
 	font-size: 14px;
 }
 
 .bg-default {
-	background-color: #66615b !important;
+	background-color: #007f60 !important;
 }
 
 .bg-primary {
@@ -3094,35 +3094,11 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	content: "";
 }
 .page-header:before {
-	background-color: rgba(0, 0, 0, 0.3);
+	background-color: #007f60;
 }
 .page-header[filter-color="orange"] {
-	background: rgba(44, 44, 44, 0.2);
-	/* For browsers that do not support gradients */
-	background: -webkit-linear-gradient(
-		90deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
-	/* For Safari 5.1 to 6.0 */
-	background: -o-linear-gradient(
-		90deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
-	/* For Opera 11.1 to 12.0 */
-	background: -moz-linear-gradient(
-		90deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
-	/* For Firefox 3.6 to 15 */
-	background: linear-gradient(
-		0deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
-	/* Standard syntax */
+	
+	background: #007f60;
 }
 
 .dropdown .dropdown-menu,
@@ -3257,7 +3233,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	text-align: center;
 }
 .dropdown-menu .dropdown-item {
-	color: #66615b;
+	color: #007f60;
 	font-size: 14px;
 	padding: 10px 45px 10px 15px;
 	clear: both;
@@ -3294,7 +3270,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 .dropdown-menu .dropdown-item:hover,
 .dropdown-menu .dropdown-item:focus {
-	background-color: #66615b;
+	background-color: #007f60;
 }
 .dropdown-menu.dropdown-primary .dropdown-item:hover,
 .dropdown-menu.dropdown-primary .dropdown-item:focus {
@@ -3428,7 +3404,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 
 .dropdown-sharing .dropup-item {
-	color: #66615b;
+	color: #007f60;
 	font-size: 14px;
 }
 .dropdown-sharing .dropup-item .social-line {
@@ -3451,7 +3427,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .dropdown-sharing .dropup-item:focus .social-line,
 .dropdown-sharing .dropup-item:focus .action-line {
 	background-color: #ffffff;
-	color: #66615b;
+	color: #007f60;
 	opacity: 1;
 	text-decoration: none;
 }
@@ -3486,7 +3462,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 
 .dropdown-actions li:hover a,
 .dropdown-actions li:focus a {
-	color: #66615b;
+	color: #007f60;
 	opacity: 1;
 	text-decoration: none;
 }
@@ -3529,7 +3505,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .dropdown-notification .dropdown-notification-list .notification-item {
 	border-bottom: 1px solid #f1eae0;
 	font-size: 16px;
-	color: #66615b;
+	color: #007f60;
 }
 .dropdown-notification
 	.dropdown-notification-list
@@ -3588,7 +3564,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	.dropdown-notification-list
 	.notification-item:hover
 	.notification-text {
-	color: #66615b;
+	color: #007f60;
 	background-color: #f0efeb !important;
 }
 .dropdown-notification
@@ -4469,6 +4445,7 @@ License - nucleoapp.com/license/
 	left: 0;
 	z-index: 1030;
 	border-right: 1px solid #ddd;
+	background-color: #007f60
 }
 .sidebar .sidebar-wrapper,
 .off-canvas-sidebar .sidebar-wrapper {
@@ -4478,6 +4455,7 @@ License - nucleoapp.com/license/
 	width: 260px;
 	z-index: 4;
 	padding-bottom: 100px;
+	background-color: #007f60
 }
 .sidebar .sidebar-wrapper .dropdown .dropdown-backdrop,
 .off-canvas-sidebar .sidebar-wrapper .dropdown .dropdown-backdrop {
@@ -4595,7 +4573,7 @@ License - nucleoapp.com/license/
 	height: 100%;
 	content: "";
 	display: block;
-	background: #ffffff;
+	background: #007f60;
 	opacity: 1;
 }
 .sidebar .logo,
@@ -4632,7 +4610,7 @@ License - nucleoapp.com/license/
 	right: 15px;
 	height: 1px;
 	width: calc(100% - 30px);
-	background-color: rgba(255, 255, 255, 0.5);
+	background-color: #007f60;
 }
 .sidebar .logo p,
 .off-canvas-sidebar .logo p {
@@ -4691,11 +4669,11 @@ License - nucleoapp.com/license/
 	background: -o-linear-gradient(#7ec76f 0%, #44c47d 80%);
 	background: -moz-linear-gradient(#7ec76f 0%, #44c47d 80%);
 	background: linear-gradient(#7ec76f 0%, #44c47d 80%);
-	z-index: 3;
+	z-index: 7;
 }
 .sidebar[data-color="white"]:after,
 .off-canvas-sidebar[data-color="white"]:after {
-	background: #ffffff;
+	background:#007f60;
 }
 .sidebar[data-color="white"] .nav li a,
 .sidebar[data-color="white"] .nav li a i,
@@ -4737,7 +4715,7 @@ License - nucleoapp.com/license/
 	> ul
 	> li
 	> a {
-	color: #66615b;
+	color: #007f60;
 	opacity: 0.7;
 }
 .sidebar[data-color="white"] .nav li:hover:not(.active) > a,
@@ -4748,11 +4726,11 @@ License - nucleoapp.com/license/
 }
 .sidebar[data-color="white"] .logo .simple-text,
 .off-canvas-sidebar[data-color="white"] .logo .simple-text {
-	color: #66615b;
+	color: #007f60;
 }
 .sidebar[data-color="white"] .logo:after,
 .off-canvas-sidebar[data-color="white"] .logo:after {
-	background-color: #44c47d;;
+	background-color: #44c47d;
 	opacity: 0.4;
 }
 .sidebar[data-color="white"] .user .info a span,
@@ -4761,7 +4739,7 @@ License - nucleoapp.com/license/
 .off-canvas-sidebar[data-color="white"] .user .info a span,
 .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-mini-icon,
 .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-normal {
-	color: #66615b !important;
+	color: #007f60 !important;
 }
 .sidebar[data-color="white"] .user:after,
 .off-canvas-sidebar[data-color="white"] .user:after {
@@ -5062,7 +5040,7 @@ License - nucleoapp.com/license/
 }
 
 .off-canvas-sidebar .nav > li > a:focus {
-	background: rgba(200, 200, 200, 0.2);
+	background:#007f60;
 }
 
 .main-panel {
@@ -5098,17 +5076,16 @@ License - nucleoapp.com/license/
 	height: 260px;
 	padding-top: 80px;
 	padding-bottom: 45px;
-	background: #141e30;
+	background: #007f60;
 	/* fallback for old browsers */
 	background: -webkit-gradient(
 		linear,
 		left top,
 		right top,
-		from(#0c2646),
-		color-stop(60%, #204065),
-		to(#2a5788)
+		from( #007f60),
+		color-stop(60%,  #007f60),
+		to( #007f60)
 	);
-	background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
 	position: relative;
 	overflow: hidden;
 }
@@ -5137,7 +5114,7 @@ License - nucleoapp.com/license/
 	padding: 24px 0;
 }
 .footer.footer-default {
-	background-color: #f2f2f2;
+	background-color: #007f60;
 }
 .footer nav {
 	display: inline-block;
@@ -5176,7 +5153,7 @@ License - nucleoapp.com/license/
 	position: fixed;
 	right: 0;
 	width: 64px;
-	background: rgba(0, 0, 0, 0.3);
+	background: #007f60;
 	z-index: 1031;
 	border-radius: 8px 0 0 8px;
 	text-align: center;
@@ -5332,7 +5309,7 @@ License - nucleoapp.com/license/
 	position: relative;
 	left: -10px;
 	font-size: 0.7142em;
-	color: #66615b;
+	color: #007f60;
 }
 .fixed-plugin .adjustments-line .togglebutton .label-switch.label-right {
 	left: 10px;
@@ -5562,7 +5539,7 @@ License - nucleoapp.com/license/
 	margin-right: 5px;
 	position: relative;
 	top: 0px;
-	color: #66615b;
+	color: #007f60;
 }
 .card .card-footer .btn {
 	margin: 0;
@@ -5785,7 +5762,7 @@ License - nucleoapp.com/license/
 	}
 	.navbar.bg-white .dropdown-menu .dropdown-item:focus,
 	.navbar.bg-white .dropdown-menu .dropdown-item:hover {
-		color: #66615b;
+		color: #007f60;
 	}
 	.navbar .navbar-toggler-bar {
 		display: block;
@@ -5793,7 +5770,7 @@ License - nucleoapp.com/license/
 		width: 22px;
 		height: 1px;
 		border-radius: 1px;
-		background: #66615b;
+		background: #007f60;
 	}
 	.navbar .navbar-toggler-bar + .navbar-toggler-bar {
 		margin-top: 7px;
@@ -5806,7 +5783,7 @@ License - nucleoapp.com/license/
 		transition: width 0.2s linear;
 	}
 	.navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
-		background-color: #66615b;
+		background-color: #007f60;
 	}
 	.navbar .toggled .navbar-toggler-bar {
 		width: 24px;
diff --git a/src/assets/css/paper-dashboard.min.css b/src/assets/css/paper-dashboard.min.css
index 1032c5f..48eed50 100644
--- a/src/assets/css/paper-dashboard.min.css
+++ b/src/assets/css/paper-dashboard.min.css
@@ -350,7 +350,7 @@ Copyright (c) 2015 Daniel Eden
 	border-radius: 3px;
 	padding: 11px 22px;
 	cursor: pointer;
-	background-color: #66615b;
+	background-color: #007f60;
 	color: #fff;
 	-webkit-transition: all 150ms linear;
 	-moz-transition: all 150ms linear;
@@ -436,13 +436,13 @@ fieldset[disabled] .navbar .navbar-nav > a.btn:focus,
 fieldset[disabled] .navbar .navbar-nav > a.btn.focus,
 fieldset[disabled] .navbar .navbar-nav > a.btn:active,
 fieldset[disabled] .navbar .navbar-nav > a.btn.active {
-	background-color: #66615b;
-	border-color: #66615b;
+	background-color: #007f60;
+	border-color: #007f60;
 }
 .btn.btn-simple,
 .navbar .navbar-nav > a.btn.btn-simple {
-	color: #66615b;
-	border-color: #66615b;
+	color: #007f60;
+	border-color: #007f60;
 }
 .btn.btn-simple:hover,
 .btn.btn-simple:focus,
@@ -457,7 +457,7 @@ fieldset[disabled] .navbar .navbar-nav > a.btn.active {
 }
 .btn.btn-link,
 .navbar .navbar-nav > a.btn.btn-link {
-	color: #66615b;
+	color: #007f60;
 }
 .btn.btn-link:hover,
 .btn.btn-link:focus,
@@ -932,8 +932,8 @@ fieldset[disabled] .btn-danger.active {
 }
 .btn-outline-default {
 	background: rgba(0, 0, 0, 0);
-	border: 2px solid #66615b !important;
-	color: #66615b;
+	border: 2px solid #007f60 !important;
+	color: #007f60;
 	opacity: 1;
 	filter: alpha(opacity=100);
 }
@@ -943,9 +943,9 @@ fieldset[disabled] .btn-danger.active {
 .btn-outline-default:focus:active,
 .btn-outline-default.active,
 .open > .btn-outline-default.dropdown-toggle {
-	background-color: #66615b !important;
+	background-color: #007f60 !important;
 	color: rgba(255, 255, 255, 0.8) !important;
-	border-color: #66615b !important;
+	border-color: #007f60 !important;
 }
 .btn-outline-default:hover .caret,
 .btn-outline-default:focus .caret,
@@ -983,7 +983,7 @@ fieldset[disabled] .btn-outline-default.focus,
 fieldset[disabled] .btn-outline-default:active,
 fieldset[disabled] .btn-outline-default.active {
 	background-color: rgba(0, 0, 0, 0) !important;
-	border-color: #66615b !important;
+	border-color: #007f60 !important;
 }
 .btn-outline-primary {
 	background: rgba(0, 0, 0, 0);
@@ -1323,7 +1323,7 @@ fieldset[disabled] .btn-outline-neutral.active {
 .btn-neutral {
 	background-color: #fff;
 	color: #51cbce;
-	color: #66615b;
+	color: #007f60;
 }
 .btn-neutral:hover,
 .btn-neutral:focus,
@@ -1407,7 +1407,7 @@ fieldset[disabled] .btn-neutral.active {
 	color: #44c47d !important;
 }
 .btn-neutral.btn-default {
-	color: #66615b !important;
+	color: #007f60 !important;
 }
 .btn-neutral.btn-default:hover,
 .btn-neutral.btn-default:focus,
@@ -1466,13 +1466,13 @@ fieldset[disabled] .btn-neutral.active {
 }
 .btn-neutral.btn-border:hover,
 .btn-neutral.btn-border:focus {
-	color: #66615b;
+	color: #007f60;
 }
 .btn-neutral.btn-border:active,
 .btn-neutral.btn-border.active,
 .open > .btn-neutral.btn-border.dropdown-toggle {
 	background-color: #fff;
-	color: #66615b;
+	color: #007f60;
 }
 .btn-neutral.btn-link:active,
 .btn-neutral.btn-link.active {
@@ -1487,7 +1487,7 @@ fieldset[disabled] .btn-neutral.active {
 }
 .btn-simple {
 	border: 1px solid;
-	border-color: #66615b;
+	border-color: #007f60;
 	padding: 10px 22px;
 	background-color: rgba(0, 0, 0, 0);
 }
@@ -1608,7 +1608,7 @@ fieldset[disabled] .btn-link.active {
 	background-color: #fff;
 	border: 1px solid #ddd;
 	border-radius: 4px;
-	color: #66615b;
+	color: #007f60;
 	line-height: normal;
 	font-size: 14px;
 	-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
@@ -1629,7 +1629,7 @@ fieldset[disabled] .btn-link.active {
 	-webkit-box-shadow: none;
 	box-shadow: none;
 	outline: 0 !important;
-	color: #66615b;
+	color: #007f60;
 }
 .form-control:focus + .input-group-append .input-group-text,
 .form-control:focus ~ .input-group-append .input-group-text,
@@ -1648,7 +1648,7 @@ fieldset[disabled] .btn-link.active {
 }
 .has-success .form-control {
 	border: 1px solid #ccc;
-	color: #66615b;
+	color: #007f60;
 }
 .has-success .form-control.form-control-success {
 	padding-right: 2.5em !important;
@@ -1803,7 +1803,7 @@ fieldset[disabled] .btn-link.active {
 .input-group.has-success .input-group-prepend .input-group-text,
 .input-group.has-success .input-group-append .input-group-text {
 	border: 1px solid #ccc;
-	color: #66615b;
+	color: #007f60;
 	background-color: #fff;
 	border-right: none;
 }
@@ -1948,7 +1948,7 @@ fieldset[disabled] .btn-link.active {
 .input-group-prepend .input-group-text {
 	background-color: transparent;
 	border: 1px solid #e3e3e3;
-	color: #66615b;
+	color: #007f60;
 	border-top-right-radius: 4px;
 	border-bottom-right-radius: 4px;
 	-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
@@ -2051,7 +2051,7 @@ fieldset[disabled] .btn-link.active {
 .form-control[readonly],
 fieldset[disabled] .form-control {
 	background-color: #e3e3e3;
-	color: #66615b;
+	color: #007f60;
 	cursor: not-allowed;
 }
 .input-group-btn .btn {
@@ -2263,13 +2263,13 @@ a.text-gray:hover {
 }
 .blockquote {
 	border-left: none;
-	border: 1px solid #66615b;
+	border: 1px solid #007f60;
 	padding: 20px;
 	font-size: 1.1em;
 	line-height: 1.8;
 }
 .blockquote small {
-	color: #66615b;
+	color: #007f60;
 	font-size: 0.8571em;
 	text-transform: uppercase;
 }
@@ -2413,8 +2413,8 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	padding: 2px !important;
 }
 .badge.badge-default {
-	border-color: #66615b;
-	background-color: #66615b;
+	border-color: #007f60;
+	background-color: #007f60;
 }
 .badge.badge-primary {
 	border-color: #51cbce;
@@ -2539,7 +2539,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	top: -5px;
 }
 .form-check-label input[type="checkbox"]:checked + .form-check-sign:before {
-	background-color: #66615b;
+	background-color: #007f60;
 }
 .form-check-radio input[type="radio"] + .form-check-sign:after,
 .form-check-radio input[type="radio"] {
@@ -2581,29 +2581,29 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	color: #fff;
 }
 .navbar a.dropdown-item {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control,
 .navbar.bg-white .input-group.no-border .form-control {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control::-moz-placeholder,
 .navbar.bg-white .input-group.no-border .form-control::-moz-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control:-ms-input-placeholder,
 .navbar.bg-white .input-group.no-border .form-control:-ms-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group .form-control::-webkit-input-placeholder,
 .navbar.bg-white
 	.input-group.no-border
 	.form-control::-webkit-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .input-group-prepend .input-group-text i,
 .navbar.bg-white .input-group-append .input-group-text i {
-	color: #66615b;
+	color: #007f60;
 	opacity: 0.5;
 }
 .navbar .form-group,
@@ -2618,7 +2618,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .navbar .input-group .form-group-addon,
 .navbar .input-group .input-group-prepend .input-group-text,
 .navbar .input-group .input-group-append .input-group-text {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group .form-group-addon i,
 .navbar .form-group .input-group-prepend .input-group-text i,
@@ -2630,19 +2630,19 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 .navbar .form-group.no-border .form-control,
 .navbar .input-group.no-border .form-control {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group.no-border .form-control::-moz-placeholder,
 .navbar .input-group.no-border .form-control::-moz-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group.no-border .form-control:-ms-input-placeholder,
 .navbar .input-group.no-border .form-control:-ms-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .form-group.no-border .form-control::-webkit-input-placeholder,
 .navbar .input-group.no-border .form-control::-webkit-input-placeholder {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar p {
 	display: inline-block;
@@ -2730,7 +2730,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .navbar .navbar-nav .nav-item .nav-link:not(.btn):hover,
 .navbar .navbar-nav .nav-item .nav-link:not(.btn):active {
 	border-radius: 3px;
-	color: #66615b;
+	color: #007f60;
 }
 .navbar .logo-container {
 	width: 27px;
@@ -2769,17 +2769,17 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	border-bottom: 1px solid #ddd;
 }
 .navbar.navbar-transparent a:not(.dropdown-item):not(.btn) {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.navbar-transparent a:not(.dropdown-item):not(.btn).disabled {
 	opacity: 0.5;
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.navbar-transparent .button-bar {
-	background: #66615b;
+	background: #007f60;
 }
 .navbar.navbar-transparent .nav-item .nav-link:not(.btn) {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.navbar-transparent .nav-item.active .nav-link:not(.btn),
 .navbar.navbar-transparent .nav-item .nav-link:not(.btn):focus,
@@ -2789,14 +2789,14 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	color: #51cbce;
 }
 .navbar.bg-white a:not(.dropdown-item):not(.btn) {
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white a:not(.dropdown-item):not(.btn).disabled {
 	opacity: 0.5;
-	color: #66615b;
+	color: #007f60;
 }
 .navbar.bg-white .button-bar {
-	background: #66615b;
+	background: #007f60;
 }
 .navbar.bg-white .nav-item.active .nav-link:not(.btn),
 .navbar.bg-white .nav-item .nav-link:not(.btn):focus,
@@ -2805,13 +2805,13 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	color: #51bcda;
 }
 .navbar.bg-white .logo-container {
-	border: 1px solid #66615b;
+	border: 1px solid #007f60;
 }
 .navbar .navbar-collapse .nav-item a {
 	font-size: 14px;
 }
 .bg-default {
-	background-color: #66615b !important;
+	background-color: #007f60 !important;
 }
 .bg-primary {
 	background-color: #51cbce !important;
@@ -2899,30 +2899,9 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	content: "";
 }
 .page-header:before {
-	background-color: rgba(0, 0, 0, 0.3);
 }
 .page-header[filter-color="orange"] {
-	background: rgba(44, 44, 44, 0.2);
-	background: -webkit-linear-gradient(
-		90deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
-	background: -o-linear-gradient(
-		90deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
-	background: -moz-linear-gradient(
-		90deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
-	background: linear-gradient(
-		0deg,
-		rgba(44, 44, 44, 0.2),
-		rgba(224, 23, 3, 0.6)
-	);
+	
 }
 .dropdown .dropdown-menu,
 .dropup .dropdown-menu,
@@ -3048,7 +3027,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	text-align: center;
 }
 .dropdown-menu .dropdown-item {
-	color: #66615b;
+	color: #007f60;
 	font-size: 14px;
 	padding: 10px 45px 10px 15px;
 	clear: both;
@@ -3085,7 +3064,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 .dropdown-menu .dropdown-item:hover,
 .dropdown-menu .dropdown-item:focus {
-	background-color: #66615b;
+	background-color: #007f60;
 }
 .dropdown-menu.dropdown-primary .dropdown-item:hover,
 .dropdown-menu.dropdown-primary .dropdown-item:focus {
@@ -3210,7 +3189,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	}
 }
 .dropdown-sharing .dropup-item {
-	color: #66615b;
+	color: #007f60;
 	font-size: 14px;
 }
 .dropdown-sharing .dropup-item .social-line {
@@ -3232,7 +3211,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .dropdown-sharing .dropup-item:focus .social-line,
 .dropdown-sharing .dropup-item:focus .action-line {
 	background-color: #fff;
-	color: #66615b;
+	color: #007f60;
 	opacity: 1;
 	text-decoration: none;
 }
@@ -3264,7 +3243,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 }
 .dropdown-actions li:hover a,
 .dropdown-actions li:focus a {
-	color: #66615b;
+	color: #007f60;
 	opacity: 1;
 	text-decoration: none;
 }
@@ -3302,7 +3281,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 .dropdown-notification .dropdown-notification-list .notification-item {
 	border-bottom: 1px solid #f1eae0;
 	font-size: 16px;
-	color: #66615b;
+	color: #007f60;
 }
 .dropdown-notification
 	.dropdown-notification-list
@@ -3361,7 +3340,7 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
 	.dropdown-notification-list
 	.notification-item:hover
 	.notification-text {
-	color: #66615b;
+	color: #007f60;
 	background-color: #f0efeb !important;
 }
 .dropdown-notification
@@ -4062,6 +4041,7 @@ img {
 	left: 0;
 	z-index: 1030;
 	border-right: 1px solid #ddd;
+	background-color: #007f60
 }
 .sidebar .sidebar-wrapper,
 .off-canvas-sidebar .sidebar-wrapper {
@@ -4071,6 +4051,7 @@ img {
 	width: 260px;
 	z-index: 4;
 	padding-bottom: 100px;
+	background-color: #007f60
 }
 .sidebar .sidebar-wrapper .dropdown .dropdown-backdrop,
 .off-canvas-sidebar .sidebar-wrapper .dropdown .dropdown-backdrop {
@@ -4330,7 +4311,7 @@ img {
 	> ul
 	> li
 	> a {
-	color: #66615b;
+	color: #007f60;
 	opacity: 0.7;
 }
 .sidebar[data-color="white"] .nav li:hover:not(.active) > a,
@@ -4341,11 +4322,11 @@ img {
 }
 .sidebar[data-color="white"] .logo .simple-text,
 .off-canvas-sidebar[data-color="white"] .logo .simple-text {
-	color: #66615b;
+	color: #007f60;
 }
 .sidebar[data-color="white"] .logo:after,
 .off-canvas-sidebar[data-color="white"] .logo:after {
-	background-color: #66615b;
+	background-color: #007f60;
 	opacity: 0.4;
 }
 .sidebar[data-color="white"] .user .info a span,
@@ -4354,11 +4335,11 @@ img {
 .off-canvas-sidebar[data-color="white"] .user .info a span,
 .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-mini-icon,
 .off-canvas-sidebar[data-color="white"] .user .nav .sidebar-normal {
-	color: #66615b !important;
+	color: #007f60 !important;
 }
 .sidebar[data-color="white"] .user:after,
 .off-canvas-sidebar[data-color="white"] .user:after {
-	background-color: #66615b;
+	background-color: #007f60;
 	opacity: 0.4;
 }
 .sidebar[data-color="black"]:after,
@@ -4684,16 +4665,6 @@ img {
 	height: 260px;
 	padding-top: 80px;
 	padding-bottom: 45px;
-	background: #141e30;
-	background: -webkit-gradient(
-		linear,
-		left top,
-		right top,
-		from(#0c2646),
-		color-stop(60%, #204065),
-		to(#2a5788)
-	);
-	background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
 	position: relative;
 	overflow: hidden;
 }
@@ -4913,7 +4884,7 @@ img {
 	position: relative;
 	left: -10px;
 	font-size: 0.7142em;
-	color: #66615b;
+	color: #007f60;
 }
 .fixed-plugin .adjustments-line .togglebutton .label-switch.label-right {
 	left: 10px;
@@ -5138,7 +5109,7 @@ img {
 	margin-right: 5px;
 	position: relative;
 	top: 0px;
-	color: #66615b;
+	color: #007f60;
 }
 .card .card-footer .btn {
 	margin: 0;
@@ -5340,7 +5311,7 @@ img {
 	}
 	.navbar.bg-white .dropdown-menu .dropdown-item:focus,
 	.navbar.bg-white .dropdown-menu .dropdown-item:hover {
-		color: #66615b;
+		color: #007f60;
 	}
 	.navbar .navbar-toggler-bar {
 		display: block;
@@ -5348,7 +5319,7 @@ img {
 		width: 22px;
 		height: 1px;
 		border-radius: 1px;
-		background: #66615b;
+		background: #007f60;
 	}
 	.navbar .navbar-toggler-bar + .navbar-toggler-bar {
 		margin-top: 7px;
@@ -5361,7 +5332,7 @@ img {
 		transition: width 0.2s linear;
 	}
 	.navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
-		background-color: #66615b;
+		background-color: #007f60;
 	}
 	.navbar .toggled .navbar-toggler-bar {
 		width: 24px;
diff --git a/src/assets/scss/paper-dashboard/_checkboxes-radio.scss b/src/assets/scss/paper-dashboard/_checkboxes-radio.scss
index a731ab0..be461cd 100644
--- a/src/assets/scss/paper-dashboard/_checkboxes-radio.scss
+++ b/src/assets/scss/paper-dashboard/_checkboxes-radio.scss
@@ -1,142 +1,142 @@
 .from-check,
 .form-check-radio {
-    margin-bottom: 12px;
-    position: relative;
+	margin-bottom: 12px;
+	position: relative;
 }
 
 .form-check {
-  padding-left: 0;
-  margin-bottom: .5rem;
-
-    .form-check-label{
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
-        padding-left: 35px;
-        line-height: 26px;
-        margin-bottom: 0;
-    }
-
-    .form-check-sign::before,
-    .form-check-sign::after {
-        content: " ";
-        display: inline-block;
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        left: 0;
-        cursor: pointer;
-        border-radius: 6px;
-        top: 0;
-        background-color: #AAA7A4;
-        -webkit-transition: opacity 0.3s linear;
-        -moz-transition: opacity 0.3s linear;
-        -o-transition: opacity 0.3s linear;
-        -ms-transition: opacity 0.3s linear;
-        transition: opacity 0.3s linear;
-    }
-    .form-check-sign::after {
-        font-family: 'FontAwesome';
-        content: "\f00c";
-        top: -1px;
-        text-align: center;
-        font-size: 15px;
-        opacity: 0;
-        color: #FFF;
-        border: 0;
-        background-color: inherit;
-    }
-    &.disabled{
-        .form-check-label{
-            color: $dark-gray;
-            opacity: .5;
-            cursor: not-allowed;
-        }
-    }
-
+	padding-left: 0;
+	margin-bottom: 0.5rem;
+
+	.form-check-label {
+		display: inline-block;
+		position: relative;
+		cursor: pointer;
+		padding-left: 35px;
+		line-height: 26px;
+		margin-bottom: 0;
+	}
+
+	.form-check-sign::before,
+	.form-check-sign::after {
+		content: " ";
+		display: inline-block;
+		position: absolute;
+		width: 24px;
+		height: 24px;
+		left: 0;
+		cursor: pointer;
+		border-radius: 6px;
+		top: 0;
+		background-color: #aaa7a4;
+		-webkit-transition: opacity 0.3s linear;
+		-moz-transition: opacity 0.3s linear;
+		-o-transition: opacity 0.3s linear;
+		-ms-transition: opacity 0.3s linear;
+		transition: opacity 0.3s linear;
+	}
+	.form-check-sign::after {
+		font-family: "FontAwesome";
+		content: "\f00c";
+		top: -1px;
+		text-align: center;
+		font-size: 15px;
+		opacity: 0;
+		color: #fff;
+		border: 0;
+		background-color: inherit;
+	}
+	&.disabled {
+		.form-check-label {
+			color: $dark-gray;
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 }
 
 .form-check.disabled .form-check-label,
 .form-check.disabled .form-check-label {
-
 }
 
 .form-check input[type="checkbox"],
-.form-check-radio input[type="radio"]{
-    opacity: 0;
-    position: absolute;
-    visibility: hidden;
+.form-check-radio input[type="radio"] {
+	opacity: 0;
+	position: absolute;
+	visibility: hidden;
 }
-.form-check input[type="checkbox"]:checked + .form-check-sign::after{
-    opacity: 1;
+.form-check input[type="checkbox"]:checked + .form-check-sign::after {
+	opacity: 1;
 }
 
 .form-control input[type="checkbox"]:disabled + .form-check-sign::before,
-.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
-    cursor: not-allowed;
+.checkbox input[type="checkbox"]:disabled + .form-check-sign::after {
+	cursor: not-allowed;
 }
 
-.form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign,
-.form-check-radio input[type="radio"]:disabled + .form-check-sign{
-    pointer-events: none !important;
+.form-check
+	.form-check-label
+	input[type="checkbox"]:disabled
+	+ .form-check-sign,
+.form-check-radio input[type="radio"]:disabled + .form-check-sign {
+	pointer-events: none !important;
 }
 
-.form-check-radio{
-  margin-left: -3px;
-
-    .form-check-label{
-        padding-left: 2rem;
-    }
-    &.disabled{
-        .form-check-label{
-            color: $dark-gray;
-            opacity: .5;
-            cursor: not-allowed;
-        }
-    }
+.form-check-radio {
+	margin-left: -3px;
+
+	.form-check-label {
+		padding-left: 2rem;
+	}
+	&.disabled {
+		.form-check-label {
+			color: $dark-gray;
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 }
 
-.form-check-radio .form-check-sign::before{
-    font-family: 'FontAwesome';
-    content: "\f10c";
-    font-size: 22px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    display: inline-block;
-    position: absolute;
-    opacity: .50;
-    left: 5px;
-    top: -5px;
+.form-check-radio .form-check-sign::before {
+	font-family: "FontAwesome";
+	content: "\f10c";
+	font-size: 22px;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	display: inline-block;
+	position: absolute;
+	opacity: 0.5;
+	left: 5px;
+	top: -5px;
 }
 
-.form-check-label input[type="checkbox"]:checked + .form-check-sign:before{
-    background-color: #66615B;
+.form-check-label input[type="checkbox"]:checked + .form-check-sign:before {
+	background-color: #007f60;
 }
 
 .form-check-radio input[type="radio"] + .form-check-sign:after,
 .form-check-radio input[type="radio"] {
-    opacity: 0;
-    @include transition-opacity(0.3s, linear);
-    content:" ";
-    display: block;
+	opacity: 0;
+	@include transition-opacity(0.3s, linear);
+	content: " ";
+	display: block;
 }
 
 .form-check-radio input[type="radio"]:checked + .form-check-sign::after {
-    font-family: 'FontAwesome';
-    content: "\f192";
-    top: -5px;
-    position: absolute;
-    left: 5px;
-    opacity: 1;
-    font-size: 22px;
+	font-family: "FontAwesome";
+	content: "\f192";
+	top: -5px;
+	position: absolute;
+	left: 5px;
+	opacity: 1;
+	font-size: 22px;
 }
 
-.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
-    opacity: 1;
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
+	opacity: 1;
 }
 
-
 .form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
 .form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
-    color: $dark-gray;
+	color: $dark-gray;
 }
diff --git a/src/assets/scss/paper-dashboard/_dropdown.scss b/src/assets/scss/paper-dashboard/_dropdown.scss
index a3edc92..dd61893 100644
--- a/src/assets/scss/paper-dashboard/_dropdown.scss
+++ b/src/assets/scss/paper-dashboard/_dropdown.scss
@@ -1,195 +1,189 @@
 .dropdown,
 .dropup,
-.bootstrap-select{
-    .dropdown-menu{
-        display: block;
-        @include opacity(0);
-        @include box-shadow($dropdown-shadow);
-        visibility: hidden;
-        position: absolute;
-        transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
-
-        &[x-placement="top-start"]{
-            @include transform-translate-y-dropdown(0px);
-
-        }
-        &[x-placement="bottom-start"]{
-            @include transform-translate-y-dropdown(0px);
-        }
-    }
-
-    &.show .dropdown-menu{
-        @include opacity(1);
-        visibility: visible;
-
-        &[x-placement="top-start"]{
-            @include transform-translate-y-dropdown(-50px);
-            top: auto !important;
-            bottom: 0 !important;
-
-        }
-        &[x-placement="bottom-start"]{
-            @include transform-translate-y-dropdown(50px);
-            bottom: auto !important;
-            top: 0 !important;
-        }
-    }
-
+.bootstrap-select {
+	.dropdown-menu {
+		display: block;
+		@include opacity(0);
+		@include box-shadow($dropdown-shadow);
+		visibility: hidden;
+		position: absolute;
+		transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+			opacity 0.3s ease 0s, height 0s linear 0.35s;
+
+		&[x-placement="top-start"] {
+			@include transform-translate-y-dropdown(0px);
+		}
+		&[x-placement="bottom-start"] {
+			@include transform-translate-y-dropdown(0px);
+		}
+	}
+
+	&.show .dropdown-menu {
+		@include opacity(1);
+		visibility: visible;
+
+		&[x-placement="top-start"] {
+			@include transform-translate-y-dropdown(-50px);
+			top: auto !important;
+			bottom: 0 !important;
+		}
+		&[x-placement="bottom-start"] {
+			@include transform-translate-y-dropdown(50px);
+			bottom: auto !important;
+			top: 0 !important;
+		}
+	}
 }
 
 .dropup .dropdown-menu,
-.dropdown-btn .dropdown-menu{
-    @include transform-translate-y-dropdown(0px);
-    top: auto !important;
-    bottom: 0 !important;
-
+.dropdown-btn .dropdown-menu {
+	@include transform-translate-y-dropdown(0px);
+	top: auto !important;
+	bottom: 0 !important;
 }
 
 .dropup.show .dropdown-menu,
-.dropdown-btn.show .dropdown-menu{
-    opacity: 1;
-    visibility: visible;
+.dropdown-btn.show .dropdown-menu {
+	opacity: 1;
+	visibility: visible;
 
-    .dropdown-menu.inner{
-      @include transform-translate-y(0px);
-    }
+	.dropdown-menu.inner {
+		@include transform-translate-y(0px);
+	}
 }
 
-.bootstrap-select.show{
-  .dropdown-menu.show{
-    &[x-placement="top-start"]{
-        @include transform-translate-y-dropdown(-60px);
-        top: auto !important;
-        bottom: 0 !important;
-    }
-
-    li:last-child {
-      a:hover{
-        border-radius: 0 0 12px 12px;
-      }
-    }
-  }
+.bootstrap-select.show {
+	.dropdown-menu.show {
+		&[x-placement="top-start"] {
+			@include transform-translate-y-dropdown(-60px);
+			top: auto !important;
+			bottom: 0 !important;
+		}
+
+		li:last-child {
+			a:hover {
+				border-radius: 0 0 12px 12px;
+			}
+		}
+	}
 }
 
-.bootstrap-select.dropup.show{
-  &:before {
-    top: -1px !important;
-  }
+.bootstrap-select.dropup.show {
+	&:before {
+		top: -1px !important;
+	}
 
-  &:after {
-    top: -2px !important;
-  }
+	&:after {
+		top: -2px !important;
+	}
 }
-.dropdown-menu{
-    background-color: $white-color;
-    border: 0 none;
-    border-radius: $border-radius-extreme;
-    margin-top: 10px;
-    padding: 0px;
-
-    .divider{
-        background-color: $medium-pale-bg;
-        margin: 0px;
-    }
-
-    .dropdown-header{
-        color: $dark-gray;
-        font-size: $font-size-small;
-        padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
-    }
-
-    .no-notification{
-        color: #9A9A9A;
-        font-size: 1.2em;
-        padding: 30px 30px;
-        text-align: center;
-    }
-
-    .dropdown-item{
-        color: $font-color;
-        font-size: $font-size-base;
-        padding: 10px 45px 10px 15px;
-        clear: both;
-        white-space: nowrap;
-        width: 100%;
-        display: block;
-
-       img{
-           margin-top: -3px;
-       }
-
-    }
-    .dropdown-item:focus{
-        outline: 0 !important;
-    }
-
-    .btn-group.select &{
-        min-width: 100%;
-    }
-
-    .dropdown-item:first-child{
-       border-top-left-radius: $border-radius-extreme;
-       border-top-right-radius: $border-radius-extreme;
-    }
-
-    .dropdown-item:last-child{
-        border-bottom-left-radius: $border-radius-extreme;
-        border-bottom-right-radius: $border-radius-extreme;
-    }
-
-    .select & .dropdown-item:first-child{
-        border-radius: 0;
-        border-bottom: 0 none;
-    }
-
-    .dropdown-item:hover,
-    .dropdown-item:focus{
-        color: $white-color !important;
-        opacity: 1;
-        text-decoration: none;
-
-    }
-    .dropdown-item:hover,
-    .dropdown-item:focus{
-        background-color: $default-color;
-    }
-
-    &.dropdown-primary .dropdown-item:hover,
-    &.dropdown-primary .dropdown-item:focus{
-        background-color: $bg-primary;
-    }
-    &.dropdown-info .dropdown-item:hover,
-    &.dropdown-info .dropdown-item:focus{
-        background-color: $bg-info;
-    }
-    &.dropdown-success .dropdown-item:hover,
-    &.dropdown-success .dropdown-item:focus{
-        background-color: $bg-success;
-    }
-    &.dropdown-warning .dropdown-item:hover,
-    &.dropdown-warning .dropdown-item:focus{
-        background-color: $bg-warning;
-    }
-    &.dropdown-danger .dropdown-item:hover,
-    &.dropdown-danger .dropdown-item:focus{
-        background-color: $bg-danger;
-    }
-
+.dropdown-menu {
+	background-color: $white-color;
+	border: 0 none;
+	border-radius: $border-radius-extreme;
+	margin-top: 10px;
+	padding: 0px;
+
+	.divider {
+		background-color: $medium-pale-bg;
+		margin: 0px;
+	}
+
+	.dropdown-header {
+		color: $dark-gray;
+		font-size: $font-size-small;
+		padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
+	}
+
+	.no-notification {
+		color: #9a9a9a;
+		font-size: 1.2em;
+		padding: 30px 30px;
+		text-align: center;
+	}
+
+	.dropdown-item {
+		color: $font-color;
+		font-size: $font-size-base;
+		padding: 10px 45px 10px 15px;
+		clear: both;
+		white-space: nowrap;
+		width: 100%;
+		display: block;
+
+		img {
+			margin-top: -3px;
+		}
+	}
+	.dropdown-item:focus {
+		outline: 0 !important;
+	}
+
+	.btn-group.select & {
+		min-width: 100%;
+	}
+
+	.dropdown-item:first-child {
+		border-top-left-radius: $border-radius-extreme;
+		border-top-right-radius: $border-radius-extreme;
+	}
+
+	.dropdown-item:last-child {
+		border-bottom-left-radius: $border-radius-extreme;
+		border-bottom-right-radius: $border-radius-extreme;
+	}
+
+	.select & .dropdown-item:first-child {
+		border-radius: 0;
+		border-bottom: 0 none;
+	}
+
+	.dropdown-item:hover,
+	.dropdown-item:focus {
+		color: $white-color !important;
+		opacity: 1;
+		text-decoration: none;
+	}
+	.dropdown-item:hover,
+	.dropdown-item:focus {
+		background-color: $default-color;
+	}
+
+	&.dropdown-primary .dropdown-item:hover,
+	&.dropdown-primary .dropdown-item:focus {
+		background-color: $bg-primary;
+	}
+	&.dropdown-info .dropdown-item:hover,
+	&.dropdown-info .dropdown-item:focus {
+		background-color: $bg-info;
+	}
+	&.dropdown-success .dropdown-item:hover,
+	&.dropdown-success .dropdown-item:focus {
+		background-color: $bg-success;
+	}
+	&.dropdown-warning .dropdown-item:hover,
+	&.dropdown-warning .dropdown-item:focus {
+		background-color: $bg-warning;
+	}
+	&.dropdown-danger .dropdown-item:hover,
+	&.dropdown-danger .dropdown-item:focus {
+		background-color: $bg-danger;
+	}
 }
-.dropdown-divider{
-    margin: 0 !important;
+.dropdown-divider {
+	margin: 0 !important;
 }
 
 //fix bug for the select items in btn-group
-.btn-group.select{
-    // overflow: hidden;
+.btn-group.select {
+	// overflow: hidden;
 }
-.btn-group.select.open{
-    overflow: visible;
+.btn-group.select.open {
+	overflow: visible;
 }
-.dropdown-menu-right{
-    right: -2px;
-    left: auto;
+.dropdown-menu-right {
+	right: -2px;
+	left: auto;
 }
 
 .navbar-nav .dropdown-menu:before,
@@ -197,15 +191,15 @@
 .dropdown .dropdown-menu[x-placement="bottom-end"]:before,
 .card.card-just-text .dropdown .dropdown-menu:before,
 .card-just-text .dropdown .dropdown-menu:before,
-.dropdown-btn .dropdown-menu:before{
-    border-bottom: 11px solid $medium-pale-bg;
-    border-left: 11px solid rgba(0, 0, 0, 0);
-    border-right: 11px solid rgba(0, 0, 0, 0);
-    content: "";
-    display: inline-block;
-    position: absolute;
-    right: 12px;
-    top: -12px;
+.dropdown-btn .dropdown-menu:before {
+	border-bottom: 11px solid $medium-pale-bg;
+	border-left: 11px solid rgba(0, 0, 0, 0);
+	border-right: 11px solid rgba(0, 0, 0, 0);
+	content: "";
+	display: inline-block;
+	position: absolute;
+	right: 12px;
+	top: -12px;
 }
 
 .navbar-nav .dropdown-menu:after,
@@ -213,268 +207,271 @@
 .dropdown .dropdown-menu[x-placement="bottom-end"]:after,
 .card.card-just-text .dropdown .dropdown-menu:after,
 .card-just-text .dropdown .dropdown-menu:after,
-.dropdown-btn .dropdown-menu:after{
-    border-bottom: 11px solid $white-color;
-    border-left: 11px solid rgba(0, 0, 0, 0);
-    border-right: 11px solid rgba(0, 0, 0, 0);
-    content: "";
-    display: inline-block;
-    position: absolute;
-    right: 12px;
-    top: -11px;
+.dropdown-btn .dropdown-menu:after {
+	border-bottom: 11px solid $white-color;
+	border-left: 11px solid rgba(0, 0, 0, 0);
+	border-right: 11px solid rgba(0, 0, 0, 0);
+	content: "";
+	display: inline-block;
+	position: absolute;
+	right: 12px;
+	top: -11px;
 }
 
 .dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:before,
-.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:before{
-    left: 30px !important;
-    right: auto;
+.dropdown
+	.dropdown-menu.dropdown-notification[x-placement="bottom-start"]:before {
+	left: 30px !important;
+	right: auto;
 }
 .dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:after,
-.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:after{
-    left: 30px !important;
-    right: auto;
+.dropdown
+	.dropdown-menu.dropdown-notification[x-placement="bottom-start"]:after {
+	left: 30px !important;
+	right: auto;
 }
 //  the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file
 //  code from _responsive.scss
 
-@media screen and (min-width: 768px){
-    .navbar-form {
-      margin-top: 21px;
-      margin-bottom: 21px;
-      padding-left: 5px;
-      padding-right: 5px;
-    }
-    .navbar-search-form{
-      display: none;
-    }
-    .navbar-nav .dropdown-item .dropdown-menu,
-    .dropdown .dropdown-menu,
-    .dropdown-btn .dropdown-menu{
-      transform: translate3d(0px, -40px, 0px);
-      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
-    }
-    .navbar-nav .dropdown-item.show .dropdown-menu,
-    .dropdown.show .dropdown-menu,
-    .dropdown-btn.show .dropdown-menu{
-      transform: translate3d(0px, 0px, 0px);
-      visibility: visible !important;
-    }
-    .bootstrap-select .dropdown-menu{
-      -webkit-transition: all 150ms linear;
-      -moz-transition: all 150ms linear;
-      -o-transition: all 150ms linear;
-      -ms-transition: all 150ms linear;
-      transition: all 150ms linear;
-    }
-    .bootstrap-datetimepicker-widget{
-      visibility: visible !important;
-    }
-
-    .bootstrap-select .show .dropdown-menu{
-      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
-      transform: translate3d(0px, 0px, 0px);
-    }
-
-    .navbar-nav.navbar-right li .dropdown-menu:before,
-    .navbar-nav.navbar-right li .dropdown-menu:after{
-        left: auto;
-        right: 12px;
-    }
-
-
-    .footer:not(.footer-big){
-        nav ul{
-           li:first-child{
-             margin-left: 0;
-           }
-        }
-    }
-
-// no dragging the others navs in page
-    body > .navbar-collapse.collapse{
-        display: none !important;
-    }
+@media screen and (min-width: 768px) {
+	.navbar-form {
+		margin-top: 21px;
+		margin-bottom: 21px;
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+	.navbar-search-form {
+		display: none;
+	}
+	.navbar-nav .dropdown-item .dropdown-menu,
+	.dropdown .dropdown-menu,
+	.dropdown-btn .dropdown-menu {
+		transform: translate3d(0px, -40px, 0px);
+		transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+			opacity 0.3s ease 0s, height 0s linear 0.35s;
+	}
+	.navbar-nav .dropdown-item.show .dropdown-menu,
+	.dropdown.show .dropdown-menu,
+	.dropdown-btn.show .dropdown-menu {
+		transform: translate3d(0px, 0px, 0px);
+		visibility: visible !important;
+	}
+	.bootstrap-select .dropdown-menu {
+		-webkit-transition: all 150ms linear;
+		-moz-transition: all 150ms linear;
+		-o-transition: all 150ms linear;
+		-ms-transition: all 150ms linear;
+		transition: all 150ms linear;
+	}
+	.bootstrap-datetimepicker-widget {
+		visibility: visible !important;
+	}
+
+	.bootstrap-select .show .dropdown-menu {
+		transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+			opacity 0.3s ease 0s, height 0s linear 0.35s;
+		transform: translate3d(0px, 0px, 0px);
+	}
+
+	.navbar-nav.navbar-right li .dropdown-menu:before,
+	.navbar-nav.navbar-right li .dropdown-menu:after {
+		left: auto;
+		right: 12px;
+	}
+
+	.footer:not(.footer-big) {
+		nav ul {
+			li:first-child {
+				margin-left: 0;
+			}
+		}
+	}
+
+	// no dragging the others navs in page
+	body > .navbar-collapse.collapse {
+		display: none !important;
+	}
 }
 
-.dropdown-sharing{
-    .dropup-item{
-        color: $font-color;
-        font-size: $font-size-base;
-
-        .social-line{
-            line-height: 28px;
-            padding: 10px 20px 5px 20px !important;
-
-            [class*="icon-"]{
-                font-size: 20px;
-            }
-        }
-        &:last-child{
-            margin: 0 13px;
-            display: block;
-        }
-        .btn{
-            margin: 10px;
-        }
-    }
-
-    .dropup-item:hover,
-    .dropup-item:focus{
-        .social-line,
-        .action-line{
-            background-color: $white-color;
-            color: $font-color;
-            opacity: 1;
-            text-decoration: none;
-        }
-    }
+.dropdown-sharing {
+	.dropup-item {
+		color: $font-color;
+		font-size: $font-size-base;
+
+		.social-line {
+			line-height: 28px;
+			padding: 10px 20px 5px 20px !important;
+
+			[class*="icon-"] {
+				font-size: 20px;
+			}
+		}
+		&:last-child {
+			margin: 0 13px;
+			display: block;
+		}
+		.btn {
+			margin: 10px;
+		}
+	}
+
+	.dropup-item:hover,
+	.dropup-item:focus {
+		.social-line,
+		.action-line {
+			background-color: $white-color;
+			color: $font-color;
+			opacity: 1;
+			text-decoration: none;
+		}
+	}
 }
 .show .dropdown-sharing,
-.show .dropdown-actions{
-    margin-bottom: 1px;
+.show .dropdown-actions {
+	margin-bottom: 1px;
 }
 
-.dropdown-actions{
-    .dropdown-item{
-        margin: -15px 35px;
-        .action-line{
-            padding: 5px 10px;
-            line-height: 24px;
-            font-weight: bold;
-            [class*="icon-"]{
-                font-size: 24px;
-            }
-            .col-sm-9{
-                line-height: 34px;
-            }
-        }
-        .link-danger{
-            color: $danger-color;
-            &:hover, &:active, &:focus{
-                color: $danger-color;
-            }
-        }
-    }
-    li:hover,
-    li:focus{
-        a{
-            color: $font-color;
-            opacity: 1;
-            text-decoration: none;
-        }
-    }
-    .action-line{
-        .icon-simple{
-            margin-left: -15px;
-        }
-    }
+.dropdown-actions {
+	.dropdown-item {
+		margin: -15px 35px;
+		.action-line {
+			padding: 5px 10px;
+			line-height: 24px;
+			font-weight: bold;
+			[class*="icon-"] {
+				font-size: 24px;
+			}
+			.col-sm-9 {
+				line-height: 34px;
+			}
+		}
+		.link-danger {
+			color: $danger-color;
+			&:hover,
+			&:active,
+			&:focus {
+				color: $danger-color;
+			}
+		}
+	}
+	li:hover,
+	li:focus {
+		a {
+			color: $font-color;
+			opacity: 1;
+			text-decoration: none;
+		}
+	}
+	.action-line {
+		.icon-simple {
+			margin-left: -15px;
+		}
+	}
 }
 .dropdown .dropdown-menu[x-placement="top-start"]:before,
 .dropdown .dropdown-menu[x-placement="top-end"]:before,
-.dropup .dropdown-menu:before{
-    border-top: 11px solid #DCD9D1;
-    border-left: 11px solid transparent;
-    border-right: 11px solid transparent;
-    content: "";
-    display: inline-block;
-    position: absolute;
-    right: 12px;
-    bottom: -12px;
+.dropup .dropdown-menu:before {
+	border-top: 11px solid #dcd9d1;
+	border-left: 11px solid transparent;
+	border-right: 11px solid transparent;
+	content: "";
+	display: inline-block;
+	position: absolute;
+	right: 12px;
+	bottom: -12px;
 }
 
 .dropdown .dropdown-menu[x-placement="top-start"]:after,
 .dropdown .dropdown-menu[x-placement="top-end"]:after,
-.dropup .dropdown-menu:after{
-    border-top: 11px solid #FFF;
-    border-left: 11px solid transparent;
-    border-right: 11px solid transparent;
-    content: "";
-    display: inline-block;
-    position: absolute;
-    right: 12px;
-    bottom: -11px;
+.dropup .dropdown-menu:after {
+	border-top: 11px solid #fff;
+	border-left: 11px solid transparent;
+	border-right: 11px solid transparent;
+	content: "";
+	display: inline-block;
+	position: absolute;
+	right: 12px;
+	bottom: -11px;
 }
 
 .dropup,
-.dropdown{
-    .dropdown-toggle:after{
-        margin-left: 0;
-    }
+.dropdown {
+	.dropdown-toggle:after {
+		margin-left: 0;
+	}
 }
 
-.dropdown-notification{
-    .dropdown-notification-list{
-            .notification-item{
-                border-bottom: 1px solid #F1EAE0;
-                font-size: 16px;
-                color: #66615b;
-
-                .notification-text{
-                    padding-left: 40px;
-                    position: relative;
-                    min-width: 330px;
-                    min-height: 70px;
-                    white-space: normal;
-
-
-                    .label{
-                        display: block;
-                        position: absolute;
-                        top: 50%;
-                        margin-top: -12px;
-                        left: 7px;
-                    }
-                    .message{
-                        font-size: 0.9em;
-                        line-height: 0.7;
-                        margin-left: 10px;
-                    }
-                    .time{
-                        color: #9A9A9A;
-                        font-size: 0.7em;
-                        margin-left: 10px;
-                    }
-                }
-                .read-notification{
-                    font-size: 12px;
-                    opacity: 0;
-                    position: absolute;
-                    right: 5px;
-                    top: 50%;
-                    margin-top: -12px;
-                }
-                &:hover{
-                    text-decoration: none;
-
-                    .notification-text{
-                        color: #66615b;
-                        background-color: #F0EFEB !important;
-                    }
-                    .read-notification{
-                        opacity: 1 !important;
-                    }
-                }
-            }
-
-    }
-    .dropdown-footer{
-        background-color: #E8E7E3;
-        border-radius: 0 0 8px 8px;
-
-        .dropdown-footer-menu{
-            list-style: outside none none;
-            padding: 0px 5px;
-            li{
-                display: inline-block;
-                text-align: left;
-                padding: 0 10px;
-
-                a{
-                    color: #9C9B99;
-                    font-size: 0.9em;
-                    line-height: 35px;
-                }
-            }
-        }
-    }
+.dropdown-notification {
+	.dropdown-notification-list {
+		.notification-item {
+			border-bottom: 1px solid #f1eae0;
+			font-size: 16px;
+			color: #007f60;
+
+			.notification-text {
+				padding-left: 40px;
+				position: relative;
+				min-width: 330px;
+				min-height: 70px;
+				white-space: normal;
+
+				.label {
+					display: block;
+					position: absolute;
+					top: 50%;
+					margin-top: -12px;
+					left: 7px;
+				}
+				.message {
+					font-size: 0.9em;
+					line-height: 0.7;
+					margin-left: 10px;
+				}
+				.time {
+					color: #9a9a9a;
+					font-size: 0.7em;
+					margin-left: 10px;
+				}
+			}
+			.read-notification {
+				font-size: 12px;
+				opacity: 0;
+				position: absolute;
+				right: 5px;
+				top: 50%;
+				margin-top: -12px;
+			}
+			&:hover {
+				text-decoration: none;
+
+				.notification-text {
+					color: #007f60;
+					background-color: #f0efeb !important;
+				}
+				.read-notification {
+					opacity: 1 !important;
+				}
+			}
+		}
+	}
+	.dropdown-footer {
+		background-color: #e8e7e3;
+		border-radius: 0 0 8px 8px;
+
+		.dropdown-footer-menu {
+			list-style: outside none none;
+			padding: 0px 5px;
+			li {
+				display: inline-block;
+				text-align: left;
+				padding: 0 10px;
+
+				a {
+					color: #9c9b99;
+					font-size: 0.9em;
+					line-height: 35px;
+				}
+			}
+		}
+	}
 }
diff --git a/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss b/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss
index ccf5bfe..6af1c90 100644
--- a/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss
+++ b/src/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss
@@ -19,6 +19,7 @@
 	left: 0;
 	z-index: 1030;
 	border-right: 1px solid #ddd;
+	background-color: #007f60;
 
 	.sidebar-wrapper {
 		position: relative;
diff --git a/src/assets/scss/paper-dashboard/_variables.scss b/src/assets/scss/paper-dashboard/_variables.scss
index ecd1a51..177a8e1 100644
--- a/src/assets/scss/paper-dashboard/_variables.scss
+++ b/src/assets/scss/paper-dashboard/_variables.scss
@@ -2,401 +2,393 @@
 //
 //## For each of Bootstrap's buttons, define text, background and border color.
 
-$font-color:                 #66615b !default;
-$fill-font-color:            rgba(255, 255, 255, 0.8);
-$font-family-sans-serif:     'Montserrat', "Helvetica", Arial, sans-serif;
-$sans-serif-family:          'Montserrat', 'Helvetica Neue',  Arial, sans-serif;
+$font-color: #007f60 !default;
+$fill-font-color: rgba(255, 255, 255, 0.8);
+$font-family-sans-serif: "Montserrat", "Helvetica", Arial, sans-serif;
+$sans-serif-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
 
+$none: 0 !default;
+$border-thin: 1px !default;
+$border-thick: 2px !default;
 
-$none:                       0   !default;
-$border-thin:                1px !default;
-$border-thick:               2px !default;
+$white-color: #ffffff !default;
+$white-bg: #ffffff !default;
+$orange-bg: #e95e38 !default;
 
-$white-color:                #FFFFFF !default;
-$white-bg:                   #FFFFFF !default;
-$orange-bg:                  #e95e38 !default;
+$smoke-bg: #f5f5f5 !default;
+$light-black: #444 !default;
 
-$smoke-bg:                   #F5F5F5 !default;
-$light-black:                #444    !default;
+$black-bg: rgba(30, 30, 30, 0.97) !default;
 
-$black-bg:                   rgba(30,30,30,.97) !default;
+$black-color: #2c2c2c !default;
+$black-hr: #444444 !default;
 
-$black-color:                #2c2c2c !default;
-$black-hr:                   #444444 !default;
+$hr-line: rgba(0, 0, 0, 0.1) !default;
 
-$hr-line:                    rgba(0,0,0, .1) !default;
+$light-gray: #e3e3e3 !default;
+$medium-gray: #dddddd !default;
+$dark-gray: #9a9a9a !default;
 
-$light-gray:                 #E3E3E3 !default;
-$medium-gray:                #DDDDDD !default;
-$dark-gray:                  #9A9A9A !default;
+$table-line-color: #ccc !default;
+$muted-color: #a49e93 !default;
 
-$table-line-color:           #ccc !default;
-$muted-color:                #a49e93 !default;
+$opacity-gray-3: rgba(222, 222, 222, 0.3) !default;
+$opacity-gray-5: rgba(222, 222, 222, 0.5) !default;
+$opacity-gray-8: rgba(222, 222, 222, 0.8) !default;
 
-$opacity-gray-3:             rgba(222,222,222, .3) !default;
-$opacity-gray-5:             rgba(222,222,222, .5) !default;
-$opacity-gray-8:             rgba(222,222,222, .8) !default;
+$opacity-5: rgba(255, 255, 255, 0.5) !default;
+$opacity-8: rgba(255, 255, 255, 0.8) !default;
 
+$datepicker-color-days: rgba(255, 255, 255, 0.8) !default;
+$datepicker-color-old-new-days: rgba(255, 255, 255, 0.4) !default;
 
-$opacity-5:                  rgba(255,255,255, .5) !default;
-$opacity-8:                  rgba(255,255,255, .8) !default;
+$opacity-1: rgba(255, 255, 255, 0.1) !default;
+$opacity-2: rgba(255, 255, 255, 0.2) !default;
 
-$datepicker-color-days:             rgba(255,255,255, .8)  !default;
-$datepicker-color-old-new-days:     rgba(255,255,255, .4)  !default;
+$transparent-bg: transparent !default;
+$dark-background: #555555 !default;
 
+$gray-input-bg: #fffcf5 !default;
+$danger-input-bg: #ffc0a4 !default;
+$success-input-bg: #abf3cb !default;
+$other-medium-gray: #a49e93 !default;
+$transparent-bg: transparent !default;
 
-$opacity-1:                  rgba(255,255,255, .1) !default;
-$opacity-2:                  rgba(255,255,255, .2) !default;
+$placeholder-gray: rgba(210, 210, 210, 1) !default;
 
-$transparent-bg:             transparent !default;
-$dark-background:            #555555 !default;
+$default-color: #007f60 !default;
+$default-bg: #007f60 !default;
+$default-states-color: #403d39 !default;
 
-$gray-input-bg:              #fffcf5 !default;
-$danger-input-bg:            #FFC0A4 !default;
-$success-input-bg:           #ABF3CB !default;
-$other-medium-gray:          #A49E93 !default;
-$transparent-bg:             transparent !default;
+$smoke-bg: #f5f5f5 !default;
+$pale-bg: #fffcf5 !default;
+$medium-pale-bg: #f1eae0 !default;
+$default-body-bg: #f4f3ef !default;
 
-$placeholder-gray:           rgba(210, 210, 210, 1)  !default;
+$primary-color: #51cbce !default;
+$primary-states-color: darken($primary-color, 10%) !default;
 
-$default-color:              #66615B !default;
-$default-bg:                 #66615B !default;
-$default-states-color:       #403D39 !default;
+$success-color: #6bd098 !default;
+$success-states-color: darken($success-color, 10%) !default;
 
-$smoke-bg:                   #F5F5F5 !default;
-$pale-bg:                    #FFFCF5 !default;
-$medium-pale-bg:             #F1EAE0 !default;
-$default-body-bg:                 #f4f3ef !default;
+$info-color: #51bcda !default;
+$info-states-color: darken($info-color, 10%) !default;
 
-$primary-color:              #51cbce !default;
-$primary-states-color:       darken($primary-color, 10%) !default;
+$warning-color: #fbc658 !default;
+$warning-states-color: darken($warning-color, 10%) !default;
 
-$success-color:              #6bd098 !default;
-$success-states-color:       darken($success-color, 10%) !default;
+$danger-color: #ef8157 !default;
+$danger-states-color: darken($danger-color, 8%) !default;
 
-$info-color:                 #51bcda !default;
-$info-states-color:          darken($info-color, 10%) !default;
+$link-disabled-color: #666666 !default;
 
-$warning-color:              #fbc658 !default;
-$warning-states-color:       darken($warning-color, 10%) !default;
+$purple-color: #c178c1 !default;
+$purple-states-color: darken($purple-color, 8%) !default;
 
-$danger-color:               #ef8157 !default;
-$danger-states-color:        darken($danger-color, 8%) !default;
+$medium-pale-bg: #f1eae0 !default;
 
-$link-disabled-color:        #666666 !default;
+$brown-color: #dcb285 !default;
+$default-color-opacity: rgba(182, 182, 182, 0.6) !default;
+$primary-color-opacity: rgba(249, 99, 50, 0.3) !default;
+$success-color-opacity: rgba(24, 206, 15, 0.3) !default;
+$info-color-opacity: rgba(44, 168, 255, 0.3) !default;
+$warning-color-opacity: rgba(255, 178, 54, 0.3) !default;
+$danger-color-opacity: rgba(255, 54, 54, 0.3) !default;
 
-$purple-color:               #c178c1 !default;
-$purple-states-color:        darken($purple-color, 8%) !default;
+$new-blue: #1dc7ea;
+$new-purple: #9368e9;
+$new-red: #fb404b;
+$new-green: #87cb16;
+$new-orange: #ffa534;
+$new-dark-blue: #1f77d0;
+$new-black: #5e5e5e;
 
-$medium-pale-bg:             #F1EAE0 !default;
-
-$brown-color:                #dcb285 !default;
-$default-color-opacity:      rgba(182, 182, 182, .6) !default;
-$primary-color-opacity:      rgba(249, 99, 50, .3) !default;
-$success-color-opacity:      rgba(24, 206, 15, .3) !default;
-$info-color-opacity:         rgba(44, 168, 255, .3) !default;
-$warning-color-opacity:      rgba(255, 178, 54, .3) !default;
-$danger-color-opacity:       rgba(255, 54, 54, .3) !default;
-
-$new-blue:            #1DC7EA;
-$new-purple:          #9368E9;
-$new-red:             #FB404B;
-$new-green:           #87CB16;
-$new-orange:          #FFA534;
-$new-dark-blue:       #1F77D0;
-$new-black:           #5e5e5e;
-
-$orange-color:               #f96332 !default;
+$orange-color: #f96332 !default;
 $color-red-error: rgb(185, 74, 72) !default;
 $color-grey-arrow: rgba(204, 204, 204, 0.2) !default;
 
-$bg-nude:               #FFFCF5 !default;
-$bg-primary:            lighten($primary-color, 7%) !default;
-$bg-info:               lighten($info-color, 7%) !default;
-$bg-success:            lighten($success-color, 7%) !default;
-$bg-warning:            lighten($warning-color, 7%) !default;
-$bg-danger:             lighten($danger-color, 7%) !default;
-$bg-brown:              lighten($brown-color, 7%) !default;
-$bg-purple:             lighten($purple-color, 7%) !default;
+$bg-nude: #fffcf5 !default;
+$bg-primary: lighten($primary-color, 7%) !default;
+$bg-info: lighten($info-color, 7%) !default;
+$bg-success: lighten($success-color, 7%) !default;
+$bg-warning: lighten($warning-color, 7%) !default;
+$bg-danger: lighten($danger-color, 7%) !default;
+$bg-brown: lighten($brown-color, 7%) !default;
+$bg-purple: lighten($purple-color, 7%) !default;
 
 //     brand Colors
-$brand-primary:              $primary-color !default;
-$brand-info:                 $info-color !default;
-$brand-success:              $success-color !default;
-$brand-warning:              $warning-color !default;
-$brand-danger:               $danger-color !default;
-$brand-inverse:              $black-color !default;
-
-$link-disabled-color:        #666666 !default;
-$dark-color:                 #212120 !default;
+$brand-primary: $primary-color !default;
+$brand-info: $info-color !default;
+$brand-success: $success-color !default;
+$brand-warning: $warning-color !default;
+$brand-danger: $danger-color !default;
+$brand-inverse: $black-color !default;
+
+$link-disabled-color: #666666 !default;
+$dark-color: #212120 !default;
 //     light colors
-$light-blue:                 rgba($primary-color, .2);
-$light-azure:                rgba($info-color, .2);
-$light-green:                rgba($success-color, .2);
-$light-orange:               rgba($warning-color, .2);
-$light-red:                  rgba($danger-color, .2);
+$light-blue: rgba($primary-color, 0.2);
+$light-azure: rgba($info-color, 0.2);
+$light-green: rgba($success-color, 0.2);
+$light-orange: rgba($warning-color, 0.2);
+$light-red: rgba($danger-color, 0.2);
 
 // padding for links inside dropdown menu
-$padding-dropdown-vertical:     10px !default;
-$padding-dropdown-horizontal:   15px !default;
+$padding-dropdown-vertical: 10px !default;
+$padding-dropdown-horizontal: 15px !default;
 
-$margin-large-vertical:        30px !default;
-$margin-base-vertical:         15px !default;
+$margin-large-vertical: 30px !default;
+$margin-base-vertical: 15px !default;
 
 // border radius for buttons
-$border-radius-none:             0px !default;
-$border-radius-btn-small:      26px !default;
-$border-radius-btn-base:       20px !default;
-$border-radius-btn-large:      50px !default;
-
-
-$margin-bottom:                0 0 10px 0 !default;
-$border-radius-small:           3px !default;
-$border-radius-base:            4px !default;
-$border-radius-large:           6px !default;
-$border-radius-x-large:         8px !default;
-$border-radius-extreme:         12px !default;
+$border-radius-none: 0px !default;
+$border-radius-btn-small: 26px !default;
+$border-radius-btn-base: 20px !default;
+$border-radius-btn-large: 50px !default;
+
+$margin-bottom: 0 0 10px 0 !default;
+$border-radius-small: 3px !default;
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-x-large: 8px !default;
+$border-radius-extreme: 12px !default;
 
 //variables used in cards
-$card-black-color:          #252422 !default;
-$card-muted-color:          #ccc5b9 !default;
-
-$card-background-blue:      #b8d8d8 !default;
-$card-font-blue:            #506568 !default;
-$card-subtitle-blue:        #7a9e9f !default;
-
-$card-background-green:      #d5e5a3 !default;
-$card-font-green:            #60773d !default;
-$card-subtitle-green:        #92ac56 !default;
+$card-black-color: #252422 !default;
+$card-muted-color: #ccc5b9 !default;
 
-$card-background-yellow:      #ffe28c !default;
-$card-font-yellow:            #b25825 !default;
-$card-subtitle-yellow:        #d88715 !default;
+$card-background-blue: #b8d8d8 !default;
+$card-font-blue: #506568 !default;
+$card-subtitle-blue: #7a9e9f !default;
 
-$card-background-brown:      #d6c1ab !default;
-$card-font-brown:            #75442e !default;
-$card-subtitle-brown:        #a47e65 !default;
+$card-background-green: #d5e5a3 !default;
+$card-font-green: #60773d !default;
+$card-subtitle-green: #92ac56 !default;
 
-$card-background-purple:      #baa9ba !default;
-$card-font-purple:            #3a283d !default;
-$card-subtitle-purple:        #5a283d !default;
+$card-background-yellow: #ffe28c !default;
+$card-font-yellow: #b25825 !default;
+$card-subtitle-yellow: #d88715 !default;
 
-$card-background-orange:      #ff8f5e !default;
-$card-font-orange:            #772510 !default;
-$card-subtitle-orange:        #e95e37 !default;
+$card-background-brown: #d6c1ab !default;
+$card-font-brown: #75442e !default;
+$card-subtitle-brown: #a47e65 !default;
 
+$card-background-purple: #baa9ba !default;
+$card-font-purple: #3a283d !default;
+$card-subtitle-purple: #5a283d !default;
 
+$card-background-orange: #ff8f5e !default;
+$card-font-orange: #772510 !default;
+$card-subtitle-orange: #e95e37 !default;
 
 //== Components
 //
 
-$padding-input-vertical:        11px !default;
-$padding-input-horizontal:      11px !default;
+$padding-input-vertical: 11px !default;
+$padding-input-horizontal: 11px !default;
 
-$padding-btn-vertical:         11px !default;
-$padding-btn-horizontal:       22px !default;
+$padding-btn-vertical: 11px !default;
+$padding-btn-horizontal: 22px !default;
 
-$padding-base-vertical:        .5rem !default;
-$padding-base-horizontal:      .7rem !default;
+$padding-base-vertical: 0.5rem !default;
+$padding-base-horizontal: 0.7rem !default;
 
-$padding-round-horizontal:     23px !default;
+$padding-round-horizontal: 23px !default;
 
-$padding-simple-vertical:      10px !default;
-$padding-simple-horizontal:    17px !default;
+$padding-simple-vertical: 10px !default;
+$padding-simple-horizontal: 17px !default;
 
-$padding-large-vertical:       15px !default;
-$padding-large-horizontal:     48px !default;
+$padding-large-vertical: 15px !default;
+$padding-large-horizontal: 48px !default;
 
-$padding-small-vertical:        5px !default;
-$padding-small-horizontal:     15px !default;
+$padding-small-vertical: 5px !default;
+$padding-small-horizontal: 15px !default;
 
 // $padding-xs-vertical:           1px !default;
 // $padding-xs-horizontal:         5px !default;
 
-$padding-label-vertical:        2px !default;
-$padding-label-horizontal:     12px !default;
-
-$margin-large-vertical:        30px !default;
-$margin-base-vertical:         15px !default;
-
-$margin-base-horizontal:       15px !default;
-
-$margin-bottom:                 10px        !default;
-$border:                        1px solid   !default;
-$border-radius-extra-small:     0.125rem    !default;
-$border-radius-small:           0.1875rem   !default;
-$border-radius-large:           0.25rem     !default;
-$border-radius-extreme:         0.875rem    !default;
-
-$border-radius-large-top:      $border-radius-large $border-radius-large 0 0 !default;
-$border-radius-large-bottom:   0 0 $border-radius-large $border-radius-large !default;
-
-$btn-round-radius:             30px         !default;
-
-$height-base:                  40px         !default;
-
-$btn-icon-size:                 3.5rem       !default;
-$btn-icon-size-regular:         2.375rem      !default;
-$btn-icon-font-size-regular:    0.9375rem     !default;
-$btn-icon-font-size-small:      0.6875rem      !default;
-$btn-icon-size-small:           1.875rem     !default;
-$btn-icon-font-size-lg:         1.325rem     !default;
-$btn-icon-size-lg:              3.6rem         !default;
-
-$font-size-h1:                 3.5em        !default; // ~ 49px
-$font-size-h2:                 2.5em        !default; // ~ 35px
-$font-size-h3:                 2em          !default; // ~ 28px
-$font-size-h4:                 1.714em      !default; // ~ 24px
-$font-size-h5:                 1.57em       !default; // ~ 22px
-$font-size-h6:                 1em          !default; // ~ 14px
-
-$font-paragraph:               1em          !default;
-$font-size-navbar:             1em          !default;
-$font-size-mini:               0.7142em     !default;
-$font-size-small:              0.8571em     !default;
-$font-size-base:               14px         !default;
-$font-size-large:              1rem         !default;
-$font-size-large-navbar:       20px         !default;
-$font-size-blockquote:         1.1em        !default; // ~ 15px
-$font-size-medium:             16px         !default;
-$font-size-xs:                 12px         !default;
-
-$font-weight-light:             300         !default;
-$font-weight-normal:            400         !default;
-$font-weight-semi:              600         !default;
-$font-weight-bold:              700         !default;
-
-$line-height-general:        1.5            !default;
-$line-height-nav-link:       1.625rem       !default;
-$btn-icon-line-height:       2.4em          !default;
-$line-height:                1.35em         !default;
-$line-height-lg:             54px           !default;
-
-
-$border-radius-top:        10px 10px 0 0     !default;
-$border-radius-bottom:     0 0 10px 10px     !default;
-
-$dropdown-shadow:          1px 2px 7px 1px rgba(0,0,0,.125);
-$box-shadow-raised:        0px 10px 25px 0px rgba(0, 0, 0, 0.3);
-$box-shadow:               0 2px 2px rgba(204, 197, 185, 0.5);
-$sidebar-box-shadow:       0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);
-
-$general-transition-time:  300ms             !default;
-
-$slow-transition-time:           370ms       !default;
-$dropdown-coordinates:      29px -50px       !default;
-
-$fast-transition-time:           150ms       !default;
-$select-coordinates:         50% -40px       !default;
-
-$transition-linear:         linear           !default;
-$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
-$transition-ease:           ease 0s;
-
+$padding-label-vertical: 2px !default;
+$padding-label-horizontal: 12px !default;
+
+$margin-large-vertical: 30px !default;
+$margin-base-vertical: 15px !default;
+
+$margin-base-horizontal: 15px !default;
+
+$margin-bottom: 10px !default;
+$border: 1px solid !default;
+$border-radius-extra-small: 0.125rem !default;
+$border-radius-small: 0.1875rem !default;
+$border-radius-large: 0.25rem !default;
+$border-radius-extreme: 0.875rem !default;
+
+$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
+$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
+
+$btn-round-radius: 30px !default;
+
+$height-base: 40px !default;
+
+$btn-icon-size: 3.5rem !default;
+$btn-icon-size-regular: 2.375rem !default;
+$btn-icon-font-size-regular: 0.9375rem !default;
+$btn-icon-font-size-small: 0.6875rem !default;
+$btn-icon-size-small: 1.875rem !default;
+$btn-icon-font-size-lg: 1.325rem !default;
+$btn-icon-size-lg: 3.6rem !default;
+
+$font-size-h1: 3.5em !default; // ~ 49px
+$font-size-h2: 2.5em !default; // ~ 35px
+$font-size-h3: 2em !default; // ~ 28px
+$font-size-h4: 1.714em !default; // ~ 24px
+$font-size-h5: 1.57em !default; // ~ 22px
+$font-size-h6: 1em !default; // ~ 14px
+
+$font-paragraph: 1em !default;
+$font-size-navbar: 1em !default;
+$font-size-mini: 0.7142em !default;
+$font-size-small: 0.8571em !default;
+$font-size-base: 14px !default;
+$font-size-large: 1rem !default;
+$font-size-large-navbar: 20px !default;
+$font-size-blockquote: 1.1em !default; // ~ 15px
+$font-size-medium: 16px !default;
+$font-size-xs: 12px !default;
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semi: 600 !default;
+$font-weight-bold: 700 !default;
+
+$line-height-general: 1.5 !default;
+$line-height-nav-link: 1.625rem !default;
+$btn-icon-line-height: 2.4em !default;
+$line-height: 1.35em !default;
+$line-height-lg: 54px !default;
+
+$border-radius-top: 10px 10px 0 0 !default;
+$border-radius-bottom: 0 0 10px 10px !default;
+
+$dropdown-shadow: 1px 2px 7px 1px rgba(0, 0, 0, 0.125);
+$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
+$box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0, 0.2),
+	0px 2px 30px 0 rgba(0, 0, 0, 0.35);
+
+$general-transition-time: 300ms !default;
+
+$slow-transition-time: 370ms !default;
+$dropdown-coordinates: 29px -50px !default;
+
+$fast-transition-time: 150ms !default;
+$select-coordinates: 50% -40px !default;
+
+$transition-linear: linear !default;
+$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease: ease 0s;
 
 //$navbar-padding-a:               9px 13px;
-$navbar-margin-a:                15px 0px;
+$navbar-margin-a: 15px 0px;
 
-$padding-social-a:               10px 5px;
+$padding-social-a: 10px 5px;
 
-$navbar-margin-a-btn:            15px 0px;
-$navbar-margin-a-btn-round:      16px 0px;
+$navbar-margin-a-btn: 15px 0px;
+$navbar-margin-a-btn-round: 16px 0px;
 
-$navbar-padding-a-icons:         6px 15px;
-$navbar-margin-a-icons:          6px  3px;
+$navbar-padding-a-icons: 6px 15px;
+$navbar-margin-a-icons: 6px 3px;
 
-$navbar-padding-base:            0.625rem;
+$navbar-padding-base: 0.625rem;
 //$navbar-margin-brand:             5px  0px;
 
-$navbar-margin-brand-icons:      12px auto;
-$navbar-margin-btn:              15px  3px;
+$navbar-margin-brand-icons: 12px auto;
+$navbar-margin-btn: 15px 3px;
 
-$height-icon-sm:				 32px;
-$width-icon-sm:					 32px;
-$padding-icon-sm:			     4px;
-$border-radius-icon-sm:			 7px;
+$height-icon-sm: 32px;
+$width-icon-sm: 32px;
+$padding-icon-sm: 4px;
+$border-radius-icon-sm: 7px;
 
-$height-icon-message:			 40px;
-$width-icon-message:			 40px;
+$height-icon-message: 40px;
+$width-icon-message: 40px;
 
-$height-icon-message-sm: 		 20px;
-$width-icon-message-sm:			 20px;
+$height-icon-message-sm: 20px;
+$width-icon-message-sm: 20px;
 
-$white-navbar:                  rgba(#FFFFFF, .96);
-$primary-navbar:                rgba(#34ACDC, .98);
-$info-navbar:                   rgba(#5BCAFF, .98);
-$success-navbar:                rgba(#4CD964, .98);
-$warning-navbar:                rgba(#FF9500, .98);
-$danger-navbar:                 rgba(#FF4C40, .98);
+$white-navbar: rgba(#ffffff, 0.96);
+$primary-navbar: rgba(#34acdc, 0.98);
+$info-navbar: rgba(#5bcaff, 0.98);
+$success-navbar: rgba(#4cd964, 0.98);
+$warning-navbar: rgba(#ff9500, 0.98);
+$danger-navbar: rgba(#ff4c40, 0.98);
 
-$topbar-x:             topbar-x !default;
-$topbar-back:          topbar-back !default;
-$bottombar-x:          bottombar-x !default;
-$bottombar-back:       bottombar-back !default;
+$topbar-x: topbar-x !default;
+$topbar-back: topbar-back !default;
+$bottombar-x: bottombar-x !default;
+$bottombar-back: bottombar-back !default;
 
 //Nucleo Icons
 
-$nc-font-path:        '../fonts' !default;
-$nc-font-size-base:   14px !default;
-$nc-css-prefix:       nc !default;
-$nc-background-color:     #eee !default;
-$nc-li-width:         (30em / 14) !default;
-$nc-padding-width:    (1em/3) !default;
+$nc-font-path: "../fonts" !default;
+$nc-font-size-base: 14px !default;
+$nc-css-prefix: nc !default;
+$nc-background-color: #eee !default;
+$nc-li-width: (30em / 14) !default;
+$nc-padding-width: (1em/3) !default;
 
 // Social icons color
-$social-twitter:                   #55acee !default;
-$social-twitter-state-color:       darken(#55acee, 5%) !default;
+$social-twitter: #55acee !default;
+$social-twitter-state-color: darken(#55acee, 5%) !default;
 
-$social-facebook: 			       #3b5998 !default;
-$social-facebook-state-color:      darken(#3b5998, 5%) !default;
+$social-facebook: #3b5998 !default;
+$social-facebook-state-color: darken(#3b5998, 5%) !default;
 
-$social-google: 			       #dd4b39 !default;
-$social-google-state-color:        darken(#dd4b39, 5%) !default;
+$social-google: #dd4b39 !default;
+$social-google-state-color: darken(#dd4b39, 5%) !default;
 
-$social-linkedin: 			         #0077B5 !default;
-$social-linkedin-state-color:        darken(#0077B5, 5%) !default;
+$social-linkedin: #0077b5 !default;
+$social-linkedin-state-color: darken(#0077b5, 5%) !default;
 
 // Sidebar variables
-$sidebar-width:              calc(100% - 260px) !default;
-$sidebar-mini-width:         calc(100% - 80px) !default;
-
+$sidebar-width: calc(100% - 260px) !default;
+$sidebar-mini-width: calc(100% - 80px) !default;
 
 // Social icons color
-$social-twitter:                   #55acee !default;
-$social-twitter-state-color:       lighten(#55acee, 6%) !default;
+$social-twitter: #55acee !default;
+$social-twitter-state-color: lighten(#55acee, 6%) !default;
 
-$social-facebook: 			       #3b5998 !default;
-$social-facebook-state-color:      lighten(#3b5998, 6%) !default;
+$social-facebook: #3b5998 !default;
+$social-facebook-state-color: lighten(#3b5998, 6%) !default;
 
-$social-google: 			       #dd4b39 !default;
-$social-google-state-color:        lighten(#dd4b39, 6%) !default;
+$social-google: #dd4b39 !default;
+$social-google-state-color: lighten(#dd4b39, 6%) !default;
 
-$social-linkedin: 			       #0077B5 !default;
-$social-linkedin-state-color:      lighten(#0077B5, 6%) !default;
+$social-linkedin: #0077b5 !default;
+$social-linkedin-state-color: lighten(#0077b5, 6%) !default;
 
-$social-pinterest: 			       #cc2127 !default;
-$social-pinterest-state-color:     lighten(#cc2127, 6%) !default;
+$social-pinterest: #cc2127 !default;
+$social-pinterest-state-color: lighten(#cc2127, 6%) !default;
 
-$social-dribbble: 		           #ea4c89 !default;
-$social-dribbble-state-color:      lighten(#ea4c89, 6%) !default;
+$social-dribbble: #ea4c89 !default;
+$social-dribbble-state-color: lighten(#ea4c89, 6%) !default;
 
-$social-github: 		      	   #333333 !default;
-$social-github-state-color:        lighten(#333333, 6%) !default;
+$social-github: #333333 !default;
+$social-github-state-color: lighten(#333333, 6%) !default;
 
-$social-youtube: 		    	   #e52d27 !default;
-$social-youtube-state-color:       lighten(#e52d27, 6%) !default;
+$social-youtube: #e52d27 !default;
+$social-youtube-state-color: lighten(#e52d27, 6%) !default;
 
-$social-instagram: 		           #125688 !default;
-$social-instagram-state-color:     lighten(#125688, 6%) !default;
+$social-instagram: #125688 !default;
+$social-instagram-state-color: lighten(#125688, 6%) !default;
 
-$social-reddit: 		  	       #ff4500 !default;
-$social-reddit-state-color:        lighten(#ff4500, 6%) !default;
+$social-reddit: #ff4500 !default;
+$social-reddit-state-color: lighten(#ff4500, 6%) !default;
 
-$social-tumblr: 			       #35465c !default;
-$social-tumblr-state-color:        lighten(#35465c, 6%) !default;
+$social-tumblr: #35465c !default;
+$social-tumblr-state-color: lighten(#35465c, 6%) !default;
 
-$social-behance: 			       #1769ff !default;
-$social-behance-state-color:       lighten(#1769ff, 6%) !default;
+$social-behance: #1769ff !default;
+$social-behance-state-color: lighten(#1769ff, 6%) !default;
 
 // Placeholder text color
 $input-color-placeholder: #999 !default;
diff --git a/src/assets/scss/paper-dashboard/mixins/_page-header.scss b/src/assets/scss/paper-dashboard/mixins/_page-header.scss
index 713dfd3..314f493 100644
--- a/src/assets/scss/paper-dashboard/mixins/_page-header.scss
+++ b/src/assets/scss/paper-dashboard/mixins/_page-header.scss
@@ -1,7 +1,4 @@
 @mixin linear-gradient($color1, $color2){
     background: $color1; /* For browsers that do not support gradients */
-    background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
-    background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
-    background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
-    background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
+    
 }
diff --git a/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss b/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss
index 7c3e0d2..1a94237 100644
--- a/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss
+++ b/src/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss
@@ -1,228 +1,350 @@
 @mixin box-shadow($shadow...) {
-  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
-          box-shadow: $shadow;
+	-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+	box-shadow: $shadow;
 }
 
-@mixin transition($time, $type){
-    -webkit-transition: all $time $type;
-    -moz-transition: all $time $type;
-    -o-transition: all $time $type;
-    -ms-transition: all $time $type;
-    transition: all $time $type;
+@mixin transition($time, $type) {
+	-webkit-transition: all $time $type;
+	-moz-transition: all $time $type;
+	-o-transition: all $time $type;
+	-ms-transition: all $time $type;
+	transition: all $time $type;
 }
 
-
-@mixin sidebar-color($color){
-  &:after{
-    background: $color;
-  }
+@mixin sidebar-color($color) {
+	&:after {
+		background: $color;
+	}
 }
 
-@mixin bar-animation($type){
-     -webkit-animation: $type 500ms linear 0s;
-     -moz-animation: $type 500ms linear 0s;
-     animation: $type 500ms 0s;
-     -webkit-animation-fill-mode: forwards;
-     -moz-animation-fill-mode: forwards;
-     animation-fill-mode: forwards;
+@mixin bar-animation($type) {
+	-webkit-animation: $type 500ms linear 0s;
+	-moz-animation: $type 500ms linear 0s;
+	animation: $type 500ms 0s;
+	-webkit-animation-fill-mode: forwards;
+	-moz-animation-fill-mode: forwards;
+	animation-fill-mode: forwards;
 }
 
-@mixin sidebar-active-color($font-color){
-    .nav {
-        li {
-          &.active > a,
-          &.active > a i,
-          &.active > a[data-toggle="collapse"],
-          &.active > a[data-toggle="collapse"] i,
-          &.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon,
-          &.active > a[data-toggle="collapse"] ~ div > ul > li.active > a {
-            color: $font-color;
-            opacity: 1;
-          }
-        }
-    }
+@mixin sidebar-active-color($font-color) {
+	.nav {
+		li {
+			&.active > a,
+			&.active > a i,
+			&.active > a[data-toggle="collapse"],
+			&.active > a[data-toggle="collapse"] i,
+			&.active
+				> a[data-toggle="collapse"]
+				~ div
+				> ul
+				> li.active
+				.sidebar-mini-icon,
+			&.active > a[data-toggle="collapse"] ~ div > ul > li.active > a {
+				color: $font-color;
+				opacity: 1;
+			}
+		}
+	}
 }
 
-@mixin transition-opacity($time, $type){
-    -webkit-transition: opacity $time $type;
-    -moz-transition: opacity $time $type;
-    -o-transition: opacity $time $type;
-    -ms-transition: opacity $time $type;
-    transition: opacity $time $type;
+@mixin transition-opacity($time, $type) {
+	-webkit-transition: opacity $time $type;
+	-moz-transition: opacity $time $type;
+	-o-transition: opacity $time $type;
+	-ms-transition: opacity $time $type;
+	transition: opacity $time $type;
 }
 
 @mixin transform-translate-y-dropdown($value) {
-    -webkit-transform:  translate3d(-20px,$value,0) !important;
-       -moz-transform: translate3d(-20px,$value,0) !important;
-       -o-transform: translate3d(-20px,$value,0) !important;
-       -ms-transform: translate3d(-20px,$value,0) !important;
-       transform: translate3d(-20px,$value,0) !important;
-}
-
-@mixin transform-translate-x($value){
-     -webkit-transform:  translate3d($value, 0, 0);
-        -moz-transform: translate3d($value, 0, 0);
-        -o-transform: translate3d($value, 0, 0);
-        -ms-transform: translate3d($value, 0, 0);
-        transform: translate3d($value, 0, 0);
-}
-
-@mixin transform-translate-y($value){
-     -webkit-transform:  translate3d(0,$value,0) !important;
-        -moz-transform: translate3d(0,$value,0) !important;
-        -o-transform: translate3d(0,$value,0) !important;
-        -ms-transform: translate3d(0,$value,0) !important;
-        transform: translate3d(0,$value,0) !important;
-}
-
-@mixin transform-translate-y-fixed-plugin($value){
-     -webkit-transform:  translate3d(0,$value,0) !important;
-        -moz-transform: translate3d(0,$value,0) !important;
-        -o-transform: translate3d(0,$value,0) !important;
-        -ms-transform: translate3d(0,$value,0) !important;
-        transform: translate3d(0,$value,0) !important;
-}
-
-@mixin icon-gradient($color, $bottomColor: #000){
-    background: $color;
-    background: -webkit-linear-gradient($color 0%, $bottomColor 80%);
-    background: -o-linear-gradient($color 0%, $bottomColor 80%);
-    background: -moz-linear-gradient($color 0%, $bottomColor 80%);
-    background: linear-gradient($color 0%, $bottomColor 80%);
-}
-
-@mixin topbar-x-rotation(){
-    @keyframes topbar-x {
-      0% {top: 0px; transform: rotate(0deg); }
-      45% {top: 6px; transform: rotate(145deg); }
-      75% {transform: rotate(130deg); }
-      100% {transform: rotate(135deg); }
-    }
-    @-webkit-keyframes topbar-x {
-      0% {top: 0px; -webkit-transform: rotate(0deg); }
-      45% {top: 6px; -webkit-transform: rotate(145deg); }
-      75% {-webkit-transform: rotate(130deg); }
-      100% { -webkit-transform: rotate(135deg); }
-    }
-    @-moz-keyframes topbar-x {
-      0% {top: 0px; -moz-transform: rotate(0deg); }
-      45% {top: 6px; -moz-transform: rotate(145deg); }
-      75% {-moz-transform: rotate(130deg); }
-      100% { -moz-transform: rotate(135deg); }
-    }
-}
-
-
-@mixin topbar-back-rotation(){
-    @keyframes topbar-back {
-      0% { top: 6px; transform: rotate(135deg); }
-      45% { transform: rotate(-10deg); }
-      75% { transform: rotate(5deg); }
-      100% { top: 0px; transform: rotate(0); }
-    }
-
-    @-webkit-keyframes topbar-back {
-      0% { top: 6px; -webkit-transform: rotate(135deg); }
-      45% { -webkit-transform: rotate(-10deg); }
-      75% { -webkit-transform: rotate(5deg); }
-      100% { top: 0px; -webkit-transform: rotate(0); }
-    }
-
-    @-moz-keyframes topbar-back {
-      0% { top: 6px; -moz-transform: rotate(135deg); }
-      45% { -moz-transform: rotate(-10deg); }
-      75% { -moz-transform: rotate(5deg); }
-      100% { top: 0px; -moz-transform: rotate(0); }
-    }
-}
-
-@mixin bottombar-x-rotation(){
-    @keyframes bottombar-x {
-      0% {bottom: 0px; transform: rotate(0deg);}
-      45% {bottom: 6px; transform: rotate(-145deg);}
-      75% {transform: rotate(-130deg);}
-      100% {transform: rotate(-135deg);}
-    }
-    @-webkit-keyframes bottombar-x {
-      0% {bottom: 0px; -webkit-transform: rotate(0deg);}
-      45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
-      75% {-webkit-transform: rotate(-130deg);}
-      100% {-webkit-transform: rotate(-135deg);}
-    }
-    @-moz-keyframes bottombar-x {
-      0% {bottom: 0px; -moz-transform: rotate(0deg);}
-      45% {bottom: 6px; -moz-transform: rotate(-145deg);}
-      75% {-moz-transform: rotate(-130deg);}
-      100% {-moz-transform: rotate(-135deg);}
-    }
-}
-
-@mixin bottombar-back-rotation{
-    @keyframes bottombar-back {
-      0% { bottom: 6px;transform: rotate(-135deg);}
-      45% { transform: rotate(10deg);}
-      75% { transform: rotate(-5deg);}
-      100% { bottom: 0px;transform: rotate(0);}
-    }
-    @-webkit-keyframes bottombar-back {
-      0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
-      45% {-webkit-transform: rotate(10deg);}
-      75% {-webkit-transform: rotate(-5deg);}
-      100% {bottom: 0px;-webkit-transform: rotate(0);}
-    }
-    @-moz-keyframes bottombar-back {
-      0% {bottom: 6px;-moz-transform: rotate(-135deg);}
-      45% {-moz-transform: rotate(10deg);}
-      75% {-moz-transform: rotate(-5deg);}
-      100% {bottom: 0px;-moz-transform: rotate(0);}
-    }
-
-}
-
-@mixin sidebar-text-color($text-color){
-    .nav {
-      li {
-        a,
-        a i,
-        a[data-toggle="collapse"],
-        a[data-toggle="collapse"] i,
-        a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon,
-        a[data-toggle="collapse"] ~ div > ul > li > a {
-          color: $text-color;
-          opacity: .7;
-        }
-
-        &:hover:not(.active) > a,
-        &:focus:not(.active) > a {
-            opacity: 1;
-        }
-      }
-    }
-
-    .logo {
-      .simple-text {
-        color: $text-color;
-      }
-      &:after {
-        background-color: $text-color;
-        opacity: .4;
-      }
-    }
-
-    .user {
-      .info a span,
-      .nav .sidebar-mini-icon,
-      .nav .sidebar-normal {
-        color: $text-color !important;
-      }
-      &:after {
-        background-color: $text-color;
-        opacity: .4;
-      }
-    }
+	-webkit-transform: translate3d(-20px, $value, 0) !important;
+	-moz-transform: translate3d(-20px, $value, 0) !important;
+	-o-transform: translate3d(-20px, $value, 0) !important;
+	-ms-transform: translate3d(-20px, $value, 0) !important;
+	transform: translate3d(-20px, $value, 0) !important;
+}
+
+@mixin transform-translate-x($value) {
+	-webkit-transform: translate3d($value, 0, 0);
+	-moz-transform: translate3d($value, 0, 0);
+	-o-transform: translate3d($value, 0, 0);
+	-ms-transform: translate3d($value, 0, 0);
+	transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-translate-y($value) {
+	-webkit-transform: translate3d(0, $value, 0) !important;
+	-moz-transform: translate3d(0, $value, 0) !important;
+	-o-transform: translate3d(0, $value, 0) !important;
+	-ms-transform: translate3d(0, $value, 0) !important;
+	transform: translate3d(0, $value, 0) !important;
+}
+
+@mixin transform-translate-y-fixed-plugin($value) {
+	-webkit-transform: translate3d(0, $value, 0) !important;
+	-moz-transform: translate3d(0, $value, 0) !important;
+	-o-transform: translate3d(0, $value, 0) !important;
+	-ms-transform: translate3d(0, $value, 0) !important;
+	transform: translate3d(0, $value, 0) !important;
+}
+
+@mixin icon-gradient($color, $bottomColor: #007f60) {
+	background: $color;
+	background: -webkit-linear-gradient($color 0%, $bottomColor 80%);
+	background: -o-linear-gradient($color 0%, $bottomColor 80%);
+	background: -moz-linear-gradient($color 0%, $bottomColor 80%);
+	background: linear-gradient($color 0%, $bottomColor 80%);
+}
+
+@mixin topbar-x-rotation() {
+	@keyframes topbar-x {
+		0% {
+			top: 0px;
+			transform: rotate(0deg);
+		}
+		45% {
+			top: 6px;
+			transform: rotate(145deg);
+		}
+		75% {
+			transform: rotate(130deg);
+		}
+		100% {
+			transform: rotate(135deg);
+		}
+	}
+	@-webkit-keyframes topbar-x {
+		0% {
+			top: 0px;
+			-webkit-transform: rotate(0deg);
+		}
+		45% {
+			top: 6px;
+			-webkit-transform: rotate(145deg);
+		}
+		75% {
+			-webkit-transform: rotate(130deg);
+		}
+		100% {
+			-webkit-transform: rotate(135deg);
+		}
+	}
+	@-moz-keyframes topbar-x {
+		0% {
+			top: 0px;
+			-moz-transform: rotate(0deg);
+		}
+		45% {
+			top: 6px;
+			-moz-transform: rotate(145deg);
+		}
+		75% {
+			-moz-transform: rotate(130deg);
+		}
+		100% {
+			-moz-transform: rotate(135deg);
+		}
+	}
+}
+
+@mixin topbar-back-rotation() {
+	@keyframes topbar-back {
+		0% {
+			top: 6px;
+			transform: rotate(135deg);
+		}
+		45% {
+			transform: rotate(-10deg);
+		}
+		75% {
+			transform: rotate(5deg);
+		}
+		100% {
+			top: 0px;
+			transform: rotate(0);
+		}
+	}
+
+	@-webkit-keyframes topbar-back {
+		0% {
+			top: 6px;
+			-webkit-transform: rotate(135deg);
+		}
+		45% {
+			-webkit-transform: rotate(-10deg);
+		}
+		75% {
+			-webkit-transform: rotate(5deg);
+		}
+		100% {
+			top: 0px;
+			-webkit-transform: rotate(0);
+		}
+	}
+
+	@-moz-keyframes topbar-back {
+		0% {
+			top: 6px;
+			-moz-transform: rotate(135deg);
+		}
+		45% {
+			-moz-transform: rotate(-10deg);
+		}
+		75% {
+			-moz-transform: rotate(5deg);
+		}
+		100% {
+			top: 0px;
+			-moz-transform: rotate(0);
+		}
+	}
+}
+
+@mixin bottombar-x-rotation() {
+	@keyframes bottombar-x {
+		0% {
+			bottom: 0px;
+			transform: rotate(0deg);
+		}
+		45% {
+			bottom: 6px;
+			transform: rotate(-145deg);
+		}
+		75% {
+			transform: rotate(-130deg);
+		}
+		100% {
+			transform: rotate(-135deg);
+		}
+	}
+	@-webkit-keyframes bottombar-x {
+		0% {
+			bottom: 0px;
+			-webkit-transform: rotate(0deg);
+		}
+		45% {
+			bottom: 6px;
+			-webkit-transform: rotate(-145deg);
+		}
+		75% {
+			-webkit-transform: rotate(-130deg);
+		}
+		100% {
+			-webkit-transform: rotate(-135deg);
+		}
+	}
+	@-moz-keyframes bottombar-x {
+		0% {
+			bottom: 0px;
+			-moz-transform: rotate(0deg);
+		}
+		45% {
+			bottom: 6px;
+			-moz-transform: rotate(-145deg);
+		}
+		75% {
+			-moz-transform: rotate(-130deg);
+		}
+		100% {
+			-moz-transform: rotate(-135deg);
+		}
+	}
+}
+
+@mixin bottombar-back-rotation {
+	@keyframes bottombar-back {
+		0% {
+			bottom: 6px;
+			transform: rotate(-135deg);
+		}
+		45% {
+			transform: rotate(10deg);
+		}
+		75% {
+			transform: rotate(-5deg);
+		}
+		100% {
+			bottom: 0px;
+			transform: rotate(0);
+		}
+	}
+	@-webkit-keyframes bottombar-back {
+		0% {
+			bottom: 6px;
+			-webkit-transform: rotate(-135deg);
+		}
+		45% {
+			-webkit-transform: rotate(10deg);
+		}
+		75% {
+			-webkit-transform: rotate(-5deg);
+		}
+		100% {
+			bottom: 0px;
+			-webkit-transform: rotate(0);
+		}
+	}
+	@-moz-keyframes bottombar-back {
+		0% {
+			bottom: 6px;
+			-moz-transform: rotate(-135deg);
+		}
+		45% {
+			-moz-transform: rotate(10deg);
+		}
+		75% {
+			-moz-transform: rotate(-5deg);
+		}
+		100% {
+			bottom: 0px;
+			-moz-transform: rotate(0);
+		}
+	}
+}
+
+@mixin sidebar-text-color($text-color) {
+	.nav {
+		li {
+			a,
+			a i,
+			a[data-toggle="collapse"],
+			a[data-toggle="collapse"] i,
+			a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon,
+			a[data-toggle="collapse"] ~ div > ul > li > a {
+				color: $text-color;
+				opacity: 0.7;
+			}
+
+			&:hover:not(.active) > a,
+			&:focus:not(.active) > a {
+				opacity: 1;
+			}
+		}
+	}
+
+	.logo {
+		.simple-text {
+			color: $text-color;
+		}
+		&:after {
+			background-color: $text-color;
+			opacity: 0.4;
+		}
+	}
+
+	.user {
+		.info a span,
+		.nav .sidebar-mini-icon,
+		.nav .sidebar-normal {
+			color: $text-color !important;
+		}
+		&:after {
+			background-color: $text-color;
+			opacity: 0.4;
+		}
+	}
 }
 
 @mixin badge-color($color) {
-    border-color: $color;
-    background-color: $color;
+	border-color: $color;
+	background-color: $color;
 }
diff --git a/src/components/Sidebar/Sidebar.Auth.tsx b/src/components/Sidebar/Sidebar.Auth.tsx
index f99d31a..a8a94e0 100644
--- a/src/components/Sidebar/Sidebar.Auth.tsx
+++ b/src/components/Sidebar/Sidebar.Auth.tsx
@@ -34,13 +34,8 @@ function Sidebar({ props, routes }: ISideBarProps) {
 		};
 	});
 	return (
-		<div
-			className="sidebar "
-			data-color="success"
-			data-active-color="success"
-			style={{ backgroundColor: "#6bd098" }}
-		>
-			<div className="logo" style={{ backgroundColor: "#6bd098" }}>
+		<div className="sidebar " data-color="success" data-active-color="success">
+			<div className="logo">
 				<a
 					href="http://www.engenharia.uem.mz/"
 					className="simple-text  ml-5"
@@ -53,9 +48,8 @@ function Sidebar({ props, routes }: ISideBarProps) {
 			<div
 				className="sidebar-wrapper"
 				ref={sidebar}
-				style={{ backgroundColor: "#6bd098" }}
 			>
-				<Nav style={{ height: "100%"}}>
+				<Nav style={{ height: "100%" }}>
 					{routes.map((prop, key) => {
 						if (prop.layout === "/auth" && !prop.invisible) {
 							return (
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 243dfc4..ceedc4e 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -35,12 +35,17 @@ function Sidebar({props, routes} : ISideBarProps) {
     };
   });
   return (
-		<div className="sidebar" data-color="black" data-active-color="success">
+		<div
+			className="sidebar bg-success"
+			data-color="success"
+			data-active-color="success"
+		>
 			<div className="logo">
 				<a
 					href="http://www.engenharia.uem.mz/"
 					className="simple-text logo-normal"
-					target="_blank" rel="noreferrer"
+					target="_blank"
+					rel="noreferrer"
 				>
 					ECO-FEUEM
 				</a>
diff --git a/src/index.tsx b/src/index.tsx
index 2f77dee..afc4bb2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -19,6 +19,7 @@ ReactDOM.render(
           <Switch>
               <Route path="/auth" render={(props) => <Auth props={props} />} />
               <PrivateRoute path="/admin" render={(props) => <AdminLayout props={props} />} />
+              <Redirect path="/admin" to="/admin/dashboard"></Redirect>
               <Redirect path="/" to="/auth/login"/>
           </Switch>
       </BrowserRouter>
diff --git a/src/layouts/Admin.tsx b/src/layouts/Admin.tsx
index 4a70a49..bd90a3c 100644
--- a/src/layouts/Admin.tsx
+++ b/src/layouts/Admin.tsx
@@ -46,7 +46,7 @@ function Dashboard({props} : IDashboardProps) {
         props={props}
         routes={routes}
       />
-      <div className="main-panel" ref={mainPanel}>
+      <div className="main-panel">
         <DemoNavbar props={props} />
         <Switch>
           {routes.map((prop, key) => {
diff --git a/src/routes.tsx b/src/routes.tsx
index d013abf..1f721dd 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -2,12 +2,9 @@ import Login from "../src/views/Login";
 import Recover from "../src/views/Recover";
 import Dashboard from "../src/views/Dashboard";
 import Notifications from "../src/views/Notifications";
-import Icons from "../src/views/Icons";
-import Typography from "../src/views/Typography";
-import TableList from "../src/views/Tables";
-import UserPage from "../src/views/User";
+import Mail from "../src/views/Mail";
 
-const routes = [
+const routes = [ 
 	{
 		path: "/login",
 		name: "Login",
@@ -24,6 +21,14 @@ const routes = [
 		layout: "/auth",
 		invisible: true,
 	},
+	{
+		path: "/mail",
+		name: "Recover Link",
+		icon: "nc-icon nc-bank",
+		component: Mail,
+		layout: "/auth",
+		invisible: true,
+	},
 	{
 		path: "/dashboard",
 		name: "Dashboard",
@@ -32,14 +37,6 @@ const routes = [
 		layout: "/admin",
 		invisible: false,
 	},
-	{
-		path: "/icons",
-		name: "Icons",
-		icon: "nc-icon nc-diamond",
-		component: Icons,
-		layout: "/admin",
-		invisible: false,
-	},
 	{
 		path: "/notifications",
 		name: "Notifications",
@@ -48,29 +45,5 @@ const routes = [
 		layout: "/admin",
 		invisible: false,
 	},
-	{
-		path: "/user-page",
-		name: "User Profile",
-		icon: "nc-icon nc-single-02",
-		component: UserPage,
-		layout: "/admin",
-		invisible: false,
-	},
-	{
-		path: "/tables",
-		name: "Table List",
-		icon: "nc-icon nc-tile-56",
-		component: TableList,
-		layout: "/admin",
-		invisible: false,
-	},
-	{
-		path: "/typography",
-		name: "Typography",
-		icon: "nc-icon nc-caps-small",
-		component: Typography,
-		layout: "/admin",
-		invisible: false,
-	},
 ];
 export default routes;
diff --git a/src/store/actionCreators/login.actionCreator.ts b/src/store/actionCreators/login.actionCreator.ts
index 18136bc..a8132aa 100644
--- a/src/store/actionCreators/login.actionCreator.ts
+++ b/src/store/actionCreators/login.actionCreator.ts
@@ -93,10 +93,50 @@ export const logoutAction = () =>
                 type: LoginActionTypes.LOGOUT_SUCCESS
             });
 
-        }catch (e) {
+        }catch (e: any) {
             dispatch({
                 type: LoginActionTypes.LOGOUT_FAIL,
                 payload: e
             })
         }
     }
+
+
+    export const mailAction = (email: string) =>
+    async (dispatch: Dispatch<LoginAction>) => {
+    let api = new Api();
+
+    try {
+        dispatch({
+            type: LoginActionTypes.LOGIN_LOADING
+        });
+
+        await api.post<ILogin>("/auth/mail", {email})
+            .then(r => {
+
+                console.log("dados de retorno")
+                console.log(r.data)
+
+                if (r.status === 200) {
+                    localStorage.setItem('user', JSON.stringify(r.data));
+                    console.log("teste");
+                    console.log(localStorage.getItem('user'));
+                    dispatch({
+                        type: LoginActionTypes.LOGIN_SUCCESS,
+                        payload: r.data
+                    });
+                }
+            })
+            .catch(e => {
+               dispatch({
+                   type: LoginActionTypes.LOGIN_FAIL,
+                   payload: e
+               })
+            });
+    }catch (e: any) {
+        dispatch({
+            type: LoginActionTypes.LOGIN_FAIL,
+            payload: e
+        })
+    }
+    }
diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx
index 65f32ed..d83367c 100644
--- a/src/views/Dashboard.tsx
+++ b/src/views/Dashboard.tsx
@@ -1,203 +1,213 @@
-/*!
-
-=========================================================
-* Paper Dashboard React - v1.3.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/paper-dashboard-react
-* Copyright 2021 Creative Tim (https://www.creative-tim.com)
-
-* Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard-react/blob/main/LICENSE.md)
-
-* Coded by Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
 import React from "react";
 // reactstrap components
 import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  CardTitle,
-  Row,
-  Col,
+	Card,
+	CardBody,
+	CardFooter,
+	CardTitle,
+	Row,
+	Col,
 } from "reactstrap";
 // core components
 
 function Dashboard() {
-  return (
-    <>
-      <div className="content">
-        <Row>
-          <Col lg="3" md="6" sm="6">
-            <Card className="card-stats">
-              <CardBody>
-                <Row>
-                  <Col md="4" xs="5">
-                    <div className="icon-big text-center icon-warning">
-                      <i className="nc-icon nc-globe text-warning" />
-                    </div>
-                  </Col>
-                  <Col md="8" xs="7">
-                    <div className="numbers">
-                      <p className="card-category">Capacity</p>
-                      <CardTitle tag="p">150GB</CardTitle>
-                      <p />
-                    </div>
-                  </Col>
-                </Row>
-              </CardBody>
-              <CardFooter>
-                <hr />
-                <div className="stats">
-                  <i className="fas fa-sync-alt" /> Update Now
-                </div>
-              </CardFooter>
-            </Card>
-          </Col>
-          <Col lg="3" md="6" sm="6">
-            <Card className="card-stats">
-              <CardBody>
-                <Row>
-                  <Col md="4" xs="5">
-                    <div className="icon-big text-center icon-warning">
-                      <i className="nc-icon nc-money-coins text-success" />
-                    </div>
-                  </Col>
-                  <Col md="8" xs="7">
-                    <div className="numbers">
-                      <p className="card-category">Revenue</p>
-                      <CardTitle tag="p">$ 1,345</CardTitle>
-                      <p />
-                    </div>
-                  </Col>
-                </Row>
-              </CardBody>
-              <CardFooter>
-                <hr />
-                <div className="stats">
-                  <i className="far fa-calendar" /> Last day
-                </div>
-              </CardFooter>
-            </Card>
-          </Col>
-          <Col lg="3" md="6" sm="6">
-            <Card className="card-stats">
-              <CardBody>
-                <Row>
-                  <Col md="4" xs="5">
-                    <div className="icon-big text-center icon-warning">
-                      <i className="nc-icon nc-vector text-danger" />
-                    </div>
-                  </Col>
-                  <Col md="8" xs="7">
-                    <div className="numbers">
-                      <p className="card-category">Errors</p>
-                      <CardTitle tag="p">23</CardTitle>
-                      <p />
-                    </div>
-                  </Col>
-                </Row>
-              </CardBody>
-              <CardFooter>
-                <hr />
-                <div className="stats">
-                  <i className="far fa-clock" /> In the last hour
-                </div>
-              </CardFooter>
-            </Card>
-          </Col>
-          <Col lg="3" md="6" sm="6">
-            <Card className="card-stats">
-              <CardBody>
-                <Row>
-                  <Col md="4" xs="5">
-                    <div className="icon-big text-center icon-warning">
-                      <i className="nc-icon nc-favourite-28 text-primary" />
-                    </div>
-                  </Col>
-                  <Col md="8" xs="7">
-                    <div className="numbers">
-                      <p className="card-category">Followers</p>
-                      <CardTitle tag="p">+45K</CardTitle>
-                      <p />
-                    </div>
-                  </Col>
-                </Row>
-              </CardBody>
-              <CardFooter>
-                <hr />
-                <div className="stats">
-                  <i className="fas fa-sync-alt" /> Update now
-                </div>
-              </CardFooter>
-            </Card>
-          </Col>
-        </Row>
-        <Row>
-          <Col md="12">
-            <Card>
-              <CardHeader>
-                <CardTitle tag="h5">Users Behavior</CardTitle>
-                <p className="card-category">24 Hours performance</p>
-              </CardHeader>
-              <CardFooter>
-                <hr />
-                <div className="stats">
-                  <i className="fa fa-history" /> Updated 3 minutes ago
-                </div>
-              </CardFooter>
-            </Card>
-          </Col>
-        </Row>
-        <Row>
-          <Col md="4">
-            <Card>
-              <CardHeader>
-                <CardTitle tag="h5">Email Statistics</CardTitle>
-                <p className="card-category">Last Campaign Performance</p>
-              </CardHeader>
-              <CardFooter>
-                <div className="legend">
-                  <i className="fa fa-circle text-primary" /> Opened{" "}
-                  <i className="fa fa-circle text-warning" /> Read{" "}
-                  <i className="fa fa-circle text-danger" /> Deleted{" "}
-                  <i className="fa fa-circle text-gray" /> Unopened
-                </div>
-                <hr />
-                <div className="stats">
-                  <i className="fa fa-calendar" /> Number of emails sent
-                </div>
-              </CardFooter>
-            </Card>
-          </Col>
-          <Col md="8">
-            <Card className="card-chart">
-              <CardHeader>
-                <CardTitle tag="h5">NASDAQ: AAPL</CardTitle>
-                <p className="card-category">Line Chart with Points</p>
-              </CardHeader>
-              <CardFooter>
-                <div className="chart-legend">
-                  <i className="fa fa-circle text-info" /> Tesla Model S{" "}
-                  <i className="fa fa-circle text-warning" /> BMW 5 Series
-                </div>
-                <hr />
-                <div className="card-stats">
-                  <i className="fa fa-check" /> Data information certified
-                </div>
-              </CardFooter>
-            </Card>
-          </Col>
-        </Row>
-      </div>
-    </>
-  );
+	return (
+		<>
+			<div className="content">
+				<Row>
+					<Col xl="6
+          " md="6" sm="8">
+						<Card className="">
+							<CardBody>
+								<Row>
+									<Col>
+										<div className="numbers">
+											<p className="card-category">SST</p>
+											<CardTitle tag="p">Sistema de Suporte Técnico </CardTitle>
+											<p />
+										</div>
+									</Col>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<hr />
+								<div>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Utilizadores </i> 45
+									</p>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Novas notificações </i> 56
+									</p>
+									<p className="card-category">
+										<i className="nc-icon nc-minimal-down">
+											Painel Administrativo
+										</i>
+									</p>
+								</div>
+							</CardFooter>
+						</Card>
+						<Card className="">
+							<CardBody>
+								<Row>
+									<Col>
+										<div className="numbers">
+											<p className="card-category">SGCA</p>
+											<CardTitle tag="p">
+												Sistema de Gestão de Calendário Académico
+											</CardTitle>
+											<p />
+										</div>
+									</Col>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<hr />
+								<div>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Utilizadores </i> 45
+									</p>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Novas notificações </i> 56
+									</p>
+									<p className="card-category">
+										<i className="nc-icon nc-minimal-down">
+											Painel Administrativo
+										</i>
+									</p>
+								</div>
+							</CardFooter>
+						</Card>
+						<Card className="">
+							<CardBody>
+								<Row>
+									<Col>
+										<div className="numbers">
+											<p className="card-category">SCP</p>
+											<CardTitle tag="p">
+												Sistema de Controle de Precedências
+											</CardTitle>
+											<p />
+										</div>
+									</Col>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<hr />
+								<div>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Utilizadores </i> 45
+									</p>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Novas notificações </i> 56
+									</p>
+									<p className="card-category">
+										<i className="nc-icon nc-minimal-down">
+											Painel Administrativo
+										</i>
+									</p>
+								</div>
+							</CardFooter>
+						</Card>
+					</Col>
+					<Col xl="6" md="6" sm="8">
+						<Card className="">
+							<CardBody>
+								<Row>
+									<Col>
+										<div className="numbers">
+											<p className="card-category">SPSP</p>
+											<CardTitle tag="p">
+												Sistema de Processamento de Sálarios do Pós-Laboral{" "}
+											</CardTitle>
+											<p />
+										</div>
+									</Col>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<hr />
+								<div>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Utilizadores </i> 45
+									</p>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Novas notificações </i> 56
+									</p>
+									<p className="card-category">
+										<i className="nc-icon nc-minimal-down">
+											Painel Administrativo
+										</i>
+									</p>
+								</div>
+							</CardFooter>
+						</Card>
+						<Card className="">
+							<CardBody>
+								<Row>
+									<Col>
+										<div className="numbers">
+											<p className="card-category">SGP</p>
+											<CardTitle tag="p">
+												Sistema de Gestão de Aquisições
+											</CardTitle>
+											<p />
+										</div>
+									</Col>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<hr />
+								<div>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Utilizadores </i> 45
+									</p>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Novas notificações </i> 56
+									</p>
+									<p className="card-category">
+										<i className="nc-icon nc-minimal-down">
+											Painel Administrativo
+										</i>
+									</p>
+								</div>
+							</CardFooter>
+						</Card>
+						<Card className="">
+							<CardBody>
+								<Row>
+									<Col>
+										<div className="numbers">
+											<p className="card-category">SIGA</p>
+											<CardTitle tag="p">
+												Sistema Integrado de Gestão Académica
+											</CardTitle>
+											<p />
+										</div>
+									</Col>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<hr />
+								<div>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Utilizadores </i> 45
+									</p>
+									<p className="card-category">
+										<i className="fas fa-sync-alt"> Novas notificações </i> 56
+									</p>
+									<p className="card-category">
+										<i className="nc-icon nc-minimal-down">
+											Painel Administrativo
+										</i>
+									</p>
+								</div>
+							</CardFooter>
+						</Card>
+					</Col>
+				</Row>
+			</div>
+		</>
+	);
 }
 
 export default Dashboard;
diff --git a/src/views/Icons.tsx b/src/views/Icons.tsx
deleted file mode 100644
index c6e5068..0000000
--- a/src/views/Icons.tsx
+++ /dev/null
@@ -1,536 +0,0 @@
-import React from "react";
-
-// reactstrap components
-import { Card, CardHeader, CardBody, CardTitle, Row, Col } from "reactstrap";
-
-function Icons() {
-  return (
-		<>
-			<div className="content">
-				<Row>
-					<Col md="12">
-						<Card className="demo-icons bg-success">
-							<CardHeader>
-								<CardTitle tag="h5">100 Awesome Nucleo Icons</CardTitle>
-								<p className="card-category">
-									Handcrafted by our friends from{" "}
-									<a href="https://nucleoapp.com/?ref=1712">NucleoApp</a>
-								</p>
-							</CardHeader>
-							<CardBody className="all-icons">
-								<div id="icons-wrapper">
-									<section>
-										<ul>
-											<li>
-												<i className="nc-icon nc-air-baloon" />
-												<p>nc-air-baloon</p>
-												<em>\ea01</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-album-2" />
-												<p>nc-album-2</p>
-												<em>\ea02</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-alert-circle-i" />
-												<p>nc-alert-circle-i</p>
-												<em>\ea04</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-align-center" />
-												<p>nc-align-center</p>
-												<em>\ea03</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-align-left-2" />
-												<p>nc-align-left-2</p>
-												<em>\ea05</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-ambulance" />
-												<p>nc-ambulance</p>
-												<em>\ea06</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-app" />
-												<p>nc-app</p>
-												<em>\ea07</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-atom" />
-												<p>nc-atom</p>
-												<em>\ea08</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-badge" />
-												<p>nc-badge</p>
-												<em>\ea09</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bag-16" />
-												<p>nc-bag-16</p>
-												<em>\ea0a</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bank" />
-												<p>nc-bank</p>
-												<em>\ea0b</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-basket" />
-												<p>nc-basket</p>
-												<em>\ea0c</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bell-55" />
-												<p>nc-bell-55</p>
-												<em>\ea0d</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bold" />
-												<p>nc-bold</p>
-												<em>\ea0e</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-book-bookmark" />
-												<p>nc-book-bookmark</p>
-												<em>\ea0f</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bookmark-2" />
-												<p>nc-bookmark-2</p>
-												<em>\ea10</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-box-2" />
-												<p>nc-box-2</p>
-												<em>\ea11</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-box" />
-												<p>nc-box</p>
-												<em>\ea12</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-briefcase-24" />
-												<p>nc-briefcase-24</p>
-												<em>\ea13</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bulb-63" />
-												<p>nc-bulb-63</p>
-												<em>\ea14</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bullet-list-67" />
-												<p>nc-bullet-list-67</p>
-												<em>\ea15</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-bus-front-12" />
-												<p>nc-bus-front-12</p>
-												<em>\ea16</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-button-pause" />
-												<p>nc-button-pause</p>
-												<em>\ea17</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-button-play" />
-												<p>nc-button-play</p>
-												<em>\ea18</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-button-power" />
-												<p>nc-button-power</p>
-												<em>\ea19</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-calendar-60" />
-												<p>nc-calendar-60</p>
-												<em>\ea1a</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-camera-compact" />
-												<p>nc-camera-compact</p>
-												<em>\ea1b</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-caps-small" />
-												<p>nc-caps-small</p>
-												<em>\ea1c</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-cart-simple" />
-												<p>nc-cart-simple</p>
-												<em>\ea1d</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-chart-bar-32" />
-												<p>nc-chart-bar-32</p>
-												<em>\ea1e</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-chart-pie-36" />
-												<p>nc-chart-pie-36</p>
-												<em>\ea1f</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-chat-33" />
-												<p>nc-chat-33</p>
-												<em>\ea20</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-check-2" />
-												<p>nc-check-2</p>
-												<em>\ea21</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-circle-10" />
-												<p>nc-circle-10</p>
-												<em>\ea22</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-cloud-download-93" />
-												<p>nc-cloud-download-93</p>
-												<em>\ea23</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-cloud-upload-94" />
-												<p>nc-cloud-upload-94</p>
-												<em>\ea24</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-compass-05" />
-												<p>nc-compass-05</p>
-												<em>\ea25</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-controller-modern" />
-												<p>nc-controller-modern</p>
-												<em>\ea26</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-credit-card" />
-												<p>nc-credit-card</p>
-												<em>\ea27</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-delivery-fast" />
-												<p>nc-delivery-fast</p>
-												<em>\ea28</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-diamond" />
-												<p>nc-diamond</p>
-												<em>\ea29</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-email-85" />
-												<p>nc-email-85</p>
-												<em>\ea2a</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-favourite-28" />
-												<p>nc-favourite-28</p>
-												<em>\ea2b</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-glasses-2" />
-												<p>nc-glasses-2</p>
-												<em>\ea2c</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-globe-2" />
-												<p>nc-globe-2</p>
-												<em>\ea2d</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-globe" />
-												<p>nc-globe</p>
-												<em>\ea2e</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-hat-3" />
-												<p>nc-hat-3</p>
-												<em>\ea2f</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-headphones" />
-												<p>nc-headphones</p>
-												<em>\ea30</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-html5" />
-												<p>nc-html5</p>
-												<em>\ea31</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-image" />
-												<p>nc-image</p>
-												<em>\ea32</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-istanbul" />
-												<p>nc-istanbul</p>
-												<em>\ea33</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-key-25" />
-												<p>nc-key-25</p>
-												<em>\ea34</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-laptop" />
-												<p>nc-laptop</p>
-												<em>\ea35</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-layout-11" />
-												<p>nc-layout-11</p>
-												<em>\ea36</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-lock-circle-open" />
-												<p>nc-lock-circle-open</p>
-												<em>\ea37</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-map-big" />
-												<p>nc-map-big</p>
-												<em>\ea38</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-minimal-down" />
-												<p>nc-minimal-down</p>
-												<em>\ea39</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-minimal-left" />
-												<p>nc-minimal-left</p>
-												<em>\ea3a</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-minimal-right" />
-												<p>nc-minimal-right</p>
-												<em>\ea3b</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-minimal-up" />
-												<p>nc-minimal-up</p>
-												<em>\ea3c</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-mobile" />
-												<p>nc-mobile</p>
-												<em>\ea3d</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-money-coins" />
-												<p>nc-money-coins</p>
-												<em>\ea3e</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-note-03" />
-												<p>nc-note-03</p>
-												<em>\ea3f</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-palette" />
-												<p>nc-palette</p>
-												<em>\ea40</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-paper" />
-												<p>nc-paper</p>
-												<em>\ea41</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-pin-3" />
-												<p>nc-pin-3</p>
-												<em>\ea42</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-planet" />
-												<p>nc-planet</p>
-												<em>\ea43</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-refresh-69" />
-												<p>nc-refresh-69</p>
-												<em>\ea44</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-ruler-pencil" />
-												<p>nc-ruler-pencil</p>
-												<em>\ea45</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-satisfied" />
-												<p>nc-satisfied</p>
-												<em>\ea46</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-scissors" />
-												<p>nc-scissors</p>
-												<em>\ea47</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-send" />
-												<p>nc-send</p>
-												<em>\ea48</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-settings-gear-65" />
-												<p>nc-settings-gear-65</p>
-												<em>\ea49</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-settings" />
-												<p>nc-settings</p>
-												<em>\ea4a</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-share-66" />
-												<p>nc-share-66</p>
-												<em>\ea4b</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-shop" />
-												<p>nc-shop</p>
-												<em>\ea4c</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-simple-add" />
-												<p>nc-simple-add</p>
-												<em>\ea4d</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-simple-delete" />
-												<p>nc-simple-delete</p>
-												<em>\ea4e</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-simple-remove" />
-												<p>nc-simple-remove</p>
-												<em>\ea4f</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-single-02" />
-												<p>nc-single-02</p>
-												<em>\ea50</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-single-copy-04" />
-												<p>nc-single-copy-04</p>
-												<em>\ea51</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-sound-wave" />
-												<p>nc-sound-wave</p>
-												<em>\ea52</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-spaceship" />
-												<p>nc-spaceship</p>
-												<em>\ea53</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-sun-fog-29" />
-												<p>nc-sun-fog-29</p>
-												<em>\ea54</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-support-17" />
-												<p>nc-support-17</p>
-												<em>\ea55</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-tablet-2" />
-												<p>nc-tablet-2</p>
-												<em>\ea56</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-tag-content" />
-												<p>nc-tag-content</p>
-												<em>\ea57</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-tap-01" />
-												<p>nc-tap-01</p>
-												<em>\ea58</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-tie-bow" />
-												<p>nc-tie-bow</p>
-												<em>\ea59</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-tile-56" />
-												<p>nc-tile-56</p>
-												<em>\ea5a</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-time-alarm" />
-												<p>nc-time-alarm</p>
-												<em>\ea5b</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-touch-id" />
-												<p>nc-touch-id</p>
-												<em>\ea5c</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-trophy" />
-												<p>nc-trophy</p>
-												<em>\ea5d</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-tv-2" />
-												<p>nc-tv-2</p>
-												<em>\ea5e</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-umbrella-13" />
-												<p>nc-umbrella-13</p>
-												<em>\ea5f</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-user-run" />
-												<p>nc-user-run</p>
-												<em>\ea60</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-vector" />
-												<p>nc-vector</p>
-												<em>\ea61</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-watch-time" />
-												<p>nc-watch-time</p>
-												<em>\ea62</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-world-2" />
-												<p>nc-world-2</p>
-												<em>\ea63</em>
-											</li>
-											<li>
-												<i className="nc-icon nc-zoom-split" />
-												<p>nc-zoom-split</p>
-												<em>\ea64</em>
-											</li>
-										</ul>
-									</section>
-								</div>
-							</CardBody>
-						</Card>
-					</Col>
-				</Row>
-			</div>
-		</>
-	);
-}
-
-export default Icons;
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index 156b7bd..c759087 100644
--- a/src/views/Login.tsx
+++ b/src/views/Login.tsx
@@ -38,10 +38,10 @@ const Login = () => {
 	useEffect(() => {
 		setLoginData(login);
 
-        if(loginData?.token || localStorage.getItem('user')){
-            history.push("/admin/dashboard")
-        }
-    },[login, history, loginData?.token])
+		if (loginData?.token || localStorage.getItem("user")) {
+			history.push("/admin/dashboard");
+		}
+	}, [login, history, loginData?.token]);
 
 	useEffect(() => {
 		if (errorMessage) {
@@ -105,8 +105,8 @@ const Login = () => {
 										>
 											Iniciar
 										</Button>
-										<a className="text-success" href="/auth/recover">
-											<small>Recovery Password</small>
+										<a className="text-success" href="/auth/mail">
+											<small>Recuperar a Senha</small>
 										</a>
 									</div>
 								</Form>
diff --git a/src/views/Mail.tsx b/src/views/Mail.tsx
new file mode 100644
index 0000000..e45f05f
--- /dev/null
+++ b/src/views/Mail.tsx
@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from "react";
+import {
+	Button,
+	Card,
+	CardBody,
+	FormGroup,
+	Form,
+	Input,
+	InputGroupAddon,
+	InputGroupText,
+	InputGroup,
+	Row,
+	Col,
+	Spinner,
+	CardHeader,
+} from "reactstrap";
+import { ILogin } from "../models/login";
+import { useDispatch } from "react-redux";
+import { useHistory } from "react-router";
+import { mailAction } from "../store/actionCreators/login.actionCreator";
+import { useTypeSelector } from "../hooks/useTypeSelector";
+
+const Mail = () => {
+	const [email, setEmail] = useState("");
+	const [loginData, setLoginData] = useState<ILogin>();
+	const { login, isLoading, errorMessage } = useTypeSelector(
+		(state) => state.login
+	);
+
+	const dispatch = useDispatch();
+	const history = useHistory();
+
+	const mailHandler = () => {
+		dispatch(mailAction(email));
+	};
+
+	useEffect(() => {
+		setLoginData(login);
+
+		if (loginData?.token || localStorage.getItem("user")) {
+			history.push("/admin/dashboard");
+		}
+	}, [login, history, loginData?.token]);
+
+	useEffect(() => {
+		if (errorMessage) {
+			alert("Error of Login" + errorMessage);
+		}
+	}, [errorMessage]);
+
+	return (
+		<>
+			<div className="content">
+				<Row>
+					<Col lg="6" md="6" sm="6" className="text-center  ml-auto mr-auto ">
+						<Card className="h3 shadow border-0 ">
+							<CardHeader>
+								<div className="text-center  text-success mb-3 mt-5">
+									<small> Vamos enviar um link de recuperação </small>
+								</div>
+							</CardHeader>
+							<CardBody className="px-lg-5 py-lg-5">
+								<Form role="form">
+									<FormGroup className="mb-3">
+										<InputGroup className="input-group-alternative">
+											<InputGroupAddon addonType="prepend">
+												<InputGroupText>
+													<i className="ni ni-email-83" />
+												</InputGroupText>
+											</InputGroupAddon>
+											<Input
+												placeholder="Email"
+												type="email"
+												autoComplete="new-email"
+												value={email}
+												onChange={(e) => setEmail(e.target.value)}
+											/>
+										</InputGroup>
+									</FormGroup>
+									<div>
+										<Button
+											block
+											className="my-2  mb-3 mt-5"
+											size="lg"
+											color="success"
+											type="button"
+											onClick={mailHandler}
+										>
+											enviar
+										</Button>
+									</div>
+								</Form>
+							</CardBody>
+						</Card>
+					</Col>
+				</Row>
+			</div>
+			{isLoading && <Spinner type="border" />}
+		</>
+	);
+};
+
+export default Mail;
diff --git a/src/views/Notifications.tsx b/src/views/Notifications.tsx
index 708da5e..6fe3738 100644
--- a/src/views/Notifications.tsx
+++ b/src/views/Notifications.tsx
@@ -180,88 +180,7 @@ function Notifications() {
             </Card>
           </Col>
         </Row>
-        <Row>
-          <Col md="12">
-            <Card>
-              <CardBody>
-                <div className="places-buttons">
-                  <Row>
-                    <Col className="ml-auto mr-auto text-center" md="6">
-                      <CardTitle tag="h4">Notifications Places</CardTitle>
-                      <p className="category">Click to view notifications</p>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col className="ml-auto mr-auto" lg="8">
-                      <Row>
-                        <Col md="4">
-                          <Button
-                            block
-                            color="primary"
-                            onClick={() => notify("tl")}
-                          >
-                            Top Left
-                          </Button>
-                        </Col>
-                        <Col md="4">
-                          <Button
-                            block
-                            color="primary"
-                            onClick={() => notify("tc")}
-                          >
-                            Top Center
-                          </Button>
-                        </Col>
-                        <Col md="4">
-                          <Button
-                            block
-                            color="primary"
-                            onClick={() => notify("tr")}
-                          >
-                            Top Right
-                          </Button>
-                        </Col>
-                      </Row>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col className="ml-auto mr-auto" lg="8">
-                      <Row>
-                        <Col md="4">
-                          <Button
-                            block
-                            color="primary"
-                            onClick={() => notify("bl")}
-                          >
-                            Bottom Left
-                          </Button>
-                        </Col>
-                        <Col md="4">
-                          <Button
-                            block
-                            color="primary"
-                            onClick={() => notify("bc")}
-                          >
-                            Bottom Center
-                          </Button>
-                        </Col>
-                        <Col md="4">
-                          <Button
-                            block
-                            color="primary"
-                            onClick={() => notify("br")}
-                          >
-                            Bottom Right
-                          </Button>
-                        </Col>
-                      </Row>
-                    </Col>
-                  </Row>
-                </div>
-              </CardBody>
-            </Card>
-          </Col>
-        </Row>
+        
       </div>
     </>
   );
diff --git a/src/views/Recover.tsx b/src/views/Recover.tsx
index 0f4498a..028703e 100644
--- a/src/views/Recover.tsx
+++ b/src/views/Recover.tsx
@@ -21,7 +21,8 @@ import { recoverAction } from "../store/actionCreators/login.actionCreator";
 import { useTypeSelector } from "../hooks/useTypeSelector";
 
 const Login = () => {
-	const [email, setEmail] = useState("");
+	const [password,setPassword] = useState("");
+	 const [confirmPassword, setConfirmPassword] = useState("");
 	const [loginData, setLoginData] = useState<ILogin>();
 	const { login, isLoading, errorMessage } = useTypeSelector(
 		(state) => state.login
@@ -30,8 +31,8 @@ const Login = () => {
 	const dispatch = useDispatch();
 	const history = useHistory();
 
-	const loginHandler = () => {
-		dispatch(recoverAction(email));
+	const recoverHandler = () => {
+		dispatch(recoverAction(password));
 	};
 
 	useEffect(() => {
@@ -41,10 +42,9 @@ const Login = () => {
 			history.push("/admin/dashboard");
 		}
 	}, [login, history, loginData?.token]);
-
 	useEffect(() => {
 		if (errorMessage) {
-			alert("Error of Login" + errorMessage);
+			alert("Error ao trocar a passowrd" + errorMessage);
 		}
 	}, [errorMessage]);
 
@@ -52,12 +52,7 @@ const Login = () => {
 		<>
 			<div className="content">
 				<Row>
-					<Col
-						lg="6"
-						md="6"
-						sm="6"
-						className="text-center  ml-auto mr-auto "
-					>
+					<Col lg="6" md="6" sm="6" className="text-center  ml-auto mr-auto ">
 						<Card className="h3 shadow border-0 ">
 							<CardHeader>
 								<div className="text-center  text-success mb-3 mt-5">
@@ -70,19 +65,37 @@ const Login = () => {
 										<InputGroup className="input-group-alternative">
 											<InputGroupAddon addonType="prepend">
 												<InputGroupText>
-													<i className="ni ni-email-83" />
+													<i className="ni ni-lock-circle-open" />
 												</InputGroupText>
 											</InputGroupAddon>
 											<Input
-												placeholder="Email"
-												type="email"
-												autoComplete="new-email"
-												value={email}
-												onChange={(e) => setEmail(e.target.value)}
+												placeholder="Senha"
+												type="password"
+												autoComplete="new-password"
+												value={password}
+												onChange={(e) => setPassword(e.target.value)}
 											/>
 										</InputGroup>
 									</FormGroup>
-									
+									<Form role="form">
+										<FormGroup className="mb-3">
+											<InputGroup className="input-group-alternative">
+												<InputGroupAddon addonType="prepend">
+													<InputGroupText>
+														<i className="ni ni-lock-circle-open" />
+													</InputGroupText>
+												</InputGroupAddon>
+												<Input
+													placeholder="Confirmar Senha"
+													type="password"
+													autoComplete="new-password"
+													value={confirmPassword}
+													onChange={(e) => setConfirmPassword(e.target.value)}
+												/>
+											</InputGroup>
+										</FormGroup>
+									</Form>
+
 									<div>
 										<Button
 											block
@@ -90,7 +103,7 @@ const Login = () => {
 											size="lg"
 											color="success"
 											type="button"
-											onClick={loginHandler}
+											onClick={recoverHandler}
 										>
 											Send
 										</Button>
diff --git a/src/views/Tables.tsx b/src/views/Tables.tsx
deleted file mode 100644
index ed87f96..0000000
--- a/src/views/Tables.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from "react";
-
-// reactstrap components
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  Table,
-  Row,
-  Col,
-} from "reactstrap";
-
-function Tables() {
-  return (
-    <>
-      <div className="content">
-        <Row>
-          <Col md="12">
-            <Card>
-              <CardHeader>
-                <CardTitle tag="h4">Simple Table</CardTitle>
-              </CardHeader>
-              <CardBody>
-                <Table responsive>
-                  <thead className="text-primary">
-                    <tr>
-                      <th>Name</th>
-                      <th>Country</th>
-                      <th>City</th>
-                      <th className="text-right">Salary</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>Dakota Rice</td>
-                      <td>Niger</td>
-                      <td>Oud-Turnhout</td>
-                      <td className="text-right">$36,738</td>
-                    </tr>
-                    <tr>
-                      <td>Minerva Hooper</td>
-                      <td>Curaçao</td>
-                      <td>Sinaai-Waas</td>
-                      <td className="text-right">$23,789</td>
-                    </tr>
-                    <tr>
-                      <td>Sage Rodriguez</td>
-                      <td>Netherlands</td>
-                      <td>Baileux</td>
-                      <td className="text-right">$56,142</td>
-                    </tr>
-                    <tr>
-                      <td>Philip Chaney</td>
-                      <td>Korea, South</td>
-                      <td>Overland Park</td>
-                      <td className="text-right">$38,735</td>
-                    </tr>
-                    <tr>
-                      <td>Doris Greene</td>
-                      <td>Malawi</td>
-                      <td>Feldkirchen in Kärnten</td>
-                      <td className="text-right">$63,542</td>
-                    </tr>
-                    <tr>
-                      <td>Mason Porter</td>
-                      <td>Chile</td>
-                      <td>Gloucester</td>
-                      <td className="text-right">$78,615</td>
-                    </tr>
-                    <tr>
-                      <td>Jon Porter</td>
-                      <td>Portugal</td>
-                      <td>Gloucester</td>
-                      <td className="text-right">$98,615</td>
-                    </tr>
-                  </tbody>
-                </Table>
-              </CardBody>
-            </Card>
-          </Col>
-          <Col md="12">
-            <Card className="card-plain">
-              <CardHeader>
-                <CardTitle tag="h4">Table on Plain Background</CardTitle>
-                <p className="card-category">
-                  Here is a subtitle for this table
-                </p>
-              </CardHeader>
-              <CardBody>
-                <Table responsive>
-                  <thead className="text-primary">
-                    <tr>
-                      <th>Name</th>
-                      <th>Country</th>
-                      <th>City</th>
-                      <th className="text-right">Salary</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>Dakota Rice</td>
-                      <td>Niger</td>
-                      <td>Oud-Turnhout</td>
-                      <td className="text-right">$36,738</td>
-                    </tr>
-                    <tr>
-                      <td>Minerva Hooper</td>
-                      <td>Curaçao</td>
-                      <td>Sinaai-Waas</td>
-                      <td className="text-right">$23,789</td>
-                    </tr>
-                    <tr>
-                      <td>Sage Rodriguez</td>
-                      <td>Netherlands</td>
-                      <td>Baileux</td>
-                      <td className="text-right">$56,142</td>
-                    </tr>
-                    <tr>
-                      <td>Philip Chaney</td>
-                      <td>Korea, South</td>
-                      <td>Overland Park</td>
-                      <td className="text-right">$38,735</td>
-                    </tr>
-                    <tr>
-                      <td>Doris Greene</td>
-                      <td>Malawi</td>
-                      <td>Feldkirchen in Kärnten</td>
-                      <td className="text-right">$63,542</td>
-                    </tr>
-                    <tr>
-                      <td>Mason Porter</td>
-                      <td>Chile</td>
-                      <td>Gloucester</td>
-                      <td className="text-right">$78,615</td>
-                    </tr>
-                    <tr>
-                      <td>Jon Porter</td>
-                      <td>Portugal</td>
-                      <td>Gloucester</td>
-                      <td className="text-right">$98,615</td>
-                    </tr>
-                  </tbody>
-                </Table>
-              </CardBody>
-            </Card>
-          </Col>
-        </Row>
-      </div>
-    </>
-  );
-}
-
-export default Tables;
diff --git a/src/views/Typography.tsx b/src/views/Typography.tsx
deleted file mode 100644
index 93ec3a3..0000000
--- a/src/views/Typography.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from "react";
-
-// reactstrap components
-import { Card, CardHeader, CardBody, Row, Col } from "reactstrap";
-
-function Typography() {
-  return (
-    <>
-      <div className="content">
-        <Row>
-          <Col md="12">
-            <Card>
-              <CardHeader>
-                <h5 className="title">Paper Table Heading</h5>
-                <p className="category">Created using Montserrat Font Family</p>
-              </CardHeader>
-              <CardBody>
-                <div className="typography-line">
-                  <h1>
-                    <span>Header 1</span>
-                    The Life of Paper Dashboard
-                  </h1>
-                </div>
-                <div className="typography-line">
-                  <h2>
-                    <span>Header 2</span>
-                    The Life of Paper Dashboard
-                  </h2>
-                </div>
-                <div className="typography-line">
-                  <h3>
-                    <span>Header 3</span>
-                    The Life of Paper Dashboard
-                  </h3>
-                </div>
-                <div className="typography-line">
-                  <h4>
-                    <span>Header 4</span>
-                    The Life of Paper Dashboard
-                  </h4>
-                </div>
-                <div className="typography-line">
-                  <h5>
-                    <span>Header 5</span>
-                    The Life of Paper Dashboard
-                  </h5>
-                </div>
-                <div className="typography-line">
-                  <h6>
-                    <span>Header 6</span>
-                    The Life of Paper Dashboard
-                  </h6>
-                </div>
-                <div className="typography-line">
-                  <p>
-                    <span>Paragraph</span>I will be the leader of a company that
-                    ends up being worth billions of dollars, because I got the
-                    answers. I understand culture. I am the nucleus. I think
-                    that’s a responsibility that I have, to push possibilities,
-                    to show people, this is the level that things could be at.
-                  </p>
-                </div>
-                <div className="typography-line">
-                  <span>Quote</span>
-                  <blockquote>
-                    <p className="blockquote blockquote-primary">
-                      "I will be the leader of a company that ends up being
-                      worth billions of dollars, because I got the answers. I
-                      understand culture. I am the nucleus. I think that’s a
-                      responsibility that I have, to push possibilities, to show
-                      people, this is the level that things could be at." <br />
-                      <br />
-                      <small>- Noaa</small>
-                    </p>
-                  </blockquote>
-                </div>
-                <div className="typography-line">
-                  <span>Muted Text</span>
-                  <p className="text-muted">
-                    I will be the leader of a company that ends up being worth
-                    billions of dollars, because I got the answers...
-                  </p>
-                </div>
-                <div className="typography-line">
-                  <span>Primary Text</span>
-                  <p className="text-primary">
-                    I will be the leader of a company that ends up being worth
-                    billions of dollars, because I got the answers...
-                  </p>
-                </div>
-                <div className="typography-line">
-                  <span>Info Text</span>
-                  <p className="text-info">
-                    I will be the leader of a company that ends up being worth
-                    billions of dollars, because I got the answers...
-                  </p>
-                </div>
-                <div className="typography-line">
-                  <span>Success Text</span>
-                  <p className="text-success">
-                    I will be the leader of a company that ends up being worth
-                    billions of dollars, because I got the answers...
-                  </p>
-                </div>
-                <div className="typography-line">
-                  <span>Warning Text</span>
-                  <p className="text-warning">
-                    I will be the leader of a company that ends up being worth
-                    billions of dollars, because I got the answers...
-                  </p>
-                </div>
-                <div className="typography-line">
-                  <span>Danger Text</span>
-                  <p className="text-danger">
-                    I will be the leader of a company that ends up being worth
-                    billions of dollars, because I got the answers...
-                  </p>
-                </div>
-                <div className="typography-line">
-                  <h2>
-                    <span>Small Tag</span>
-                    Header with small subtitle <br />
-                    <small>Use "small" tag for the headers</small>
-                  </h2>
-                </div>
-              </CardBody>
-            </Card>
-          </Col>
-        </Row>
-      </div>
-    </>
-  );
-}
-
-export default Typography;
diff --git a/src/views/User.tsx b/src/views/User.tsx
deleted file mode 100644
index 0f4b7a2..0000000
--- a/src/views/User.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-
-import React from "react";
-
-// reactstrap components
-import {
-  Button,
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  CardTitle,
-  FormGroup,
-  Form,
-  Input,
-  Row,
-  Col,
-} from "reactstrap";
-
-function User() {
-  return (
-    <>
-      <div className="content">
-        <Row>
-          <Col md="4">
-            <Card className="card-user">
-              <div className="image">
-                <img
-                  alt="..."
-                  src={require("../assets/img/damir-bosnjak.jpg").default}
-                />
-              </div>
-              <CardBody>
-                <div className="author">
-                  <a href="#pablo" onClick={(e) => e.preventDefault()}>
-                    <img
-                      alt="..."
-                      className="avatar border-gray"
-                      src={require("../assets/img/mike.jpg").default}
-                    />
-                    <h5 className="title">Chet Faker</h5>
-                  </a>
-                  <p className="description">@chetfaker</p>
-                </div>
-                <p className="description text-center">
-                  "I like the way you work it <br />
-                  No diggity <br />I wanna bag it up"
-                </p>
-              </CardBody>
-              <CardFooter>
-                <hr />
-                <div className="button-container">
-                  <Row>
-                    <Col className="ml-auto" lg="3" md="6" xs="6">
-                      <h5>
-                        12 <br />
-                        <small>Files</small>
-                      </h5>
-                    </Col>
-                    <Col className="ml-auto mr-auto" lg="4" md="6" xs="6">
-                      <h5>
-                        2GB <br />
-                        <small>Used</small>
-                      </h5>
-                    </Col>
-                    <Col className="mr-auto" lg="3">
-                      <h5>
-                        24,6$ <br />
-                        <small>Spent</small>
-                      </h5>
-                    </Col>
-                  </Row>
-                </div>
-              </CardFooter>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle tag="h4">Team Members</CardTitle>
-              </CardHeader>
-              <CardBody>
-                <ul className="list-unstyled team-members">
-                  <li>
-                    <Row>
-                      <Col md="2" xs="2">
-                        <div className="avatar">
-                          <img
-                            alt="..."
-                            className="img-circle img-no-padding img-responsive"
-                            src={
-                              require("../assets/img/faces/ayo-ogunseinde-2.jpg")
-                                .default
-                            }
-                          />
-                        </div>
-                      </Col>
-                      <Col md="7" xs="7">
-                        DJ Khaled <br />
-                        <span className="text-muted">
-                          <small>Offline</small>
-                        </span>
-                      </Col>
-                      <Col className="text-right" md="3" xs="3">
-                        <Button
-                          className="btn-round btn-icon"
-                          color="success"
-                          outline
-                          size="sm"
-                        >
-                          <i className="fa fa-envelope" />
-                        </Button>
-                      </Col>
-                    </Row>
-                  </li>
-                  <li>
-                    <Row>
-                      <Col md="2" xs="2">
-                        <div className="avatar">
-                          <img
-                            alt="..."
-                            className="img-circle img-no-padding img-responsive"
-                            src={
-                              require("../assets/img/faces/joe-gardner-2.jpg")
-                                .default
-                            }
-                          />
-                        </div>
-                      </Col>
-                      <Col md="7" xs="7">
-                        Creative Tim <br />
-                        <span className="text-success">
-                          <small>Available</small>
-                        </span>
-                      </Col>
-                      <Col className="text-right" md="3" xs="3">
-                        <Button
-                          className="btn-round btn-icon"
-                          color="success"
-                          outline
-                          size="sm"
-                        >
-                          <i className="fa fa-envelope" />
-                        </Button>
-                      </Col>
-                    </Row>
-                  </li>
-                  <li>
-                    <Row>
-                      <Col md="2" xs="2">
-                        <div className="avatar">
-                          <img
-                            alt="..."
-                            className="img-circle img-no-padding img-responsive"
-                            src={
-                              require("../assets/img/faces/clem-onojeghuo-2.jpg")
-                                .default
-                            }
-                          />
-                        </div>
-                      </Col>
-                      <Col className="col-ms-7" xs="7">
-                        Flume <br />
-                        <span className="text-danger">
-                          <small>Busy</small>
-                        </span>
-                      </Col>
-                      <Col className="text-right" md="3" xs="3">
-                        <Button
-                          className="btn-round btn-icon"
-                          color="success"
-                          outline
-                          size="sm"
-                        >
-                          <i className="fa fa-envelope" />
-                        </Button>
-                      </Col>
-                    </Row>
-                  </li>
-                </ul>
-              </CardBody>
-            </Card>
-          </Col>
-          <Col md="8">
-            <Card className="card-user">
-              <CardHeader>
-                <CardTitle tag="h5">Edit Profile</CardTitle>
-              </CardHeader>
-              <CardBody>
-                <Form>
-                  <Row>
-                    <Col className="pr-1" md="5">
-                      <FormGroup>
-                        <label>Company (disabled)</label>
-                        <Input
-                          defaultValue="Creative Code Inc."
-                          disabled
-                          placeholder="Company"
-                          type="text"
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col className="px-1" md="3">
-                      <FormGroup>
-                        <label>Username</label>
-                        <Input
-                          defaultValue="michael23"
-                          placeholder="Username"
-                          type="text"
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col className="pl-1" md="4">
-                      <FormGroup>
-                        <label htmlFor="exampleInputEmail1">
-                          Email address
-                        </label>
-                        <Input placeholder="Email" type="email" />
-                      </FormGroup>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col className="pr-1" md="6">
-                      <FormGroup>
-                        <label>First Name</label>
-                        <Input
-                          defaultValue="Chet"
-                          placeholder="Company"
-                          type="text"
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col className="pl-1" md="6">
-                      <FormGroup>
-                        <label>Last Name</label>
-                        <Input
-                          defaultValue="Faker"
-                          placeholder="Last Name"
-                          type="text"
-                        />
-                      </FormGroup>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col md="12">
-                      <FormGroup>
-                        <label>Address</label>
-                        <Input
-                          defaultValue="Melbourne, Australia"
-                          placeholder="Home Address"
-                          type="text"
-                        />
-                      </FormGroup>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col className="pr-1" md="4">
-                      <FormGroup>
-                        <label>City</label>
-                        <Input
-                          defaultValue="Melbourne"
-                          placeholder="City"
-                          type="text"
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col className="px-1" md="4">
-                      <FormGroup>
-                        <label>Country</label>
-                        <Input
-                          defaultValue="Australia"
-                          placeholder="Country"
-                          type="text"
-                        />
-                      </FormGroup>
-                    </Col>
-                    <Col className="pl-1" md="4">
-                      <FormGroup>
-                        <label>Postal Code</label>
-                        <Input placeholder="ZIP Code" type="number" />
-                      </FormGroup>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col md="12">
-                      <FormGroup>
-                        <label>About Me</label>
-                        <Input
-                          type="textarea"
-                          defaultValue="Oh so, your weak rhyme You doubt I'll bother, reading into it"
-                        />
-                      </FormGroup>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <div className="update ml-auto mr-auto">
-                      <Button
-                        className="btn-round"
-                        color="primary"
-                        type="submit"
-                      >
-                        Update Profile
-                      </Button>
-                    </div>
-                  </Row>
-                </Form>
-              </CardBody>
-            </Card>
-          </Col>
-        </Row>
-      </div>
-    </>
-  );
-}
-
-export default User;