diff --git a/app.php b/app.php
index 3b24329..e3bae06 100644
--- a/app.php
+++ b/app.php
@@ -30,6 +30,7 @@ if (!is_empty($_GET['page'])) {
 
         <link href="static/css/bootstrap.min.css" rel="stylesheet">
         <link href="static/css/font-awesome.min.css" rel="stylesheet">
+        <link href="static/css/material-color.min.css" rel="stylesheet">
         <link href="static/css/app.css" rel="stylesheet">
         <?php
         // custom page styles
diff --git a/static/css/material-color.css b/static/css/material-color.css
new file mode 100644
index 0000000..4a201e3
--- /dev/null
+++ b/static/css/material-color.css
@@ -0,0 +1,770 @@
+/* Material-Color.css   Copyright (c) 2017 Netsyms Technologies  MIT License */
+
+/*****************************************************\
+                        PANELS
+\*****************************************************/
+
+.panel-red .panel-heading {
+    background-color: #f44336;
+    color: white;
+}
+
+.panel-pink .panel-heading {
+    background-color: #e91e63;
+    color: white;
+}
+
+.panel-purple .panel-heading {
+    background-color: #9c27b0;
+    color: white;
+}
+
+.panel-deep-purple .panel-heading {
+    background-color: #673ab7;
+    color: white;
+}
+
+.panel-indigo .panel-heading {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.panel-blue .panel-heading {
+    background-color: #2196f3;
+    color: white;
+}
+
+.panel-light-blue .panel-heading {
+    background-color: #03a9f4;
+    color: black;
+}
+
+.panel-cyan .panel-heading {
+    background-color: #00bcd4;
+    color: black;
+}
+
+.panel-teal .panel-heading {
+    background-color: #009688;
+    color: white;
+}
+
+.panel-green .panel-heading {
+    background-color: #4caf50;
+    color: black;
+}
+
+.panel-light-green .panel-heading {
+    background-color: #8bc34a;
+    color: black;
+}
+
+.panel-lime .panel-heading {
+    background-color: #cddc39;
+    color: black;
+}
+
+.panel-yellow .panel-heading {
+    background-color: #ffeb3b;
+    color: black;
+}
+
+.panel-amber .panel-heading {
+    background-color: #ffc107;
+    color: black;
+}
+
+.panel-orange .panel-heading {
+    background-color: #ff9800;
+    color: black;
+}
+
+.panel-deep-orange .panel-heading {
+    background-color: #ff5722;
+    color: white;
+}
+
+.panel-brown .panel-heading {
+    background-color: #795548;
+    color: white;
+}
+
+.panel-grey .panel-heading {
+    background-color: #9e9e9e;
+    color: black;
+}
+
+.panel-blue-grey .panel-heading {
+    background-color: #607d8b;
+    color: white;
+}
+
+.panel-red .panel-footer {
+    background-color: #ef9a9a;
+    color: black;
+}
+
+.panel-pink .panel-footer {
+    background-color: #f48fb1;
+    color: black;
+}
+
+.panel-purple .panel-footer {
+    background-color: #ce93d8;
+    color: black;
+}
+
+.panel-deep-purple .panel-footer {
+    background-color: #b39ddb;
+    color: black;
+}
+
+.panel-indigo .panel-footer {
+    background-color: #9fa8da;
+    color: black;
+}
+
+.panel-blue .panel-footer {
+    background-color: #90caf9;
+    color: black;
+}
+
+.panel-light-blue .panel-footer {
+    background-color: #81d4fa;
+    color: black;
+}
+
+.panel-cyan .panel-footer {
+    background-color: #80deea;
+    color: black;
+}
+
+.panel-teal .panel-footer {
+    background-color: #80cbc4;
+    color: black;
+}
+
+.panel-green .panel-footer {
+    background-color: #a5d6a7;
+    color: black;
+}
+
+.panel-light-green .panel-footer {
+    background-color: #c5e1a5;
+    color: black;
+}
+
+.panel-lime .panel-footer {
+    background-color: #e6ee9c;
+    color: black;
+}
+
+.panel-yellow .panel-footer {
+    background-color: #fff59d;
+    color: black;
+}
+
+.panel-amber .panel-footer {
+    background-color: #ffe082;
+    color: black;
+}
+
+.panel-orange .panel-footer {
+    background-color: #ffcc80;
+    color: black;
+}
+
+.panel-deep-orange .panel-footer {
+    background-color: #ffab91;
+    color: black;
+}
+
+.panel-brown .panel-footer {
+    background-color: #bcaaa4;
+    color: black;
+}
+
+.panel-grey .panel-footer {
+    background-color: #eeeeee;
+    color: black;
+}
+
+.panel-blue-grey .panel-footer {
+    background-color: #b0bec5;
+    color: black;
+}
+
+/*****************************************************\
+                        ALERTS
+\*****************************************************/
+
+.alert-red {
+    background-color: #f44336;
+    color: white;
+}
+
+.alert-pink {
+    background-color: #e91e63;
+    color: white;
+}
+
+.alert-purple {
+    background-color: #9c27b0;
+    color: white;
+}
+
+.alert-deep-purple {
+    background-color: #673ab7;
+    color: white;
+}
+
+.alert-indigo {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.alert-blue {
+    background-color: #2196f3;
+    color: white;
+}
+
+.alert-light-blue {
+    background-color: #03a9f4;
+    color: black;
+}
+
+.alert-cyan {
+    background-color: #00bcd4;
+    color: black;
+}
+
+.alert-teal {
+    background-color: #009688;
+    color: white;
+}
+
+.alert-green {
+    background-color: #4caf50;
+    color: black;
+}
+
+.alert-light-green {
+    background-color: #8bc34a;
+    color: black;
+}
+
+.alert-lime {
+    background-color: #cddc39;
+    color: black;
+}
+
+.alert-yellow {
+    background-color: #ffeb3b;
+    color: black;
+}
+
+.alert-amber {
+    background-color: #ffc107;
+    color: black;
+}
+
+.alert-orange {
+    background-color: #ff9800;
+    color: black;
+}
+
+.alert-deep-orange {
+    background-color: #ff5722;
+    color: white;
+}
+
+.alert-brown {
+    background-color: #795548;
+    color: white;
+}
+
+.alert-grey {
+    background-color: #9e9e9e;
+    color: black;
+}
+
+.alert-blue-grey {
+    background-color: #607d8b;
+    color: white;
+}
+
+/*****************************************************\
+                        NAVBAR
+\*****************************************************/
+
+.navbar-red {
+    background-color: #f44336;
+    color: white;
+}
+
+.navbar-pink {
+    background-color: #e91e63;
+    color: white;
+}
+
+.navbar-purple {
+    background-color: #9c27b0;
+    color: white;
+}
+
+.navbar-deep-purple {
+    background-color: #673ab7;
+    color: white;
+}
+
+.navbar-indigo {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.navbar-blue {
+    background-color: #2196f3;
+    color: white;
+}
+
+.navbar-light-blue {
+    background-color: #03a9f4;
+    color: black;
+}
+
+.navbar-cyan {
+    background-color: #00bcd4;
+    color: black;
+}
+
+.navbar-teal {
+    background-color: #009688;
+    color: white;
+}
+
+.navbar-green {
+    background-color: #4caf50;
+    color: black;
+}
+
+.navbar-light-green {
+    background-color: #8bc34a;
+    color: black;
+}
+
+.navbar-lime {
+    background-color: #cddc39;
+    color: black;
+}
+
+.navbar-yellow {
+    background-color: #ffeb3b;
+    color: black;
+}
+
+.navbar-amber {
+    background-color: #ffc107;
+    color: black;
+}
+
+.navbar-orange {
+    background-color: #ff9800;
+    color: black;
+}
+
+.navbar-deep-orange {
+    background-color: #ff5722;
+    color: white;
+}
+
+.navbar-brown {
+    background-color: #795548;
+    color: white;
+}
+
+.navbar-grey {
+    background-color: #9e9e9e;
+    color: black;
+}
+
+.navbar-blue-grey {
+    background-color: #607d8b;
+    color: white;
+}
+
+/*****************************************************\
+                       BUTTONS
+\*****************************************************/
+
+.btn-red {
+    background-color: #f44336;
+    color: white;
+}
+
+.btn-pink {
+    background-color: #e91e63;
+    color: white;
+}
+
+.btn-purple {
+    background-color: #9c27b0;
+    color: white;
+}
+
+.btn-deep-purple {
+    background-color: #673ab7;
+    color: white;
+}
+
+.btn-indigo {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.btn-blue {
+    background-color: #2196f3;
+    color: white;
+}
+
+.btn-light-blue {
+    background-color: #03a9f4;
+    color: black;
+}
+
+.btn-cyan {
+    background-color: #00bcd4;
+    color: black;
+}
+
+.btn-teal {
+    background-color: #009688;
+    color: white;
+}
+
+.btn-green {
+    background-color: #4caf50;
+    color: black;
+}
+
+.btn-light-green {
+    background-color: #8bc34a;
+    color: black;
+}
+
+.btn-lime {
+    background-color: #cddc39;
+    color: black;
+}
+
+.btn-yellow {
+    background-color: #ffeb3b;
+    color: black;
+}
+
+.btn-amber {
+    background-color: #ffc107;
+    color: black;
+}
+
+.btn-orange {
+    background-color: #ff9800;
+    color: black;
+}
+
+.btn-deep-orange {
+    background-color: #ff5722;
+    color: white;
+}
+
+.btn-brown {
+    background-color: #795548;
+    color: white;
+}
+
+.btn-grey {
+    background-color: #9e9e9e;
+    color: black;
+}
+
+.btn-blue-grey {
+    background-color: #607d8b;
+    color: white;
+}
+
+/*****************************************************\
+                         TEXT
+\*****************************************************/
+
+.text-red {
+    color: #f44336;
+}
+
+.text-pink {
+    color: #e91e63;
+}
+
+.text-purple {
+    color: #9c27b0;
+}
+
+.text-deep-purple {
+    color: #673ab7;
+}
+
+.text-indigo {
+    color: #3f51b5;
+}
+
+.text-blue {
+    color: #2196f3;
+}
+
+.text-light-blue {
+    color: #03a9f4;
+}
+
+.text-cyan {
+    color: #00bcd4;
+}
+
+.text-teal {
+    color: #009688;
+}
+
+.text-green {
+    color: #4caf50;
+}
+
+.text-light-green {
+    color: #8bc34a;
+}
+
+.text-lime {
+    color: #cddc39;
+}
+
+.text-yellow {
+    color: #ffeb3b;
+}
+
+.text-amber {
+    color: #ffc107;
+}
+
+.text-orange {
+    color: #ff9800;
+}
+
+.text-deep-orange {
+    color: #ff5722;
+}
+
+.text-brown {
+    color: #795548;
+}
+
+.text-grey {
+    color: #9e9e9e;
+}
+
+.text-blue-grey {
+    color: #607d8b;
+}
+
+/*****************************************************\
+                        LABELS
+\*****************************************************/
+
+.label-red {
+    background-color: #f44336;
+    color: white;
+}
+
+.label-pink {
+    background-color: #e91e63;
+    color: white;
+}
+
+.label-purple {
+    background-color: #9c27b0;
+    color: white;
+}
+
+.label-deep-purple {
+    background-color: #673ab7;
+    color: white;
+}
+
+.label-indigo {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.label-blue {
+    background-color: #2196f3;
+    color: white;
+}
+
+.label-light-blue {
+    background-color: #03a9f4;
+    color: black;
+}
+
+.label-cyan {
+    background-color: #00bcd4;
+    color: black;
+}
+
+.label-teal {
+    background-color: #009688;
+    color: white;
+}
+
+.label-green {
+    background-color: #4caf50;
+    color: black;
+}
+
+.label-light-green {
+    background-color: #8bc34a;
+    color: black;
+}
+
+.label-lime {
+    background-color: #cddc39;
+    color: black;
+}
+
+.label-yellow {
+    background-color: #ffeb3b;
+    color: black;
+}
+
+.label-amber {
+    background-color: #ffc107;
+    color: black;
+}
+
+.label-orange {
+    background-color: #ff9800;
+    color: black;
+}
+
+.label-deep-orange {
+    background-color: #ff5722;
+    color: white;
+}
+
+.label-brown {
+    background-color: #795548;
+    color: white;
+}
+
+.label-grey {
+    background-color: #9e9e9e;
+    color: black;
+}
+
+.label-blue-grey {
+    background-color: #607d8b;
+    color: white;
+}
+
+/*****************************************************\
+                    PROGRESS BARS
+\*****************************************************/
+
+.progress-bar-red {
+    background-color: #f44336;
+    color: white;
+}
+
+.progress-bar-pink {
+    background-color: #e91e63;
+    color: white;
+}
+
+.progress-bar-purple {
+    background-color: #9c27b0;
+    color: white;
+}
+
+.progress-bar-deep-purple {
+    background-color: #673ab7;
+    color: white;
+}
+
+.progress-bar-indigo {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.progress-bar-blue {
+    background-color: #2196f3;
+    color: white;
+}
+
+.progress-bar-light-blue {
+    background-color: #03a9f4;
+    color: black;
+}
+
+.progress-bar-cyan {
+    background-color: #00bcd4;
+    color: black;
+}
+
+.progress-bar-teal {
+    background-color: #009688;
+    color: white;
+}
+
+.progress-bar-green {
+    background-color: #4caf50;
+    color: black;
+}
+
+.progress-bar-light-green {
+    background-color: #8bc34a;
+    color: black;
+}
+
+.progress-bar-lime {
+    background-color: #cddc39;
+    color: black;
+}
+
+.progress-bar-yellow {
+    background-color: #ffeb3b;
+    color: black;
+}
+
+.progress-bar-amber {
+    background-color: #ffc107;
+    color: black;
+}
+
+.progress-bar-orange {
+    background-color: #ff9800;
+    color: black;
+}
+
+.progress-bar-deep-orange {
+    background-color: #ff5722;
+    color: white;
+}
+
+.progress-bar-brown {
+    background-color: #795548;
+    color: white;
+}
+
+.progress-bar-grey {
+    background-color: #9e9e9e;
+    color: black;
+}
+
+.progress-bar-blue-grey {
+    background-color: #607d8b;
+    color: white;
+}
\ No newline at end of file
diff --git a/static/css/material-color.min.css b/static/css/material-color.min.css
new file mode 100644
index 0000000..d18e95b
--- /dev/null
+++ b/static/css/material-color.min.css
@@ -0,0 +1,2 @@
+/* Material-Color.css   Copyright (c) 2017 Netsyms Technologies  MIT License */
+.panel-red .panel-heading{background-color:#f44336;color:#fff}.panel-pink .panel-heading{background-color:#e91e63;color:#fff}.panel-purple .panel-heading{background-color:#9c27b0;color:#fff}.panel-deep-purple .panel-heading{background-color:#673ab7;color:#fff}.panel-indigo .panel-heading{background-color:#3f51b5;color:#fff}.panel-blue .panel-heading{background-color:#2196f3;color:#fff}.panel-light-blue .panel-heading{background-color:#03a9f4;color:#000}.panel-cyan .panel-heading{background-color:#00bcd4;color:#000}.panel-teal .panel-heading{background-color:#009688;color:#fff}.panel-green .panel-heading{background-color:#4caf50;color:#000}.panel-light-green .panel-heading{background-color:#8bc34a;color:#000}.panel-lime .panel-heading{background-color:#cddc39;color:#000}.panel-yellow .panel-heading{background-color:#ffeb3b;color:#000}.panel-amber .panel-heading{background-color:#ffc107;color:#000}.panel-orange .panel-heading{background-color:#ff9800;color:#000}.panel-deep-orange .panel-heading{background-color:#ff5722;color:#fff}.panel-brown .panel-heading{background-color:#795548;color:#fff}.panel-grey .panel-heading{background-color:#9e9e9e;color:#000}.panel-blue-grey .panel-heading{background-color:#607d8b;color:#fff}.panel-red .panel-footer{background-color:#ef9a9a;color:#000}.panel-pink .panel-footer{background-color:#f48fb1;color:#000}.panel-purple .panel-footer{background-color:#ce93d8;color:#000}.panel-deep-purple .panel-footer{background-color:#b39ddb;color:#000}.panel-indigo .panel-footer{background-color:#9fa8da;color:#000}.panel-blue .panel-footer{background-color:#90caf9;color:#000}.panel-light-blue .panel-footer{background-color:#81d4fa;color:#000}.panel-cyan .panel-footer{background-color:#80deea;color:#000}.panel-teal .panel-footer{background-color:#80cbc4;color:#000}.panel-green .panel-footer{background-color:#a5d6a7;color:#000}.panel-light-green .panel-footer{background-color:#c5e1a5;color:#000}.panel-lime .panel-footer{background-color:#e6ee9c;color:#000}.panel-yellow .panel-footer{background-color:#fff59d;color:#000}.panel-amber .panel-footer{background-color:#ffe082;color:#000}.panel-orange .panel-footer{background-color:#ffcc80;color:#000}.panel-deep-orange .panel-footer{background-color:#ffab91;color:#000}.panel-brown .panel-footer{background-color:#bcaaa4;color:#000}.panel-grey .panel-footer{background-color:#eee;color:#000}.panel-blue-grey .panel-footer{background-color:#b0bec5;color:#000}.alert-red{background-color:#f44336;color:#fff}.alert-pink{background-color:#e91e63;color:#fff}.alert-purple{background-color:#9c27b0;color:#fff}.alert-deep-purple{background-color:#673ab7;color:#fff}.alert-indigo{background-color:#3f51b5;color:#fff}.alert-blue{background-color:#2196f3;color:#fff}.alert-light-blue{background-color:#03a9f4;color:#000}.alert-cyan{background-color:#00bcd4;color:#000}.alert-teal{background-color:#009688;color:#fff}.alert-green{background-color:#4caf50;color:#000}.alert-light-green{background-color:#8bc34a;color:#000}.alert-lime{background-color:#cddc39;color:#000}.alert-yellow{background-color:#ffeb3b;color:#000}.alert-amber{background-color:#ffc107;color:#000}.alert-orange{background-color:#ff9800;color:#000}.alert-deep-orange{background-color:#ff5722;color:#fff}.alert-brown{background-color:#795548;color:#fff}.alert-grey{background-color:#9e9e9e;color:#000}.alert-blue-grey{background-color:#607d8b;color:#fff}.navbar-red{background-color:#f44336;color:#fff}.navbar-pink{background-color:#e91e63;color:#fff}.navbar-purple{background-color:#9c27b0;color:#fff}.navbar-deep-purple{background-color:#673ab7;color:#fff}.navbar-indigo{background-color:#3f51b5;color:#fff}.navbar-blue{background-color:#2196f3;color:#fff}.navbar-light-blue{background-color:#03a9f4;color:#000}.navbar-cyan{background-color:#00bcd4;color:#000}.navbar-teal{background-color:#009688;color:#fff}.navbar-green{background-color:#4caf50;color:#000}.navbar-light-green{background-color:#8bc34a;color:#000}.navbar-lime{background-color:#cddc39;color:#000}.navbar-yellow{background-color:#ffeb3b;color:#000}.navbar-amber{background-color:#ffc107;color:#000}.navbar-orange{background-color:#ff9800;color:#000}.navbar-deep-orange{background-color:#ff5722;color:#fff}.navbar-brown{background-color:#795548;color:#fff}.navbar-grey{background-color:#9e9e9e;color:#000}.navbar-blue-grey{background-color:#607d8b;color:#fff}.btn-red{background-color:#f44336;color:#fff}.btn-pink{background-color:#e91e63;color:#fff}.btn-purple{background-color:#9c27b0;color:#fff}.btn-deep-purple{background-color:#673ab7;color:#fff}.btn-indigo{background-color:#3f51b5;color:#fff}.btn-blue{background-color:#2196f3;color:#fff}.btn-light-blue{background-color:#03a9f4;color:#000}.btn-cyan{background-color:#00bcd4;color:#000}.btn-teal{background-color:#009688;color:#fff}.btn-green{background-color:#4caf50;color:#000}.btn-light-green{background-color:#8bc34a;color:#000}.btn-lime{background-color:#cddc39;color:#000}.btn-yellow{background-color:#ffeb3b;color:#000}.btn-amber{background-color:#ffc107;color:#000}.btn-orange{background-color:#ff9800;color:#000}.btn-deep-orange{background-color:#ff5722;color:#fff}.btn-brown{background-color:#795548;color:#fff}.btn-grey{background-color:#9e9e9e;color:#000}.btn-blue-grey{background-color:#607d8b;color:#fff}.text-red{color:#f44336}.text-pink{color:#e91e63}.text-purple{color:#9c27b0}.text-deep-purple{color:#673ab7}.text-indigo{color:#3f51b5}.text-blue{color:#2196f3}.text-light-blue{color:#03a9f4}.text-cyan{color:#00bcd4}.text-teal{color:#009688}.text-green{color:#4caf50}.text-light-green{color:#8bc34a}.text-lime{color:#cddc39}.text-yellow{color:#ffeb3b}.text-amber{color:#ffc107}.text-orange{color:#ff9800}.text-deep-orange{color:#ff5722}.text-brown{color:#795548}.text-grey{color:#9e9e9e}.text-blue-grey{color:#607d8b}.label-red{background-color:#f44336;color:#fff}.label-pink{background-color:#e91e63;color:#fff}.label-purple{background-color:#9c27b0;color:#fff}.label-deep-purple{background-color:#673ab7;color:#fff}.label-indigo{background-color:#3f51b5;color:#fff}.label-blue{background-color:#2196f3;color:#fff}.label-light-blue{background-color:#03a9f4;color:#000}.label-cyan{background-color:#00bcd4;color:#000}.label-teal{background-color:#009688;color:#fff}.label-green{background-color:#4caf50;color:#000}.label-light-green{background-color:#8bc34a;color:#000}.label-lime{background-color:#cddc39;color:#000}.label-yellow{background-color:#ffeb3b;color:#000}.label-amber{background-color:#ffc107;color:#000}.label-orange{background-color:#ff9800;color:#000}.label-deep-orange{background-color:#ff5722;color:#fff}.label-brown{background-color:#795548;color:#fff}.label-grey{background-color:#9e9e9e;color:#000}.label-blue-grey{background-color:#607d8b;color:#fff}.progress-bar-red{background-color:#f44336;color:#fff}.progress-bar-pink{background-color:#e91e63;color:#fff}.progress-bar-purple{background-color:#9c27b0;color:#fff}.progress-bar-deep-purple{background-color:#673ab7;color:#fff}.progress-bar-indigo{background-color:#3f51b5;color:#fff}.progress-bar-blue{background-color:#2196f3;color:#fff}.progress-bar-light-blue{background-color:#03a9f4;color:#000}.progress-bar-cyan{background-color:#00bcd4;color:#000}.progress-bar-teal{background-color:#009688;color:#fff}.progress-bar-green{background-color:#4caf50;color:#000}.progress-bar-light-green{background-color:#8bc34a;color:#000}.progress-bar-lime{background-color:#cddc39;color:#000}.progress-bar-yellow{background-color:#ffeb3b;color:#000}.progress-bar-amber{background-color:#ffc107;color:#000}.progress-bar-orange{background-color:#ff9800;color:#000}.progress-bar-deep-orange{background-color:#ff5722;color:#fff}.progress-bar-brown{background-color:#795548;color:#fff}.progress-bar-grey{background-color:#9e9e9e;color:#000}.progress-bar-blue-grey{background-color:#607d8b;color:#fff}
\ No newline at end of file