vmk init

2025-06-08 08:04:21 +08:00 · 2018-09-05 10:32:48 +03:00 · 2018-09-05 10:32:48 +03:00 · 401825d92b
commit 401825d92b
parent d49cbe7940
90 changed files with 7287 additions and 53 deletions
--- a/package.json
+++ b/package.json
@ -13,6 +13,9 @@
  },
  "dependencies": {
    "vue": "^2.5.17",
+    "vue-clickaway": "^2.2.2",
+    "vue-lazyload": "^1.2.6",
+    "vue-material": "^1.0.0-beta-10.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/index.html
+++ b/public/index.html
@ -4,8 +4,13 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>vue-material-kit</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <title>Vue Material Kit by Creative Tim</title>
+
+    <!--  Fonts and icons     -->
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
+    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
+    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
  </head>
  <body>
    <noscript>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,20 +1,9 @@
 <template>
  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <router-view name="header"/>
+    <div>
+      <router-view/>
    </div>
-    <router-view/>
+    <router-view name="footer"/>
  </div>
 </template>
-
-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
--- a/src/assets/demo.css
+++ b/src/assets/demo.css
--- a/src/assets/img/apple-icon.png
+++ b/src/assets/img/apple-icon.png
--- a/src/assets/img/bg.jpg
+++ b/src/assets/img/bg.jpg
--- a/src/assets/img/bg2.jpg
+++ b/src/assets/img/bg2.jpg
--- a/src/assets/img/bg3.jpg
+++ b/src/assets/img/bg3.jpg
--- a/src/assets/img/bg7.jpg
+++ b/src/assets/img/bg7.jpg
--- a/src/assets/img/city-profile.jpg
+++ b/src/assets/img/city-profile.jpg
--- a/src/assets/img/city.jpg
+++ b/src/assets/img/city.jpg
--- a/src/assets/img/examples/clem-onojegaw.jpg
+++ b/src/assets/img/examples/clem-onojegaw.jpg
--- a/src/assets/img/examples/clem-onojeghuo.jpg
+++ b/src/assets/img/examples/clem-onojeghuo.jpg
--- a/src/assets/img/examples/cynthia-del-rio.jpg
+++ b/src/assets/img/examples/cynthia-del-rio.jpg
--- a/src/assets/img/examples/mariya-georgieva.jpg
+++ b/src/assets/img/examples/mariya-georgieva.jpg
--- a/src/assets/img/examples/olu-eletu.jpg
+++ b/src/assets/img/examples/olu-eletu.jpg
--- a/src/assets/img/examples/studio-1.jpg
+++ b/src/assets/img/examples/studio-1.jpg
--- a/src/assets/img/examples/studio-2.jpg
+++ b/src/assets/img/examples/studio-2.jpg
--- a/src/assets/img/examples/studio-3.jpg
+++ b/src/assets/img/examples/studio-3.jpg
--- a/src/assets/img/examples/studio-4.jpg
+++ b/src/assets/img/examples/studio-4.jpg
--- a/src/assets/img/examples/studio-5.jpg
+++ b/src/assets/img/examples/studio-5.jpg
--- a/src/assets/img/faces/avatar.jpg
+++ b/src/assets/img/faces/avatar.jpg
--- a/src/assets/img/faces/camp.jpg
+++ b/src/assets/img/faces/camp.jpg
--- a/src/assets/img/faces/card-profile1-square.jpg
+++ b/src/assets/img/faces/card-profile1-square.jpg
--- a/src/assets/img/faces/card-profile2-square.jpg
+++ b/src/assets/img/faces/card-profile2-square.jpg
--- a/src/assets/img/faces/card-profile4-square.jpg
+++ b/src/assets/img/faces/card-profile4-square.jpg
--- a/src/assets/img/faces/card-profile5-square.jpg
+++ b/src/assets/img/faces/card-profile5-square.jpg
--- a/src/assets/img/faces/card-profile6-square.jpg
+++ b/src/assets/img/faces/card-profile6-square.jpg
--- a/src/assets/img/faces/christian.jpg
+++ b/src/assets/img/faces/christian.jpg
--- a/src/assets/img/faces/kendall.jpg
+++ b/src/assets/img/faces/kendall.jpg
--- a/src/assets/img/faces/marc.jpg
+++ b/src/assets/img/faces/marc.jpg
--- a/src/assets/img/landing.jpg
+++ b/src/assets/img/landing.jpg
--- a/src/assets/img/profile.jpg
+++ b/src/assets/img/profile.jpg
--- a/src/assets/img/profile_city.jpg
+++ b/src/assets/img/profile_city.jpg
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/scss/material-kit.scss
+++ b/src/assets/scss/material-kit.scss
@ -0,0 +1,55 @@
+
+
+/*!
+
+ =========================================================
+ * Material Dashboard - v1.0.1
+ =========================================================
+
+ * Product Page: http://www.creative-tim.com/product/material-dashboard
+ * Copyright 2017 Creative Tim (http://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ */
+
+
+//variables and mixins
+@import "md/variables";
+@import "md/mixins";
+@import "md/shadows";
+
+//plugin css
+@import "md/plugins/_perfect-scrollbar";
+
+// Core CSS
+@import "md/typography";
+@import "md/sidebar-and-main-panel";
+@import "md/buttons";
+@import "md/misc";
+@import "md/inputs";
+@import "md/forms";
+@import "md/alerts";
+@import "md/tables";
+@import "md/layout";
+@import "md/headers";
+@import "md/example-pages";
+@import "md/checkboxes";
+@import "md/togglebutton";
+@import "md/ripples";
+@import "md/pagination";
+@import "md/pills";
+@import "md/dialogs";
+@import "md/navbars";
+@import "md/popups";
+@import "md/footers";
+
+// Fancy Stuff
+@import "md/dropdown";
+@import "md/cards";
+@import "md/tabs";
+@import "md/chartist";
+@import "md/responsive";
--- a/src/assets/scss/md/_alerts.scss
+++ b/src/assets/scss/md/_alerts.scss
@ -0,0 +1,95 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.alert {
+    border: 0;
+    border-radius: 0;
+    position: relative;
+    padding: 20px 15px;
+    line-height: 20px;
+    margin-bottom: 20px;
+
+    .notifications &{
+      margin-bottom: 0;
+    }
+
+    b{
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+        font-size: $font-size-small;
+    }
+
+    @include alert-color($gray-color);
+
+    &.alert-info{
+      @include alert-color(lighten($brand-info,5%));
+    }
+
+    &.alert-danger{
+      @include alert-color(lighten($brand-danger,5%));
+    }
+
+    &.alert-primary{
+      @include alert-color(lighten($brand-primary,5%));
+    }
+
+    &.alert-warning{
+      @include alert-color(lighten($brand-warning,5%));
+    }
+
+    &.alert-success{
+      @include alert-color(lighten($brand-success,5%));
+    }
+
+
+    &-info, &-danger, &-warning, &-success {
+        color: $mdb-text-color-light;
+    }
+
+    &-default {
+        a, .alert-link {
+            color: $mdb-text-color-primary;
+        }
+    }
+
+    .close{
+      float: right;
+      font-size: inherit;
+      font-weight: 700;
+      line-height: 1;
+      color: $white-color;
+      opacity: .9;
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+    }
+
+    i[data-notify="icon"] {
+        font-size: 30px;
+        display: block;
+        left: 15px;
+        position: absolute;
+        top: 50%;
+        margin-top: -15px;
+    }
+
+    span{
+        display: block;
+        max-width: 89%;
+    }
+
+    .alert-icon{
+        display: block;
+        float: left;
+        margin-right: $margin-base;
+
+        i{
+            margin-top: -7px;
+            top: 5px;
+            position: relative;
+        }
+    }
+}
+
+.alert.alert-with-icon {
+    padding-left: 65px;
+}
--- a/src/assets/scss/md/_buttons.scss
+++ b/src/assets/scss/md/_buttons.scss
@ -0,0 +1,212 @@
+.md-button{
+    border: none;
+    border-radius: $border-radius-base;
+    position: relative;
+    margin: 10px 1px;
+    height: auto;
+    line-height: 1.42857;
+
+    font-size: $mdb-btn-font-size-base;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 0;
+
+    will-change: box-shadow, transform;
+    transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
+    background-color 0.2s $mdb-animation-curve-default;
+
+    &:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple{
+      padding: 12px 30px;
+    }
+
+    &:not(.md-just-icon) .md-button-content i{
+      font-size: 1.1rem !important;
+      height: 17px;
+    }
+
+    &.md-wd{
+      min-width: 140px;
+    }
+
+    &.md-block{
+      width: 100%;
+    }
+
+    &:before{
+      display: none;
+    }
+
+    &,
+    &.md-default{
+        @include btn-styles($gray-light);
+    }
+
+    &.md-primary{
+      @include btn-styles($brand-primary);
+    }
+    &.md-info{
+      @include btn-styles($brand-info);
+    }
+    &.md-success{
+      @include btn-styles($brand-success);
+    }
+    &.md-warning{
+      @include btn-styles($brand-warning);
+    }
+    &.md-danger{
+      @include btn-styles($brand-danger);
+    }
+    &.md-white{
+      @include btn-styles($white-color);
+    }
+
+    &:focus,
+    &:active,
+    &:active:focus{
+      outline: 0;
+    }
+
+    &.md-round{
+      border-radius: $border-radius-extreme;
+    }
+
+    &:not(.btn-just-icon):not(.btn-fab){
+      .fa{
+          font-size: 18px;
+          margin-top: -2px;
+          position: relative;
+          top: 2px;
+      }
+    }
+
+
+    &.btn-fab {
+        // see above for color variations
+        border-radius: 50%;
+        font-size: $mdb-btn-fab-font-size;
+        height: $mdb-btn-fab-size;
+        margin: auto;
+        min-width: $mdb-btn-fab-size;
+        width: $mdb-btn-fab-size;
+        padding: 0;
+        overflow: hidden;
+        position: relative;
+        line-height: normal;
+
+        .ripple-container {
+          border-radius: 50%;
+        }
+
+        &.btn-fab-mini,
+        .btn-group-sm & {
+            height: $mdb-btn-fab-size-mini;
+            min-width: $mdb-btn-fab-size-mini;
+            width: $mdb-btn-fab-size-mini;
+
+            &.material-icons {
+                top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
+                left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
+            }
+
+            .material-icons{
+                font-size: $mdb-btn-icon-size-mini;
+            }
+        }
+
+        i.material-icons {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
+          line-height: $mdb-btn-fab-font-size;
+          width: $mdb-btn-fab-font-size;
+          font-size: $mdb-btn-fab-font-size;
+        }
+    }
+
+    // Size variations
+    &.md-lg .md-ripple{
+        font-size: $mdb-btn-font-size-lg;
+        padding: 18px 36px !important;
+    }
+    &.md-sm .md-ripple{
+        padding: 0.40625rem 1.25rem !important;
+        font-size: $mdb-btn-font-size-sm;
+    }
+
+    &.btn-just-icon{
+        font-size: 20px;
+        padding: 12px 12px;
+        line-height: 1em;
+
+        i{
+            width: 20px;
+        }
+        &.btn-lg{
+            font-size: 22px;
+            padding: 13px 18px;
+        }
+    }
+
+    &.md-fab,
+    &.md-just-icon{
+      font-size: 24px;
+      height: 41px;
+      min-width: 41px;
+      width: 41px;
+      padding: 0;
+      overflow: hidden;
+      position: relative;
+      line-height: 41px;
+      border-radius: 50%;
+    }
+
+    .md-button-content{
+      display: flex;
+      align-items: center;
+      i{
+        font-size: 20px !important;
+      }
+    }
+}
+
+.btn{
+    // Align icons inside buttons with text
+    .material-icons{
+        vertical-align: middle;
+        font-size: $mdb-btn-icon-size-mini;
+        top: -1px;
+        position: relative;
+    }
+
+}
+
+.navbar .navbar-nav > li > {
+    a.btn{
+        margin-top: 2px;
+        margin-bottom: 2px;
+
+        &.btn-fab{
+            margin: 5px 2px;
+        }
+    }
+    a:not(.btn){
+        .material-icons{
+            margin-top: -3px;
+            top: 0px;
+            position: relative;
+            margin-right: 3px;
+        }
+    }
+    .profile-photo{
+        margin: 5px 2px;
+    }
+}
+
+.navbar-default:not(.navbar-transparent) .navbar-nav > li > {
+    a.btn{
+        &.btn-white.btn-simple{
+            color: $gray;
+        }
+    }
+}
--- a/src/assets/scss/md/_cards.scss
+++ b/src/assets/scss/md/_cards.scss
@ -0,0 +1,362 @@
+.md-card{
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    margin: 25px 0;
+    overflow: unset;
+
+    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
+    border-radius: $border-radius-base;
+    color: $mdb-card-body-text;
+    background: $mdb-card-body-background;
+
+    .card-height-indicator {
+        margin-top: 100%;
+    }
+
+    &.row-space{
+        .header{
+            padding: 15px 20px 0;
+        }
+    }
+
+    .title{
+        margin-top: 0;
+        margin-bottom: 5px;
+    }
+    .card-image {
+        height: 60%;
+        position: relative;
+        overflow: hidden;
+
+        margin-left: 15px;
+        margin-right: 15px;
+        margin-top: -30px;
+        border-radius: $border-radius-large;
+
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: $border-radius-large;
+            pointer-events: none;
+        }
+        .card-title {
+            position: absolute;
+            bottom: 15px;
+            left: 15px;
+            color: $mdb-card-image-headline;
+            font-size: $font-size-h4;
+            text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
+        }
+    }
+
+    .category:not([class*="text-"]){
+        color: $gray-color;
+    }
+    .md-card-content{
+        padding: 15px 20px;
+
+        .category{
+            margin: 0;
+        }
+    }
+
+    .md-card-header{
+        @include shadow-big();
+        margin: -20px $margin-base 0;
+        border-radius: $border-radius-base;
+        padding: $padding-base;
+        background-color: $gray-color;
+
+        .title{
+            color: $white-color;
+        }
+        .category{
+            margin: 0;
+            color: rgba($white-color, .62);
+        }
+
+        a{
+          color: $white-color !important;
+        }
+
+        &.card-chart{
+            padding: 0;
+            min-height: 160px;
+
+            + .content{
+                h4{
+                    margin-top: 0;
+                }
+            }
+        }
+
+        .ct-label{
+            color: rgba($white-color, .7);
+        }
+        .ct-grid{
+            stroke: rgba(255, 255, 255, 0.2);
+        }
+        .ct-series-a .ct-point,
+        .ct-series-a .ct-line,
+        .ct-series-a .ct-bar,
+        .ct-series-a .ct-slice-donut{
+            stroke: rgba(255,255,255,.8);
+        }
+        .ct-series-a .ct-slice-pie,
+        .ct-series-a .ct-area{
+            fill: rgba(255,255,255,.4);
+        }
+
+    }
+
+    .chart-title{
+        position: absolute;;
+        top: 25px;
+        width: 100%;
+        text-align: center;
+
+        h3{
+            margin: 0;
+            color: $white-color;
+        }
+
+        h6{
+            margin: 0;
+            color: rgba(255,255,255, .4);
+        }
+
+    }
+
+    .md-card-actions{
+        margin: 0 20px 10px;
+        padding: 10px 0 0 0;
+        border-top: 1px solid #eeeeee;
+
+        .content{
+            display: block;
+        }
+
+        div{
+            display: inline-block;
+        }
+        .author{
+            color: $gray-color;
+        }
+        .stats{
+            line-height: 22px;
+            color: $gray-color;
+            font-size: $font-size-small;
+
+            .md-icon.md-theme-default.md-icon-font{
+                position: relative;
+                top: -1px;
+                font-size: $font-paragraph + 2 !important;
+                color: $gray-light;
+            }
+        }
+
+        h6{
+            color: $gray-color;
+        }
+
+    }
+
+    img{
+        width: 100%;
+        height: auto;
+    }
+
+    .category{
+        .md-icon{
+            position: relative;
+            top: 6px;
+            line-height: 0;
+        }
+    }
+
+    .category-social{
+        .fa{
+            font-size: 24px;
+            position: relative;
+            margin-top: -4px;
+            top: 2px;
+            margin-right: 5px;
+        }
+    }
+
+    .author{
+        .avatar{
+            width: 30px;
+            height: 30px;
+            overflow: hidden;
+            border-radius: 50%;
+            margin-right: 5px;
+        }
+
+        a{
+            color: $black-color;
+            text-decoration: none;
+
+            .ripple-container{
+                display: none;
+            }
+        }
+    }
+
+    .table{
+        margin-bottom: 0;
+
+        tr:first-child td{
+            border-top: none;
+        }
+    }
+
+    [data-background-color="purple"],
+    .md-tabs.md-primary .md-tabs-navigation{
+        background: linear-gradient(60deg, $purple-400, $purple-600);
+        @include shadow-big-color($brand-primary);
+    }
+
+    [data-background-color="blue"],
+    .md-tabs.md-info .md-tabs-navigation{
+        background: linear-gradient(60deg, $cyan-400, $cyan-600);
+        @include shadow-big-color($brand-info);
+    }
+
+    [data-background-color="green"],
+    .md-tabs.md-success .md-tabs-navigation{
+        background: linear-gradient(60deg, $green-400, $green-600);
+        @include shadow-big-color($brand-success);
+    }
+
+    [data-background-color="orange"],
+    .md-tabs.md-warning .md-tabs-navigation{
+        background: linear-gradient(60deg, $orange-400, $orange-600);
+        @include shadow-big-color($brand-warning);
+    }
+
+    [data-background-color="red"],
+    .md-tabs.md-danger .md-tabs-navigation{
+        background: linear-gradient(60deg, $red-400, $red-600);
+        @include shadow-big-color($brand-danger);
+    }
+
+    [data-background-color]{
+        color: $white-color;
+
+        a{
+            color: $white-color;
+        }
+    }
+}
+
+.md-card-stats{
+    .title{
+        margin: 0;
+
+        small{
+          color: $gray-color;
+          font-size: 65%;
+          line-height: 1;
+          font-weight: 400;
+        }
+    }
+    .md-card-header{
+        float: left;
+        text-align: center;
+
+        i{
+            font-size: 36px !important;
+            line-height: 56px;
+            width: 56px;
+            height: 56px;
+            color: $white-color !important;
+        }
+    }
+    .md-card-content{
+        text-align: right;
+        padding-top: 10px;
+    }
+
+}
+
+.card-nav-tabs{
+    .header-raised{
+        margin-top: -$margin-base * 2;
+    }
+    .nav-tabs{
+        background: transparent;
+        padding: 0;
+    }
+    .nav-tabs-title{
+        float: left;
+        padding: 10px 10px 10px 0;
+        line-height: 24px;
+    }
+}
+
+.md-card-plain{
+    background: transparent !important;
+    box-shadow: none !important;
+
+    .md-card-header{
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .content{
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    .card-image{
+        margin: 0;
+        border-radius: $border-radius-base;
+
+        img{
+            border-radius: $border-radius-base;
+        }
+    }
+}
+
+.iframe-container{
+    margin: 0 -20px 0;
+
+    iframe{
+        width: 100%;
+        height: 500px;
+        border: 0;
+        @include shadow-big();
+    }
+}
+
+.md-card-profile,
+.card-testimonial{
+    margin-top: 30px;
+    text-align: center;
+
+    .btn-just-icon.btn-raised{
+        margin-left: 6px;
+        margin-right: 6px;
+    }
+
+    .md-card-avatar{
+        max-width: 130px;
+        max-height: 130px;
+        margin: -50px auto 0;
+        border-radius: 50%;
+        overflow: hidden;
+
+        @include shadow-big();
+
+        & + .md-card-content{
+            margin-top: 15px;
+        }
+    }
+
+    &.md-card-plain{
+        .card-avatar{
+            margin-top: 0;
+        }
+    }
+}
--- a/src/assets/scss/md/_chartist.scss
+++ b/src/assets/scss/md/_chartist.scss
@ -0,0 +1,254 @@
+@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
+  display: block;
+  position: relative;
+  width: $width;
+
+  &:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: $ratio * 100%;
+  }
+
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
+  -webkit-box-align: $ct-text-align;
+  -webkit-align-items: $ct-text-align;
+  -ms-flex-align: $ct-text-align;
+  align-items: $ct-text-align;
+  -webkit-box-pack: $ct-text-justify;
+  -webkit-justify-content: $ct-text-justify;
+  -ms-flex-pack: $ct-text-justify;
+  justify-content: $ct-text-justify;
+  // Fallback to text-align for non-flex browsers
+  @if($ct-text-justify == 'flex-start') {
+    text-align: left;
+  } @else if ($ct-text-justify == 'flex-end') {
+    text-align: right;
+  } @else {
+    text-align: center;
+  }
+}
+
+@mixin ct-flex() {
+  // Fallback to block
+  display: block;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+
+
+@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
+  fill: $ct-text-color;
+  color: $ct-text-color;
+  font-size: $ct-text-size;
+  line-height: $ct-text-line-height;
+}
+
+@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
+  stroke: $ct-grid-color;
+  stroke-width: $ct-grid-width;
+
+  @if ($ct-grid-dasharray) {
+    stroke-dasharray: $ct-grid-dasharray;
+  }
+}
+
+@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
+  stroke-width: $ct-point-size;
+  stroke-linecap: $ct-point-shape;
+}
+
+@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
+  fill: none;
+  stroke-width: $ct-line-width;
+
+  @if ($ct-line-dasharray) {
+    stroke-dasharray: $ct-line-dasharray;
+  }
+}
+
+@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
+  stroke: none;
+  fill-opacity: $ct-area-opacity;
+}
+
+@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
+  fill: none;
+  stroke-width: $ct-bar-width;
+}
+
+@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
+  fill: none;
+  stroke-width: $ct-donut-width;
+}
+
+@mixin ct-chart-series-color($color) {
+  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
+    stroke: $color;
+  }
+
+  .#{$ct-class-slice-pie}, .#{$ct-class-area} {
+    fill: $color;
+  }
+}
+
+@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
+
+  .#{$ct-class-label} {
+    @include ct-chart-label($ct-text-color, $ct-text-size);
+  }
+
+  .#{$ct-class-chart-line} .#{$ct-class-label},
+  .#{$ct-class-chart-bar} .#{$ct-class-label} {
+    @include ct-flex();
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
+    @include ct-align-justify(center, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(center, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-grid} {
+    @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
+  }
+
+  .#{$ct-class-point} {
+    @include ct-chart-point($ct-point-size, $ct-point-shape);
+  }
+
+  .#{$ct-class-line} {
+    @include ct-chart-line($ct-line-width);
+  }
+
+  .#{$ct-class-area} {
+    @include ct-chart-area();
+  }
+
+  .#{$ct-class-bar} {
+    @include ct-chart-bar($ct-bar-width);
+  }
+
+  .#{$ct-class-slice-donut} {
+    @include ct-chart-donut($ct-donut-width);
+  }
+
+  @if $ct-include-colored-series {
+    @for $i from 0 to length($ct-series-names) {
+      .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
+        $color: nth($ct-series-colors, $i + 1);
+
+        @include ct-chart-series-color($color);
+      }
+    }
+  }
+}
+
+@if $ct-include-classes {
+  @include ct-chart();
+
+  @if $ct-include-alternative-responsive-containers {
+    @for $i from 0 to length($ct-scales-names) {
+      .#{nth($ct-scales-names, $i + 1)} {
+        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
+      }
+    }
+  }
+}
+
+.ct-blue{
+    stroke: $brand-primary !important;
+}
+.ct-azure{
+    stroke: $brand-info !important;
+}
+.ct-green{
+    stroke: $brand-success !important;
+}
+.ct-orange{
+    stroke: $brand-warning !important;
+}
+.ct-red{
+    stroke: $brand-danger !important;
+}
+.ct-white{
+    stroke: $white-color !important;
+}
+.ct-rose{
+    stroke: $brand-rose !important;
+}
--- a/src/assets/scss/md/_checkboxes.scss
+++ b/src/assets/scss/md/_checkboxes.scss
@ -0,0 +1,28 @@
+.md-checkbox{
+  .md-checkbox-container{
+    border: 1px solid rgba(0, 0, 0, .54);
+    border-radius: 3px;
+
+    .md-ripple{
+      overflow: hidden;
+    }
+  }
+
+  &.md-checked .md-checkbox-container{
+    &:after{
+      border-color: $brand-primary !important;
+      top: 1px;
+      left: 6px;
+    }
+  }
+
+  &.md-disabled .md-checkbox-label{
+    opacity: .26;
+  }
+
+  &.md-checked.md-disabled .md-checkbox-container{
+    background-color: transparent !important;
+    border-color: rgba(0, 0, 0, .54) !important;
+    opacity: .26;
+  }
+}
--- a/src/assets/scss/md/_colors.scss
+++ b/src/assets/scss/md/_colors.scss
@ -0,0 +1,339 @@
+@import "~vue-material/dist/theme/engine"; // Import the theme engine
+
+@include md-register-theme("selection-black", (
+    accent: md-get-palette-color(black, 500)
+  ));
+
+@include md-register-theme("default", (
+  primary: md-get-palette-color(purple, 500), // The primary color of your application
+));
+
+
+@import "~vue-material/dist/theme/all"; // Apply the theme
+
+
+$red-50: #ffebee !default;
+$red-100: #ffcdd2 !default;
+$red-200: #ef9a9a !default;
+$red-300: #e57373 !default;
+$red-400: #ef5350 !default;
+$red-500: #f44336 !default;
+$red-600: #e53935 !default;
+$red-700: #d32f2f !default;
+$red-800: #c62828 !default;
+$red-900: #b71c1c !default;
+$red-A100: #ff8a80 !default;
+$red-A200: #ff5252 !default;
+$red-A400: #ff1744 !default;
+$red-A700: #d50000 !default;
+$red: $red-500 !default;
+
+
+$pink-50: #fce4ec !default;
+$pink-100: #f8bbd0 !default;
+$pink-200: #f48fb1 !default;
+$pink-300: #f06292 !default;
+$pink-400: #ec407a !default;
+$pink-500: #e91e63 !default;
+$pink-600: #d81b60 !default;
+$pink-700: #c2185b !default;
+$pink-800: #ad1457 !default;
+$pink-900: #880e4f !default;
+$pink-A100: #ff80ab !default;
+$pink-A200: #ff4081 !default;
+$pink-A400: #f50057 !default;
+$pink-A700: #c51162 !default;
+$pink: $pink-500 !default;
+
+
+$purple-50: #f3e5f5 !default;
+$purple-100: #e1bee7 !default;
+$purple-200: #ce93d8 !default;
+$purple-300: #ba68c8 !default;
+$purple-400: #ab47bc !default;
+$purple-500: #9c27b0 !default;
+$purple-600: #8e24aa !default;
+$purple-700: #7b1fa2 !default;
+$purple-800: #6a1b9a !default;
+$purple-900: #4a148c !default;
+$purple-A100: #ea80fc !default;
+$purple-A200: #e040fb !default;
+$purple-A400: #d500f9 !default;
+$purple-A700: #aa00ff !default;
+$purple: $purple-500 !default;
+
+
+$deep-purple-50: #ede7f6 !default;
+$deep-purple-100: #d1c4e9 !default;
+$deep-purple-200: #b39ddb !default;
+$deep-purple-300: #9575cd !default;
+$deep-purple-400: #7e57c2 !default;
+$deep-purple-500: #673ab7 !default;
+$deep-purple-600: #5e35b1 !default;
+$deep-purple-700: #512da8 !default;
+$deep-purple-800: #4527a0 !default;
+$deep-purple-900: #311b92 !default;
+$deep-purple-A100: #b388ff !default;
+$deep-purple-A200: #7c4dff !default;
+$deep-purple-A400: #651fff !default;
+$deep-purple-A700: #6200ea !default;
+$deep-purple: $deep-purple-500 !default;
+
+
+$indigo-50: #e8eaf6 !default;
+$indigo-100: #c5cae9 !default;
+$indigo-200: #9fa8da !default;
+$indigo-300: #7986cb !default;
+$indigo-400: #5c6bc0 !default;
+$indigo-500: #3f51b5 !default;
+$indigo-600: #3949ab !default;
+$indigo-700: #303f9f !default;
+$indigo-800: #283593 !default;
+$indigo-900: #1a237e !default;
+$indigo-A100: #8c9eff !default;
+$indigo-A200: #536dfe !default;
+$indigo-A400: #3d5afe !default;
+$indigo-A700: #304ffe !default;
+$indigo: $indigo-500 !default;
+
+
+$blue-50: #e3f2fd !default;
+$blue-100: #bbdefb !default;
+$blue-200: #90caf9 !default;
+$blue-300: #64b5f6 !default;
+$blue-400: #42a5f5 !default;
+$blue-500: #2196f3 !default;
+$blue-600: #1e88e5 !default;
+$blue-700: #1976d2 !default;
+$blue-800: #1565c0 !default;
+$blue-900: #0d47a1 !default;
+$blue-A100: #82b1ff !default;
+$blue-A200: #448aff !default;
+$blue-A400: #2979ff !default;
+$blue-A700: #2962ff !default;
+$blue: $blue-500 !default;
+
+
+$light-blue-50: #e1f5fe !default;
+$light-blue-100: #b3e5fc !default;
+$light-blue-200: #81d4fa !default;
+$light-blue-300: #4fc3f7 !default;
+$light-blue-400: #29b6f6 !default;
+$light-blue-500: #03a9f4 !default;
+$light-blue-600: #039be5 !default;
+$light-blue-700: #0288d1 !default;
+$light-blue-800: #0277bd !default;
+$light-blue-900: #01579b !default;
+$light-blue-A100: #80d8ff !default;
+$light-blue-A200: #40c4ff !default;
+$light-blue-A400: #00b0ff !default;
+$light-blue-A700: #0091ea !default;
+$light-blue: $light-blue-500 !default;
+
+
+$cyan-50: #e0f7fa !default;
+$cyan-100: #b2ebf2 !default;
+$cyan-200: #80deea !default;
+$cyan-300: #4dd0e1 !default;
+$cyan-400: #26c6da !default;
+$cyan-500: #00bcd4 !default;
+$cyan-600: #00acc1 !default;
+$cyan-700: #0097a7 !default;
+$cyan-800: #00838f !default;
+$cyan-900: #006064 !default;
+$cyan-A100: #84ffff !default;
+$cyan-A200: #18ffff !default;
+$cyan-A400: #00e5ff !default;
+$cyan-A700: #00b8d4 !default;
+$cyan: $cyan-500 !default;
+
+
+$teal-50: #e0f2f1 !default;
+$teal-100: #b2dfdb !default;
+$teal-200: #80cbc4 !default;
+$teal-300: #4db6ac !default;
+$teal-400: #26a69a !default;
+$teal-500: #009688 !default;
+$teal-600: #00897b !default;
+$teal-700: #00796b !default;
+$teal-800: #00695c !default;
+$teal-900: #004d40 !default;
+$teal-A100: #a7ffeb !default;
+$teal-A200: #64ffda !default;
+$teal-A400: #1de9b6 !default;
+$teal-A700: #00bfa5 !default;
+$teal: $teal-500 !default;
+
+
+$green-50: #e8f5e9 !default;
+$green-100: #c8e6c9 !default;
+$green-200: #a5d6a7 !default;
+$green-300: #81c784 !default;
+$green-400: #66bb6a !default;
+$green-500: #4caf50 !default;
+$green-600: #43a047 !default;
+$green-700: #388e3c !default;
+$green-800: #2e7d32 !default;
+$green-900: #1b5e20 !default;
+$green-A100: #b9f6ca !default;
+$green-A200: #69f0ae !default;
+$green-A400: #00e676 !default;
+$green-A700: #00c853 !default;
+$green: $green-500 !default;
+
+
+$light-green-50: #f1f8e9 !default;
+$light-green-100: #dcedc8 !default;
+$light-green-200: #c5e1a5 !default;
+$light-green-300: #aed581 !default;
+$light-green-400: #9ccc65 !default;
+$light-green-500: #8bc34a !default;
+$light-green-600: #7cb342 !default;
+$light-green-700: #689f38 !default;
+$light-green-800: #558b2f !default;
+$light-green-900: #33691e !default;
+$light-green-A100: #ccff90 !default;
+$light-green-A200: #b2ff59 !default;
+$light-green-A400: #76ff03 !default;
+$light-green-A700: #64dd17 !default;
+$light-green: $light-green-500 !default;
+
+
+$lime-50: #f9fbe7 !default;
+$lime-100: #f0f4c3 !default;
+$lime-200: #e6ee9c !default;
+$lime-300: #dce775 !default;
+$lime-400: #d4e157 !default;
+$lime-500: #cddc39 !default;
+$lime-600: #c0ca33 !default;
+$lime-700: #afb42b !default;
+$lime-800: #9e9d24 !default;
+$lime-900: #827717 !default;
+$lime-A100: #f4ff81 !default;
+$lime-A200: #eeff41 !default;
+$lime-A400: #c6ff00 !default;
+$lime-A700: #aeea00 !default;
+$lime: $lime-500 !default;
+
+
+$yellow-50: #fffde7 !default;
+$yellow-100: #fff9c4 !default;
+$yellow-200: #fff59d !default;
+$yellow-300: #fff176 !default;
+$yellow-400: #ffee58 !default;
+$yellow-500: #fec60a !default;
+$yellow-600: #fdd835 !default;
+$yellow-700: #fbc02d !default;
+$yellow-800: #f9a825 !default;
+$yellow-900: #f57f17 !default;
+$yellow-A100: #ffff8d !default;
+$yellow-A200: #ffff00 !default;
+$yellow-A400: #ffea00 !default;
+$yellow-A700: #ffd600 !default;
+$yellow: $yellow-700 !default;
+
+
+$amber-50: #fff8e1 !default;
+$amber-100: #ffecb3 !default;
+$amber-200: #ffe082 !default;
+$amber-300: #ffd54f !default;
+$amber-400: #ffca28 !default;
+$amber-500: #ffc107 !default;
+$amber-600: #ffb300 !default;
+$amber-700: #ffa000 !default;
+$amber-800: #ff8f00 !default;
+$amber-900: #ff6f00 !default;
+$amber-A100: #ffe57f !default;
+$amber-A200: #ffd740 !default;
+$amber-A400: #ffc400 !default;
+$amber-A700: #ffab00 !default;
+$amber: $amber-500 !default;
+
+
+$orange-50: #fff3e0 !default;
+$orange-100: #ffe0b2 !default;
+$orange-200: #ffcc80 !default;
+$orange-300: #ffb74d !default;
+$orange-400: #ffa726 !default;
+$orange-500: #ff9800 !default;
+$orange-600: #fb8c00 !default;
+$orange-700: #f57c00 !default;
+$orange-800: #ef6c00 !default;
+$orange-900: #e65100 !default;
+$orange-A100: #ffd180 !default;
+$orange-A200: #ffab40 !default;
+$orange-A400: #ff9100 !default;
+$orange-A700: #ff6d00 !default;
+$orange: $orange-500 !default;
+
+
+$deep-orange-50: #fbe9e7 !default;
+$deep-orange-100: #ffccbc !default;
+$deep-orange-200: #ffab91 !default;
+$deep-orange-300: #ff8a65 !default;
+$deep-orange-400: #ff7043 !default;
+$deep-orange-500: #ff5722 !default;
+$deep-orange-600: #f4511e !default;
+$deep-orange-700: #e64a19 !default;
+$deep-orange-800: #d84315 !default;
+$deep-orange-900: #bf360c !default;
+$deep-orange-A100: #ff9e80 !default;
+$deep-orange-A200: #ff6e40 !default;
+$deep-orange-A400: #ff3d00 !default;
+$deep-orange-A700: #dd2c00 !default;
+$deep-orange: $deep-orange-500 !default;
+
+
+$brown-50: #efebe9 !default;
+$brown-100: #d7ccc8 !default;
+$brown-200: #bcaaa4 !default;
+$brown-300: #a1887f !default;
+$brown-400: #8d6e63 !default;
+$brown-500: #795548 !default;
+$brown-600: #6d4c41 !default;
+$brown-700: #5d4037 !default;
+$brown-800: #4e342e !default;
+$brown-900: #3e2723 !default;
+$brown-A100: #d7ccc8 !default;
+$brown-A200: #bcaaa4 !default;
+$brown-A400: #8d6e63 !default;
+$brown-A700: #5d4037 !default;
+$brown: $brown-500 !default;
+
+
+$grey-50: #fafafa !default;
+$grey-100: #f5f5f5 !default;
+$grey-200: #eeeeee !default;
+$grey-300: #e0e0e0 !default;
+$grey-400: #bdbdbd !default;
+$grey-500: #9e9e9e;  $rgb-grey-500: "158, 158, 158" !default;
+$grey-600: #757575 !default;
+$grey-700: #616161 !default;
+$grey-800: #424242 !default;
+$grey-900: #212121 !default;
+$grey-A100: #f5f5f5 !default;
+$grey-A200: #eeeeee !default;
+$grey-A400: #bdbdbd !default;
+$grey-A700: #616161 !default;
+$grey: $grey-500 !default;
+
+
+$blue-grey-50: #eceff1 !default;
+$blue-grey-100: #cfd8dc !default;
+$blue-grey-200: #b0bec5 !default;
+$blue-grey-300: #90a4ae !default;
+$blue-grey-400: #78909c !default;
+$blue-grey-500: #607d8b !default;
+$blue-grey-600: #546e7a !default;
+$blue-grey-700: #455a64 !default;
+$blue-grey-800: #37474f !default;
+$blue-grey-900: #263238 !default;
+$blue-grey-A100: #cfd8dc !default;
+$blue-grey-A200: #b0bec5 !default;
+$blue-grey-A400: #78909c !default;
+$blue-grey-A700: #455a64 !default;
+$blue-grey: $blue-grey-500 !default;
+
+
+$black: #000000; $rgb-black: "0,0,0" !default;
+$white: #ffffff; $rgb-white: "255,255,255" !default;
--- a/src/assets/scss/md/_dialogs.scss
+++ b/src/assets/scss/md/_dialogs.scss
@ -0,0 +1,99 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+//
+// Modals
+// Material Design element Dialogs
+// --------------------------------------------------
+.modal-content {
+  @include shadow-z-5();
+  border-radius: $border-radius-large;
+  border: none;
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+  .modal-header {
+    border-bottom: none;
+    padding-top:    24px;
+    padding-right:  24px;
+    padding-bottom: 0;
+    padding-left:   24px;
+  }
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    padding-top:    24px;
+    padding-right:  24px;
+    padding-bottom: 16px;
+    padding-left:   24px;
+  }
+  // Footer (for actions)
+  .modal-footer {
+    border-top: none;
+    padding: 7px;
+    
+    &.text-center{
+        text-align: center;
+    }
+    
+    button {
+      margin: 0;
+      padding-left: 16px;
+      padding-right: 16px;
+      width: auto;
+      &.pull-left {
+        padding-left: 5px;
+        padding-right: 5px;
+        position: relative;
+        left: -5px;
+      }
+    }
+    button+button {
+      margin-bottom: 16px;
+    }
+  }
+  .modal-body + .modal-footer {
+    padding-top: 0;
+  }
+}
+.modal-backdrop {
+  background: rgba(0,0,0,0.3);
+}
+
+.modal{
+    .modal-dialog{
+        margin-top: 100px;
+    }
+    .modal-header .close{
+        color: $gray-light;
+
+        &:hover,
+        &:focus{
+            opacity: 1;
+        }
+        
+        i{
+            font-size: 16px;
+        }
+    }
+}
+
+.modal-notice {
+    .instruction{
+         margin-bottom: 25px;
+    }
+    .picture{
+        max-width: 150px;
+    }
+
+    .modal-content{
+        .btn-raised{
+            margin-bottom: 15px;
+        }
+    }
+}
+
+.modal-small{
+    width: 300px;    
+    .modal-body{
+        margin-top: 20px;
+    }
+}
--- a/src/assets/scss/md/_dropdown.scss
+++ b/src/assets/scss/md/_dropdown.scss
@ -0,0 +1,157 @@
+.dropdown-menu{
+  position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+.dropdown-menu {
+    border: 0;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+
+    .divider {
+        background-color: rgba(0, 0, 0, .12);
+    }
+
+
+    li > a{
+        font-size: $mdb-dropdown-font-size;
+        padding: 10px 20px;
+        margin: 0 5px;
+        text-transform: none;
+        color: $gray-dark !important;
+        border-radius: $border-radius-small;
+        @include transition($fast-transition-time, $transition-linear);
+
+        &:hover,
+        &:focus {
+          @include shadow-8dp();
+
+        }
+    }
+
+    &.dropdown-with-icons{
+        li > a{
+            padding: 12px 20px 12px 12px;
+
+            .material-icons{
+                vertical-align: middle;
+                font-size: 24px;
+                position: relative;
+                margin-top: -4px;
+                top: 1px;
+                margin-right: 12px;
+                opacity: .5;
+            }
+        }
+    }
+
+    li {
+        position: relative;
+        a:hover,
+        a:focus,
+        a:active {
+            background-color: $brand-primary !important;
+            color: #FFFFFF !important;
+        }
+    }
+
+    .divider{
+        margin: 5px 0;
+    }
+
+    .navbar &,
+    .navbar.navbar-default &{
+        li{
+            a:hover,
+            a:focus,
+            a:active {
+                background-color: $brand-primary;
+                color: #FFFFFF;
+                @include shadow-big-color($brand-primary);
+            }
+        }
+    }
+
+}
+
+.dropdown-toggle:not(.md-button):after,
+.dropdown-toggle .md-ripple:after
+ {
+  width: 0;
+  height: 0;
+  vertical-align: .255em;
+  content: "";
+  border-right: .3em solid transparent;
+  border-left: .3em solid transparent;
+  display: inline-block;
+  margin-left: .555em;
+  border-top: .3em solid;
+  border-bottom: 0;
+  will-change: transform;
+  transition: transform 150ms linear;
+}
+
+
+.navbar-nav > li > .dropdown-menu,
+.dropdown .dropdown-menu,
+.dropdown-menu.bootstrap-datetimepicker-widget{
+    @include transition($fast-transition-time, $transition-linear);
+    display: block;
+    transform: scale(0);
+    transform-origin: 0 0;
+    @include opacity(0);
+}
+.navbar-nav > li.open > .dropdown-menu,
+.dropdown.open .dropdown-menu,
+.dropdown-menu.bootstrap-datetimepicker-widget.open{
+    @include opacity(1);
+    transform: scale(1);
+
+}
+
+.dropdown-menu-right{
+  right: 0;
+  left: auto;
+}
+
+.md-list-item.dropdown{
+  .md-list-item-container{
+    a[data-toggle="dropdown"]{
+      padding: 10px 15px;
+    }
+
+    .md-ripple{
+     padding: 0;
+   }
+  }
+}
+
+.md-ripple{
+  -webkit-mask-image: none;
+  overflow: hidden;
+
+  > span{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    z-index: -1;
+  }
+}
--- a/src/assets/scss/md/_example-pages.scss
+++ b/src/assets/scss/md/_example-pages.scss
@ -0,0 +1,166 @@
+.index-page{
+    .section-components h6.description{
+        margin-top: 5px;
+        margin-bottom: 30px;
+    }
+
+    .page-header{
+        height: 90vh;
+        overflow: hidden;
+    }
+    .brand{
+        color: $white-color;
+        text-align: center;
+
+        h1{
+            font-size: 4.2rem;
+            font-weight: 600;
+            display: inline-block;
+            position: relative;
+            line-height: 1.15em;
+        }
+        h3{
+            font-size: 1.313rem;
+            max-width: 500px;
+            margin: 10px auto 0;
+            line-height: 1.4em;
+        }
+    }
+
+    h4.description{
+        font-size: 1.5em;
+    }
+}
+.section{
+  padding: 70px 0;
+}
+.profile-page{
+    .page-header{
+        height: 380px;
+        background-position: top center;
+    }
+    .profile{
+        text-align: center;
+
+        img{
+            max-width: 160px;
+            width: 100%;
+            margin: 0 auto;
+            @include transform-translate-y(-50%);
+        }
+        .name{
+            margin-top: -80px;
+        }
+    }
+    .follow{
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+    .description{
+        margin: $margin-base auto 0;
+        max-width: 600px;
+    }
+    .profile-tabs{
+        margin-top: $margin-base * 4;
+    }
+    .gallery{
+        margin-top: $margin-base * 3;
+        padding-bottom: 50px;
+
+        img{
+            width: 100%;
+            margin-bottom: $margin-base * 2;
+        }
+    }
+    .follow{
+        .btn-fab{
+            margin-top: -28px;
+        }
+    }
+    .card-background{
+        .content{
+            padding: 30% 0;
+            min-width: 160px;
+        }
+    }
+    .work{
+        padding: 40px 0px;
+        .collections{
+            margin-top: 20px;
+        }
+
+        .stats{
+            ul > li{
+                padding: 5px 0px;
+                font-size: 1em;
+                b{
+                    font-size: 1.2em;
+                }
+
+            }
+        }
+    }
+
+    .connections{
+        padding: 40px 0px;
+        .card-profile{
+            text-align: left;
+        }
+    }
+
+    .tab-content{
+        .collections{
+            .card .card-body{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                .badge{
+                    display: inline-table;
+                    margin: 0 auto;
+                }
+            }
+        }
+    }
+}
+
+.signup-page{
+    .page-header{
+        min-height: 100vh;
+        height: auto;
+        display: inherit;
+
+        .container{
+            padding-top: 20vh;
+        }
+    }
+
+    .card-signup{
+        border-radius: $border-radius-base * 2;
+        @include shadow-16dp();
+        margin-bottom: 100px;
+        padding: 40px 0px;
+    }
+    .info-horizontal{
+        padding: 0px 0px 20px;
+    }
+    .social{
+        .btn{
+            margin: 5px;
+        }
+        h4{
+            margin-top: 20px;
+        }
+    }
+    .footer{
+        .container{
+            padding: 0;
+        }
+        .copyright,
+        a{
+            color: #FFFFFF;
+        }
+    }
+
+}
--- a/src/assets/scss/md/_footers.scss
+++ b/src/assets/scss/md/_footers.scss
@ -0,0 +1,63 @@
+footer{
+    padding: $padding-base 0;
+
+    nav,
+    .copyright{
+      display: inline-block;
+    }
+
+    ul{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+        li{
+            display: inline-block;
+
+            a{
+                color: inherit !important;
+                padding: $padding-base;
+                font-weight: $font-weight-bold;
+                font-size: $mdb-btn-font-size-base;
+                text-transform: uppercase;
+                border-radius: $border-radius-base;
+                text-decoration: none;
+                position: relative;
+                display: block;
+
+                &:hover{
+                    text-decoration: none;
+                }
+            }
+
+          &:first-child a{
+            margin-left: -15px;
+          }
+        }
+    }
+
+    .copyright{
+        padding: 15px 0;
+        margin: 0;
+        .material-icons{
+            font-size: 18px;
+            position: relative;
+            top: 3px;
+        }
+    }
+
+    .btn{
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}
+
+.container{
+  padding-right: 15px;
+  padding-left: 15px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
--- a/src/assets/scss/md/_forms.scss
+++ b/src/assets/scss/md/_forms.scss
@ -0,0 +1,58 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@mixin mdb-label-color-toggle-focus(){
+  // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
+  .form-group.is-focused & {
+    color: $mdb-label-color;
+
+    // on focus just darken the specific labels, do not turn them to the brand-primary
+    &:hover,
+    &:focus {
+      color: $mdb-label-color-toggle-focus;
+    }
+
+    // correct the above focus color for disabled items
+    fieldset[disabled] & {
+      color: $mdb-label-color;
+    }
+  }
+}
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: 0;
+  }
+
+  .radio {
+    margin-bottom: 10px;
+  }
+
+  label {
+    text-align: right;
+  }
+
+  label.control-label {
+    margin: 0;
+  }
+}
+
+.form-newsletter{
+    .input-group,
+    .form-group{
+        float: left;
+        width: 78%;
+        margin-right: 2%;
+        margin-top: 9px;
+    }
+
+    .btn{
+        float: left;
+        width: 20%;
+        margin: 9px 0 0;
+    }
+}
--- a/src/assets/scss/md/_headers.scss
+++ b/src/assets/scss/md/_headers.scss
@ -0,0 +1,72 @@
+.page-header{
+    height: 100vh;
+    background-position: center center;
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .carousel .carousel-indicators{
+        bottom: 60px;
+    }
+
+    > .container{
+        color: $white-color;
+    }
+
+    .title{
+        color: $white-color;
+    }
+
+    &.header-small{
+        height: 65vh;
+        min-height: 65vh;
+    }
+
+    .iframe-container{
+        iframe{
+            width: 100%;
+            box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56),
+                        0 4px 25px 0px rgba(0, 0, 0, 0.12),
+                        0 8px 10px -5px rgba(0, 0, 0, 0.2);
+        }
+    }
+}
+
+.header-filter{
+    position: relative;
+
+    &:before,
+    &:after{
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        display: block;
+        left: 0;
+        top: 0;
+        content: "";
+    }
+
+    &::before{
+    background: rgba(0,0,0,.5);
+    }
+
+    .md-layout{
+        z-index: 2;
+        position: relative;
+    }
+}
+.clear-filter::before {
+  background: none;
+}
+
+.purple-filter:after{
+  background: rgba(101, 47, 142, 0.64);
+  background: linear-gradient(45deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
+  background: -moz-linear-gradient(135deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
+  background: -webkit-linear-gradient(135deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
+}
--- a/src/assets/scss/md/_inputs-size.scss
+++ b/src/assets/scss/md/_inputs-size.scss
@ -0,0 +1,223 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+//
+// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
+//
+// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
+//
+// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
+//        to identify differences in sizing approaches to form inputs.
+// --------------------------------------------------
+
+legend {
+  margin-bottom: $mdb-input-line-height-computed;
+  font-size: ($mdb-input-font-size-base * 1.5);
+}
+
+// Adjust output element
+output {
+  padding-top: ($mdb-input-padding-base-vertical + 1);
+  font-size: $mdb-input-font-size-base;
+  line-height: $mdb-input-line-height-base;
+}
+
+.form-control {
+  height: $mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: $mdb-input-padding-base-vertical $mdb-input-padding-base-horizontal;
+  font-size: $mdb-input-font-size-base;
+  line-height: $mdb-input-line-height-base;
+}
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"] {
+    &.form-control {
+      line-height: $mdb-input-height-base;
+    }
+
+    &.input-sm,
+    .input-group-sm & {
+      line-height: $mdb-input-height-small;
+    }
+
+    &.input-lg,
+    .input-group-lg & {
+      line-height: $mdb-input-height-large;
+    }
+  }
+}
+
+.radio,
+.checkbox {
+
+  label {
+    min-height: $mdb-input-line-height-computed; // Ensure the input doesn't jump when there is no text
+  }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: ($mdb-input-padding-base-vertical + 1);
+  padding-bottom: ($mdb-input-padding-base-vertical + 1);
+  min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-base);
+}
+
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+// mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
+//  bootstrap-sass has this one, but we would have to then convert it back to less.  chicken meet egg.
+@mixin input-size($parent, $mdb-input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
+
+  #{$parent} {
+    height: $mdb-input-height;
+    padding: $padding-vertical $padding-horizontal;
+    font-size: $font-size;
+    line-height: $line-height;
+    border-radius: $border-radius;
+  }
+
+  select#{$parent} {
+    height: $mdb-input-height;
+    line-height: $mdb-input-height;
+  }
+
+  textarea#{$parent},
+  select[multiple]#{$parent} {
+    height: auto;
+  }
+}
+
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+.input-sm {
+  @include input-size(unquote(".input-sm"), $mdb-input-height-small, $mdb-input-padding-small-vertical, $mdb-input-padding-small-horizontal, $mdb-input-font-size-small, $mdb-input-line-height-small, $mdb-input-border-radius-small);
+}
+.form-group-sm {
+  .form-control {
+    height: $mdb-input-height-small;
+    padding: $mdb-input-padding-small-vertical $mdb-input-padding-small-horizontal;
+    font-size: $mdb-input-font-size-small;
+    line-height: $mdb-input-line-height-small;
+  }
+  select.form-control {
+    height: $mdb-input-height-small;
+    line-height: $mdb-input-height-small;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: $mdb-input-height-small;
+    min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-small);
+    padding: ($mdb-input-padding-small-vertical + 1) $mdb-input-padding-small-horizontal;
+    font-size: $mdb-input-font-size-small;
+    line-height: $mdb-input-line-height-small;
+  }
+}
+
+.input-lg {
+  @include input-size(unquote(".input-lg"), $mdb-input-height-large, $mdb-input-padding-large-vertical, $mdb-input-padding-large-horizontal, $mdb-input-font-size-large, $mdb-input-line-height-large, $mdb-input-border-radius-large);
+}
+.form-group-lg {
+  .form-control {
+    height: $mdb-input-height-large;
+    padding: $mdb-input-padding-large-vertical $mdb-input-padding-large-horizontal;
+    font-size: $mdb-input-font-size-large;
+    line-height: $mdb-input-line-height-large;
+  }
+  select.form-control {
+    height: $mdb-input-height-large;
+    line-height: $mdb-input-height-large;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: $mdb-input-height-large;
+    min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-large);
+    padding: ($mdb-input-padding-large-vertical + 1) $mdb-input-padding-large-horizontal;
+    font-size: $mdb-input-font-size-large;
+    line-height: $mdb-input-line-height-large;
+  }
+}
+
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .radio,
+  .checkbox {
+    min-height: ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical + 1));
+  }
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: $screen-sm-min) {
+    .control-label {
+      padding-top: ($mdb-input-padding-base-vertical + 1); // Default padding plus a border
+    }
+  }
+
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: $screen-sm-min) {
+      .control-label {
+        padding-top: (($mdb-input-padding-large-vertical * $mdb-input-line-height-large) + 1);
+        font-size: $mdb-input-font-size-large;
+      }
+    }
+  }
+  .form-group-sm {
+    @media (min-width: $screen-sm-min) {
+      .control-label {
+        padding-top: ($mdb-input-padding-small-vertical + 1);
+        font-size: $mdb-input-font-size-small;
+      }
+    }
+  }
+}
--- a/src/assets/scss/md/_inputs.scss
+++ b/src/assets/scss/md/_inputs.scss
@ -0,0 +1,478 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@import '_inputs-size';
+
+// label variations
+.label {
+  border-radius: $border-radius-small;
+  // @include variations(unquote(".label"), unquote(""), background-color, $grey);
+}
+
+// must be broken out for reuse - webkit selector breaks firefox
+@mixin label-static($label-top, $static-font-size, $static-line-height){
+  label.control-label {
+    top: $label-top;
+    left: 0;
+    // must repeat because the selector above is more specific than the general label sizing
+    font-size: $static-font-size;
+    line-height: $static-line-height;
+  }
+}
+
+@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){
+  .form-control {
+    @include material-placeholder {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      color: $mdb-input-placeholder-color;
+      font-weight: 400;
+
+    }
+  }
+
+  // generic labels used anywhere in the form (not control-label)
+  .checkbox label,
+  .radio label,
+  label {
+    font-size: $placeholder-font-size;
+    line-height: $line-height;
+    color: $mdb-input-placeholder-color;
+    font-weight: 400;
+  }
+
+  // smaller focused or static size
+  label.control-label {
+    font-size: $static-font-size;
+    line-height: $static-line-height;
+    color: $mdb-input-placeholder-color;
+    font-weight: 400;
+    margin: 16px 0 0 0; // std and lg
+  }
+
+  .help-block {
+    margin-top: 0; // allow the input margin to set-off the top of the help-block
+    font-size: $help-block-font-size;
+  }
+}
+
+@mixin form-group-validation-state($name, $color){
+
+  &.#{$name} { // e.g. has-error
+    .form-control {
+      box-shadow: none;
+    }
+    &.is-focused .form-control {
+      background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+    }
+    label.control-label,
+    .help-block {
+      color: $color;
+    }
+  }
+}
+
+@mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
+  $static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
+  $static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
+
+  $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
+  $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
+
+  $help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
+  $help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
+
+  // this is outside a form-group
+  @if not $parent {
+    @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
+  }
+
+  // this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
+  @else {
+    #{$parent} {
+      @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
+
+      // form-group padding-bottom
+      //  upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
+      //  so the form-control margin-bottom must also be expressed as form-group padding
+      padding-bottom: $padding-large-vertical;
+
+      // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
+      margin: ($label-top-margin + $static-font-size) 0 0 0;
+
+      // larger labels as placeholders
+      &.label-floating,
+      &.label-placeholder {
+        label.control-label {
+          top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
+          font-size: $placeholder-font-size;
+          line-height: $line-height;
+        }
+      }
+
+      // static, focused, or autofill floating labels
+      &.label-static,
+      &.label-floating.is-focused,
+      &.label-floating:not(.is-empty) {
+        @include label-static($label-top, $static-font-size, $static-line-height);
+      }
+      // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
+      &.label-floating input.form-control:-webkit-autofill ~ label.control-label {
+        @include label-static($label-top, $static-font-size, $static-line-height);
+      }
+    }
+  }
+}
+
+// -----
+// Inputs
+
+.form-control,
+.form-group .form-control {
+  border: 0;
+  background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+  background-size: 0 2px, 100% 1px;
+  background-repeat: no-repeat;
+  background-position: center bottom, center calc(100% - 1px);
+  background-color: rgba(0, 0, 0, 0);
+  transition: background 0s ease-out;
+  float: none;
+  box-shadow: none;
+  border-radius: 0;
+
+  font-weight: 400;
+
+  // Placeholders and and labels-as-placeholders should look the same
+  @include material-placeholder {
+    color: $mdb-input-placeholder-color;
+    font-weight: 400;
+}
+
+
+  //&:textarea {    // appears to be an invalid selector
+  //  height: 40px;
+  //}
+
+  &[readonly],
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    background-image: none;
+    border-bottom: 1px dotted $mdb-input-underline-color;
+  }
+}
+
+// -----
+// Labels with form-group signalled state
+//
+// Reference http://www.google.com/design/spec/components/text-fields.html
+// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+//.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
+
+.form-group {
+  position: relative;
+
+  // -----
+  // Labels with form-group signalled state
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+  &.label-static,
+  &.label-placeholder,
+  &.label-floating {
+    label.control-label {
+      position: absolute;
+      pointer-events: none;
+      transition: 0.3s ease all;
+    }
+  }
+
+  // hint to browser for optimization
+  //    TODO: evaluate effectiveness - looking for community feedback
+  &.label-floating label.control-label {
+    will-change: left, top, contents;
+  }
+
+  // hide label-placeholders when the field is not empty
+  &.label-placeholder:not(.is-empty){
+    label.control-label{
+      display: none;
+    }
+  }
+
+  // Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
+  .help-block {
+    position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
+    display: none;
+  }
+
+  // form-group is-focused display
+  &.is-focused {
+    .form-control {
+      outline: none;
+      background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+      background-size: 100% 2px, 100% 1px;
+      box-shadow: none;
+      transition-duration: 0.3s;
+
+      .material-input:after {
+        background-color: $brand-primary;
+      }
+    }
+
+    &.form-info{
+        .form-control{
+             background-image: linear-gradient($brand-info, $brand-info), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+         }
+    }
+    &.form-success{
+        .form-control{
+             background-image: linear-gradient($brand-success, $brand-success), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+         }
+    }
+    &.form-warning{
+        .form-control{
+             background-image: linear-gradient($brand-warning, $brand-warning), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+         }
+    }
+    &.form-danger{
+        .form-control{
+             background-image: linear-gradient($brand-danger, $brand-danger), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+         }
+    }
+    &.form-white{
+        .form-control{
+             background-image: linear-gradient($white-color, $white-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+         }
+    }
+
+    //.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
+    &.label-placeholder {
+      label,
+      label.control-label {
+        color: $mdb-input-placeholder-color;
+      }
+    }
+
+    .help-block {
+      display: block;
+    }
+  }
+
+  @include form-group-validation-state(has-warning, $brand-warning);
+  @include form-group-validation-state(has-error, $brand-danger);
+  @include form-group-validation-state(has-success, $brand-success);
+  @include form-group-validation-state(has-info, $brand-info);
+
+  textarea {
+    resize: none;
+    & ~ .form-control-highlight {
+      margin-top: -11px;
+    }
+  }
+
+  select {
+    appearance: none; // Fix for OS X
+
+    & ~ .material-input:after {
+      display: none;
+    }
+  }
+}
+
+// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
+// @include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
+//
+// // default floating size/location with a form-group (need margin etc from a default form-group)
+// @include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
+//
+// // sm floating size/location
+// @include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
+//
+// // lg floating size/location
+// @include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
+
+
+select.form-control {
+
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+
+  .form-group.is-focused & {
+    box-shadow: none;
+    border-color: $mdb-input-underline-color;
+  }
+
+  &[multiple] {
+    &,
+    .form-group.is-focused & {
+      height: 85px;
+    }
+  }
+}
+
+@mixin input-group-button-variation($vertical-padding){
+  .input-group-btn {
+    .btn {
+      margin: 0 0 $vertical-padding 0;
+    }
+  }
+}
+
+// ----------------
+// input group/addon related styles
+
+// default margin - no form-group required
+@include input-group-button-variation($mdb-input-padding-base-vertical);
+
+.form-group {
+  //.form-control {
+  //  float: none;
+  //}
+
+  // sm margin
+  &.form-group-sm {
+    @include input-group-button-variation($mdb-input-padding-small-vertical);
+  }
+
+  // lg margin
+  &.form-group-lg {
+    @include input-group-button-variation($mdb-input-padding-large-vertical);
+  }
+}
+
+.input-group {  // may be in or outside of form-group
+  .input-group-btn {
+    padding: 0 12px; // match addon spacing
+  }
+
+  .input-group-addon {
+    border: 0;
+    background: transparent;
+    padding: 6px 15px 0px;
+  }
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+
+.form-control-feedback{
+    opacity: 0;
+
+    .has-success &{
+        color: $green;
+        opacity: 1;
+    }
+
+    .has-error &{
+        color: $red;
+        opacity: 1;
+    }
+}
+
+.md-field{
+  .md-input,
+  .md-textarea{
+    height: 36px;
+    padding: 7px 0;
+    font-size: 14px !important;
+    -webkit-text-fill-color: $black-color !important;
+  }
+
+  &.md-has-textarea:not(.md-autogrow) label{
+    left: 0;
+  }
+
+  .sidebar &.md-theme-default.md-focused .md-input{
+    color: $white-color !important;
+    -webkit-text-fill-color: $white-color !important;
+  }
+
+
+  label{
+    font-size: 14px;
+    font-weight: 400;
+    color: $mdb-input-placeholder-color !important;
+    line-height: 1.4;
+    top: 26px;
+  }
+
+  &.md-disabled{
+    .md-input{
+      cursor: not-allowed;
+    }
+
+    &:after{
+      border-bottom: 1px dotted #d2d2d2;
+      background-color: transparent!important;
+      background-image: none !important;
+    }
+  }
+
+  &:not(.md-disabled):after{
+    background-color: #d2d2d2 !important;
+  }
+
+  &:before{
+    background-color: $brand-primary !important;
+  }
+
+  &.md-focused label,
+  &.md-has-value label,
+  &.md-focused.md-has-value label{
+    font-size: .6875rem;
+  }
+
+  &.md-has-textarea:not(.md-autogrow):after,
+  &.md-has-textarea:not(.md-autogrow):before{
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid transparent;
+    border-color: #d2d2d2 !important;
+  }
+
+  &.md-has-textarea:not(.md-autogrow):before{
+    border-bottom: 2px solid transparent;
+    border-color: $brand-primary !important;
+    transform: scaleX(.12);
+  }
+
+  &.md-has-textarea:not(.md-autogrow).md-focused label,
+  &.md-has-textarea:not(.md-autogrow).md-has-value label{
+    top: 0;
+  }
+
+  &.md-focused.md-has-textarea:not(.md-autogrow):before{
+    transform: scaleX(1);
+  }
+}
+
+.md-field .md-input-action{
+  top: 8px;
+  border-radius: 50%;
+  background-color: $white-color !important;
+
+  .md-button-content i{
+    width: 18px;
+    height: 18px;
+
+    svg{
+      fill: $gray-light !important;
+    }
+  }
+}
--- a/src/assets/scss/md/_layout.scss
+++ b/src/assets/scss/md/_layout.scss
@ -0,0 +1,69 @@
+.md-layout-item{
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+@media (min-width: 992px) {
+    .typo-line {
+        padding-left: 140px;
+        margin-bottom: 40px;
+        position: relative;
+    }
+    .typo-line .category {
+        transform: translateY(-50%);
+        top: 50%;
+        left: 0px;
+        position: absolute;
+    }
+    .sidebar .nav>li.active-pro {
+        position: absolute;
+        width: 100%;
+        bottom: 10px;
+    }
+}
+
+#map {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 60px);
+}
+
+.places-buttons .btn {
+    margin-bottom: 30px
+}
+
+.space-70 {
+    height: 70px;
+    display: block;
+}
+
+.tim-row {
+    margin-bottom: 20px;
+}
+
+.tim-typo {
+    padding-left: 25%;
+    margin-bottom: 40px;
+    position: relative;
+}
+
+.tim-typo .tim-note {
+    bottom: 10px;
+    color: #c0c1c2;
+    display: block;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 13px;
+    left: 0;
+    margin-left: 20px;
+    position: absolute;
+    width: 260px;
+}
+
+.tim-row {
+    padding-top: 50px;
+}
+
+.tim-row h3 {
+    margin-top: 0;
+}
--- a/src/assets/scss/md/_misc.scss
+++ b/src/assets/scss/md/_misc.scss
@ -0,0 +1,157 @@
+body {
+  background-color: #EEEEEE;
+  letter-spacing: unset;
+  font-size: 1rem;
+  color: $black-color;
+  &.inverse {
+    background: #333333;
+    &, .form-control {
+      color: $mdb-text-color-light;
+    }
+    .modal,
+    .panel-default,
+    .card {
+      &,
+      .form-control {
+        background-color: initial;
+        color: initial;
+      }
+    }
+
+  }
+}
+
+.main{
+    background: #FFFFFF;
+    position: relative;
+    z-index: 3;
+}
+
+.main-raised{
+    margin: -60px 30px 0px;
+    border-radius: $border-radius-base * 2;
+    @include shadow-16dp();
+}
+
+.wrapper{
+
+    &.wrapper-full-page{
+        height: auto;
+        min-height: 100vh;
+    }
+}
+
+
+blockquote{
+    p{
+        font-style: italic;
+    }
+}
+
+.life-of-material-dashboard{
+    background: #FFFFFF;
+}
+
+body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
+  font-family: $font-family-sans-serif;
+  font-weight: 300;
+  line-height: 1.5em;
+}
+
+.serif-font{
+    font-family: $font-family-serif;
+}
+
+a{
+  color: $link-color;
+  &:hover,
+  &:focus{
+      color: darken($link-color, 5%) !important;
+      text-decoration: none !important;
+  }
+
+  &.text-info{
+      &:hover, &:focus{
+          color: darken($brand-info, 5%);
+      }
+  }
+
+  & .material-icons {
+    vertical-align: middle;
+  }
+}
+
+.dropdown.open .dropdown-toggle:after {
+  @include rotate-180();
+}
+
+.sidebar .nav a,
+.caret,
+.md-toolbar,
+.sidebar .dropdown .dropdown-menu li a{
+    @include transition($fast-transition-time, $transition-ease-in);
+}
+
+/*           Animations              */
+.animation-transition-general{
+    @include transition($general-transition-time, $transition-linear);
+}
+
+.animation-transition-slow{
+    @include transition($slow-transition-time, $transition-linear);
+}
+
+.animation-transition-fast{
+    @include transition($fast-transition-time, $transition-ease);
+}
+legend {
+  border-bottom: 0;
+}
+
+.pull-left{
+  float: left;
+}
+
+.pull-right{
+  float: right;
+}
+
+// Prevent highlight on mobile
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:focus {
+    outline: 0;
+  }
+}
+a:focus, a:active,
+button:active, button:focus, button:hover,
+button::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+select::-moz-focus-inner,
+input[type="file"] > input[type="button"]::-moz-focus-inner {
+    outline : 0 !important;
+}
+
+.text-center{
+  text-align: center;
+}
+.text-left{
+  text-align: left;
+}
+.text-right{
+  text-align: right;
+}
+.places-buttons{
+  .md-button{
+    width: 30%;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+
+.md-theme-default :not(input):not(textarea)::selection{
+  background-color: #c8c8c8 !important;
+}
--- a/src/assets/scss/md/_mixins.scss
+++ b/src/assets/scss/md/_mixins.scss
@ -0,0 +1,317 @@
+//Utilities
+
+@import "mixins/transparency";
+@import "mixins/vendor-prefixes";
+@import "mixins/chartist";
+
+// Placeholder text
+@mixin material-placeholder() {
+  &::-moz-placeholder {@content; } // Firefox
+  &:-ms-input-placeholder {@content; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  {@content; } // Safari and Chrome
+}
+
+@mixin toolbar-colors($variation-color, $text-color){
+  background-color: $variation-color !important;
+  @include shadow-navbar-color($variation-color)
+
+  .md-title,
+  .md-list .md-list-item-content,
+  .md-toolbar-toggle .icon-bar,
+  &,
+  &:hover,
+  &:focus{
+    color: $text-color !important;
+  }
+}
+
+
+@mixin dropdown-colors($variation-color) {
+  .dropdown-menu {
+    border-radius: $border-radius-base !important;
+    li > a {
+      &:hover,
+      &:focus {
+        color: $white-color !important;
+        background-color: $variation-color !important;
+        @include shadow-big-color($variation-color);
+      }
+    }
+
+    .active > a {
+      &:hover,
+      &:focus {
+        color: $white-color !important;
+      }
+      background-color: $variation-color !important;
+      color: $white-color !important;
+      @include shadow-big-color($variation-color);
+    }
+  }
+}
+
+@mixin alert-color($color) {
+  background-color: $color;
+  color: $white-color;
+  border-radius: $border-radius-base;
+  @include shadow-big-color($color)
+}
+
+@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 transform-scale($value){
+     -webkit-transform: scale($value);
+        -moz-transform: scale($value);
+        -o-transform: scale($value);
+        -ms-transform: scale($value);
+        transform: scale($value);
+}
+
+@mixin transform-scale3d($value){
+     -webkit-transform: scale3d($value);
+        -moz-transform: scale3d($value);
+        -o-transform: scale3d($value);
+        -ms-transform: scale3d($value);
+        transform: scale3d($value);
+}
+
+@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);
+        -moz-transform: translate3d(0, $value, 0);
+        -o-transform: translate3d(0, $value, 0);
+        -ms-transform: translate3d(0, $value, 0);
+        transform: translate3d(0, $value, 0);
+}
+
+@mixin transform-origin($coordinates){
+      -webkit-transform-origin: $coordinates;
+        -moz-transform-origin: $coordinates;
+        -o-transform-origin: $coordinates;
+        -ms-transform-origin: $coordinates;
+        transform-origin: $coordinates;
+}
+
+@mixin black-filter(){
+    background: rgba(0,0,0,.55);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    content: "";
+    z-index: 0;
+    left: 0;
+    top: 0;
+}
+
+@mixin animation($value){
+      -webkit-animation: $value;
+        -moz-animation: $value;
+        -o-animation: $value;
+        -ms-animation: $value;
+        animation: $value;
+}
+
+@mixin radial-gradient($extern-color, $center-color){
+    background: $extern-color;
+    background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
+    background-size: 550% 450%;
+}
+
+@mixin tag-color ($color){
+    .tag{
+         background-color: $color;
+         color: $white-color;
+         .tagsinput-remove-link{
+             color: $white-color;
+         }
+     }
+     .tagsinput-add{
+         color: $color;
+     }
+}
+@mixin create-colored-tags(){
+    &.tag-primary{
+        @include tag-color($brand-primary);
+    }
+    &.tag-info {
+        @include tag-color($brand-info);
+    }
+    &.tag-success{
+        @include tag-color($brand-success);
+    }
+    &.tag-warning{
+        @include tag-color($brand-warning);
+    }
+    &.tag-danger{
+        @include tag-color($brand-danger);
+    }
+    &.tag-rose{
+      @include tag-color($brand-rose);
+    }
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+@mixin rotate() {
+    -webkit-transform: rotate( 45deg );
+    -moz-transform: rotate( 45deg );
+    -o-transform: rotate( 45deg );
+    -ms-transform: rotate(45deg);
+    transform: rotate( 45deg );
+}
+
+@mixin linear-gradient($color1, $color2){
+    background: $color1; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(60deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(60deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(60deg, $color1, $color2); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(60deg, $color1 , $color2); /* Standard syntax */
+}
+
+
+
+// Mixins for buttons
+
+@mixin btn-styles($btn-color) {
+
+    // remove this line if you want black shadows
+    @include shadow-2dp-color($btn-color);
+
+    &.md-raised{
+        @include shadow-2dp-color($btn-color);
+    }
+
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:active:focus,
+    &:active:hover,
+    &.active:focus,
+    &.active:hover,
+    .open > &.dropdown-toggle,
+    .open > &.dropdown-toggle:focus,
+    .open > &.dropdown-toggle:hover {
+      background-color: $btn-color !important;
+      color: $white-color !important;
+
+      i{
+        color: $white-color !important;
+      }
+    }
+
+    &:focus,
+    &:active,
+    &:hover{
+      // remove this line if you want black shadows
+      @include button-shadow-color($btn-color);
+      background-color: darken($btn-color, 3%) !important;
+    }
+
+  &.disabled,
+  &:disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      opacity: .65;
+      pointer-events: none;
+    }
+  }
+
+  &.md-simple{
+      &,
+      &:hover,
+      &:focus,
+      &:active,
+      &.active,
+      &:active:focus,
+      &:active:hover,
+      &.active:focus,
+      &.active:hover,
+      .open > &.dropdown-toggle,
+      .open > &.dropdown-toggle:focus,
+      .open > &.dropdown-toggle:hover{
+        background-color: transparent !important;
+        color: $btn-color !important;
+        box-shadow: none;
+
+        i{
+          color: $btn-color !important;
+        }
+      }
+  }
+
+}
+
+@mixin set-background-color-button ($color){
+    .nav{
+        .md-list-item-container.active {
+            background-color: $color !important;
+            @include shadow-big-color($color);
+        }
+    }
+}
+
+// for social buttons
+@mixin social-buttons-color ($color){
+    background-color: $color !important;
+    color: #fff;
+    @include shadow-2dp-color($color);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:active:focus,
+    &:active:hover,
+    &.active:focus,
+    &.active:hover{
+        background-color: $color !important;
+        color: #fff;
+        @include button-shadow-color($color);
+    }
+
+    &.btn-simple{
+        color: $color;
+        background-color: transparent;
+        box-shadow: none;
+    }
+}
+
+@mixin social-buttons(){
+  &.md-facebook {
+    @include social-buttons-color($social-facebook);
+  }
+  &.md-twitter {
+    @include social-buttons-color($social-twitter);
+  }
+}
--- a/src/assets/scss/md/_navbars.scss
+++ b/src/assets/scss/md/_navbars.scss
@ -0,0 +1,360 @@
+.md-toolbar {
+  min-height: 56px;
+  padding: 10px 15px;
+  justify-content: center;
+
+  &.md-transparent{
+    background-color: transparent !important;
+    box-shadow: none;
+    padding-top: 25px;
+
+    .md-title,
+    .md-list .md-list-item-content,
+    .md-list-item-container .md-icon,
+    &,
+    &:hover,
+    &:focus{
+      color: $white-color !important;
+    }
+  }
+
+  &.md-absolute {
+    position: fixed;
+    z-index: 1030;
+    left: 0;
+    right: 0;
+  }
+
+  .md-list-item-content {
+    .fab,
+    .fa {
+      font-size: 1.25rem;
+      max-width: 24px;
+    }
+  }
+
+  .notification{
+    position: absolute;
+    top: 5px;
+    border: 1px solid #FFF;
+    right: 10px;
+    font-size: 9px;
+    background: #f44336;
+    color: #FFFFFF;
+    min-width: 20px;
+    padding: 0px 5px;
+    height: 20px;
+    border-radius: 10px;
+    text-align: center;
+    line-height: 19px;
+    vertical-align: middle;
+    display: block;
+  }
+
+  .navbar-nav {
+    > li > .dropdown-menu{
+        margin-top: -20px;
+    }
+
+    > li.open > .dropdown-menu{
+        margin-top: 0;
+    }
+
+    > .active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: inherit;
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+    > .disabled > a {
+      &,
+      &:hover,
+      &:focus {
+        color: inherit;
+        background-color: transparent;
+        opacity: 0.9;
+      }
+    }
+    .profile-photo{
+        padding: 0 5px 0;
+        .profile-photo-small{
+            height: 40px;
+            width: 40px;
+        }
+    }
+  }
+
+
+  // default color for dropdown
+  @include dropdown-colors($brand-primary);
+  @include toolbar-colors($gray-light, $white-color);
+  .md-toolbar-toggle .icon-bar{
+    color: inherit !important;
+  }
+
+  &.md-white {
+    @include toolbar-colors($white-color, $navbar-color);
+
+    .md-button,
+    .md-button:hover,
+    .md-button:focus,
+    .md-button:active,
+    .md-button.active,
+    .md-button:active:focus,
+    .md-button:active:hover,
+    .md-button.active:focus,
+    .md-button.active:hover,
+    .open > .md-button.dropdown-toggle,
+    .open > .md-button.dropdown-toggle:focus,
+    .open > .md-button.dropdown-toggle:hover {
+      i,
+      & {
+        color: $navbar-color !important;
+      }
+    }
+  }
+
+  &.md-primary{
+    @include dropdown-colors($brand-primary);
+    @include toolbar-colors($brand-primary, $white-color);
+  }
+  &.md-danger{
+    @include dropdown-colors($brand-danger);
+    @include toolbar-colors($brand-danger, $white-color);
+  }
+  &.md-warning{
+    @include dropdown-colors($brand-warning);
+    @include toolbar-colors($brand-warning, $white-color);
+  }
+  &.md-info{
+    @include dropdown-colors($brand-info);
+    @include toolbar-colors($brand-info, $white-color);
+  }
+  &.md-success{
+    @include dropdown-colors($brand-success);
+    @include toolbar-colors($brand-success, $white-color);
+  }
+
+  &.navbar-transparent{
+      background-color: transparent;
+      box-shadow: none;
+      border-bottom: 0;
+
+      .logo-container .brand{
+          color: $white-color;
+      }
+  }
+
+  .md-toolbar-row {
+    min-height: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .md-button{
+    margin: 0;
+  }
+
+  .md-toolbar-toggle .md-button-content{
+    display: block;
+    align-items: unset;
+  }
+
+  .notification{
+    position: absolute;
+    top: 0px;
+    border: 1px solid #FFF;
+    right: 7px;
+    font-size: 9px;
+    background: #f44336;
+    color: #FFFFFF;
+    min-width: 20px;
+    padding: 0px 5px;
+    height: 20px;
+    border-radius: 10px;
+    text-align: center;
+    line-height: 19px;
+    vertical-align: middle;
+    display: block;
+  }
+
+  &.md-theme-default.md-transparent,
+  &.md-theme-default,
+  &.md-theme-default .md-title,
+  &.md-theme-default.md-transparent .md-title {
+    color: $gray;
+  }
+
+  .md-title {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    margin-left: 0;
+    margin-right: 15px;
+    padding: 10px 0;
+    font-weight: 300;
+    letter-spacing: normal;
+  }
+
+  .md-toolbar-toggle {
+    width: 40px;
+
+    .icon-bar {
+      position: relative;
+      display: block;
+      width: 22px;
+      height: 2px;
+      background-color: inherit;
+      border: 1px solid;
+      border-radius: 1px;
+
+      & + .icon-bar{
+        margin-top: 4px;
+      }
+    }
+  }
+
+  .md-list{
+    flex-flow: row;
+    padding-right: 5px;
+    padding-left: 5px;
+    padding-top: 0;
+    padding-bottom: 0;
+    color: inherit !important;
+    background-color: transparent !important;
+
+    &:hover .md-list-item > a,
+    &:focus .md-list-item > a,
+    & > a:hover {
+      background-color: transparent !important;
+    }
+
+    .md-list-item > a:not(:last-child){
+      margin-right: 5px;
+    }
+  }
+
+  .md-field{
+    padding: 0;
+    margin: 0;
+
+    &:after,
+    &:before{
+      bottom: 5px;
+    }
+
+    .md-input{
+      margin-top: 6px;
+    }
+
+    label{
+      top: 15px;
+    }
+
+    &.md-focused label,
+    &.md-has-value label{
+      top: -4px;
+    }
+  }
+
+  .md-collapse{
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+.md-menu-content{
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  border-radius: $border-radius-base !important;
+  overflow: hidden;
+
+  .md-list .md-list-item a{
+    font-size: 10px;
+  }
+}
+
+
+
+
+
+
+.md-list-item a{
+  color: inherit !important;
+  padding-top: 15px;
+  padding-bottom: 15px;
+
+  font-weight: $font-weight-default;
+  font-size: $mdb-btn-font-size-base;
+  text-transform: uppercase;
+  overflow: visible;
+
+  border-radius: $border-radius-base;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: inherit;
+    background-color: transparent;
+  }
+
+  .material-icons,
+  .fa{
+    font-size: 20px;
+    margin-right: 5px;
+  }
+
+  &.btn:not(.btn-just-icon){
+      .fa,
+      .fab{
+        position: relative;
+        top: 2px;
+        margin-top: -4px;
+        margin-right: 4px;
+      }
+  }
+}
+
+.md-list-item{
+  list-style: none;
+
+  .md-list-item-content:not(.md-ripple) {
+    padding: 0;
+  }
+
+  .md-button:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple{
+    padding: 12px 15px;
+    min-height: 48px;
+  }
+}
+
+.md-list-item{
+  .md-list-item-container{
+    .md-ripple{
+      padding: 10px 15px;
+      border-radius: $border-radius-base;
+
+      p {
+        font-weight: 400;
+        font-size: 12px;
+        margin: 0;
+      }
+
+      .md-icon {
+        transition: none;
+        margin-right: 5px;
+      }
+
+      > span{
+        border-radius: $border-radius-base;
+      }
+    }
+  }
+}
--- a/src/assets/scss/md/_pagination.scss
+++ b/src/assets/scss/md/_pagination.scss
@ -0,0 +1,92 @@
+.pagination{
+    > li > a,
+    > li > span{
+        border: 0;
+        border-radius: 30px !important;
+        transition: all .3s;
+        padding: 0px 11px;
+        margin: 0 3px;
+        min-width: 30px;
+        height: 30px;
+        line-height: 30px;
+        color: $gray-color;
+        font-weight: $font-weight-default;
+        font-size: $mdb-btn-font-size-base;
+        text-transform: uppercase;
+        background: transparent;
+
+        &:hover,
+        &:focus{
+            color: $gray-color;
+        }
+    }
+
+    > .active > a,
+    > .active > span{
+        color: $gray-color;
+        text-align: center;
+
+        &,
+        &:focus,
+        &:hover{
+            background-color: $brand-primary;
+            border-color: $brand-primary;
+            color: $white-color;
+            @include shadow-4dp-color($brand-primary);
+        }
+
+    }
+
+    // Colors
+    &.pagination-info{
+        > .active > a,
+        > .active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-info;
+                border-color: $brand-info;
+                @include shadow-4dp-color($brand-info);
+            }
+        }
+    }
+
+    &.pagination-success{
+        > .active > a,
+        > .active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-success;
+                border-color: $brand-success;
+                @include shadow-4dp-color($brand-success);
+            }
+        }
+    }
+
+    &.pagination-warning{
+        > .active > a,
+        > .active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-warning;
+                border-color: $brand-warning;
+                @include shadow-4dp-color($brand-warning);
+            }
+        }
+    }
+
+    &.pagination-danger{
+        > .active > a,
+        > .active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-danger;
+                border-color: $brand-danger;
+                @include shadow-4dp-color($brand-danger);
+            }
+        }
+    }
+}
--- a/src/assets/scss/md/_pills.scss
+++ b/src/assets/scss/md/_pills.scss
@ -0,0 +1,117 @@
+.nav-pills{
+
+    .section-dark &,
+    .section-image &{
+        > li > a{
+            color: $gray-color;
+        }
+        > li{
+            > a:hover,
+            > a:focus{
+                background-color: #EEEEEE;
+            }
+        }
+    }
+
+    > li {
+        > a{
+            line-height: $mdb-btn-font-size-base * 2;
+            text-transform: uppercase;
+            font-size: $mdb-btn-font-size-base;
+            font-weight: $font-weight-bold;
+            min-width: 100px;
+            text-align: center;
+            color: $gray;
+            transition: all .3s;
+
+            &:hover{
+                background-color: rgba(200, 200, 200, 0.2);
+            }
+        }
+
+        i{
+            display: block;
+            font-size: 30px;
+            padding: 15px 0;
+        }
+
+        &.active > a{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-primary;
+                color: $white-color;
+                @include shadow-big-color($brand-primary);
+            }
+        }
+
+    }
+
+    &:not(.nav-pills-icons){
+        > li > a{
+            border-radius: $border-radius-extreme;
+        }
+    }
+
+    &.nav-stacked{
+        > li + li{
+            margin-top: 5px;
+        }
+    }
+
+    &.nav-pills-info{
+        > li {
+            &.active > a{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-info;
+                    @include shadow-big-color($brand-info);
+                }
+            }
+        }
+    }
+
+    &.nav-pills-success{
+        > li {
+            &.active > a{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-success;
+                    @include shadow-big-color($brand-success);
+                }
+            }
+        }
+    }
+
+    &.nav-pills-warning{
+        > li {
+            &.active > a{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-warning;
+                    @include shadow-big-color($brand-warning);
+                }
+            }
+        }
+    }
+
+    &.nav-pills-danger{
+        > li {
+            &.active > a{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-danger;
+                    @include shadow-big-color($brand-warning);
+                }
+            }
+        }
+    }
+    
+}
+.tab-space{
+    padding: 20px 0 50px 0px;
+}
--- a/src/assets/scss/md/_popups.scss
+++ b/src/assets/scss/md/_popups.scss
@ -0,0 +1,56 @@
+.md-tooltip{
+  padding: 10px 15px;
+  min-width: 130px;
+  max-width: 200px;
+  height: auto;
+  text-align: center;
+  border-radius: $border-radius-base;
+  background-color: $white-color !important;
+  color: $gray !important;
+  font-size: 12px;
+  font-weight: 400;
+  @include shadow-8dp();
+
+  &:after{
+    position: absolute;
+    bottom: -5px;
+    height: 0;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 5px;
+    vertical-align: .255em;
+    content: "";
+  }
+
+  &[x-placement="top"]:after{
+    border-top: 5px solid $white-color;
+    border-right: 5px solid transparent;
+    border-bottom: 0;
+    border-left: 5px solid transparent;
+  }
+  &[x-placement="bottom"]:after{
+    top: -5px;
+    border-top: 0;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid $white-color;
+    border-left: 5px solid transparent;
+  }
+  &[x-placement="left"]:after{
+    margin-right: 0;
+    right: -5px;
+    top: 16px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid $white-color;
+  }
+  &[x-placement="right"]:after{
+    margin-left: 0;
+    left: -5px;
+    top: 16px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 5px solid $white-color;
+  }
+}
--- a/src/assets/scss/md/_responsive.scss
+++ b/src/assets/scss/md/_responsive.scss
@ -0,0 +1,601 @@
+@media (min-width: 992px){
+    .navbar-form {
+        margin-top: 21px;
+        margin-bottom: 21px;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    .md-toolbar-toggle{
+      display: none;
+    }
+
+
+    .navbar-nav.navbar-right > li > .dropdown-menu:before{
+        left: auto;
+        right: 12px;
+    }
+
+    .navbar-nav.navbar-right > li > .dropdown-menu:after{
+        left: auto;
+        right: 12px;
+    }
+
+    .footer:not(.footer-big){
+        nav > ul{
+           li:first-child{
+             margin-left: 0;
+           }
+        }
+    }
+
+    body > .navbar-collapse.collapse{
+        display: none !important;
+    }
+
+    .card{
+        form{
+            [class*="col-"]{
+                padding: 6px;
+            }
+            [class*="col-"]:first-child{
+                padding-left: 15px;
+            }
+            [class*="col-"]:last-child{
+                padding-right: 15px;
+            }
+        }
+    }
+
+    .sidebar{
+        .navbar-form{
+            display: none !important;
+        }
+        .nav-mobile-menu{
+            display: none;
+        }
+    }
+}
+
+/*          Changes for small display      */
+
+@media (max-width: 991px){
+  .md-toolbar .md-collapse{
+    display: none !important;
+  }
+
+  .main-panel > .content{
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+    .sidebar{
+        display: none;
+        box-shadow: none;
+
+        .sidebar-wrapper{
+            padding-bottom: 60px;
+        }
+
+        .nav-mobile-menu{
+            margin-top: 0;
+
+            .md-field{
+              width: auto;
+              margin: 10px 36px 0;
+            }
+
+            .notification{
+                float: left;
+                line-height: 30px;
+                margin-right: 8px;
+            }
+        }
+
+        .dropdown-menu {
+            position: static;
+            float: none;
+            width: auto;
+            margin-top: 0;
+            background-color: transparent;
+            border: 0;
+            display: none;
+            -webkit-box-shadow: none;
+            box-shadow: none;
+        }
+
+        .dropdown.open .dropdown-menu{
+          display: block;
+        }
+
+        .dropdown{
+          li:hover a{
+            background-color: $brand-primary;
+            @include shadow-8dp();
+            color: $white-color !important;
+          }
+        }
+    }
+
+    html,
+    body{
+        overflow-x: hidden;
+    }
+
+    .menu-on-left{
+        .nav-open &{
+            .main-panel,
+            .wrapper-full-page,
+            .navbar-fixed > div{
+                @include transform-translate-x(260px);
+            }
+        }
+
+        .main-panel{
+            position: initial;
+        }
+
+        .sidebar,
+        .off-canvas-sidebar{
+            left: 0;
+            right: auto;
+            @include transform-translate-x(-260px);
+        }
+
+        #bodyClick{
+            left: 260px;
+            right: auto;
+        }
+    }
+
+    .main-panel{
+        width: 100%;
+    }
+    .navbar-transparent{
+        padding-top: 15px;
+        background-color: rgba(0, 0, 0, 0.45);
+    }
+    body,
+    html{
+        position: relative;
+        overflow-x: hidden;
+    }
+    .navbar .container{
+         left: 0;
+          width: 100%;
+         @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+         position: relative;
+    }
+    .navbar .navbar-collapse.collapse,
+    .navbar .navbar-collapse.collapse.in,
+    .navbar .navbar-collapse.collapsing{
+        display: none !important;
+    }
+
+    .navbar-nav > li{
+        float: none;
+        position: relative;
+        display: block;
+    }
+
+    .sidebar,
+    .off-canvas-sidebar{
+        position: fixed;
+        display: block;
+        top: 0;
+        height: 100vh;
+        width: 260px;
+        right: 0;
+        left: auto;
+        z-index: 1032;
+        visibility: visible;
+        background-color: #9A9A9A;
+        overflow-y: visible;
+        border-top: none;
+        text-align: left;
+        padding-right: 0px;
+        padding-left: 0;
+
+        @include transform-translate-x(260px);
+        @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+        > ul {
+            position: relative;
+            z-index: 4;
+            overflow-y:scroll;
+            height: calc(100vh - 61px);
+            width: 100%;
+        }
+        &::before{
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            display: block;
+            content: "";
+            z-index: 1;
+        }
+
+        .logo{
+            position: relative;
+            z-index: 4;
+        }
+
+        .navbar-form{
+            margin: 10px 15px;
+            float: none !important;
+            padding-top: 1px;
+            padding-bottom: 1px;
+        }
+
+        .table-responsive {
+            width: 100%;
+            margin-bottom: 15px;
+            overflow-x: scroll;
+            overflow-y: hidden;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+
+    .form-group{
+        .form-control{
+            font-size: 16px;
+            height: 37px
+        }
+    }
+
+    .navbar-form{
+        .btn{
+            position: absolute;
+            top: 27px;
+            right: 15px;
+        }
+    }
+
+    .nav-open .navbar-collapse{
+        @include transform-translate-x(0px);
+    }
+    .nav-open .navbar .container{
+        left: -250px;
+    }
+    .nav-open .main-panel{
+        left: 0;
+        @include transform-translate-x(-260px);
+    }
+
+    .nav-open .sidebar{
+        @include shadow-big();
+    }
+
+    .nav-open{
+        .off-canvas-sidebar,
+        .sidebar{
+            @include transform-translate-x(0);
+        }
+    }
+
+    .close-layer{
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        opacity: 0;
+        top: 0;
+        left: auto;
+
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+
+        @include transition($slow-transition-time, $transition-ease-in);
+
+        &.visible{
+            opacity: 1;
+        }
+    }
+
+    .navbar-toggle .icon-bar {
+          display: block;
+          position: relative;
+          background: #fff;
+          width: 24px;
+          height: 2px;
+          border-radius: 1px;
+          margin: 0 auto;
+    }
+
+    .navbar-header .navbar-toggle {
+        margin: 10px 15px 10px 0;
+        width: 40px;
+        height: 40px;
+    }
+    .bar1,
+    .bar2,
+    .bar3 {
+      outline: 1px solid transparent;
+    }
+
+    @include topbar-x-rotation();
+    @include topbar-back-rotation();
+    @include bottombar-x-rotation();
+    @include bottombar-back-rotation();
+
+    .md-toolbar-toggle{
+        .icon-bar:nth-child(2){
+          top: 0px;
+          @include bar-animation($topbar-back);
+        }
+        .icon-bar:nth-child(3){
+          opacity: 1;
+        }
+        .icon-bar:nth-child(4){
+          bottom: 0px;
+          @include bar-animation($bottombar-back);
+        }
+
+        &.toggled{
+            .icon-bar:nth-child(1){
+              top: 6px;
+              @include bar-animation($topbar-x);
+            }
+            .icon-bar:nth-child(2){
+              opacity: 0;
+            }
+            .icon-bar:nth-child(3){
+              bottom: 6px;
+              @include bar-animation($bottombar-x);
+            }
+        }
+    }
+
+    @-webkit-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @-moz-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+
+    .dropdown-menu .divider{
+        background-color: rgba(229, 229, 229, 0.15);
+    }
+
+    .navbar-nav {
+        margin: 1px 0;
+
+        .open .dropdown-menu > li {
+            & > a{
+                padding: 15px 15px 5px 50px;
+            }
+
+            &:first-child > a{
+                padding: 5px 15px 5px 50px;
+            }
+
+            &:last-child > a {
+                padding: 15px 15px 25px 50px;
+            }
+        }
+    }
+
+    [class*="navbar-"] .navbar-nav {
+        & > li > a,
+        > li > a:hover,
+        > li > a:focus,
+        .active > a,
+        .active > a:hover,
+        .active > a:focus,
+        .open .dropdown-menu > li > a,
+        .open .dropdown-menu > li > a:hover,
+        .open .dropdown-menu > li > a:focus,
+        .navbar-nav .open .dropdown-menu > li > a:active {
+            color: white;
+        }
+
+        & > li > a,
+        > li > a:hover,
+        > li > a:focus,
+        .open .dropdown-menu > li > a,
+        .open .dropdown-menu > li > a:hover,
+        .open .dropdown-menu > li > a:focus{
+            opacity: .7;
+            background: transparent;
+        }
+
+        &.navbar-nav .open .dropdown-menu > li > a:active {
+            opacity: 1;
+        }
+
+        & .dropdown > a{
+            &:hover .caret {
+                border-bottom-color: #777;
+                border-top-color: #777;
+            }
+            &:active .caret {
+                border-bottom-color: white;
+                border-top-color: white;
+            }
+        }
+
+    }
+
+    .dropdown-menu {
+        display: none;
+    }
+    .navbar-fixed-top {
+        -webkit-backface-visibility: hidden;
+    }
+    #bodyClick {
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        opacity: 0;
+        top: 0;
+        left: auto;
+        right: 260px;
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+    }
+
+    .social-line .btn{
+        margin: $margin-bottom;
+    }
+    .subscribe-line .form-control{
+        margin: $margin-bottom;
+    }
+    .social-line.pull-right{
+        float: none;
+    }
+    .footer:not(.footer-big) nav > ul li{
+        float: none;
+    }
+    .social-area.pull-right{
+        float: none !important;
+    }
+    .form-control + .form-control-feedback{
+        margin-top: -8px;
+    }
+    .navbar-toggle:hover,.navbar-toggle:focus {
+        background-color: transparent !important;
+    }
+    .btn.dropdown-toggle{
+        margin-bottom: 0;
+    }
+    .media-post .author{
+        width: 20%;
+        float: none !important;
+        display: block;
+        margin: 0 auto 10px;
+    }
+    .media-post .media-body{
+        width: 100%;
+    }
+
+    .navbar-collapse.collapse{
+        height: 100% !important;
+    }
+    .navbar-collapse.collapse.in {
+        display: block;
+    }
+    .navbar-header .collapse, .navbar-toggle {
+        display:block !important;
+    }
+    .navbar-header {
+        float:none;
+    }
+    .navbar-collapse{
+        .nav p{
+            font-size: $font-size-base;
+            margin: 0;
+        }
+
+        [class^="pe-7s-"]{
+            float: left;
+            font-size: 20px;
+            margin-right: 10px;
+        }
+    }
+}
+
+@media (max-width: 768px){
+  .footer {
+    text-align: center;
+
+    .container{
+      justify-content: unset;
+      display: block;
+
+      nav{
+        display: block;
+      }
+  }
+}
+
+  .hidden-sm{
+    display: none !important;
+  }
+}
+@media (min-width: 768px){
+  .hidden-lg,
+  .hidden-md{
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 768px){
+  .block-md{
+    display: block !important;
+  }
+}
+
+
+
+@media (max-width: 480px), (max-width: 767px){
+    .form-group{
+        .form-control{
+            width: 83%;
+        }
+    }
+
+    .navbar-form{
+        .form-group{
+            margin-bottom: 0;
+        }
+    }
+}
+
+@media (min-width: 992px){
+    .table-full-width{
+        margin-left: -20px;
+        margin-right: -20px;
+    }
+    .table-responsive{
+        overflow: visible;
+    }
+
+}
+
+@media screen and (max-width: 576px) {
+  .tim-typo{
+    padding-left: 11% !important;
+
+    .tim-note{
+      bottom: -25px !important;
+    }
+  }
+}
+
+
+@media (min-width: 576px) {
+  .md-toolbar-row,
+  .footer .container {
+      max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .md-toolbar-row,
+  .footer .container {
+      max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .md-toolbar-row,
+  .footer .container {
+      max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .md-toolbar-row,
+  .footer .container {
+      max-width: 1140px;
+  }
+}
--- a/src/assets/scss/md/_ripples.scss
+++ b/src/assets/scss/md/_ripples.scss
@ -0,0 +1,40 @@
+.withripple {
+    position: relative;
+}
+.ripple-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+
+    .disabled &{
+        display: none;
+    }
+}
+.ripple {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    border-radius: 100%;
+    background-color: #000; // fallback color
+    background-color: rgba(0,0,0,0.05);
+    transform: scale(1);
+    transform-origin: 50%;
+    opacity: 0;
+    pointer-events: none;
+}
+.ripple.ripple-on {
+    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    opacity: 0.1;
+}
+.ripple.ripple-out {
+    transition: opacity 0.1s linear 0s !important;
+    opacity: 0;
+}
--- a/src/assets/scss/md/_shadows.scss
+++ b/src/assets/scss/md/_shadows.scss
@ -0,0 +1,143 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@mixin shadow-z-1(){
+  box-shadow:
+    0 1px 6px 0 rgba(0, 0, 0, 0.12),
+    0 1px  6px 0 rgba(0, 0, 0, 0.12);
+}
+
+@mixin shadow-z-1-hover(){
+  box-shadow:
+    0 5px 11px 0 rgba(0, 0, 0, 0.18),
+    0 4px 15px 0 rgba(0, 0, 0, 0.15);
+}
+
+@mixin shadow-z-2(){
+  box-shadow:
+    0 8px 17px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+@mixin shadow-z-3(){
+  box-shadow:
+    0 12px 15px 0 rgba(0, 0, 0, 0.24),
+    0 17px 50px 0 rgba(0, 0, 0, 0.19);
+}
+
+@mixin shadow-z-4(){
+  box-shadow:
+    0 16px 28px 0 rgba(0, 0, 0, 0.22),
+    0 25px 55px 0 rgba(0, 0, 0, 0.21);
+}
+
+@mixin shadow-z-5(){
+  box-shadow:
+    0 27px 24px 0 rgba(0, 0, 0, 0.2),
+    0 40px 77px 0 rgba(0, 0, 0, 0.22);
+}
+
+
+/* Shadows (from mdl http://www.getmdl.io/) */
+
+// Focus shadow mixin.
+@mixin big-shadow(){
+  box-shadow: 0 0 8px rgba(0, 0, 0,.18),
+  0 8px 16px rgba(0, 0, 0,.36);
+}
+
+@mixin button-shadow-color($color){
+    box-shadow: 0 14px 26px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 3),
+    0  4px 23px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
+    0  8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-2dp(){
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 3px 1px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
+}
+@mixin shadow-2dp-color($color){
+  box-shadow: 0 2px 2px 0 rgba($color, $mdb-shadow-key-penumbra-opacity),
+  0 3px 1px -2px rgba($color, $mdb-shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-3dp(){
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 3px 3px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
+}
+@mixin shadow-4dp(){
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 1px 10px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+@mixin shadow-4dp-color($color){
+  box-shadow: 0 4px 5px 0 rgba($color, $mdb-shadow-key-penumbra-opacity),
+  0 1px 10px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba($color, $mdb-shadow-key-umbra-opacity);
+}
+@mixin shadow-6dp(){
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 1px 18px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+@mixin shadow-8dp(){
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+@mixin shadow-8dp-color($color){
+  box-shadow: 0 8px 10px 1px rgba($color, $mdb-shadow-key-penumbra-opacity),
+  0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba($color, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-16dp(){
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0  6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0  8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-16dp-color($color){
+  box-shadow: 0 16px 24px 2px rgba($color, $mdb-shadow-key-penumbra-opacity),
+  0  6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0  8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-24dp(){
+  box-shadow: 0  9px 46px  8px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
+  0 11px 15px -7px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+  0 24px 38px  3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-big(){
+    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3),
+    0  4px 25px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+    0  8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-big-navbar(){
+    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3),
+    0  3px 20px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
+    0  8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
+}
+
+@mixin shadow-big-color($color){
+    box-shadow: 0 12px 20px -10px rgba($color, $mdb-shadow-key-penumbra-opacity * 2),
+    0  4px 20px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
+    0  7px 8px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
+
+}
+
+@mixin shadow-navbar-color($color){
+    // new box shadow optimized for Tablets and Phones
+
+    @if($color == $white-color) {
+        box-shadow: 0 4px 18px 0px rgba(0, 0, 0, .12),
+                    0 7px 10px -5px rgba(0,0,0, 0.15);
+    }@else{
+        box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
+                    0 7px 12px -5px rgba($color, 0.46);
+    }
+}
--- a/src/assets/scss/md/_sidebar-and-main-panel.scss
+++ b/src/assets/scss/md/_sidebar-and-main-panel.scss
@ -0,0 +1,325 @@
+.wrapper:after{
+  display: table;
+  clear: both;
+  content: " ";
+}
+
+.sidebar,
+.off-canvas-sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    @include shadow-big();
+    background-size: cover;
+    background-position: center center;
+    @extend .animation-transition-general;
+
+    .md-icon.md-theme-default.md-icon-font,
+    .material-icons{
+      color: #fff !important;
+      opacity: .8
+    }
+
+    .md-list {
+      &.nav {
+        position: initial;
+      }
+
+      background-color: transparent !important;
+
+      .md-list-item a{
+        text-transform: capitalize;
+      }
+
+      .md-list-item-content{
+        justify-content: flex-start;
+        min-height: auto;
+      }
+
+      & .md-list-item-container:hover{
+        background-color: rgba(200, 200, 200, 0.2) !important;
+      }
+    }
+
+    .md-ripple span .md-ripple-wave{
+      background-color: rgba(200, 200, 200, 0.4) !important;
+    }
+
+
+    .sidebar-wrapper{
+        position: relative;
+        height: calc(100vh - 75px);
+        overflow: auto;
+        width: 260px;
+        z-index: 4;
+
+        .dropdown .dropdown-backdrop{
+            display: none !important;
+        }
+
+        .navbar-form{
+            border: none;
+        }
+
+        .nav{
+            padding: 0;
+
+            [data-toggle="collapse"] ~ div > ul > li > a{
+                padding-left: 60px;
+            }
+
+            .caret{
+                margin-top: 13px;
+                position: absolute;
+                right: 18px;
+            }
+        }
+
+    }
+
+    .logo-tim{
+        border-radius: 50%;
+        border: 1px solid #333;
+        display: block;
+        height: 61px;
+        width: 61px;
+        float: left;
+        overflow: hidden;
+
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+
+
+    .nav{
+        margin-top: 20px;
+
+        &.nav-mobile-menu{
+          li a {
+            padding: 10px 15px;
+          }
+        }
+
+        li{
+
+          a{
+            display: flex;
+            text-decoration: none;
+            margin: 10px 15px 0;
+            border-radius: $border-radius-base;
+            color: $white-color !important;
+            white-space: nowrap;
+            cursor: pointer;
+            width: auto;
+          }
+
+            &:first-child > a{
+                margin: 0 15px;
+            }
+
+            &:hover > a,
+            .dropdown:hover > a{
+                background: rgba(200, 200, 200, 0.2);
+                color: $black-color;
+            }
+
+            .active {
+                color: #FFFFFF !important;
+
+                .md-ripple i{
+                    opacity: 1;
+                }
+            }
+        }
+
+        p{
+          margin: 0;
+          line-height: 30px;
+          font-size: 14px;
+          position: relative;
+          display: block;
+          height: auto;
+          font-weight: $font-weight-light;
+          white-space: nowrap;
+        }
+
+        i{
+            font-size: 24px !important;
+            float: left;
+            margin-right: 15px !important;
+            margin-left: 0;
+            line-height: 30px;
+            width: 30px;
+            text-align: center;
+            color: #a9afbb;
+        }
+    }
+
+    .logo{
+        position: relative;
+        padding: $padding-base 0;
+        z-index: 4;
+
+        &:after{
+            content: '';
+            position: absolute;
+            bottom: 0;
+            right: 15px;
+            height: 1px;
+            width: calc(100% - 30px);
+            background-color: rgba(180,180,180, .3);
+
+        }
+
+        p{
+            float: left;
+            font-size: 20px;
+            margin: 10px 10px;
+            color: $white-color;
+            line-height: 20px;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        .logo-mini{
+          float: left;
+          width: 40px;
+          text-align: center;
+          margin-left: 25px;
+          margin-right: 11px;
+          position: relative;
+          top: -5px;
+        }
+
+        .simple-text{
+            text-transform: uppercase;
+            padding: $padding-small-vertical $padding-zero;
+            display: block;
+            font-size: $font-size-large;
+            font-weight: $font-weight-default;
+            line-height: 30px;
+            text-decoration: none;
+
+            &,
+            &:hover,
+            &:focus{
+              color: $white-color !important;
+            }
+
+            .logo-img{
+              width: 40px;
+              display: inline-block;
+              height: 40px;
+              background: $white-color;
+              border-radius: 50%;
+              text-align: center;
+              overflow: hidden;
+              @include shadow-big();
+
+                img{
+                  width: 55%;
+                  vertical-align: -webkit-baseline-middle;
+                }
+            }
+        }
+    }
+
+    .logo-tim{
+        border-radius: 50%;
+        border: 1px solid #333;
+        display: block;
+        height: 61px;
+        width: 61px;
+        float: left;
+        overflow: hidden;
+
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    &:after{
+        display: block;
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(27, 27, 27, 0.87);
+        opacity: .85;
+        top: 0;
+        left: 0;
+        z-index: 2;
+    }
+
+    &[data-color="blue"]{
+        @include set-background-color-button($brand-info);
+    }
+    &[data-color="green"]{
+        @include set-background-color-button($brand-success);
+    }
+    &[data-color="orange"]{
+        @include set-background-color-button($brand-warning);
+    }
+    &[data-color="red"]{
+        @include set-background-color-button($brand-danger);
+    }
+    &[data-color="purple"]{
+        @include set-background-color-button($brand-primary);
+    }
+}
+
+.off-canvas-sidebar{
+    .nav {
+        > li > a,
+        > li > a:hover{
+            color: $white-color;
+        }
+
+        > li > a:focus{
+            background: rgba(200, 200, 200, 0.2);
+        }
+    }
+}
+
+.perfect-scrollbar-on{
+  .sidebar,
+  .main-panel{
+      height: 100%;
+      max-height: 100%;
+  }
+}
+
+.main-panel{
+    position: relative;
+    float: right;
+    width: $sidebar-width;
+    @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+    > .content{
+        padding: 30px 15px;
+        min-height: calc(100vh - 123px);
+    }
+
+    > .footer{
+        border-top: 1px solid #e7e7e7;
+    }
+
+    > .navbar{
+        margin-bottom: 0;
+    }
+}
+// .sidebar,
+// .main-panel{
+//     -webkit-transition-property: top,bottom;
+//     transition-property: top,bottom;
+//     -webkit-transition-duration: .2s,.2s;
+//     transition-duration: .2s,.2s;
+//     -webkit-transition-timing-function: linear,linear;
+//     transition-timing-function: linear,linear;
+//     -webkit-overflow-scrolling: touch;
+// }
--- a/src/assets/scss/md/_tables.scss
+++ b/src/assets/scss/md/_tables.scss
@ -0,0 +1,65 @@
+.md-table-cell-container{
+  padding: 0;
+  .md-table-cell:last-child &{
+    padding-right: 0;
+    text-align: right;
+    display: flex;
+  }
+}
+.md-table-head-container{
+  height: auto;
+  padding: 0;
+}
+.md-tabs-content table thead{
+  display: none;
+}
+
+.md-tabs-container tbody .md-table-row:first-child td{
+  border: 0;
+}
+
+.md-table-cell{
+  padding: 12px 8px;
+  font-size: $font-size-base;
+}
+
+.md-table-head-label{
+  font-size: $font-size-h5;
+  padding-left: 8px;
+  font-weight: 300;
+}
+
+.md-table .md-table-row:hover .md-table-cell{
+  background-color: transparent !important;
+}
+
+.md-table .md-table-row:hover{
+  background: $table-bg-hover !important;
+}
+
+.md-card-plain .md-card-content > div .md-table .md-table-content,
+.md-card-plain .md-card-content > div .md-table {
+  background-color: transparent !important;
+}
+
+.md-table{
+  &[table-header-color="orange"] .md-table-head{
+    color: $brand-warning !important;
+  }
+  &[table-header-color="purple"] .md-table-head{
+    color: $brand-primary !important;
+  }
+  &[table-header-color="blue"] .md-table-head{
+    color: $brand-info !important;
+  }
+  &[table-header-color="red"] .md-table-head{
+    color: $brand-danger !important;
+  }
+  &[table-header-color="green"] .md-table-head{
+    color: $brand-success !important;
+  }
+
+  .md-table-row td{
+    border-top-color: rgba(0,0,0,.06) !important;
+  }
+}
--- a/src/assets/scss/md/_tabs.scss
+++ b/src/assets/scss/md/_tabs.scss
@ -0,0 +1,71 @@
+.md-tabs-navigation{
+  @include shadow-big();
+  margin: -35px 0 0;
+  border-radius: $border-radius-base;
+  padding: $padding-base $padding-base $padding-base 75px;
+  background-color: $gray-color;
+
+  .md-icon-label .md-button-content{
+    flex-direction: row;
+  }
+
+  & + .md-tabs-content{
+    .md-checkbox.md-checked .md-checkbox-container:after{
+      top: 0px;
+      left: 5px;
+    }
+  }
+
+  .md-button,
+  .md-button:hover,
+  .md-button:focus,
+  .md-button:active {
+    background-color: transparent !important;
+    box-shadow: none;
+  }
+
+  .md-active,
+  .md-active:hover,
+  .md-active:focus{
+    background-color: rgba(255, 255, 255, 0.2) !important;
+    box-shadow: none;
+  }
+
+  .md-icon-label{
+    height: auto;
+    border-radius: 3px;
+    line-height: 24px;
+    text-transform: uppercase;
+    font-size: 12px;
+
+    &:not(:last-child){
+      margin-right: 5px;
+    }
+
+    .md-tab-icon + .md-tab-label{
+      margin-top: 1px;
+      margin-left: 5px;
+    }
+
+    .md-ripple{
+      padding: 10px 15px;
+    }
+  }
+}
+
+.md-tabs-indicator{
+  display: none;
+}
+
+.md-nav-tabs-title{
+  position: absolute;
+  z-index: 9999;
+  top: 6px;
+  color: white;
+  font-size: initial;
+  margin-left: 15px;
+}
+
+.md-tab{
+  padding: 15px 0 0 0;
+}
--- a/src/assets/scss/md/_togglebutton.scss
+++ b/src/assets/scss/md/_togglebutton.scss
@ -0,0 +1,87 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.togglebutton {
+  vertical-align: middle;
+  &, label, input, .toggle {
+    user-select: none;
+  }
+  label {
+    cursor: pointer;
+    color: $mdb-toggle-label-color;
+    @include mdb-label-color-toggle-focus();
+
+    // Hide original checkbox
+    input[type=checkbox] {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .toggle {
+      text-align: left; // Issue #737 horizontal form
+      margin-left: 5px;
+    }
+    // Switch bg off and disabled
+    .toggle,
+    input[type=checkbox][disabled] + .toggle {
+      content: "";
+      display: inline-block;
+      width: 30px;
+      height: 15px;
+      background-color: rgba(80, 80, 80, 0.7);
+      border-radius: 15px;
+      margin-right: 15px;
+      transition: background 0.3s ease;
+      vertical-align: middle;
+    }
+    // Handle off
+    .toggle:after {
+      content: "";
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background-color: #FFFFFF;
+      border-radius: 20px;
+      position: relative;
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+      left: -5px;
+      top: -3px;
+      border: 1px solid $mdb-checkbox-border-color;
+      transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+    }
+    input[type=checkbox] {
+      // Handle disabled
+      &[disabled] {
+        & + .toggle:after,
+        &:checked + .toggle:after {
+          background-color: #BDBDBD;
+        }
+      }
+
+      & + .toggle:active:after,
+      &[disabled] + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+      }
+
+      // Ripple off and disabled
+      &:checked + .toggle:after {
+        left: 15px;
+      }
+    }
+
+    // set bg when checked
+    input[type=checkbox]:checked {
+      + .toggle {
+        background-color: rgba($brand-primary, (70/100)); // Switch bg on
+      }
+
+      + .toggle:after {
+        border-color: $brand-primary; // Handle on
+      }
+
+      + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
+      }
+    }
+  }
+}
--- a/src/assets/scss/md/_typography.scss
+++ b/src/assets/scss/md/_typography.scss
@ -0,0 +1,76 @@
+body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
+  font-family: $font-family-sans-serif;
+  font-weight: 300;
+  line-height: 1.5em;
+}
+
+h1,h2,h3,.h1,.h2,.h3{
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+h4,h5,h6,.h4,.h5,.h6{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+h1, .h1 {
+    font-size: $font-size-h1;
+    line-height: 1.15em;
+}
+h2, .h2{
+    font-size: $font-size-h2;
+    line-height: 1.5em;
+}
+h3, .h3{
+    font-size: $font-size-h3;
+    line-height: 1.4em;
+}
+h4, .h4{
+    font-size: $font-size-h4;
+    line-height: 1.5em;
+}
+h5, .h5 {
+    font-size: $font-size-h5;
+    line-height: 1.55em;
+    margin-bottom: 15px;
+}
+h6, .h6{
+    font-size: $font-size-h6;
+    text-transform: uppercase;
+    font-weight: $font-weight-bold;
+}
+
+p{
+    font-size: $font-paragraph;
+    margin: 0 0 10px;
+}
+
+h2.title{
+    margin-bottom: $margin-base * 2;
+}
+
+.description,
+.card-description,
+.footer-big p{
+    color: $gray-light;
+}
+
+.text-warning {
+  color: $brand-warning !important;
+}
+.text-primary {
+  color: $brand-primary !important;
+}
+.text-danger {
+  color: $brand-danger !important;
+}
+.text-success {
+  color: $brand-success !important;
+}
+.text-info {
+  color: $brand-info !important;
+}
+.text-gray{
+    color: $gray-color !important;
+}
--- a/src/assets/scss/md/_variables.scss
+++ b/src/assets/scss/md/_variables.scss
--- a/src/assets/scss/md/mixins/_chartist.scss
+++ b/src/assets/scss/md/mixins/_chartist.scss
@ -0,0 +1,89 @@
+// Scales for responsive SVG containers
+$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
+$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
+
+// Class names to be used when generating CSS
+$ct-class-chart: ct-chart !default;
+$ct-class-chart-line: ct-chart-line !default;
+$ct-class-chart-bar: ct-chart-bar !default;
+$ct-class-horizontal-bars: ct-horizontal-bars !default;
+$ct-class-chart-pie: ct-chart-pie !default;
+$ct-class-chart-donut: ct-chart-donut !default;
+$ct-class-label: ct-label !default;
+$ct-class-series: ct-series !default;
+$ct-class-line: ct-line !default;
+$ct-class-point: ct-point !default;
+$ct-class-area: ct-area !default;
+$ct-class-bar: ct-bar !default;
+$ct-class-slice-pie: ct-slice-pie !default;
+$ct-class-slice-donut: ct-slice-donut !default;
+$ct-class-grid: ct-grid !default;
+$ct-class-vertical: ct-vertical !default;
+$ct-class-horizontal: ct-horizontal !default;
+$ct-class-start: ct-start !default;
+$ct-class-end: ct-end !default;
+
+// Container ratio
+$ct-container-ratio: (1/1.618) !default;
+
+// Text styles for labels
+$ct-text-color: rgba(0, 0, 0, 0.4) !default;
+$ct-text-size: 0.875rem !default;
+$ct-text-align: flex-start !default;
+$ct-text-justify: flex-start !default;
+$ct-text-line-height: 1;
+
+.ct-big-chart-white{
+    $ct-grid-color: rgba(250, 250, 250, 0.7) !default;
+}
+// Grid styles
+$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
+$ct-grid-dasharray: 2px !default;
+$ct-grid-width: 1px !default;
+
+// Line chart properties
+$ct-line-width: 3px !default;
+$ct-line-dasharray: false !default;
+$ct-point-size: 8px !default;
+// Line chart point, can be either round or square
+$ct-point-shape: round !default;
+// Area fill transparency between 0 and 1
+$ct-area-opacity: 0.8 !default;
+
+// Bar chart bar width
+$ct-bar-width: 10px !default;
+
+// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
+$ct-donut-width: 60px !default;
+
+// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
+// should set this property to false
+$ct-include-classes: true !default;
+
+// If this is set to true the CSS will contain colored series. You can extend or change the color with the
+// properties below
+$ct-include-colored-series: $ct-include-classes !default;
+
+// If set to true this will include all responsive container variations using the scales defined at the top of the script
+$ct-include-alternative-responsive-containers: $ct-include-classes !default;
+
+// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
+$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
+$ct-series-colors: (
+
+  $brand-info,
+  $brand-danger,
+  $brand-warning,
+  $brand-primary,
+  $brand-success,
+  $font-background-light-grey,
+  $gray-color,
+  $social-google,
+  $social-tumblr,
+  $social-youtube,
+  $social-twitter,
+  $social-pinterest,
+  $social-behance,
+  #6188e2,
+  #a748ca
+) !default;
--- a/src/assets/scss/md/mixins/_transparency.scss
+++ b/src/assets/scss/md/mixins/_transparency.scss
@ -0,0 +1,20 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
+
+@mixin black-filter($opacity){
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: rgba(17,17,17,$opacity);
+    display: block;
+    content: "";
+    z-index: 1; 
+}
--- a/src/assets/scss/md/mixins/_vendor-prefixes.scss
+++ b/src/assets/scss/md/mixins/_vendor-prefixes.scss
@ -0,0 +1,176 @@
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+
+@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 transform-scale($value){
+     -webkit-transform: scale($value);
+        -moz-transform: scale($value);
+        -o-transform: scale($value);
+        -ms-transform: scale($value);
+        transform: scale($value);
+}
+
+@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-origin($coordinates){
+      -webkit-transform-origin: $coordinates;
+        -moz-transform-origin: $coordinates;
+        -o-transform-origin: $coordinates;
+        -ms-transform-origin: $coordinates;
+        transform-origin: $coordinates;
+}
+
+@mixin radial-gradient($extern-color, $center-color){
+    background: $extern-color;
+    background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
+    background-size: 550% 450%;
+}
+
+@mixin vertical-align {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+@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 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);}
+    }
+
+}
--- a/src/assets/scss/md/plugins/_perfect-scrollbar.scss
+++ b/src/assets/scss/md/plugins/_perfect-scrollbar.scss
@ -0,0 +1,113 @@
+/* perfect-scrollbar v0.6.13 */
+.ps-container {
+  -ms-touch-action: auto;
+  touch-action: auto;
+  overflow: hidden !important;
+  -ms-overflow-style: none; }
+  @supports (-ms-overflow-style: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  .ps-container.ps-active-x > .ps-scrollbar-x-rail,
+  .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent; }
+  .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px; }
+    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      bottom: 2px;
+      /* there must be 'bottom' for ps-scrollbar-x */
+      height: 6px; }
+    .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+      height: 11px; }
+  .ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px; }
+    .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      right: 2px;
+      /* there must be 'right' for ps-scrollbar-y */
+      width: 6px; }
+    .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+      width: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container:hover > .ps-scrollbar-x-rail,
+  .ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6; }
+  .ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+      background-color: #999; }
+  .ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+      background-color: #999; }
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@ -0,0 +1,51 @@
+<template>
+  <div :class="[
+       {open:isOpen},
+       {'dropdown': direction === 'down'},
+       {'dropup': direction ==='up'}
+      ]"
+    @click="toggleDropDown"
+    v-click-outside="closeDropDown">
+      <slot name="title">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
+          <i :class="icon"></i>
+          <p>{{title}}</p>
+        </a>
+      </slot>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "drop-down",
+  props: {
+    direction: {
+      type: String,
+      default: "down"
+    },
+    multiLevel: {
+      type: Boolean,
+      default: false
+    },
+    title: String,
+    icon: String
+  },
+  data() {
+    return {
+      isOpen: false
+    };
+  },
+  methods: {
+    toggleDropDown() {
+      if (this.multiLevel) {
+        this.isOpen = true;
+      } else {
+        this.isOpen = !this.isOpen;
+      }
+    },
+    closeDropDown() {
+      this.isOpen = false;
+    }
+  }
+};
+</script>
--- a/src/components/index.js
+++ b/src/components/index.js
@ -0,0 +1,3 @@
+import DropDown from "./Dropdown.vue";
+
+export { DropDown };
--- a/src/layout/MainFooter.vue
+++ b/src/layout/MainFooter.vue
@ -0,0 +1,48 @@
+<template>
+    <footer class="footer"
+            :class="{[`footer-${type}`]: type}"
+            :data-background-color="backgroundColor">
+        <div class="container">
+            <nav>
+                <ul>
+                    <li>
+                        <a href="https://www.creative-tim.com">
+                            Creative Tim
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https:///presentation.creative-tim.com">
+                            About Us
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https:///blog.creative-tim.com">
+                            Blog
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="copyright">
+                &copy; {{year}}, Designed by
+                <a href="https:///www.invisionapp.com" target="_blank">Invision</a>. Coded by
+                <a href="https://github.com/cristijora" target="_blank">Cristi Jora</a> and
+                <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
+            </div>
+        </div>
+    </footer>
+</template>
+<script>
+export default {
+  props: {
+    backgroundColor: String,
+    type: String
+  },
+  data() {
+    return {
+      year: new Date().getFullYear()
+    };
+  }
+};
+</script>
+<style>
+</style>
--- a/src/layout/MainNavbar.vue
+++ b/src/layout/MainNavbar.vue
@ -0,0 +1,137 @@
+<template>
+  <md-toolbar id="toolbar" md-elevation="0" class="md-transparent md-absolute" :class="extraNavClasses" :color-on-scroll="colorOnScroll">
+    <div class="md-toolbar-row">
+      <div class="md-toolbar-section-start">
+        <h3 class="md-title">Material Kit</h3>
+      </div>
+      <div class="md-toolbar-section-end">
+        <md-button class="md-just-icon md-simple md-toolbar-toggle">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </md-button>
+
+        <div class="md-collapse">
+          <md-list>
+            <li class="md-list-item">
+              <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
+                <div class="md-list-item-content">
+                  <drop-down direction="down">
+                    <md-button slot="title" class="md-button md-white md-simple dropdown-toggle" data-toggle="dropdown">
+                      <i class="material-icons">apps</i>
+                      <p>Components</p>
+                    </md-button>
+                    <ul class="dropdown-menu dropdown-with-icons">
+                      <li>
+                        <a href="#">
+                          <i class="material-icons">layers</i>
+                          All Components
+                        </a>
+                      </li>
+                      <li><a href="#">
+                        <i class="material-icons">content_paste</i>
+                        Documentation</a>
+                      </li>
+                    </ul>
+                  </drop-down>
+                </div>
+              </a>
+            </li>
+
+            <md-list-item href="javascript:void(0)">
+              <i class="material-icons">cloud_download</i>
+              <p>Download</p>
+            </md-list-item>
+
+            <md-list-item href="https://twitter.com/CreativeTim" target="_blank">
+              <i class="fab fa-twitter"></i>
+              <p class="hidden-lg hidden-md">Twitter</p>
+              <md-tooltip md-direction="bottom">Follow us on Twitter</md-tooltip>
+            </md-list-item>
+            <md-list-item href="https://www.facebook.com/CreativeTim" target="_blank">
+              <i class="fab fa-facebook-square"></i>
+              <p class="hidden-lg hidden-md">Facebook</p>
+              <md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip>
+            </md-list-item>
+            <md-list-item href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
+              <i class="fab fa-instagram"></i>
+              <p class="hidden-lg hidden-md">Instagram</p>
+              <md-tooltip md-direction="bottom">Follow us on Instagram</md-tooltip>
+            </md-list-item>
+          </md-list>
+        </div>
+      </div>
+    </div>
+
+  </md-toolbar>
+</template>
+
+<script>
+let resizeTimeout;
+function resizeThrottler(actualResizeHandler) {
+  // ignore resize events as long as an actualResizeHandler execution is in the queue
+  if (!resizeTimeout) {
+    resizeTimeout = setTimeout(() => {
+      resizeTimeout = null;
+      actualResizeHandler();
+
+      // The actualResizeHandler will execute at a rate of 15fps
+    }, 66);
+  }
+}
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "white",
+      validator(value) {
+        return [
+          "white",
+          "default",
+          "primary",
+          "danger",
+          "success",
+          "warning",
+          "info"
+        ].includes(value);
+      }
+    },
+    colorOnScroll: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      extraNavClasses: ""
+    };
+  },
+  methods: {
+    handleScroll() {
+      let scrollValue =
+        document.body.scrollTop || document.documentElement.scrollTop;
+      let navbarColor = document.getElementById("toolbar");
+      this.currentScrollValue = scrollValue;
+      if (this.colorOnScroll > 0 && scrollValue > this.colorOnScroll) {
+        this.extraNavClasses = `md-${this.type}`;
+        navbarColor.classList.remove("md-transparent");
+      } else {
+        if (this.extraNavClasses) {
+          this.extraNavClasses = "";
+          navbarColor.classList.add("md-transparent");
+        }
+      }
+    },
+    scrollListener() {
+      resizeThrottler(this.handleScroll);
+    }
+  },
+  mounted() {
+    document.addEventListener("scroll", this.scrollListener);
+  },
+  beforeDestroy() {
+    document.removeEventListener("scroll", this.scrollListener);
+  }
+};
+</script>
--- a/src/layout/StarterFooter.vue
+++ b/src/layout/StarterFooter.vue
@ -0,0 +1,53 @@
+<template>
+    <footer class="footer"
+            :class="{[`footer-${type}`]: type}"
+            :data-background-color="backgroundColor">
+        <div class="container">
+            <nav>
+                <ul>
+                    <li>
+                        <a href="https://www.creative-tim.com">
+                            Creative Tim
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https:///presentation.creative-tim.com">
+                            About Us
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https:///blog.creative-tim.com">
+                            Blog
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://www.creative-tim.com/license">
+                            License
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="copyright">
+                &copy; {{year}}, Designed by
+                <a href="https:///www.invisionapp.com" target="_blank">Invision</a>. Coded by
+                <a href="https://github.com/cristijora" target="_blank">Cristi Jora</a> and
+                <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
+            </div>
+        </div>
+    </footer>
+</template>
+<script>
+export default {
+  props: {
+    backgroundColor: String,
+    type: String
+  },
+  data() {
+    return {
+      year: new Date().getFullYear()
+    };
+  }
+};
+</script>
+<style>
+</style>
--- a/src/layout/StarterNavbar.vue
+++ b/src/layout/StarterNavbar.vue
@ -0,0 +1,12 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="css">
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -2,8 +2,12 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";

+import MaterialKit from "./plugins/material-kit";
+
 Vue.config.productionTip = false;

+Vue.use(MaterialKit);
+
 new Vue({
  router,
  render: h => h(App)
--- a/src/plugins/globalComponents.js
+++ b/src/plugins/globalComponents.js
@ -0,0 +1,12 @@
+import DropDown from "../components/Dropdown.vue";
+/**
+ * You can register global components here and use them as a plugin in your main Vue instance
+ */
+
+const GlobalComponents = {
+  install(Vue) {
+    Vue.component("drop-down", DropDown);
+  }
+};
+
+export default GlobalComponents;
--- a/src/plugins/globalDirectives.js
+++ b/src/plugins/globalDirectives.js
@ -0,0 +1,13 @@
+import { directive as vClickOutside } from "vue-clickaway";
+
+/**
+ * You can register global components here and use them as a plugin in your main Vue instance
+ */
+
+const GlobalDirectives = {
+  install(Vue) {
+    Vue.directive("click-outside", vClickOutside);
+  }
+};
+
+export default GlobalDirectives;
--- a/src/plugins/globalMixins.js
+++ b/src/plugins/globalMixins.js
@ -0,0 +1,24 @@
+/**
+ * You can register global mixins here
+ */
+
+const GlobalMixins = {
+  install(Vue) {
+    Vue.mixin({
+      mounted() {
+        let { bodyClass } = this.$options;
+        if (bodyClass) {
+          document.body.classList.add(bodyClass);
+        }
+      },
+      beforeDestroy() {
+        let { bodyClass } = this.$options;
+        if (bodyClass) {
+          document.body.classList.remove(bodyClass);
+        }
+      }
+    });
+  }
+};
+
+export default GlobalMixins;
--- a/src/plugins/material-kit.js
+++ b/src/plugins/material-kit.js
@ -0,0 +1,25 @@
+import VueMaterial from "vue-material";
+import "vue-material/dist/vue-material.min.css";
+import "@/assets/scss/material-kit.scss";
+import "@/assets/demo.css";
+import globalDirectives from "./globalDirectives";
+import globalMixins from "./globalMixins";
+import globalComponents from "./globalComponents";
+import VueLazyload from "vue-lazyload";
+
+export default {
+  install(Vue) {
+    Vue.use(VueMaterial);
+    Vue.use(globalDirectives);
+    Vue.use(globalMixins);
+    Vue.use(globalComponents);
+    Vue.use(VueLazyload, {
+      observer: true,
+      // optional
+      observerOptions: {
+        rootMargin: "0px",
+        threshold: 0.1
+      }
+    });
+  }
+};
--- a/src/router.js
+++ b/src/router.js
@ -1,26 +1,57 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "./views/Home.vue";
+import Index from "./views/Index.vue";
+import Landing from "./views/Landing.vue";
+import Login from "./views/Login.vue";
+import Profile from "./views/Profile.vue";
+import MainNavbar from "./layout/MainNavbar.vue";
+import MainFooter from "./layout/MainFooter.vue";

 Vue.use(Router);

 export default new Router({
-  mode: "history",
-  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
-      name: "home",
-      component: Home
+      name: "index",
+      components: { default: Index, header: MainNavbar, footer: MainFooter },
+      props: {
+        header: { colorOnScroll: 400 },
+        footer: { backgroundColor: "black" }
+      }
    },
    {
-      path: "/about",
-      name: "about",
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () =>
-        import(/* webpackChunkName: "about" */ "./views/About.vue")
+      path: "/landing",
+      name: "landing",
+      components: { default: Landing, header: MainNavbar, footer: MainFooter },
+      props: {
+        header: { colorOnScroll: 400 },
+        footer: { backgroundColor: "black" }
+      }
+    },
+    {
+      path: "/login",
+      name: "login",
+      components: { default: Login, header: MainNavbar },
+      props: {
+        header: { colorOnScroll: 400 }
+      }
+    },
+    {
+      path: "/profile",
+      name: "profile",
+      components: { default: Profile, header: MainNavbar, footer: MainFooter },
+      props: {
+        header: { colorOnScroll: 400 },
+        footer: { backgroundColor: "black" }
+      }
    }
-  ]
+  ],
+  scrollBehavior: to => {
+    if (to.hash) {
+      return { selector: to.hash };
+    } else {
+      return { x: 0, y: 0 };
+    }
+  }
 });
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "home",
-  components: {
-    HelloWorld
-  }
-};
-</script>
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@ -0,0 +1,83 @@
+<template>
+  <div class="wrapper">
+    <div class="page-header header-filter clear-filter purple-filter" :style="headerStyle">
+      <div class="md-layout">
+        <div class="md-layout-item">
+          <div class="brand">
+            <h1>Material Kit.</h1>
+            <h3>A Badass VueMaterial.io Kit based on Material Design.</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main main-raised">
+        ]<h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3><h1>Material Kit.</h1>
+        <h3>A Badass VueMaterial.io Kit based on Material Design.</h3>
+    </div>
+  </div>
+
+
+</template>
+
+<script>
+export default {
+  name: "index",
+  bodyClass: "index-page",
+  props: {
+    image: {
+      type: String,
+      default: require("@/assets/img/bg2.jpg")
+    }
+  },
+  computed: {
+    headerStyle() {
+      return {
+        backgroundImage: `url(${this.image})`
+      };
+    }
+  }
+};
+</script>
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue