Init

2023-03-28 10:34:44 +02:00
parent f803effbbd
commit f7e0f37528
428 changed files with 9982 additions and 100 deletions
--- a/frontend/.browserslistrc
+++ b/frontend/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/essential", "@vue/prettier"],
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+  },
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+};
--- a/frontend/.github/workflows/main.yml
+++ b/frontend/.github/workflows/main.yml
@@ -0,0 +1,12 @@
+name: Autocloser
+on: [issues]
+jobs:
+  autoclose:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Issue auto-closer
+      uses: roots/issue-closer-action@v1.1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-material-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n</pre>\n\n"
+        issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+dist/
+package-lock.json
+/docs
+/dist
--- a/frontend/.jshintrc
+++ b/frontend/.jshintrc
@@ -0,0 +1,3 @@
+{
+  "esversion": 6 
+}
--- a/frontend/.npmrc
+++ b/frontend/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
--- a/frontend/CHANGELOG.md
+++ b/frontend/CHANGELOG.md
@@ -0,0 +1,77 @@
+# Change Log
+
+## [1.5.1] 2023-01-10
+
+- Update dependencies and devDependencies.
+- Fix issue when running `npm install`.
+
+## [1.5.0] 2022-03-18
+
+### Dependencies Updates
+
+- Updated all out of date dependencies from `package.json` file
+
+## [1.4.0] 2020-03-12
+
+### Dependencies Updates
+
+- Updated all out of date dependencies from `package.json` file
+- Add `API_KEY` file
+- Add new structure for google maps plugin
+
+## [1.3.2] 2019-12-13
+
+### Dependencies Updates
+
+- Updated all out of date dependencies from `package.json` file
+- The version is now `v1.3.2` to have the same versioning line with the PRO version of this product
+
+## [1.2.1] 2019-06-14
+
+### Dependencies Updates, Vue Material Update
+
+- Updated all out of date dependencies from `package.json` file
+- The framework `Vuematerial.io` was updated to the latest beta version `1.0.0-beta-11`
+
+## [1.2.0] 2019-04-30
+
+### Dependencies Updates
+
+- Updated all out of date dependencies from `package.json` file
+
+## [1.1.0] 2019-02-08
+
+### Dependencies Updates, Improvements
+
+- Updated all out of date dependencies from `package.json` file
+- Removed all `to=""` and replaced with `href=""` props from non router-link components for avoid this error `[Vue warn]: Error in render: "TypeError: Cannot read property 'options' of undefined"`
+- Changed links from footer
+
+## [1.0.3] 2018-11-26
+
+### Bug Fixing
+
+- Fixed error `[Vue warn]: Error in render: "TypeError: Cannot read property 'options' of undefined"`
+
+## [1.0.2] 2018-11-19
+
+### Plugin Updates, BugFixing
+
+- Updated all `dependencies` and `devDependencies` to the latest versions
+- Cleaned `package.json` file
+- Removed all lint warnings and errors
+- Github issues fixed
+- Other bug fixes
+
+## [1.0.1] 2018-07-13
+
+### BugFixing and Updates
+
+- updated all the npm packages
+- scroll issue on mobile devices fixed
+- added button `Upgrade to PRO` in the sidebar
+- another small bug fixes
+
+## [1.0.0] 2018-05-03
+
+- Initial Release
--- a/frontend/ISSUE_TEMPLATE.md
+++ b/frontend/ISSUE_TEMPLATE.md
@@ -0,0 +1,13 @@
+<!--
+ IMPORTANT: Please use the following link to create a new issue:
+
+  https://www.creative-tim.com/new-issue/vue-material-dashboard
+
+**If your issue was not created using the app above, it will be closed immediately.**
+-->
+
+<!--
+Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
+👉  https://www.creative-tim.com/bundles
+👉  https://www.creative-tim.com
+-->
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,199 @@
+# [Vue Material Dashboard](https://demos.creative-tim.com/vue-material-dashboard) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/home?status=Vue%20Material%20Dashboard,%20a%20free%20Material%20Admin%20Template%20%E2%9D%A4%EF%B8%8F%20https%3A//bit.ly/2Nh5aVy%20%20%23vue%20%23material%20%23design%20%23developers%20%23freebie%20%20via%20%40CreativeTim)
+
+
+ ![version](https://img.shields.io/badge/version-1.5.1-blue.svg)  ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-material-dashboard.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-material-dashboard.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
+
+
+![Product Gif](https://s3.amazonaws.com/creativetim_bucket/github/gif/vue-material-dashboard.gif)
+
+Vue Material Dashboard is a beautiful resource built over [Vue Material](https://vuematerial.io/) and [Vuejs](https://vuejs.org/v2/guide/). It will help you get started developing dashboards in no time. Vue Material Dashboard is the official Vuejs version of the Original Material Dashboard. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, [Vuejs](https://vuejs.org/v2/guide/) and [Vue Router](https://router.vuejs.org/en/).
+
+We have created it thinking about things you actually need in a dashboard. Vue Material Dashboard contains handpicked and optimised Vuejs plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product.
+
+Let us know what you think and what we can improve below. And good luck with development!
+
+
+## Table of Contents
+
+* [Versions](#versions)
+* [Demo](#demo)
+* [Quick Start](#quick-start)
+* [Documentation](#documentation)
+* [File Structure](#file-structure)
+* [Browser Support](#browser-support)
+* [Resources](#resources)
+* [Reporting Issues](#reporting-issues)
+* [Technical Support or Questions](#technical-support-or-questions)
+* [Licensing](#licensing)
+* [Useful Links](#useful-links)
+
+
+
+## Versions
+
+[<img src="https://s3.amazonaws.com/creativetim_bucket/github/html.png" width="60" height="60" />](https://www.creative-tim.com/product/material-kit)[<img src="https://s3.amazonaws.com/creativetim_bucket/github/react.svg" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react)
+[<img src="https://s3.amazonaws.com/creativetim_bucket/github/vuejs.png" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-dashboard)
+[<img src="https://s3.amazonaws.com/creativetim_bucket/github/angular.png" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-angular2)
+
+
+| HTML | React  |
+| --- | ---  |
+| [![Material Dashboard  HTML](https://s3.amazonaws.com/creativetim_bucket/products/50/thumb/opt_md_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard)  | [![Material Dashboard  React](https://s3.amazonaws.com/creativetim_bucket/products/71/thumb/opt_mdr_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-react)
+
+| Vue | Angular  |
+| --- | ---  |
+| [![Vue Material Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/81/thumb/opt_md_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-material-dashboard) | [![Material Dashboard Angular 2](https://s3.amazonaws.com/creativetim_bucket/products/53/thumb/opt_md_angular_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-angular2)
+
+
+
+## Demo
+
+| Dashboard | User Profile | Tables | Maps | Notification |
+| --- | --- | --- | --- | --- |
+| [![Start page](src/assets/github/dashboard.png)](https://demos.creative-tim.com/vue-material-dashboard) | [![User profile page](src/assets/github/user_profile.png)](https://demos.creative-tim.com/vue-material-dashboard/#/user) | [![Tables page ](src/assets/github/tables.png)](https://demos.creative-tim.com/vue-material-dashboard/#/table) | [![Maps Page](src/assets/github/maps.png)](https://demos.creative-tim.com/vue-material-dashboard/#/maps) | [![Notification page](src/assets/github/notification.png)](https://demos.creative-tim.com/vue-material-dashboard/#/notifications)
+
+[View More](https://demos.creative-tim.com/vue-material-dashboard).
+
+
+## Quick start
+
+## :cloud: Build Setup
+
+### install dependencies
+`npm install`
+### serve with hot reload at localhost:8080
+`npm run dev`
+### build for production with minification
+`npm run build`
+
+- [Download from Github](https://github.com/creativetimofficial/vue-material-dashboard/archive/master.zip).
+- [Download from Creative Tim](https://www.creative-tim.com/product/vue-material-dashboard).
+- Clone the repo: `git clone https://github.com/creativetimofficial/vue-material-dashboard.git`.
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+
+## Documentation
+The documentation for the Vue Material Dashboard is hosted at our [website](https://demos.creative-tim.com/vue-material-dashboard/documentation).
+
+
+## File Structure
+Within the download you'll find the following directories and files:
+
+```
+vue-material-dashboard
+├── README.md
+├── babel.config.js
+├── package.json
+├── postcss.config.js
+├── public
+│   └── index.html
+└── src
+    ├── App.vue
+    ├── assets
+    │   ├── img
+    │   └── scss
+    │       ├── material-dashboard.scss
+    │       └── md
+    ├── components
+    │   ├── Cards
+    │   │   ├── ChartCard.vue
+    │   │   ├── NavTabsCard.vue
+    │   │   └── StatsCard.vue
+    │   ├── Dropdown.vue
+    │   ├── NotificationPlugin
+    │   │   ├── Notification.vue
+    │   │   ├── Notifications.vue
+    │   │   └── index.js
+    │   ├── SidebarPlugin
+    │   │   ├── SideBar.vue
+    │   │   ├── SidebarLink.vue
+    │   │   └── index.js
+    │   ├── Tables
+    │   │   ├── NavTabsTable.vue
+    │   │   ├── OrderedTable.vue
+    │   │   └── SimpleTable.vue
+    │   └── index.js
+    ├── globalComponents.js
+    ├── globalDirectives.js
+    ├── main.js
+    ├── material-dashboard.js
+    ├── pages
+    │   ├── Dashboard.vue
+    │   ├── Icons.vue
+    │   ├── Layout
+    │   │   ├── Content.vue
+    │   │   ├── ContentFooter.vue
+    │   │   ├── DashboardLayout.vue
+    │   │   ├── MobileMenu.vue
+    │   │   └── TopNavbar.vue
+    │   ├── Maps.vue
+    │   ├── Notifications.vue
+    │   ├── TableList.vue
+    │   ├── Typography.vue
+    │   ├── UpgradeToPRO.vue
+    │   ├── UserProfile
+    │   │   ├── EditProfileForm.vue
+    │   │   └── UserCard.vue
+    │   ├── UserProfile.vue
+    │   └── index.js
+    └── routes
+        └── routes.js
+```
+
+
+## Browser Support
+
+At present, we officially aim to support the last two versions of the following browsers:
+
+<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64">
+
+
+## Resources
+- Demo: <https://demos.creative-tim.com/vue-material-dashboard>
+- Download Page: <https://www.creative-tim.com/product/vue-material-dashboard>
+- Documentation: <https://demos.creative-tim.com/vue-material-dashboard/documentation>
+- License Agreement: <https://www.creative-tim.com/license>
+- Support: <https://www.creative-tim.com/contact-us>
+- Issues: [Github Issues Page](https://github.com/creativetimofficial/vue-material-dashboard/issues)
+## Reporting Issues
+
+We use GitHub Issues as the official bug tracker for the Vue Material Dashboard. Here are some advices for our users that want to report an issue:
+
+1. Make sure that you are using the latest version of the Vue Material Dashboard. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/).
+2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
+3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
+
+
+## Technical Support or Questions
+
+If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us) instead of opening an issue.
+
+
+
+## Licensing
+
+- Copyright 2023 Creative Tim (https://www.creative-tim.com/)
+
+- Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)
+
+
+
+## Useful Links
+
+- [More products](https://www.creative-tim.com/bootstrap-themes) from Creative Tim
+- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
+- [Freebies](https://www.creative-tim.com/bootstrap-themes/free) from Creative Tim
+- [Affiliate Program](https://www.creative-tim.com/affiliates/new) (earn money)
+
+##### Social Media
+
+Twitter: <https://twitter.com/CreativeTim>
+
+Facebook: <https://www.facebook.com/CreativeTim>
+
+Dribbble: <https://dribbble.com/creativetim>
+
+Google+: <https://plus.google.com/+CreativetimPage>
+
+Instagram: <https://www.instagram.com/CreativeTimOfficial>
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/app"],
+};
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "vue-material-dashboard",
+  "version": "1.5.1",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --open",
+    "dev": "npm run serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "chartist": "0.11.4",
+    "core-js": "3.26.1",
+    "google-maps": "4.3.3",
+    "vue": "2.7.14",
+    "vue-clickaway": "2.2.2",
+    "vue-github-buttons": "3.1.0",
+    "vue-material": "1.0.0-beta-15",
+    "vue-router": "3.5.2",
+    "vue-social-sharing": "3.0.9"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.5.19",
+    "@vue/cli-plugin-eslint": "4.5.19",
+    "@vue/cli-plugin-router": "4.5.19",
+    "@vue/cli-service": "4.5.19",
+    "@vue/eslint-config-prettier": "7.0.0",
+    "babel-eslint": "10.1.0",
+    "es6-promise": "4.2.8",
+    "eslint": "7.32.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "7.20.0",
+    "prettier": "2.8.1",
+    "sass": "1.56.2",
+    "sass-loader": "10.2.0",
+    "vue-template-compiler": "2.7.14"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};
--- a/frontend/public/favicon.png
+++ b/frontend/public/favicon.png
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -0,0 +1,54 @@
+<!--
+
+=========================================================
+* Vue Material Dashboard - v1.5.1
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/vue-material-dashboard
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="<%= webpackConfig.output.publicPath %>favicon.png"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>Vue Material Dashboard by Creative Tim</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
+
+    <!--  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>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {};
+</script>
--- a/frontend/src/assets/img/apple-icon.png
+++ b/frontend/src/assets/img/apple-icon.png
--- a/frontend/src/assets/img/faces/marc.jpg
+++ b/frontend/src/assets/img/faces/marc.jpg
--- a/frontend/src/assets/img/favicon.png
+++ b/frontend/src/assets/img/favicon.png
--- a/frontend/src/assets/img/mask.png
+++ b/frontend/src/assets/img/mask.png
--- a/frontend/src/assets/img/new_logo.png
+++ b/frontend/src/assets/img/new_logo.png
--- a/frontend/src/assets/img/sidebar-1.jpg
+++ b/frontend/src/assets/img/sidebar-1.jpg
--- a/frontend/src/assets/img/sidebar-2.jpg
+++ b/frontend/src/assets/img/sidebar-2.jpg
--- a/frontend/src/assets/img/sidebar-3.jpg
+++ b/frontend/src/assets/img/sidebar-3.jpg
--- a/frontend/src/assets/img/sidebar-4.jpg
+++ b/frontend/src/assets/img/sidebar-4.jpg
--- a/frontend/src/assets/img/tim_80x80.png
+++ b/frontend/src/assets/img/tim_80x80.png
--- a/frontend/src/assets/img/vue-logo.png
+++ b/frontend/src/assets/img/vue-logo.png
--- a/frontend/src/assets/scss/material-dashboard.scss
+++ b/frontend/src/assets/scss/material-dashboard.scss
@@ -0,0 +1,49 @@
+// =========================================================
+// * Vue Material Dashboard - v1.5.1
+// =========================================================
+//
+// * Product Page: https://www.creative-tim.com/product/vue-material-dashboard
+// * Copyright 2019 Creative Tim (https://www.creative-tim.com)
+// * Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)
+//
+// * Coded by Creative Tim
+//
+// =========================================================
+//
+// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+//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/fixed-plugin";
+@import "md/forms";
+@import "md/alerts";
+@import "md/tables";
+@import "md/layout";
+@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/frontend/src/assets/scss/md/_alerts.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_buttons.scss
+++ b/frontend/src/assets/scss/md/_buttons.scss
@@ -0,0 +1,234 @@
+.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-block{
+      width: 100%;
+    }
+
+    @include social-buttons();
+
+    &,
+    &.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{
+        &,
+        &:focus,
+        &:hover{
+            background-color: $white-color;
+            color: $gray-light;
+        }
+        &.btn-simple{
+            color: #FFFFFF;
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    &: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) * 0.5;
+                left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) * 0.5;
+            }
+
+            .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 * 0.5), -($mdb-btn-fab-font-size * 0.5));
+          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%;
+      text-align: center;
+
+      .fab{
+        font-size: 20px;
+
+      }
+    }
+
+    .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/frontend/src/assets/scss/md/_cards.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_chartist.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_checkboxes.scss
+++ b/frontend/src/assets/scss/md/_checkboxes.scss
@@ -0,0 +1,49 @@
+.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-checkbox-label{
+    font-weight: 400;
+    color: #aaa;
+    padding-left: 10px;
+  }
+
+  &.md-theme-default.md-checked .md-checkbox-container{
+    background-color: transparent !important;
+    border-color: inherit;
+  }
+
+  &.md-theme-default.md-checked .md-ripple{
+    color: inherit;
+  }
+
+  &.md-disabled .md-checkbox-label,
+  &.md-disabled .md-checkbox-container{
+    opacity: .26;
+    border-color: rgba(0, 0, 0, .54) !important;
+  }
+
+  &.md-checked.md-disabled .md-checkbox-container{
+    background-color: transparent !important;
+    border-color: rgba(0, 0, 0, .54) !important;
+    opacity: .26;
+
+    &:after{
+      border-color: rgba(0, 0, 0, .54) !important;
+    }
+  }
+}
--- a/frontend/src/assets/scss/md/_colors.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_dialogs.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_dropdown.scss
+++ b/frontend/src/assets/scss/md/_dropdown.scss
@@ -0,0 +1,141 @@
+.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);
+            }
+        }
+    }
+
+}
+
+
+.navbar-nav > li > .dropdown-menu,
+.dropdown .dropdown-menu,
+.dropdown-menu.bootstrap-datetimepicker-widget{
+    @include transition($fast-transition-time, $transition-linear);
+    margin-top: -20px;
+    visibility: hidden;
+    display: block;
+    @include opacity(0);
+}
+.navbar-nav > li.open > .dropdown-menu,
+.dropdown.open .dropdown-menu,
+.dropdown-menu.bootstrap-datetimepicker-widget.open{
+    @include opacity(1);
+    visibility: visible;
+    margin-top: 0px;
+
+}
+
+.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: visible;
+
+  > span{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    z-index: -1;
+  }
+}
--- a/frontend/src/assets/scss/md/_fixed-plugin.scss
+++ b/frontend/src/assets/scss/md/_fixed-plugin.scss
@@ -0,0 +1,358 @@
+.fixed-plugin{
+    position: fixed;
+    right: 0;
+    width: 64px;
+    background: rgba(0,0,0,.3);
+    z-index: 1031;
+    border-radius: 8px 0 0 8px;
+    text-align: center;
+    top: 120px;
+
+    li > a,
+    .badge{
+        transition: all .34s;
+        -webkit-transition: all .34s;
+        -moz-transition: all .34s;
+    }
+
+    .fa-cog{
+        color: #FFFFFF;
+        padding: 10px;
+        border-radius: 0 0 6px 6px;
+        width: auto;
+    }
+
+    .dropdown{
+      cursor: pointer;
+    }
+
+    .dropdown-menu{
+        right: 80px;
+        left: auto !important;
+        top: -40px !important;
+        width: 290px;
+        border-radius: 10px;
+        padding: 0 10px;
+    }
+
+    .dropdown .dropdown-menu .now-ui-icons{
+      top: 5px;
+    }
+
+    .dropdown-menu:after,
+    .dropdown-menu:before{
+        right: 10px;
+        margin-left: auto;
+        left: auto;
+    }
+
+    .fa-circle-thin{
+        color: #FFFFFF;
+    }
+
+    .active .fa-circle-thin{
+        color: #00bbff;
+    }
+
+    .dropdown-menu > .active > a,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus{
+        color: #777777;
+        text-align: center;
+    }
+
+    img{
+        border-radius: 0;
+        width: 100%;
+        height: 100px;
+        margin: 0 auto;
+    }
+
+    .dropdown-menu li > a:hover,
+    .dropdown-menu li > a:focus{
+        box-shadow: none;
+    }
+
+    .badge{
+        border: 3px solid #FFFFFF;
+        border-radius: 50%;
+        cursor: pointer;
+        display: inline-block;
+        height: 23px;
+        margin-right: 5px;
+        position: relative;
+        width: 23px;
+    }
+
+    .badge.active,
+    .badge:hover{
+        border-color: #00bbff;
+    }
+
+    .badge-blue{
+        background-color: $brand-info;
+    }
+    .badge-green{
+        background-color: $brand-success;
+    }
+    .badge-purple{
+        background-color: $brand-primary;
+    }
+    .badge-orange{
+        background-color: $brand-warning;
+    }
+    .badge-red{
+        background-color: $brand-danger;
+    }
+
+    h5{
+        font-size: 14px;
+        margin: 10px;
+    }
+
+    .dropdown-menu li{
+        display: block;
+        padding: 18px 2px;
+        width: 25%;
+        float: left;
+    }
+
+    li.adjustments-line,
+    li.header-title,
+    li.button-container{
+        width: 100%;
+        height: 50px;
+        min-height: inherit;
+    }
+
+    li.button-container{
+      height: auto;
+
+      .md-button.md-just-icon{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+
+    #sharrreTitle{
+        text-align: center;
+        padding: 10px 0;
+        height: 50px;
+    }
+
+    li.header-title{
+        height: 30px;
+        line-height: 25px;
+        font-size: 12px;
+        font-weight: 600;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    .github-buttons{
+      width: 100% !important;
+      display: flex !important;
+      justify-content: center;
+      margin-bottom: 10px;
+
+      .gh-button,
+      .social-count{
+        color: inherit !important;
+        background-color: inherit !important;
+        background-position: unset;
+      }
+    }
+
+    .adjustments-line{
+        p{
+            float: left;
+            display: inline-block;
+            margin-bottom: 0;
+            font-size: 1em;
+            color: #3C4858;
+        }
+
+        a{
+            color: transparent;
+
+            .badge-colors{
+                position: relative;
+                top: -2px;
+            }
+
+            a:hover,
+            a:focus{
+                color: transparent;
+            }
+        }
+
+        .togglebutton{
+            text-align: center;
+
+            .label-switch{
+              position: relative;
+              left: -10px;
+              font-size: $font-size-base;
+              color: $gray-light;
+
+              &.label-right{
+                left: 10px;
+              }
+            }
+
+            .toggle{
+                margin-right: 0;
+            }
+        }
+
+        .dropdown-menu > li.adjustments-line > a{
+              padding-right: 0;
+              padding-left: 0;
+              border-bottom: 1px solid #ddd;
+              border-radius: 0;
+              margin: 0;
+        }
+    }
+
+
+
+    .dropdown-menu{
+        > li{
+            & > a.img-holder{
+                  font-size: 16px;
+                  text-align: center;
+                  border-radius: 10px;
+                  background-color: #FFF;
+                  border: 3px solid #FFF;
+                  padding-left: 0;
+                  padding-right: 0;
+                  opacity: 1;
+                  cursor: pointer;
+                  display: block;
+                  max-height: 100px;
+                  overflow: hidden;
+                  padding: 0;
+
+                  img{
+                     margin-top: auto;
+                  }
+            }
+
+            a.switch-trigger:hover,
+            & > a.switch-trigger:focus{
+                background-color: transparent;
+            }
+
+            &:hover,
+            &:focus{
+                > a.img-holder{
+                    border-color: rgba(0, 187, 255, 0.53);;
+                }
+            }
+        }
+
+        > .active > a.img-holder,
+        > .active > a.img-holder{
+            border-color: #00bbff;
+            background-color: #FFFFFF;
+        }
+
+    }
+
+    .btn-social{
+        width: 50%;
+        display: block;
+        width: 48%;
+        float: left;
+        font-weight: 600;
+    }
+
+    .btn-social{
+        i{
+            margin-right: 5px;
+        }
+
+        &:first-child{
+            margin-right: 2%;
+        }
+    }
+
+    .dropdown{
+        .dropdown-menu{
+             -webkit-transform: translateY(-2%);
+             -moz-transform: translateY(-2%);
+             -o-transform: translateY(-2%);
+             -ms-transform: translateY(-2%);
+             transform: translateY(-2%);
+             top: 27px;
+             opacity: 0;
+
+             transform-origin: 0 0;
+
+             &:before{
+               border-left: 16px solid rgba(0,0,0,.2);
+              right: -16px;
+             }
+
+             &:after{
+               border-left: 16px solid #fff;
+               right: -15px;
+             }
+
+             &:before,
+             &:after{
+               content: "";
+               border-bottom: 16px solid transparent;
+               border-top: 16px solid transparent;
+                display: inline-block;
+                position: absolute;
+                top: 65px;
+                width: 16px;
+                transform: translateY(-50%);
+                -webkit-transform: translateY(-50%);
+                -moz-transform: translateY(-50%);
+             }
+        }
+
+        &.show .dropdown-menu{
+             opacity: 1;
+             visibility: visible;
+             -webkit-transform: translateY(4%);
+             -moz-transform: translateY(4%);
+             -o-transform: translateY(4%);
+             -ms-transform: translateY(4%);
+             transform: translateY(4%);
+
+             transform-origin: 0 0;
+        }
+    }
+
+    .bootstrap-switch{
+        margin:0;
+    }
+}
+
+.fixed-plugin .dropdown-menu > li > a.img-holder{
+      font-size: 16px;
+      text-align: center;
+      border-radius: 10px;
+      background-color: #FFF;
+      border: 3px solid #FFF;
+      padding-left: 0;
+      padding-right: 0;
+      opacity: 1;
+      cursor: pointer;
+      display: block;
+      max-height: 100px;
+      overflow: hidden;
+      padding: 0;
+      min-width: 25%;
+}
+
+.fixed-plugin .dropdown .dropdown-menu li.adjustments-line {
+    border-bottom: 1px solid #ddd;
+}
+
+.fixed-plugin .dropdown .dropdown-menu li {
+    padding: 5px 2px!important;
+}
--- a/frontend/src/assets/scss/md/_footers.scss
+++ b/frontend/src/assets/scss/md/_footers.scss
@@ -0,0 +1,56 @@
+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;
+                }
+            }
+        }
+    }
+
+    .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: 30px;
+  padding-left: 30px;
+  display: flex;
+  justify-content: space-between;
+}
--- a/frontend/src/assets/scss/md/_forms.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_inputs-size.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_inputs.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_layout.scss
+++ b/frontend/src/assets/scss/md/_layout.scss
@@ -0,0 +1,73 @@
+.md-layout-item{
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.md-list .md-ripple {
+  overflow: hidden;
+}
+
+@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/frontend/src/assets/scss/md/_misc.scss
+++ b/frontend/src/assets/scss/md/_misc.scss
@@ -0,0 +1,155 @@
+body {
+  background-color: #EEEEEE;
+  letter-spacing: unset;
+  // background: #fdfdfe;
+  color: $black-color;
+  &.inverse {
+    background: #333333;
+    &, .form-control {
+      color: $mdb-text-color-light;
+    }
+    .modal,
+    .panel-default,
+    .card {
+      &,
+      .form-control {
+        background-color: initial;
+        color: initial;
+      }
+    }
+
+  }
+}
+
+.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;
+}
+
+.page-header {
+    height: 60vh;
+    background-position: center center;
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+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;
+  }
+}
+
+a[data-toggle="collapse"][aria-expanded="true"] .caret{
+    @include rotate-180();
+}
+
+.sidebar .nav a,
+.caret,
+.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/frontend/src/assets/scss/md/_mixins.scss
+++ b/frontend/src/assets/scss/md/_mixins.scss
@@ -0,0 +1,314 @@
+//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){
+  background-color: $variation-color !important;
+  @include shadow-big-color($variation-color);
+
+  .md-title,
+  .md-list .md-list-item-content,
+  .md-toolbar-toggle .icon-bar,
+  &,
+  &:hover,
+  &:focus{
+    color: $white-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{
+        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/frontend/src/assets/scss/md/_navbars.scss
+++ b/frontend/src/assets/scss/md/_navbars.scss
@@ -0,0 +1,320 @@
+.md-toolbar {
+  min-height: 56px;
+  padding: 10px 15px;
+  border-radius: 3px;
+
+  &.md-transparent{
+    background-color: transparent !important;
+    box-shadow: none;
+
+    .md-title,
+    .md-list .md-list-item-content,
+    &,
+    &:hover,
+    &:focus{
+      color: $black-color !important;
+    }
+  }
+
+  .md-list-item-content {
+    padding: 0;
+  }
+
+  .md-list-item{
+    .md-button{
+      &.md-just-icon{
+        width: auto;
+        min-width: auto;
+        min-height: 48px;
+        border-radius: 3px;
+
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active,
+        &:active:focus,
+        &:active:hover,
+        &.active:focus,
+        &.active:hover,
+        .open > &.dropdown-toggle,
+        .open > &.dropdown-toggle:focus,
+        .open > &.dropdown-toggle:hover{
+          color: $black-color !important;
+        }
+
+        i{
+          width: 20px;
+          min-width: 20px;
+
+          &,
+          &:hover,
+          &:focus,
+          &:active,
+          &.active,
+          &:active:focus,
+          &:active:hover,
+          &.active:focus,
+          &.active:hover,
+          .open > &.dropdown-toggle,
+          .open > &.dropdown-toggle:focus,
+          .open > &.dropdown-toggle:hover{
+            color: $black-color !important;
+          }
+        }
+      }
+    }
+  }
+
+  .notification{
+    position: absolute;
+    top: -6px;
+    border: 1px solid #FFF;
+    right: -8px;
+    font-size: 9px;
+    background: #f44336;
+    color: #FFFFFF;
+    z-index: 1;
+    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);
+  .md-toolbar-toggle .icon-bar{
+    color: inherit !important;
+  }
+
+  &.md-primary{
+    @include dropdown-colors($brand-primary);
+    @include toolbar-colors($brand-primary);
+  }
+  &.md-danger{
+    @include dropdown-colors($brand-danger);
+    @include toolbar-colors($brand-danger);
+  }
+  &.md-warning{
+    @include dropdown-colors($brand-warning);
+    @include toolbar-colors($brand-warning);
+  }
+  &.md-info{
+    @include dropdown-colors($brand-info);
+    @include toolbar-colors($brand-info);
+  }
+  &.md-success{
+    @include dropdown-colors($brand-success);
+    @include toolbar-colors($brand-success);
+  }
+
+  &.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;
+  }
+
+  &.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: block;
+  padding: 0;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: inherit;
+    background-color: transparent;
+  }
+
+
+  .material-icons,
+  .fa{
+        font-size: 20px;
+  }
+
+  &.btn:not(.btn-just-icon){
+      .fa{
+        position: relative;
+        top: 2px;
+        margin-top: -4px;
+        margin-right: 4px;
+      }
+  }
+}
+
+.md-list-item {
+    margin-left: 5px;
+    list-style: none;
+}
--- a/frontend/src/assets/scss/md/_pagination.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_pills.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_popups.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_responsive.scss
+++ b/frontend/src/assets/scss/md/_responsive.scss
@@ -0,0 +1,572 @@
+@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;
+            }
+        }
+    }
+
+  .wrapper .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;
+  }
+
+  .wrapper .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;
+        }
+
+      .wrapper .sidebar,
+      .wrapper .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;
+    }
+
+  .wrapper .sidebar,
+  .wrapper .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 .container{
+    justify-content: unset;
+    display: block;
+
+    nav{
+      display: block;
+    }
+
+    .copyright{
+      float: right;
+    }
+  }
+
+  .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;
+    }
+  }
+}
--- a/frontend/src/assets/scss/md/_ripples.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_shadows.scss
+++ b/frontend/src/assets/scss/md/_shadows.scss
@@ -0,0 +1,138 @@
+// 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);
+
+}
+
+// shadow backup for Sketch/Photoshop
+// @mixin shadow-big-color($color){
+//     box-shadow: 0 16px 38px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 4),
+//     0  4px 25px 0px rgba($color, $mdb-shadow-ambient-shadow-opacity),
+//     0  8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
+// }
--- a/frontend/src/assets/scss/md/_sidebar-and-main-panel.scss
+++ b/frontend/src/assets/scss/md/_sidebar-and-main-panel.scss
@@ -0,0 +1,342 @@
+.wrapper:after{
+  display: table;
+  clear: both;
+  content: " ";
+}
+
+.md-list-item{
+  .md-list-item-container{
+    .md-ripple{
+      padding: 10px 15px;
+      border-radius: $border-radius-base;
+
+      > span{
+        border-radius: $border-radius-base;
+      }
+    }
+  }
+}
+
+.wrapper .sidebar,
+.wrapper .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;
+                }
+            }
+        }
+
+        .router-link-active p {
+          color: $white-color;
+        }
+
+        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/frontend/src/assets/scss/md/_tables.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_tabs.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_togglebutton.scss
+++ b/frontend/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*0.01)); // 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*0.01)); // Ripple on
+      }
+    }
+  }
+}
--- a/frontend/src/assets/scss/md/_typography.scss
+++ b/frontend/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/frontend/src/assets/scss/md/_variables.scss
+++ b/frontend/src/assets/scss/md/_variables.scss
--- a/frontend/src/assets/scss/md/mixins/_chartist.scss
+++ b/frontend/src/assets/scss/md/mixins/_chartist.scss
@@ -0,0 +1,91 @@
+// Scales for responsive SVG containers
+@use "sass:math";
+
+$ct-scales: ((1), math.div(15, 16), math.div(8, 9), math.div(5, 6), (4*0.2), (3*0.25), math.div(2, 3), (5*0.125), math.div(1, 1.618), (3*0.2), math.div(9, 16), math.div(8, 15), (1*0.5), (2*0.2), (3*0.125), math.div(1, 3), (1*0.25)) !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: math.div(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/frontend/src/assets/scss/md/mixins/_transparency.scss
+++ b/frontend/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/frontend/src/assets/scss/md/mixins/_vendor-prefixes.scss
+++ b/frontend/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/frontend/src/assets/scss/md/plugins/_perfect-scrollbar.scss
+++ b/frontend/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/frontend/src/components/Cards/ChartCard.vue
+++ b/frontend/src/components/Cards/ChartCard.vue
@@ -0,0 +1,96 @@
+<template>
+  <md-card>
+    <md-card-header
+      class="card-chart"
+      :data-background-color="dataBackgroundColor"
+    >
+      <div :id="chartId" class="ct-chart"></div>
+    </md-card-header>
+
+    <md-card-content>
+      <slot name="content"></slot>
+    </md-card-content>
+
+    <md-card-actions md-alignment="left">
+      <slot name="footer"></slot>
+    </md-card-actions>
+  </md-card>
+</template>
+<script>
+export default {
+  name: "chart-card",
+  props: {
+    footerText: {
+      type: String,
+      default: "",
+    },
+    headerTitle: {
+      type: String,
+      default: "Chart title",
+    },
+    chartType: {
+      type: String,
+      default: "Line", // Line | Pie | Bar
+    },
+    chartOptions: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    chartResponsiveOptions: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    chartData: {
+      type: Object,
+      default: () => {
+        return {
+          labels: [],
+          series: [],
+        };
+      },
+    },
+    dataBackgroundColor: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chartId: "no-id",
+    };
+  },
+  methods: {
+    /***
+     * Initializes the chart by merging the chart options sent via props and the default chart options
+     */
+    initChart(Chartist) {
+      var chartIdQuery = `#${this.chartId}`;
+      Chartist[this.chartType](chartIdQuery, this.chartData, this.chartOptions);
+    },
+    /***
+     * Assigns a random id to the chart
+     */
+    updateChartId() {
+      var currentTime = new Date().getTime().toString();
+      var randomInt = this.getRandomInt(0, currentTime);
+      this.chartId = `div_${randomInt}`;
+    },
+    getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    },
+  },
+  mounted() {
+    this.updateChartId();
+    import("chartist").then((Chartist) => {
+      let ChartistLib = Chartist.default || Chartist;
+      this.$nextTick(() => {
+        this.initChart(ChartistLib);
+      });
+    });
+  },
+};
+</script>
--- a/frontend/src/components/Cards/NavTabsCard.vue
+++ b/frontend/src/components/Cards/NavTabsCard.vue
@@ -0,0 +1,13 @@
+<template>
+  <md-card class="md-card-nav-tabs">
+    <md-card-content>
+      <slot name="content"></slot>
+    </md-card-content>
+  </md-card>
+</template>
+
+<script>
+export default {
+  name: "nav-tabs-card",
+};
+</script>
--- a/frontend/src/components/Cards/StatsCard.vue
+++ b/frontend/src/components/Cards/StatsCard.vue
@@ -0,0 +1,26 @@
+<template>
+  <md-card class="md-card-stats">
+    <md-card-header :data-background-color="dataBackgroundColor">
+      <slot name="header"></slot>
+    </md-card-header>
+
+    <md-card-content>
+      <slot name="content"></slot>
+    </md-card-content>
+
+    <md-card-actions md-alignment="left">
+      <slot name="footer"></slot>
+    </md-card-actions>
+  </md-card>
+</template>
+<script>
+export default {
+  name: "stats-card",
+  props: {
+    dataBackgroundColor: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
--- a/frontend/src/components/Dropdown.vue
+++ b/frontend/src/components/Dropdown.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="dropdown"
+    :class="{ open: isOpen }"
+    @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 class="notification">
+          {{ title }}
+          <b class="caret"></b>
+        </p>
+      </a>
+    </slot>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "drop-down",
+  props: {
+    title: String,
+    icon: String,
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  methods: {
+    toggleDropDown() {
+      this.isOpen = !this.isOpen;
+    },
+    closeDropDown() {
+      this.isOpen = false;
+    },
+  },
+};
+</script>
--- a/frontend/src/components/NotificationPlugin/Notification.vue
+++ b/frontend/src/components/NotificationPlugin/Notification.vue
@@ -0,0 +1,134 @@
+<template>
+  <div
+    @click="close()"
+    data-notify="container"
+    class="alert open alert-with-icon"
+    role="alert"
+    :class="[verticalAlign, horizontalAlign, alertType]"
+    :style="customPosition"
+    data-notify-position="top-center"
+  >
+    <button
+      type="button"
+      aria-hidden="true"
+      class="close"
+      data-notify="dismiss"
+      @click="close"
+    >
+      ×
+    </button>
+    <i data-notify="icon" class="material-icons">{{ icon }}</i>
+    <span data-notify="message" v-html="message"></span>
+  </div>
+</template>
+<script>
+export default {
+  name: "notification",
+  props: {
+    message: String,
+    icon: String,
+    verticalAlign: {
+      type: String,
+      default: "top",
+    },
+    horizontalAlign: {
+      type: String,
+      default: "center",
+    },
+    type: {
+      type: String,
+      default: "info",
+    },
+    timeout: {
+      type: Number,
+      default: 2500,
+    },
+    timestamp: {
+      type: Date,
+      default: () => new Date(),
+    },
+  },
+  data() {
+    return {
+      elmHeight: 0,
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.icon && this.icon.length > 0;
+    },
+    alertType() {
+      return `alert-${this.type}`;
+    },
+    customPosition() {
+      let initialMargin = 20;
+      let alertHeight = this.elmHeight + 10;
+      let sameAlertsCount = this.$notifications.state.filter((alert) => {
+        return (
+          alert.horizontalAlign === this.horizontalAlign &&
+          alert.verticalAlign === this.verticalAlign &&
+          alert.timestamp <= this.timestamp
+        );
+      }).length;
+      let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
+      let styles = {};
+      if (this.verticalAlign === "top") {
+        styles.top = `${pixels}px`;
+      } else {
+        styles.bottom = `${pixels}px`;
+      }
+      return styles;
+    },
+  },
+  methods: {
+    close() {
+      this.$emit("on-close", this.timestamp);
+    },
+  },
+  mounted() {
+    this.elmHeight = this.$el.clientHeight;
+    if (this.timeout) {
+      setTimeout(this.close, this.timeout);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+@media screen and (max-width: 991px) {
+  .alert {
+    width: auto !important;
+    margin: 0 10px;
+
+    &.left {
+      left: 0 !important;
+    }
+    &.right {
+      right: 0 !important;
+    }
+    &.center {
+      margin: 0 10px !important;
+    }
+  }
+}
+
+.alert {
+  z-index: 100;
+  cursor: pointer;
+  position: absolute;
+  width: 41%;
+
+  &.center {
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin: 0 auto;
+  }
+  &.left {
+    left: 20px;
+  }
+  &.right {
+    right: 20px;
+  }
+}
+</style>
--- a/frontend/src/components/NotificationPlugin/Notifications.vue
+++ b/frontend/src/components/NotificationPlugin/Notifications.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="notifications">
+    <transition-group name="list">
+      <notification
+        v-for="notification in notifications"
+        :key="notification.timestamp.getTime()"
+        :message="notification.message"
+        :icon="notification.icon"
+        :type="notification.type"
+        :timestamp="notification.timestamp"
+        :vertical-align="notification.verticalAlign"
+        :horizontal-align="notification.horizontalAlign"
+        @on-close="removeNotification"
+      >
+      </notification>
+    </transition-group>
+  </div>
+</template>
+<script>
+import Notification from "./Notification.vue";
+export default {
+  components: {
+    Notification,
+  },
+  data() {
+    return {
+      notifications: this.$notifications.state,
+    };
+  },
+  methods: {
+    removeNotification(timestamp) {
+      this.$notifications.removeNotification(timestamp);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.list-move {
+  transition: transform 0.3s, opacity 0.4s;
+}
+.list-item {
+  display: inline-block;
+  margin-right: 10px;
+}
+.list-enter-active,
+.list-leave-active {
+  transition: opacity 0.4s;
+}
+.list-enter, .list-leave-to  /* .list-leave-active for <2.1.8 */ {
+  opacity: 0;
+}
+</style>
--- a/frontend/src/components/NotificationPlugin/index.js
+++ b/frontend/src/components/NotificationPlugin/index.js
@@ -0,0 +1,60 @@
+import Notifications from "./Notifications.vue";
+
+const NotificationStore = {
+  state: [], // here the notifications will be added
+
+  removeNotification(timestamp) {
+    const indexToDelete = this.state.findIndex(
+      (n) => n.timestamp === timestamp
+    );
+    if (indexToDelete !== -1) {
+      this.state.splice(indexToDelete, 1);
+    }
+  },
+  addNotification(notification) {
+    notification.timestamp = new Date();
+    notification.timestamp.setMilliseconds(
+      notification.timestamp.getMilliseconds() + this.state.length
+    );
+    this.state.push(notification);
+  },
+  notify(notification) {
+    if (Array.isArray(notification)) {
+      notification.forEach((notificationInstance) => {
+        this.addNotification(notificationInstance);
+      });
+    } else {
+      this.addNotification(notification);
+    }
+  },
+};
+
+var NotificationsPlugin = {
+  install(Vue) {
+    Vue.mixin({
+      data() {
+        return {
+          notificationStore: NotificationStore,
+        };
+      },
+      methods: {
+        notify(notification) {
+          this.notificationStore.notify(notification);
+        },
+      },
+    });
+    Object.defineProperty(Vue.prototype, "$notify", {
+      get() {
+        return this.$root.notify;
+      },
+    });
+    Object.defineProperty(Vue.prototype, "$notifications", {
+      get() {
+        return this.$root.notificationStore;
+      },
+    });
+    Vue.component("Notifications", Notifications);
+  },
+};
+
+export default NotificationsPlugin;
--- a/frontend/src/components/SidebarPlugin/SideBar.vue
+++ b/frontend/src/components/SidebarPlugin/SideBar.vue
@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="sidebar"
+    :data-color="sidebarItemColor"
+    :data-image="sidebarBackgroundImage"
+    :style="sidebarStyle"
+  >
+    <div class="logo">
+      <a href="#" class="simple-text logo-mini">
+        <div class="logo-img">
+          <img :src="imgLogo" alt="" />
+        </div>
+      </a>
+
+      <a
+        href="https://www.creative-tim.com/product/vue-material-dashboard"
+        target="_blank"
+        class="simple-text logo-normal"
+      >
+        {{ title }}
+      </a>
+    </div>
+    <div class="sidebar-wrapper">
+      <slot name="content"></slot>
+      <md-list class="nav">
+        <!--By default vue-router adds an active class to each route link. This way the links are colored when clicked-->
+        <slot>
+          <sidebar-link
+            v-for="(link, index) in sidebarLinks"
+            :key="link.name + index"
+            :to="link.path"
+            :link="link"
+          >
+          </sidebar-link>
+        </slot>
+      </md-list>
+    </div>
+  </div>
+</template>
+<script>
+import SidebarLink from "./SidebarLink.vue";
+
+export default {
+  components: {
+    SidebarLink,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "Vue MD",
+    },
+    sidebarBackgroundImage: {
+      type: String,
+      default: require("@/assets/img/sidebar-2.jpg"),
+    },
+    imgLogo: {
+      type: String,
+      default: require("@/assets/img/vue-logo.png"),
+    },
+    sidebarItemColor: {
+      type: String,
+      default: "green",
+      validator: (value) => {
+        let acceptedValues = ["", "purple", "blue", "green", "orange", "red"];
+        return acceptedValues.indexOf(value) !== -1;
+      },
+    },
+    sidebarLinks: {
+      type: Array,
+      default: () => [],
+    },
+    autoClose: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  provide() {
+    return {
+      autoClose: this.autoClose,
+    };
+  },
+  computed: {
+    sidebarStyle() {
+      return {
+        backgroundImage: `url(${this.sidebarBackgroundImage})`,
+      };
+    },
+  },
+};
+</script>
+<style>
+@media screen and (min-width: 991px) {
+  .nav-mobile-menu {
+    display: none;
+  }
+}
+</style>
--- a/frontend/src/components/SidebarPlugin/SidebarLink.vue
+++ b/frontend/src/components/SidebarPlugin/SidebarLink.vue
@@ -0,0 +1,53 @@
+<template>
+  <li class="md-list-item">
+    <router-link
+      class="md-list-item-router md-list-item-container md-button-clean"
+      @click="hideSidebar"
+      v-bind="$attrs"
+    >
+      <div class="md-list-item-content md-ripple">
+        <slot>
+          <md-icon>{{ link.icon }}</md-icon>
+          <p>{{ link.name }}</p>
+        </slot>
+      </div>
+    </router-link>
+  </li>
+</template>
+<script>
+export default {
+  inject: {
+    autoClose: {
+      default: true,
+    },
+  },
+  props: {
+    link: {
+      type: [String, Object],
+      default: () => {
+        return {
+          name: "",
+          path: "",
+          icon: "",
+        };
+      },
+    },
+    tag: {
+      type: String,
+      default: "router-link",
+    },
+  },
+  methods: {
+    hideSidebar() {
+      if (
+        this.autoClose &&
+        this.$sidebar &&
+        this.$sidebar.showSidebar === true
+      ) {
+        this.$sidebar.displaySidebar(false);
+      }
+    },
+  },
+};
+</script>
+<style></style>
--- a/frontend/src/components/SidebarPlugin/index.js
+++ b/frontend/src/components/SidebarPlugin/index.js
@@ -0,0 +1,31 @@
+import Sidebar from "./SideBar.vue";
+import SidebarLink from "./SidebarLink.vue";
+
+const SidebarStore = {
+  showSidebar: false,
+  displaySidebar(value) {
+    this.showSidebar = value;
+  },
+};
+
+const SidebarPlugin = {
+  install(Vue) {
+    Vue.mixin({
+      data() {
+        return {
+          sidebarStore: SidebarStore,
+        };
+      },
+    });
+
+    Object.defineProperty(Vue.prototype, "$sidebar", {
+      get() {
+        return this.$root.sidebarStore;
+      },
+    });
+    Vue.component("side-bar", Sidebar);
+    Vue.component("sidebar-link", SidebarLink);
+  },
+};
+
+export default SidebarPlugin;
--- a/frontend/src/components/Tables/NavTabsTable.vue
+++ b/frontend/src/components/Tables/NavTabsTable.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <md-table v-model="users" @md-selected="onSelect">
+      <md-table-row
+        slot="md-table-row"
+        slot-scope="{ item }"
+        md-selectable="multiple"
+        md-auto-select
+      >
+        <md-table-cell>{{ item.name }}</md-table-cell>
+        <md-table-cell>
+          <md-button class="md-just-icon md-simple md-primary">
+            <md-icon>edit</md-icon>
+            <md-tooltip md-direction="top">Edit</md-tooltip>
+          </md-button>
+          <md-button class="md-just-icon md-simple md-danger">
+            <md-icon>close</md-icon>
+            <md-tooltip md-direction="top">Close</md-tooltip>
+          </md-button>
+        </md-table-cell>
+      </md-table-row>
+    </md-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "nav-tabs-table",
+  data() {
+    return {
+      selected: [],
+      users: [
+        {
+          name: 'Sign contract for "What are conference organizers afraid of?"',
+        },
+        {
+          name: "Lines From Great Russian Literature? Or E-mails From My Boss?",
+        },
+        {
+          name: "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (items) {
+      this.selected = items;
+    },
+  },
+};
+</script>
--- a/frontend/src/components/Tables/OrderedTable.vue
+++ b/frontend/src/components/Tables/OrderedTable.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <md-table v-model="users" :table-header-color="tableHeaderColor">
+      <md-table-row slot="md-table-row" slot-scope="{ item }">
+        <md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
+        <md-table-cell md-label="Name">{{ item.name }}</md-table-cell>
+        <md-table-cell md-label="Salary">{{ item.salary }}</md-table-cell>
+        <md-table-cell md-label="Country">{{ item.country }}</md-table-cell>
+        <md-table-cell md-label="City">{{ item.city }}</md-table-cell>
+      </md-table-row>
+    </md-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ordered-table",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      selected: [],
+      users: [
+        {
+          id: 1,
+          name: "Dakota Rice",
+          salary: "$36,738",
+          country: "Niger",
+          city: "Oud-Turnhout",
+        },
+        {
+          id: 2,
+          name: "Minerva Hooper",
+          salary: "$23,738",
+          country: "Curaçao",
+          city: "Sinaai-Waas",
+        },
+        {
+          id: 3,
+          name: "Sage Rodriguez",
+          salary: "$56,142",
+          country: "Netherlands",
+          city: "Overland Park",
+        },
+        {
+          id: 4,
+          name: "Philip Chaney",
+          salary: "$38,735",
+          country: "Korea, South",
+          city: "Gloucester",
+        },
+      ],
+    };
+  },
+};
+</script>
--- a/frontend/src/components/Tables/SimpleTable.vue
+++ b/frontend/src/components/Tables/SimpleTable.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <md-table v-model="users" :table-header-color="tableHeaderColor">
+      <md-table-row slot="md-table-row" slot-scope="{ item }">
+        <md-table-cell md-label="Name">{{ item.name }}</md-table-cell>
+        <md-table-cell md-label="Country">{{ item.country }}</md-table-cell>
+        <md-table-cell md-label="City">{{ item.city }}</md-table-cell>
+        <md-table-cell md-label="Salary">{{ item.salary }}</md-table-cell>
+      </md-table-row>
+    </md-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "simple-table",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      selected: [],
+      users: [
+        {
+          name: "Dakota Rice",
+          salary: "$36,738",
+          country: "Niger",
+          city: "Oud-Turnhout",
+        },
+        {
+          name: "Minerva Hooper",
+          salary: "$23,738",
+          country: "Curaçao",
+          city: "Sinaai-Waas",
+        },
+        {
+          name: "Sage Rodriguez",
+          salary: "$56,142",
+          country: "Netherlands",
+          city: "Overland Park",
+        },
+        {
+          name: "Philip Chaney",
+          salary: "$38,735",
+          country: "Korea, South",
+          city: "Gloucester",
+        },
+        {
+          name: "Doris Greene",
+          salary: "$63,542",
+          country: "Malawi",
+          city: "Feldkirchen in Kārnten",
+        },
+        {
+          name: "Mason Porter",
+          salary: "$78,615",
+          country: "Chile",
+          city: "Gloucester",
+        },
+      ],
+    };
+  },
+};
+</script>
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -0,0 +1,18 @@
+// Cards
+import ChartCard from "./Cards/ChartCard.vue";
+import NavTabsCard from "./Cards/NavTabsCard.vue";
+import StatsCard from "./Cards/StatsCard.vue";
+
+// Tables
+import NavTabsTable from "./Tables/NavTabsTable.vue";
+import OrderedTable from "./Tables/OrderedTable.vue";
+import SimpleTable from "./Tables/SimpleTable.vue";
+
+export {
+  ChartCard,
+  NavTabsCard,
+  StatsCard,
+  NavTabsTable,
+  OrderedTable,
+  SimpleTable,
+};
--- a/frontend/src/globalComponents.js
+++ b/frontend/src/globalComponents.js
@@ -0,0 +1,13 @@
+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/frontend/src/globalDirectives.js
+++ b/frontend/src/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/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,56 @@
+// =========================================================
+// * Vue Material Dashboard - v1.5.1
+// =========================================================
+//
+// * Product Page: https://www.creative-tim.com/product/vue-material-dashboard
+// * Copyright 2023 Creative Tim (https://www.creative-tim.com)
+// * Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)
+//
+// * Coded by Creative Tim
+//
+// =========================================================
+//
+// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from "vue";
+import VueRouter from "vue-router";
+import App from "./App";
+
+// router setup
+import routes from "./routes/routes";
+
+// Plugins
+import GlobalComponents from "./globalComponents";
+import GlobalDirectives from "./globalDirectives";
+import Notifications from "./components/NotificationPlugin";
+
+// MaterialDashboard plugin
+import MaterialDashboard from "./material-dashboard";
+
+import Chartist from "chartist";
+
+// configure router
+const router = new VueRouter({
+  routes, // short for routes: routes
+  linkExactActiveClass: "nav-item active",
+});
+
+Vue.prototype.$Chartist = Chartist;
+
+Vue.use(VueRouter);
+Vue.use(MaterialDashboard);
+Vue.use(GlobalComponents);
+Vue.use(GlobalDirectives);
+Vue.use(Notifications);
+
+/* eslint-disable no-new */
+new Vue({
+  el: "#app",
+  render: (h) => h(App),
+  router,
+  data: {
+    Chartist: Chartist,
+  },
+});
--- a/frontend/src/material-dashboard.js
+++ b/frontend/src/material-dashboard.js
@@ -0,0 +1,20 @@
+// Sidebar on the right. Used as a local plugin in DashboardLayout.vue
+import SideBar from "./components/SidebarPlugin";
+
+// asset imports
+import VueMaterial from "vue-material";
+import "vue-material/dist/vue-material.css";
+import "./assets/scss/material-dashboard.scss";
+
+// library auto imports
+import "es6-promise/auto";
+
+/**
+ * This is the main Light Bootstrap Dashboard Vue plugin where dashboard related plugins are registerd.
+ */
+export default {
+  install(Vue) {
+    Vue.use(SideBar);
+    Vue.use(VueMaterial);
+  },
+};
--- a/frontend/src/pages/API_KEY.js
+++ b/frontend/src/pages/API_KEY.js
@@ -0,0 +1 @@
+export const API_KEY = "AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU";
--- a/frontend/src/pages/Dashboard.vue
+++ b/frontend/src/pages/Dashboard.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-33"
+      >
+        <chart-card
+          :chart-data="dailySalesChart.data"
+          :chart-options="dailySalesChart.options"
+          :chart-type="'Line'"
+          data-background-color="blue"
+        >
+          <template slot="content">
+            <h4 class="title">Daily Sales</h4>
+            <p class="category">
+              <span class="text-success"
+                ><i class="fas fa-long-arrow-alt-up"></i> 55%
+              </span>
+              increase in today sales.
+            </p>
+          </template>
+
+          <template slot="footer">
+            <div class="stats">
+              <md-icon>access_time</md-icon>
+              updated 4 minutes ago
+            </div>
+          </template>
+        </chart-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-33"
+      >
+        <chart-card
+          :chart-data="emailsSubscriptionChart.data"
+          :chart-options="emailsSubscriptionChart.options"
+          :chart-responsive-options="emailsSubscriptionChart.responsiveOptions"
+          :chart-type="'Bar'"
+          data-background-color="red"
+        >
+          <template slot="content">
+            <h4 class="title">Email Subscription</h4>
+            <p class="category">Last Campaign Performance</p>
+          </template>
+
+          <template slot="footer">
+            <div class="stats">
+              <md-icon>access_time</md-icon>
+              updated 10 days ago
+            </div>
+          </template>
+        </chart-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-33"
+      >
+        <chart-card
+          :chart-data="dataCompletedTasksChart.data"
+          :chart-options="dataCompletedTasksChart.options"
+          :chart-type="'Line'"
+          data-background-color="green"
+        >
+          <template slot="content">
+            <h4 class="title">Completed Tasks</h4>
+            <p class="category">Last Campaign Performance</p>
+          </template>
+
+          <template slot="footer">
+            <div class="stats">
+              <md-icon>access_time</md-icon>
+              campaign sent 26 minutes ago
+            </div>
+          </template>
+        </chart-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-50 md-xsmall-size-100 md-size-25"
+      >
+        <stats-card data-background-color="green">
+          <template slot="header">
+            <md-icon>store</md-icon>
+          </template>
+
+          <template slot="content">
+            <p class="category">Revenue</p>
+            <h3 class="title">$34,245</h3>
+          </template>
+
+          <template slot="footer">
+            <div class="stats">
+              <md-icon>date_range</md-icon>
+              Last 24 Hours
+            </div>
+          </template>
+        </stats-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-50 md-xsmall-size-100 md-size-25"
+      >
+        <stats-card data-background-color="orange">
+          <template slot="header">
+            <md-icon>content_copy</md-icon>
+          </template>
+
+          <template slot="content">
+            <p class="category">Used Space</p>
+            <h3 class="title">
+              49/50
+              <small>GB</small>
+            </h3>
+          </template>
+
+          <template slot="footer">
+            <div class="stats">
+              <md-icon class="text-danger">warning</md-icon>
+              <a href="#pablo">Get More Space...</a>
+            </div>
+          </template>
+        </stats-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-50 md-xsmall-size-100 md-size-25"
+      >
+        <stats-card data-background-color="red">
+          <template slot="header">
+            <md-icon>info_outline</md-icon>
+          </template>
+
+          <template slot="content">
+            <p class="category">Fixed Issues</p>
+            <h3 class="title">75</h3>
+          </template>
+
+          <template slot="footer">
+            <div class="stats">
+              <md-icon>local_offer</md-icon>
+              Tracked from Github
+            </div>
+          </template>
+        </stats-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-50 md-xsmall-size-100 md-size-25"
+      >
+        <stats-card data-background-color="blue">
+          <template slot="header">
+            <i class="fab fa-twitter"></i>
+          </template>
+
+          <template slot="content">
+            <p class="category">Folowers</p>
+            <h3 class="title">+245</h3>
+          </template>
+
+          <template slot="footer">
+            <div class="stats">
+              <md-icon>update</md-icon>
+              Just Updated
+            </div>
+          </template>
+        </stats-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50"
+      >
+        <md-card>
+          <md-card-header data-background-color="orange">
+            <h4 class="title">Employees Stats</h4>
+            <p class="category">New employees on 15th September, 2016</p>
+          </md-card-header>
+          <md-card-content>
+            <ordered-table table-header-color="orange"></ordered-table>
+          </md-card-content>
+        </md-card>
+      </div>
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50"
+      >
+        <nav-tabs-card>
+          <template slot="content">
+            <span class="md-nav-tabs-title">Tasks:</span>
+            <md-tabs class="md-success" md-alignment="left">
+              <md-tab id="tab-home" md-label="Bugs" md-icon="bug_report">
+                <nav-tabs-table></nav-tabs-table>
+              </md-tab>
+
+              <md-tab id="tab-pages" md-label="Website" md-icon="code">
+                <nav-tabs-table></nav-tabs-table>
+              </md-tab>
+
+              <md-tab id="tab-posts" md-label="server" md-icon="cloud">
+                <nav-tabs-table></nav-tabs-table>
+              </md-tab>
+            </md-tabs>
+          </template>
+        </nav-tabs-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  StatsCard,
+  ChartCard,
+  NavTabsCard,
+  NavTabsTable,
+  OrderedTable,
+} from "@/components";
+
+export default {
+  components: {
+    StatsCard,
+    ChartCard,
+    NavTabsCard,
+    NavTabsTable,
+    OrderedTable,
+  },
+  data() {
+    return {
+      dailySalesChart: {
+        data: {
+          labels: ["M", "T", "W", "T", "F", "S", "S"],
+          series: [[12, 17, 7, 17, 23, 18, 38]],
+        },
+        options: {
+          lineSmooth: this.$Chartist.Interpolation.cardinal({
+            tension: 0,
+          }),
+          low: 0,
+          high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+          chartPadding: {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+          },
+        },
+      },
+      dataCompletedTasksChart: {
+        data: {
+          labels: ["12am", "3pm", "6pm", "9pm", "12pm", "3am", "6am", "9am"],
+          series: [[230, 750, 450, 300, 280, 240, 200, 190]],
+        },
+
+        options: {
+          lineSmooth: this.$Chartist.Interpolation.cardinal({
+            tension: 0,
+          }),
+          low: 0,
+          high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+          chartPadding: {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+          },
+        },
+      },
+      emailsSubscriptionChart: {
+        data: {
+          labels: [
+            "Ja",
+            "Fe",
+            "Ma",
+            "Ap",
+            "Mai",
+            "Ju",
+            "Jul",
+            "Au",
+            "Se",
+            "Oc",
+            "No",
+            "De",
+          ],
+          series: [
+            [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
+          ],
+        },
+        options: {
+          axisX: {
+            showGrid: false,
+          },
+          low: 0,
+          high: 1000,
+          chartPadding: {
+            top: 0,
+            right: 5,
+            bottom: 0,
+            left: 0,
+          },
+        },
+        responsiveOptions: [
+          [
+            "screen and (max-width: 640px)",
+            {
+              seriesBarDistance: 5,
+              axisX: {
+                labelInterpolationFnc: function (value) {
+                  return value[0];
+                },
+              },
+            },
+          ],
+        ],
+      },
+    };
+  },
+};
+</script>
--- a/frontend/src/pages/Icons.vue
+++ b/frontend/src/pages/Icons.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div class="md-layout-item">
+        <md-card class="md-card-plain">
+          <md-card-header data-background-color="green">
+            <h4 class="title">Material Design Icons</h4>
+            <p class="category">
+              Handcrafted by our friends from
+              <a target="_blank" href="https://design.google.com/icons/"
+                >Google</a
+              >
+            </p>
+          </md-card-header>
+
+          <md-card-content>
+            <div class="iframe-container hidden-sm">
+              <iframe src="https://vuematerial.io/components/icon">
+                <p>Your browser does not support iframes.</p>
+              </iframe>
+            </div>
+            <div class="hidden-md">
+              <h5>
+                The icons are visible on Desktop mode inside an iframe. Since
+                the iframe is not working on Mobile and Tablets please visit the
+                icons on their original page on Google. Check the
+                <a href="https://design.google.com/icons/" target="_blank"
+                  >Material Icons</a
+                >
+              </h5>
+            </div>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
--- a/frontend/src/pages/Layout/Content.vue
+++ b/frontend/src/pages/Layout/Content.vue
@@ -0,0 +1,20 @@
+<template>
+  <transition name="fade" mode="out-in">
+    <router-view></router-view>
+  </transition>
+</template>
+<script>
+export default {};
+</script>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
+}
+
+.fade-enter,
+  .fade-leave-to
+    /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+}
+</style>
--- a/frontend/src/pages/Layout/ContentFooter.vue
+++ b/frontend/src/pages/Layout/ContentFooter.vue
@@ -0,0 +1,32 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <nav>
+        <ul>
+          <li>
+            <a href="https://www.creative-tim.com">Creative Tim</a>
+          </li>
+          <li>
+            <a href="https://creative-tim.com/presentation"> About Us </a>
+          </li>
+          <li>
+            <a href="http://blog.creative-tim.com"> Blog </a>
+          </li>
+          <li>
+            <a href="https://www.creative-tim.com/license"> Licenses </a>
+          </li>
+        </ul>
+      </nav>
+      <div class="copyright text-center">
+        &copy; {{ new Date().getFullYear() }}
+        <a href="https://www.creative-tim.com/?ref=mdf-vuejs" target="_blank"
+          >Creative Tim</a
+        >, made with <i class="fa fa-heart heart"></i> for a better web
+      </div>
+    </div>
+  </footer>
+</template>
+<script>
+export default {};
+</script>
+<style></style>
--- a/frontend/src/pages/Layout/DashboardLayout.vue
+++ b/frontend/src/pages/Layout/DashboardLayout.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
+    <notifications></notifications>
+
+    <side-bar
+      :sidebar-item-color="sidebarBackground"
+      :sidebar-background-image="sidebarBackgroundImage"
+    >
+      <mobile-menu slot="content"></mobile-menu>
+      <sidebar-link to="/dashboard">
+        <md-icon>dashboard</md-icon>
+        <p>Dashboard</p>
+      </sidebar-link>
+      <sidebar-link to="/user">
+        <md-icon>person</md-icon>
+        <p>User Profile</p>
+      </sidebar-link>
+      <sidebar-link to="/table">
+        <md-icon>content_paste</md-icon>
+        <p>Table list</p>
+      </sidebar-link>
+      <sidebar-link to="/typography">
+        <md-icon>library_books</md-icon>
+        <p>Typography</p>
+      </sidebar-link>
+      <sidebar-link to="/icons">
+        <md-icon>bubble_chart</md-icon>
+        <p>Icons</p>
+      </sidebar-link>
+      <sidebar-link to="/maps">
+        <md-icon>location_on</md-icon>
+        <p>Maps</p>
+      </sidebar-link>
+      <sidebar-link to="/notifications">
+        <md-icon>notifications</md-icon>
+        <p>Notifications</p>
+      </sidebar-link>
+      <sidebar-link to="/upgrade" class="active-pro">
+        <md-icon>unarchive</md-icon>
+        <p>Upgrade to PRO</p>
+      </sidebar-link>
+    </side-bar>
+
+    <div class="main-panel">
+      <top-navbar></top-navbar>
+
+      <fixed-plugin
+        :color.sync="sidebarBackground"
+        :image.sync="sidebarBackgroundImage"
+      >
+      </fixed-plugin>
+
+      <dashboard-content> </dashboard-content>
+
+      <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import TopNavbar from "./TopNavbar.vue";
+import ContentFooter from "./ContentFooter.vue";
+import DashboardContent from "./Content.vue";
+import MobileMenu from "@/pages/Layout/MobileMenu.vue";
+import FixedPlugin from "./Extra/FixedPlugin.vue";
+
+export default {
+  components: {
+    TopNavbar,
+    DashboardContent,
+    ContentFooter,
+    MobileMenu,
+    FixedPlugin,
+  },
+  data() {
+    return {
+      sidebarBackground: "green",
+      sidebarBackgroundImage: require("@/assets/img/sidebar-2.jpg"),
+    };
+  },
+};
+</script>
--- a/frontend/src/pages/Layout/Extra/FixedPlugin.vue
+++ b/frontend/src/pages/Layout/Extra/FixedPlugin.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="fixed-plugin" v-click-outside="closeDropDown">
+    <div class="dropdown show-dropdown" :class="{ show: isOpen }">
+      <a data-toggle="dropdown">
+        <i class="fa fa-cog fa-2x" @click="toggleDropDown"> </i>
+      </a>
+      <ul class="dropdown-menu" :class="{ show: isOpen }">
+        <li class="header-title">Sidebar Filters</li>
+        <li class="adjustments-line text-center">
+          <span
+            v-for="item in sidebarColors"
+            :key="item.color"
+            class="badge filter"
+            :class="[`badge-${item.color}`, { active: item.active }]"
+            :data-color="item.color"
+            @click="changeSidebarBackground(item)"
+          >
+          </span>
+        </li>
+        <li class="header-title">Images</li>
+        <li
+          v-for="item in sidebarImages"
+          :key="item.image"
+          :class="{ active: item.active }"
+          @click="changeSidebarImage(item)"
+        >
+          <a class="img-holder switch-trigger">
+            <img :src="item.image" alt="" />
+          </a>
+        </li>
+
+        <li class="button-container">
+          <div class="">
+            <md-button
+              class="md-success md-block"
+              :href="freeUrl"
+              target="_blank"
+              >Free Download</md-button
+            >
+          </div>
+        </li>
+
+        <li class="button-container">
+          <div class="">
+            <md-button
+              class="md-block md-primary"
+              :href="documentationLink"
+              target="_blank"
+              >Documentation</md-button
+            >
+          </div>
+        </li>
+
+        <li class="header-title d-flex justify-content-center">
+          Thank you for sharing!
+        </li>
+
+        <li class="button-container">
+          <social-sharing
+            :url="shareUrl"
+            inline-template
+            title="Vue Material Dashboard - Admin Template for Vue.js"
+            hashtags="vuejs, dashboard, vuematerial"
+            twitter-user="creativetim"
+          >
+            <div class="centered-buttons">
+              <ShareNetwork
+                title=""
+                url="https://www.creative-tim.com/product/vue-material-dashboard"
+                network="facebook"
+                class="md-button md-round md-just-icon md-facebook"
+              >
+                <i class="fab fa-facebook-f"></i>
+              </ShareNetwork>
+              <ShareNetwork
+                url="https://www.creative-tim.com/product/vue-material-dashboard"
+                title=""
+                network="twitter"
+                class="md-button md-round md-just-icon md-twitter"
+              >
+                <i class="fab fa-twitter"></i>
+              </ShareNetwork>
+            </div>
+          </social-sharing>
+        </li>
+        <li class="github-buttons">
+          <gh-btns-star
+            slug="creativetimofficial/vue-material-dashboard"
+            show-count
+          ></gh-btns-star>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import SocialSharing from "vue-social-sharing";
+import VueGitHubButtons from "vue-github-buttons";
+import "vue-github-buttons/dist/vue-github-buttons.css";
+
+Vue.use(SocialSharing);
+Vue.use(VueGitHubButtons, { useCache: true });
+export default {
+  components: { SocialSharing },
+  data() {
+    return {
+      documentationLink:
+        "https://creativetimofficial.github.io/vue-material-dashboard/documentation",
+      shareUrl: "https://www.creative-tim.com/product/vue-material-dashboard",
+      buyUrl: "",
+      freeUrl: "https://www.creative-tim.com/product/vue-material-dashboard",
+      isOpen: false,
+      sidebarColors: [
+        { color: "purple", active: false },
+        { color: "blue", active: false },
+        { color: "green", active: true },
+        { color: "orange", active: false },
+        { color: "red", active: false },
+      ],
+      sidebarImages: [
+        { image: require("@/assets/img/sidebar-1.jpg"), active: false },
+        { image: require("@/assets/img/sidebar-2.jpg"), active: true },
+        { image: require("@/assets/img/sidebar-3.jpg"), active: false },
+        { image: require("@/assets/img/sidebar-4.jpg"), active: false },
+      ],
+    };
+  },
+  methods: {
+    toggleDropDown() {
+      this.isOpen = !this.isOpen;
+    },
+    closeDropDown() {
+      this.isOpen = false;
+    },
+    toggleList(list, itemToActivate) {
+      list.forEach((listItem) => {
+        listItem.active = false;
+      });
+      itemToActivate.active = true;
+    },
+    updateValue(name, val) {
+      this.$emit(`update:${name}`, val);
+    },
+    changeSidebarBackground(item) {
+      this.$emit("update:color", item.color);
+      this.toggleList(this.sidebarColors, item);
+    },
+    changeSidebarImage(item) {
+      this.$emit("update:image", item.image);
+      this.toggleList(this.sidebarImages, item);
+    },
+  },
+};
+</script>
+<style>
+.centered-row {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.button-container .btn {
+  margin-right: 10px;
+}
+
+.centered-buttons {
+  display: flex;
+  justify-content: center;
+}
+</style>
--- a/frontend/src/pages/Layout/MobileMenu.vue
+++ b/frontend/src/pages/Layout/MobileMenu.vue
@@ -0,0 +1,58 @@
+<template>
+  <ul class="nav nav-mobile-menu">
+    <li>
+      <md-field>
+        <label>Search</label>
+        <md-input v-model="search" type="text"></md-input>
+      </md-field>
+    </li>
+    <li>
+      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <i class="material-icons">dashboard</i>
+        <p>Dashboard</p></a
+      >
+    </li>
+    <li>
+      <drop-down>
+        <a slot="title" class="dropdown-toggle" data-toggle="dropdown">
+          <i class="material-icons">notifications</i>
+          <span class="notification">5</span>
+          <p>Notifications</p>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-right">
+          <li><a href="#">Mike John responded to your email</a></li>
+          <li><a href="#">You have 5 new tasks</a></li>
+          <li><a href="#">You're now friend with Andrew</a></li>
+          <li><a href="#">Another Notification</a></li>
+          <li><a href="#">Another One</a></li>
+        </ul>
+      </drop-down>
+    </li>
+    <li>
+      <a href="#" data-toggle="dropdown" class="dropdown-toggle"
+        ><i class="material-icons">person</i>
+        <p>Profile</p></a
+      >
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      search: null,
+      selectedEmployee: null,
+      employees: [
+        "Jim Halpert",
+        "Dwight Schrute",
+        "Michael Scott",
+        "Pam Beesly",
+        "Angela Martin",
+        "Kelly Kapoor",
+        "Ryan Howard",
+        "Kevin Malone",
+      ],
+    };
+  },
+};
+</script>
--- a/frontend/src/pages/Layout/TopNavbar.vue
+++ b/frontend/src/pages/Layout/TopNavbar.vue
@@ -0,0 +1,115 @@
+<template>
+  <md-toolbar md-elevation="0" class="md-transparent">
+    <div class="md-toolbar-row">
+      <div class="md-toolbar-section-start">
+        <h3 class="md-title">{{ $route.name }}</h3>
+      </div>
+      <div class="md-toolbar-section-end">
+        <md-button
+          class="md-just-icon md-simple md-toolbar-toggle"
+          :class="{ toggled: $sidebar.showSidebar }"
+          @click="toggleSidebar"
+        >
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </md-button>
+
+        <div class="md-collapse">
+          <div class="md-autocomplete">
+            <md-autocomplete
+              class="search"
+              v-model="selectedEmployee"
+              :md-options="employees"
+            >
+              <label>Search...</label>
+            </md-autocomplete>
+          </div>
+          <md-list>
+            <md-list-item href="#/">
+              <i class="material-icons">dashboard</i>
+              <p class="hidden-lg hidden-md">Dashboard</p>
+            </md-list-item>
+
+            <!-- <md-list-item href="#/notifications" class="dropdown">
+              <drop-down>
+                <a slot="title" class="dropdown-toggle" data-toggle="dropdown">
+                  <i class="material-icons">notifications</i>
+                  <span class="notification">5</span>
+                  <p class="hidden-lg hidden-md">Notifications</p>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-right">
+                  <li><a href="#">Mike John responded to your email</a></li>
+                  <li><a href="#">You have 5 new tasks</a></li>
+                  <li><a href="#">You're now friend with Andrew</a></li>
+                  <li><a href="#">Another Notification</a></li>
+                  <li><a href="#">Another One</a></li>
+                </ul>
+              </drop-down>
+            </md-list-item> -->
+
+            <li class="md-list-item">
+              <a
+                href="#/notifications"
+                class="md-list-item-router md-list-item-container md-button-clean dropdown"
+              >
+                <div class="md-list-item-content">
+                  <drop-down>
+                    <md-button
+                      slot="title"
+                      class="md-button md-just-icon md-simple"
+                      data-toggle="dropdown"
+                    >
+                      <md-icon>notifications</md-icon>
+                      <span class="notification">5</span>
+                      <p class="hidden-lg hidden-md">Notifications</p>
+                    </md-button>
+                    <ul class="dropdown-menu dropdown-menu-right">
+                      <li><a href="#">Mike John responded to your email</a></li>
+                      <li><a href="#">You have 5 new tasks</a></li>
+                      <li><a href="#">You're now friend with Andrew</a></li>
+                      <li><a href="#">Another Notification</a></li>
+                      <li><a href="#">Another One</a></li>
+                    </ul>
+                  </drop-down>
+                </div>
+              </a>
+            </li>
+
+            <md-list-item href="#/user">
+              <i class="material-icons">person</i>
+              <p class="hidden-lg hidden-md">Profile</p>
+            </md-list-item>
+          </md-list>
+        </div>
+      </div>
+    </div>
+  </md-toolbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedEmployee: null,
+      employees: [
+        "Jim Halpert",
+        "Dwight Schrute",
+        "Michael Scott",
+        "Pam Beesly",
+        "Angela Martin",
+        "Kelly Kapoor",
+        "Ryan Howard",
+        "Kevin Malone",
+      ],
+    };
+  },
+  methods: {
+    toggleSidebar() {
+      this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
+    },
+  },
+};
+</script>
+
+<style lang="css"></style>
--- a/frontend/src/pages/Maps.vue
+++ b/frontend/src/pages/Maps.vue
@@ -0,0 +1,91 @@
+<template>
+  <div id="map"></div>
+</template>
+
+<script>
+import { API_KEY } from "./API_KEY";
+import { Loader, LoaderOptions } from "google-maps";
+
+const loader = new Loader(API_KEY);
+export default {
+  mounted() {
+    loader.load().then(function (google) {
+      var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
+      var mapOptions = {
+        zoom: 13,
+        center: myLatlng,
+        scrollwheel: false, // we disable de scroll over the map, it is a really annoing when you scroll through page
+        styles: [
+          {
+            featureType: "water",
+            stylers: [
+              { saturation: 43 },
+              { lightness: -11 },
+              { hue: "#0088ff" },
+            ],
+          },
+          {
+            featureType: "road",
+            elementType: "geometry.fill",
+            stylers: [
+              { hue: "#ff0000" },
+              { saturation: -100 },
+              { lightness: 99 },
+            ],
+          },
+          {
+            featureType: "road",
+            elementType: "geometry.stroke",
+            stylers: [{ color: "#808080" }, { lightness: 54 }],
+          },
+          {
+            featureType: "landscape.man_made",
+            elementType: "geometry.fill",
+            stylers: [{ color: "#ece2d9" }],
+          },
+          {
+            featureType: "poi.park",
+            elementType: "geometry.fill",
+            stylers: [{ color: "#ccdca1" }],
+          },
+          {
+            featureType: "road",
+            elementType: "labels.text.fill",
+            stylers: [{ color: "#767676" }],
+          },
+          {
+            featureType: "road",
+            elementType: "labels.text.stroke",
+            stylers: [{ color: "#ffffff" }],
+          },
+          { featureType: "poi", stylers: [{ visibility: "off" }] },
+          {
+            featureType: "landscape.natural",
+            elementType: "geometry.fill",
+            stylers: [{ visibility: "on" }, { color: "#b8cb93" }],
+          },
+          { featureType: "poi.park", stylers: [{ visibility: "on" }] },
+          {
+            featureType: "poi.sports_complex",
+            stylers: [{ visibility: "on" }],
+          },
+          { featureType: "poi.medical", stylers: [{ visibility: "on" }] },
+          {
+            featureType: "poi.business",
+            stylers: [{ visibility: "simplified" }],
+          },
+        ],
+      };
+      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
+
+      var marker = new google.maps.Marker({
+        position: myLatlng,
+        title: "Hello World!",
+      });
+
+      // To add the marker to the map, call setMap();
+      marker.setMap(map);
+    });
+  },
+};
+</script>
--- a/frontend/src/pages/Notifications.vue
+++ b/frontend/src/pages/Notifications.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div class="md-layout-item">
+        <md-card>
+          <md-card-header data-background-color="green">
+            <h4 class="title">Notifications</h4>
+            <p class="category">
+              Handcrafted by us with <i class="fa fa-heart heart"></i>
+            </p>
+          </md-card-header>
+          <md-card-content>
+            <div class="md-layout">
+              <div class="md-layout-item md-medium-size-100">
+                <h5>Notifications Style</h5>
+                <div class="alert alert-info">
+                  <span>This is a plain notification</span>
+                </div>
+                <div class="alert alert-info">
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <span>This is a notification with close button.</span>
+                </div>
+                <div
+                  class="alert alert-info alert-with-icon"
+                  data-notify="container"
+                >
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <i data-notify="icon" class="material-icons">add_alert</i>
+                  <span data-notify="message"
+                    >This is a notification with close button and icon.</span
+                  >
+                </div>
+                <div
+                  class="alert alert-info alert-with-icon"
+                  data-notify="container"
+                >
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <i data-notify="icon" class="material-icons">add_alert</i>
+                  <span data-notify="message"
+                    >This is a notification with close button and icon and have
+                    many lines. You can see that the icon and the close button
+                    are always vertically aligned. This is a beautiful
+                    notification. So you don't have to worry about the
+                    style.</span
+                  >
+                </div>
+              </div>
+              <div class="md-layout-item md-medium-size-100">
+                <h5>Notification states</h5>
+                <div class="alert alert-info">
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <span
+                    ><b> Info - </b> This is a regular notification made with
+                    ".alert-info"</span
+                  >
+                </div>
+                <div class="alert alert-success">
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <span
+                    ><b> Success - </b> This is a regular notification made with
+                    ".alert-success"</span
+                  >
+                </div>
+                <div class="alert alert-warning">
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <span
+                    ><b> Warning - </b> This is a regular notification made with
+                    ".alert-warning"</span
+                  >
+                </div>
+                <div class="alert alert-danger">
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <span
+                    ><b> Danger - </b> This is a regular notification made with
+                    ".alert-danger"</span
+                  >
+                </div>
+                <div class="alert alert-primary">
+                  <button type="button" aria-hidden="true" class="close">
+                    ×
+                  </button>
+                  <span
+                    ><b> Primary - </b> This is a regular notification made with
+                    ".alert-primary"</span
+                  >
+                </div>
+              </div>
+
+              <div class="md-layout-item md-size-100">
+                <div class="places-buttons text-center">
+                  <h5 class="text-center">
+                    Notifications Places
+                    <p class="category">Click to view notifications</p>
+                  </h5>
+                  <md-button
+                    class="md-primary"
+                    @click="notifyVue('top', 'left')"
+                    >Top Left</md-button
+                  >
+                  <md-button
+                    class="md-primary"
+                    @click="notifyVue('top', 'center')"
+                    >Top Center</md-button
+                  >
+                  <md-button
+                    class="md-primary"
+                    @click="notifyVue('top', 'right')"
+                    >Top Right</md-button
+                  >
+                  <md-button
+                    class="md-primary"
+                    @click="notifyVue('bottom', 'left')"
+                    >Bottom Left</md-button
+                  >
+                  <md-button
+                    class="md-primary"
+                    @click="notifyVue('bottom', 'center')"
+                    >Bottom Center</md-button
+                  >
+                  <md-button
+                    class="md-primary"
+                    @click="notifyVue('bottom', 'right')"
+                    >Bottom Right</md-button
+                  >
+                </div>
+              </div>
+            </div>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: ["", "info", "success", "warning", "danger"],
+      notifications: {
+        topCenter: false,
+      },
+    };
+  },
+  methods: {
+    notifyVue(verticalAlign, horizontalAlign) {
+      var color = Math.floor(Math.random() * 4 + 1);
+      this.$notify({
+        message:
+          "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer.",
+        icon: "add_alert",
+        horizontalAlign: horizontalAlign,
+        verticalAlign: verticalAlign,
+        type: this.type[color],
+      });
+    },
+  },
+};
+</script>
--- a/frontend/src/pages/TableList.vue
+++ b/frontend/src/pages/TableList.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"
+      >
+        <md-card>
+          <md-card-header data-background-color="green">
+            <h4 class="title">Simple Table</h4>
+            <p class="category">Here is a subtitle for this table</p>
+          </md-card-header>
+          <md-card-content>
+            <simple-table table-header-color="green"></simple-table>
+          </md-card-content>
+        </md-card>
+      </div>
+
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"
+      >
+        <md-card class="md-card-plain">
+          <md-card-header data-background-color="green">
+            <h4 class="title">Table on Plain Background</h4>
+            <p class="category">Here is a subtitle for this table</p>
+          </md-card-header>
+          <md-card-content>
+            <ordered-table></ordered-table>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SimpleTable, OrderedTable } from "@/components";
+
+export default {
+  components: {
+    OrderedTable,
+    SimpleTable,
+  },
+};
+</script>
--- a/frontend/src/pages/Typography.vue
+++ b/frontend/src/pages/Typography.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div class="md-layout-item">
+        <md-card>
+          <md-card-header data-background-color="green">
+            <h4 class="title">Material Dashboard Heading</h4>
+            <p class="category">Created using Roboto Font Family</p>
+          </md-card-header>
+          <md-card-content>
+            <div id="typography">
+              <div class="title">
+                <h2>Typography</h2>
+              </div>
+              <div class="row">
+                <div class="tim-typo">
+                  <h1>
+                    <span class="tim-note">Header 1</span>The Life of Material
+                    Dashboard
+                  </h1>
+                </div>
+                <div class="tim-typo">
+                  <h2>
+                    <span class="tim-note">Header 2</span>The life of Material
+                    Dashboard
+                  </h2>
+                </div>
+                <div class="tim-typo">
+                  <h3>
+                    <span class="tim-note">Header 3</span>The life of Material
+                    Dashboard
+                  </h3>
+                </div>
+                <div class="tim-typo">
+                  <h4>
+                    <span class="tim-note">Header 4</span>The life of Material
+                    Dashboard
+                  </h4>
+                </div>
+                <div class="tim-typo">
+                  <h5>
+                    <span class="tim-note">Header 5</span>The life of Material
+                    Dashboard
+                  </h5>
+                </div>
+                <div class="tim-typo">
+                  <h6>
+                    <span class="tim-note">Header 6</span>The life of Material
+                    Dashboard
+                  </h6>
+                </div>
+                <div class="tim-typo">
+                  <p>
+                    <span class="tim-note">Paragraph</span>
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers. I understand
+                    culture. I am the nucleus. I think that’s a responsibility
+                    that I have, to push possibilities, to show people, this is
+                    the level that things could be at.
+                  </p>
+                </div>
+                <div class="tim-typo">
+                  <span class="tim-note">Quote</span>
+                  <blockquote>
+                    <p>
+                      I will be the leader of a company that ends up being worth
+                      billions of dollars, because I got the answers. I
+                      understand culture. I am the nucleus. I think that’s a
+                      responsibility that I have, to push possibilities, to show
+                      people, this is the level that things could be at.
+                    </p>
+                    <small> Kanye West, Musician </small>
+                  </blockquote>
+                </div>
+                <div class="tim-typo">
+                  <span class="tim-note">Muted Text</span>
+                  <p class="text-muted">
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="tim-typo">
+                  <span class="tim-note">Primary Text</span>
+                  <p class="text-primary">
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="tim-typo">
+                  <span class="tim-note">Info Text</span>
+                  <p class="text-info">
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="tim-typo">
+                  <span class="tim-note">Success Text</span>
+                  <p class="text-success">
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="tim-typo">
+                  <span class="tim-note">Warning Text</span>
+                  <p class="text-warning">
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="tim-typo">
+                  <span class="tim-note">Danger Text</span>
+                  <p class="text-danger">
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="tim-typo">
+                  <h2>
+                    <span class="tim-note">Small Tag</span>
+                    Header with small subtitle
+                    <br />
+                    <small>Use "small" tag for the headers</small>
+                  </h2>
+                </div>
+              </div>
+            </div>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataBackgroundColor: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
--- a/frontend/src/pages/UpgradeToPRO.vue
+++ b/frontend/src/pages/UpgradeToPRO.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div class="md-layout-item md-size-66 mx-auto md-small-size-100">
+        <md-card>
+          <md-card-header data-background-color="purple">
+            <h4 class="title">Vue Material Dashboard PRO</h4>
+            <p class="category">
+              Are you looking for more components? Please check our Premium
+              Version of Vue Material Dashboard.
+            </p>
+          </md-card-header>
+
+          <md-card-content>
+            <div class="table-responsive table-upgrade">
+              <table class="table" cellspacing="0">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th class="text-center">Free</th>
+                    <th class="text-center">PRO</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Components</td>
+                    <td class="text-center">60</td>
+                    <td class="text-center">200</td>
+                  </tr>
+                  <tr>
+                    <td>Plugins</td>
+                    <td class="text-center">2</td>
+                    <td class="text-center">15</td>
+                  </tr>
+                  <tr>
+                    <td>Example Pages</td>
+                    <td class="text-center">3</td>
+                    <td class="text-center">27</td>
+                  </tr>
+                  <tr>
+                    <td>Login, Register, Pricing, Lock Pages</td>
+                    <td class="text-center">
+                      <i class="fa fa-times text-danger"></i>
+                    </td>
+                    <td class="text-center">
+                      <i class="fa fa-check text-success"></i>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      DataTables, VectorMap, SweetAlert, Wizard,
+                      jQueryValidation, FullCalendar etc...
+                    </td>
+                    <td class="text-center">
+                      <i class="fa fa-times text-danger"></i>
+                    </td>
+                    <td class="text-center">
+                      <i class="fa fa-check text-success"></i>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Mini Sidebar</td>
+                    <td class="text-center">
+                      <i class="fa fa-times text-danger"></i>
+                    </td>
+                    <td class="text-center">
+                      <i class="fa fa-check text-success"></i>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Premium Support</td>
+                    <td class="text-center">
+                      <i class="fa fa-times text-danger"></i>
+                    </td>
+                    <td class="text-center">
+                      <i class="fa fa-check text-success"></i>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td></td>
+                    <td class="text-center">Free</td>
+                    <td class="text-center">Just $59</td>
+                  </tr>
+                  <tr>
+                    <td class="text-center"></td>
+                    <td class="text-center">
+                      <md-button href="#" class="md-default md-round" disabled
+                        >Current Version</md-button
+                      >
+                    </td>
+                    <td class="text-center">
+                      <md-button
+                        target="_blank"
+                        href="https://www.creative-tim.com/product/vue-material-dashboard-pro/?ref=vue-md-free-upgrade-live"
+                        class="md-info md-round"
+                        >Upgrade to PRO</md-button
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.md-card {
+  margin-top: 50px;
+}
+
+.table-responsive {
+  overflow: auto;
+}
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1rem;
+  background-color: transparent;
+
+  thead tr th {
+    font-size: 1.063rem;
+    border-top-width: 0;
+    font-weight: 300;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  & > tbody > tr > td,
+  & > tbody > tr > th,
+  & > tfoot > tr > td,
+  & > tfoot > tr > th,
+  & > thead > tr > td,
+  & > thead > tr > th {
+    padding: 12px 8px;
+    vertical-align: middle;
+  }
+
+  & > tbody > tr {
+    position: relative;
+  }
+
+  td,
+  th {
+    padding: 0.75rem;
+    vertical-align: top;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+  }
+}
+</style>
--- a/frontend/src/pages/UserProfile.vue
+++ b/frontend/src/pages/UserProfile.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div class="md-layout-item md-medium-size-100 md-size-66">
+        <edit-profile-form data-background-color="green"> </edit-profile-form>
+      </div>
+      <div class="md-layout-item md-medium-size-100 md-size-33">
+        <user-card> </user-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EditProfileForm, UserCard } from "@/pages";
+
+export default {
+  components: {
+    EditProfileForm,
+    UserCard,
+  },
+};
+</script>
--- a/frontend/src/pages/UserProfile/EditProfileForm.vue
+++ b/frontend/src/pages/UserProfile/EditProfileForm.vue
@@ -0,0 +1,105 @@
+<template>
+  <form>
+    <md-card>
+      <md-card-header :data-background-color="dataBackgroundColor">
+        <h4 class="title">Edit Profile</h4>
+        <p class="category">Complete your profile</p>
+      </md-card-header>
+
+      <md-card-content>
+        <div class="md-layout">
+          <div class="md-layout-item md-small-size-100 md-size-33">
+            <md-field>
+              <label>Company (disabled)</label>
+              <md-input v-model="disabled" disabled></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-33">
+            <md-field>
+              <label>User Name</label>
+              <md-input v-model="username" type="text"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-33">
+            <md-field>
+              <label>Email Address</label>
+              <md-input v-model="emailadress" type="email"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-50">
+            <md-field>
+              <label>First Name</label>
+              <md-input v-model="firstname" type="text"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-50">
+            <md-field>
+              <label>Last Name</label>
+              <md-input v-model="lastname" type="text"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-100">
+            <md-field>
+              <label>Adress</label>
+              <md-input v-model="address" type="text"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-33">
+            <md-field>
+              <label>City</label>
+              <md-input v-model="city" type="text"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-33">
+            <md-field>
+              <label>Country</label>
+              <md-input v-model="country" type="text"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-33">
+            <md-field>
+              <label>Postal Code</label>
+              <md-input v-model="code" type="number"></md-input>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-size-100">
+            <md-field maxlength="5">
+              <label>About Me</label>
+              <md-textarea v-model="aboutme"></md-textarea>
+            </md-field>
+          </div>
+          <div class="md-layout-item md-size-100 text-right">
+            <md-button class="md-raised md-success">Update Profile</md-button>
+          </div>
+        </div>
+      </md-card-content>
+    </md-card>
+  </form>
+</template>
+<script>
+export default {
+  name: "edit-profile-form",
+  props: {
+    dataBackgroundColor: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      username: null,
+      disabled: null,
+      emailadress: null,
+      lastname: null,
+      firstname: null,
+      address: null,
+      city: null,
+      country: null,
+      code: null,
+      aboutme:
+        "Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.",
+    };
+  },
+};
+</script>
+<style></style>
--- a/frontend/src/pages/UserProfile/UserCard.vue
+++ b/frontend/src/pages/UserProfile/UserCard.vue
@@ -0,0 +1,33 @@
+<template>
+  <md-card class="md-card-profile">
+    <div class="md-card-avatar">
+      <img class="img" :src="cardUserImage" />
+    </div>
+
+    <md-card-content>
+      <h6 class="category text-gray">CEO / Co-Founder</h6>
+      <h4 class="card-title">Alec Thompson</h4>
+      <p class="card-description">
+        Don't be scared of the truth because we need to restart the human
+        foundation in truth And I love you like Kanye loves Kanye I love Rick
+        Owens’ bed design but the back is...
+      </p>
+      <md-button class="md-round md-success">Follow</md-button>
+    </md-card-content>
+  </md-card>
+</template>
+<script>
+export default {
+  name: "user-card",
+  props: {
+    cardUserImage: {
+      type: String,
+      default: require("@/assets/img/faces/marc.jpg"),
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style></style>
--- a/frontend/src/pages/index.js
+++ b/frontend/src/pages/index.js
@@ -0,0 +1,7 @@
+// Cards
+import UserCard from "../pages/UserProfile/UserCard.vue";
+
+// Forms
+import EditProfileForm from "../pages/UserProfile/EditProfileForm.vue";
+
+export { UserCard, EditProfileForm };
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -0,0 +1,65 @@
+import DashboardLayout from "@/pages/Layout/DashboardLayout.vue";
+
+import Dashboard from "@/pages/Dashboard.vue";
+import UserProfile from "@/pages/UserProfile.vue";
+import TableList from "@/pages/TableList.vue";
+import Typography from "@/pages/Typography.vue";
+import Icons from "@/pages/Icons.vue";
+import Maps from "@/pages/Maps.vue";
+import Notifications from "@/pages/Notifications.vue";
+import UpgradeToPRO from "@/pages/UpgradeToPRO.vue";
+
+const routes = [
+  {
+    path: "/",
+    component: DashboardLayout,
+    redirect: "/dashboard",
+    children: [
+      {
+        path: "dashboard",
+        name: "Dashboard",
+        component: Dashboard,
+      },
+      {
+        path: "user",
+        name: "User Profile",
+        component: UserProfile,
+      },
+      {
+        path: "table",
+        name: "Table List",
+        component: TableList,
+      },
+      {
+        path: "typography",
+        name: "Typography",
+        component: Typography,
+      },
+      {
+        path: "icons",
+        name: "Icons",
+        component: Icons,
+      },
+      {
+        path: "maps",
+        name: "Maps",
+        meta: {
+          hideFooter: true,
+        },
+        component: Maps,
+      },
+      {
+        path: "notifications",
+        name: "Notifications",
+        component: Notifications,
+      },
+      {
+        path: "upgrade",
+        name: "Upgrade to PRO",
+        component: UpgradeToPRO,
+      },
+    ],
+  },
+];
+
+export default routes;
				`@@ -0,0 +1 @@`
				`export const API_KEY = "AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU";`