diff --git a/forecast_dashboard/README.md b/forecast_dashboard/README.md
new file mode 100644
index 0000000..cdf319f
--- /dev/null
+++ b/forecast_dashboard/README.md
@@ -0,0 +1,33 @@
+# Cyclops Estimation & Forecasting Engine Dashboard
+
+GUI dashboard for the Cyclops Estimation and Forecasting engine.
+
+## Prerequisites
+```
+pip install -r requirements.txt
+```
+## Start-up
+
+- Start Cyclops as normal
+- Set up `conf.ini` with the parameters necessary to interact with your
+Cyclops instance
+- Start the dashboard's back-end:
+```
+python app.py
+```
+- Start the dashboard itself:
+```
+cd dashboard
+npm install
+npm run dev
+```
+- After the first time you do not need to run `npm install`
+
+## Usage
+- Use the **Forecasting** page to generate forecasts
+- Use the **Rule Management** page to add or remove rules
+
+## Caution
+It is recommended to use a separate Cyclops instance with a snapshot
+of your real usage data to avoid cluttering your real database with fake records
+or losing real data when performing a forecast cleanup.
diff --git a/forecast_dashboard/app.py b/forecast_dashboard/app.py
new file mode 100644
index 0000000..74cc4c3
--- /dev/null
+++ b/forecast_dashboard/app.py
@@ -0,0 +1,73 @@
+from flask import Flask, request, json, jsonify
+import client
+from flask_cors import CORS
+
+
+app = Flask(__name__)
+CORS(app)
+
+
+@app.route('/addrule', methods=['POST'])
+def addrule():
+    data = json.loads(request.data)
+    client.addrulestring(data['target'], data['rule'])
+    return jsonify(data['rule'])
+
+
+@app.route('/removerule', methods=['POST'])
+def removerule():
+    data = json.loads(request.data)
+    count = client.removerule(data['target'], data['rule'])
+    return jsonify(count)
+
+
+@app.route('/listcdrrules', methods=['GET'])
+def listcdrrules():
+    return jsonify(client.listcdrrules())
+
+
+@app.route('/listbillrules', methods=['GET'])
+def listbillrules():
+    return jsonify(client.listbillrules())
+
+
+@app.route('/bills', methods=['GET'])
+def getbills():
+    return jsonify(client.listbills())
+
+
+@app.route('/accounts', methods=['GET'])
+def getaccounts():
+    return jsonify(client.listaccounts())
+
+
+@app.route('/cleanup', methods=['POST'])
+def cleanup():
+    data = json.loads(request.data)
+    cleanup_dict = client.cleanup(data['target'], data['rules'])
+    return jsonify(cleanup_dict)
+
+
+@app.route('/singleforecast', methods=['POST'])
+def singleforecast():
+    data = json.loads(request.data)
+    forecast = client.generatesingleforecast(data['account'], data['target'], data['size'])
+    return jsonify(forecast)
+
+
+@app.route('/globalforecast', methods=['POST'])
+def globalforecast():
+    data = json.loads(request.data)
+    forecast = client.generateglobalforecast(data['target'], data['size'])
+    return jsonify(forecast)
+
+
+@app.route('/patternforecast', methods=['POST'])
+def patternforecast():
+    data = json.loads(request.data)
+    forecast = client.generatepatternforecast(data['target'], data['size'])
+    return jsonify(forecast)
+
+
+if __name__ == '__main__':
+    app.run()
diff --git a/forecast_dashboard/client.py b/forecast_dashboard/client.py
new file mode 100644
index 0000000..b8a16c9
--- /dev/null
+++ b/forecast_dashboard/client.py
@@ -0,0 +1,99 @@
+import requests
+import time
+import settings
+import dbaccess
+
+
+settings = settings.Settings('conf.ini')
+dbaccess = dbaccess.DBAccess(settings)
+
+
+def addrule(target, path):
+    with open(path, 'r') as file:
+        rule = file.read()
+    if target == 'cdr':
+        r = requests.post(settings.cdrRuleEndpoint, data=rule)
+        print(r.status_code)
+    elif target == 'bill':
+        r = requests.post(settings.billRuleEndpoint, data=rule)
+        print(r.status_code)
+    print(rule)
+    return rule
+
+
+def listbills():
+    r = requests.get(settings.billEndpoint)
+    return r.json()
+
+
+def listaccounts():
+    return dbaccess.printaccounts()
+
+
+def listcdrrules():
+    return dbaccess.printcdrrules()
+
+
+def listbillrules():
+    return dbaccess.printbillrules()
+
+
+def addrulestring(target, string):
+    if target == 'cdr':
+        r = requests.post(settings.cdrRuleEndpoint, data=string)
+        print(r.status_code)
+    elif target == 'bill':
+        r = requests.post(settings.billRuleEndpoint, data=string)
+        print(r.status_code)
+    print(string)
+    return string
+
+
+def removerule(target, rule):
+    if target == 'cdr':
+        db = settings.cdrdb
+    elif target == 'bill':
+        db = settings.billdb
+    return dbaccess.deleterule(db, rule)
+
+
+def generatesingleforecast(account, target, size):
+    r = requests.post(settings.forecastEndpoint, json={"command": "Forecast",
+                                                       "account": account,
+                                                       "target": target,
+                                                       "forecastSize": size})
+    print(r.status_code)
+    time.sleep(1)
+    return dbaccess.printbill(target)
+
+
+def generateglobalforecast(target, size):
+    r = requests.post(settings.forecastEndpoint, json={"command": "Forecast",
+                                                       "target": target,
+                                                       "forecastSize": size})
+    print(r.status_code)
+    time.sleep(1)
+    return dbaccess.printbill(target)
+
+
+def generatepatternforecast(target, size):
+    r = requests.post(settings.forecastEndpoint, json={"command": "GlobalForecast",
+                                                       "target": target,
+                                                       "forecastSize": size})
+    print(r.status_code)
+    time.sleep(1)
+    return dbaccess.printbill(target)
+
+
+def cleanup(target, rules):
+    cdr_rules = 0
+    bill_rules = 0
+    if rules:
+        cdr_rules = dbaccess.deleterule(settings.cdrdb, "%{}%".format(target))
+        bill_rules = dbaccess.deleterule(settings.billdb, "%{}%".format(target))
+    usages = dbaccess.deleteusage("%{}%".format(target))
+    udrs = dbaccess.deleteudr("%{}%".format(target))
+    cdrs = dbaccess.deletecdr("%{}%".format(target))
+    bills = dbaccess.deletebill("%{}%".format(target))
+    return {"cdr_rules": cdr_rules, "Bill_rules": bill_rules, "usages": usages, "udrs": udrs, "cdrs": cdrs,
+            "bills": bills}
diff --git a/forecast_dashboard/conf.ini b/forecast_dashboard/conf.ini
new file mode 100644
index 0000000..a5cc803
--- /dev/null
+++ b/forecast_dashboard/conf.ini
@@ -0,0 +1,14 @@
+[ENDPOINTS]
+cdrRuleEndpoint = http://localhost:4570/rule
+billRuleEndpoint = http://hocalhost:4571/rule
+udrEndpoint = http://localhost:4567/command
+billEndpoint = http://localhost:4569/bill
+
+[DB]
+user = cyclops
+password = pass1234
+host = localhost
+port = 5432
+cyclops_udr = cyclops_udr
+cyclops_cdr = cyclops_cdr
+cyclops_billing = cyclops_billing
\ No newline at end of file
diff --git a/forecast_dashboard/dashboard/.browserslistrc b/forecast_dashboard/dashboard/.browserslistrc
new file mode 100644
index 0000000..9dee646
--- /dev/null
+++ b/forecast_dashboard/dashboard/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
diff --git a/forecast_dashboard/dashboard/.eslintrc.js b/forecast_dashboard/dashboard/.eslintrc.js
new file mode 100644
index 0000000..3f3df4f
--- /dev/null
+++ b/forecast_dashboard/dashboard/.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"
+  }
+};
diff --git a/forecast_dashboard/dashboard/.gitignore b/forecast_dashboard/dashboard/.gitignore
new file mode 100644
index 0000000..504afef
--- /dev/null
+++ b/forecast_dashboard/dashboard/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json
diff --git a/forecast_dashboard/dashboard/.jshintrc b/forecast_dashboard/dashboard/.jshintrc
new file mode 100644
index 0000000..5db9558
--- /dev/null
+++ b/forecast_dashboard/dashboard/.jshintrc
@@ -0,0 +1,3 @@
+{
+  "esversion": 6 
+}
diff --git a/forecast_dashboard/dashboard/CHANGELOG.md b/forecast_dashboard/dashboard/CHANGELOG.md
new file mode 100644
index 0000000..b8a478c
--- /dev/null
+++ b/forecast_dashboard/dashboard/CHANGELOG.md
@@ -0,0 +1,38 @@
+# Change Log
+
+## [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
diff --git a/forecast_dashboard/dashboard/ISSUE_TEMPLATE.md b/forecast_dashboard/dashboard/ISSUE_TEMPLATE.md
new file mode 100644
index 0000000..4235f95
--- /dev/null
+++ b/forecast_dashboard/dashboard/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
+-->
diff --git a/forecast_dashboard/dashboard/LICENSE.md b/forecast_dashboard/dashboard/LICENSE.md
new file mode 100644
index 0000000..7b1f7bf
--- /dev/null
+++ b/forecast_dashboard/dashboard/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Creative Tim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/forecast_dashboard/dashboard/README.md b/forecast_dashboard/dashboard/README.md
new file mode 100644
index 0000000..0c0f639
--- /dev/null
+++ b/forecast_dashboard/dashboard/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.2.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 2018 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>
diff --git a/forecast_dashboard/dashboard/babel.config.js b/forecast_dashboard/dashboard/babel.config.js
new file mode 100644
index 0000000..3ecebf1
--- /dev/null
+++ b/forecast_dashboard/dashboard/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/app"]
+};
diff --git a/forecast_dashboard/dashboard/package.json b/forecast_dashboard/dashboard/package.json
new file mode 100644
index 0000000..3287b36
--- /dev/null
+++ b/forecast_dashboard/dashboard/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "vue-material-dashboard",
+  "version": "1.2.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": {
+    "axios": "^0.19.0",
+    "chartist": "0.11.2",
+    "google-maps": "3.3.0",
+    "vue": "2.6.10",
+    "vue-clickaway": "2.2.2",
+    "vue-github-buttons": "3.1.0",
+    "vue-material": "1.0.0-beta-11",
+    "vue-router": "3.0.6",
+    "vue-social-sharing": "2.4.5"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "3.8.0",
+    "@vue/cli-plugin-eslint": "3.8.0",
+    "@vue/cli-service": "3.8.3",
+    "@vue/eslint-config-prettier": "4.0.1",
+    "es6-promise": "4.2.8",
+    "eslint-plugin-vue": "5.2.2",
+    "node-sass": "4.12.0",
+    "sass-loader": "7.1.0",
+    "vue-template-compiler": "2.6.10"
+  }
+}
diff --git a/forecast_dashboard/dashboard/postcss.config.js b/forecast_dashboard/dashboard/postcss.config.js
new file mode 100644
index 0000000..5bfb8f6
--- /dev/null
+++ b/forecast_dashboard/dashboard/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};
diff --git a/forecast_dashboard/dashboard/public/cenf.png b/forecast_dashboard/dashboard/public/cenf.png
new file mode 100644
index 0000000..9da126e
Binary files /dev/null and b/forecast_dashboard/dashboard/public/cenf.png differ
diff --git a/forecast_dashboard/dashboard/public/cyclops.png b/forecast_dashboard/dashboard/public/cyclops.png
new file mode 100644
index 0000000..9247ca2
Binary files /dev/null and b/forecast_dashboard/dashboard/public/cyclops.png differ
diff --git a/forecast_dashboard/dashboard/public/index.html b/forecast_dashboard/dashboard/public/index.html
new file mode 100644
index 0000000..d3fdc47
--- /dev/null
+++ b/forecast_dashboard/dashboard/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="icon" type="image/png" sizes="96x96" href="<%= webpackConfig.output.publicPath %>cyclops.png">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>CE&F Engine Dashboard</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>
diff --git a/forecast_dashboard/dashboard/src/App.vue b/forecast_dashboard/dashboard/src/App.vue
new file mode 100644
index 0000000..744c323
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/forecast_dashboard/dashboard/src/assets/github/angular.png b/forecast_dashboard/dashboard/src/assets/github/angular.png
new file mode 100644
index 0000000..71469a7
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/angular.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/chrome.png b/forecast_dashboard/dashboard/src/assets/github/chrome.png
new file mode 100644
index 0000000..6ba3616
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/chrome.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/dashboard.png b/forecast_dashboard/dashboard/src/assets/github/dashboard.png
new file mode 100644
index 0000000..e7e5e10
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/dashboard.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/edge.png b/forecast_dashboard/dashboard/src/assets/github/edge.png
new file mode 100644
index 0000000..4a4eb90
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/edge.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/firefox.png b/forecast_dashboard/dashboard/src/assets/github/firefox.png
new file mode 100644
index 0000000..cad280e
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/firefox.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/html.png b/forecast_dashboard/dashboard/src/assets/github/html.png
new file mode 100644
index 0000000..2b3d9d6
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/html.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/maps.png b/forecast_dashboard/dashboard/src/assets/github/maps.png
new file mode 100644
index 0000000..9882190
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/maps.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/notification.png b/forecast_dashboard/dashboard/src/assets/github/notification.png
new file mode 100644
index 0000000..ab97a34
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/notification.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/opera.png b/forecast_dashboard/dashboard/src/assets/github/opera.png
new file mode 100644
index 0000000..cdf3392
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/opera.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/opt_md_angular_thumbnail.jpg b/forecast_dashboard/dashboard/src/assets/github/opt_md_angular_thumbnail.jpg
new file mode 100644
index 0000000..30ade38
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/opt_md_angular_thumbnail.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/opt_md_thumbnail.jpg b/forecast_dashboard/dashboard/src/assets/github/opt_md_thumbnail.jpg
new file mode 100644
index 0000000..4b2c44a
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/opt_md_thumbnail.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/opt_md_vue_thumbnail.jpg b/forecast_dashboard/dashboard/src/assets/github/opt_md_vue_thumbnail.jpg
new file mode 100644
index 0000000..88b9c8c
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/opt_md_vue_thumbnail.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/opt_mdr_thumbnail.jpg b/forecast_dashboard/dashboard/src/assets/github/opt_mdr_thumbnail.jpg
new file mode 100644
index 0000000..f46730f
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/opt_mdr_thumbnail.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/product.gif b/forecast_dashboard/dashboard/src/assets/github/product.gif
new file mode 100644
index 0000000..f7086e0
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/product.gif differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/react.svg b/forecast_dashboard/dashboard/src/assets/github/react.svg
new file mode 100644
index 0000000..ea77a61
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/assets/github/react.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>
diff --git a/forecast_dashboard/dashboard/src/assets/github/safari.png b/forecast_dashboard/dashboard/src/assets/github/safari.png
new file mode 100644
index 0000000..84dc844
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/safari.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/tables.png b/forecast_dashboard/dashboard/src/assets/github/tables.png
new file mode 100644
index 0000000..d9f0968
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/tables.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/user_profile.png b/forecast_dashboard/dashboard/src/assets/github/user_profile.png
new file mode 100644
index 0000000..45da5e8
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/user_profile.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/github/vuejs.png b/forecast_dashboard/dashboard/src/assets/github/vuejs.png
new file mode 100644
index 0000000..60e1700
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/github/vuejs.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/cenf.png b/forecast_dashboard/dashboard/src/assets/img/cenf.png
new file mode 100644
index 0000000..9da126e
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/cenf.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/cyclops.png b/forecast_dashboard/dashboard/src/assets/img/cyclops.png
new file mode 100644
index 0000000..9247ca2
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/cyclops.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/cyclops2.png b/forecast_dashboard/dashboard/src/assets/img/cyclops2.png
new file mode 100644
index 0000000..c284495
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/cyclops2.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/sidebar-1.jpg b/forecast_dashboard/dashboard/src/assets/img/sidebar-1.jpg
new file mode 100644
index 0000000..0a716b5
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/sidebar-1.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/sidebar-2.jpg b/forecast_dashboard/dashboard/src/assets/img/sidebar-2.jpg
new file mode 100644
index 0000000..1cfdbed
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/sidebar-2.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/sidebar-3.jpg b/forecast_dashboard/dashboard/src/assets/img/sidebar-3.jpg
new file mode 100644
index 0000000..99c0c1c
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/sidebar-3.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/sidebar-4.jpg b/forecast_dashboard/dashboard/src/assets/img/sidebar-4.jpg
new file mode 100644
index 0000000..f72270e
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/sidebar-4.jpg differ
diff --git a/forecast_dashboard/dashboard/src/assets/img/vue-logo.png b/forecast_dashboard/dashboard/src/assets/img/vue-logo.png
new file mode 100644
index 0000000..74389d8
Binary files /dev/null and b/forecast_dashboard/dashboard/src/assets/img/vue-logo.png differ
diff --git a/forecast_dashboard/dashboard/src/assets/scss/material-dashboard.scss b/forecast_dashboard/dashboard/src/assets/scss/material-dashboard.scss
new file mode 100644
index 0000000..398a83b
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/assets/scss/material-dashboard.scss
@@ -0,0 +1,53 @@
+
+
+/*!
+
+ =========================================================
+ * Material Dashboard - v1.0.1
+ =========================================================
+
+ * Product Page: http://www.creative-tim.com/product/material-dashboard
+ * Copyright 2017 Creative Tim (http://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ */
+
+
+//variables and mixins
+@import "md/variables";
+@import "md/mixins";
+@import "md/shadows";
+
+//plugin css
+@import "md/plugins/_perfect-scrollbar";
+
+// Core CSS
+@import "md/typography";
+@import "md/sidebar-and-main-panel";
+@import "md/buttons";
+@import "md/misc";
+@import "md/inputs";
+@import "md/forms";
+@import "md/alerts";
+@import "md/tables";
+@import "md/layout";
+@import "md/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";
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_alerts.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_alerts.scss
new file mode 100644
index 0000000..f3b2d0d
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_buttons.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_buttons.scss
new file mode 100644
index 0000000..9ef4053
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/assets/scss/md/_buttons.scss
@@ -0,0 +1,222 @@
+.md-button{
+    border: none;
+    border-radius: $border-radius-base;
+    position: relative;
+    margin: 10px 1px;
+    height: auto;
+    line-height: 1.42857;
+
+    font-size: $mdb-btn-font-size-base;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 0;
+
+    will-change: box-shadow, transform;
+    transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
+    background-color 0.2s $mdb-animation-curve-default;
+
+    &:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple{
+      padding: 12px 30px;
+    }
+
+    &:not(.md-just-icon) .md-button-content i{
+      font-size: 1.1rem !important;
+      height: 17px;
+    }
+
+    &.md-wd{
+      min-width: 140px;
+    }
+
+    &.md-block{
+      width: 100%;
+    }
+
+    &:before{
+      display: none;
+    }
+
+    &,
+    &.md-default{
+        @include btn-styles($gray-light);
+    }
+
+    &.md-primary{
+      @include btn-styles($brand-primary);
+    }
+    &.md-info{
+      @include btn-styles($brand-info);
+    }
+    &.md-success{
+      @include btn-styles($brand-success);
+    }
+    &.md-warning{
+      @include btn-styles($brand-warning);
+    }
+    &.md-danger{
+      @include btn-styles($brand-danger);
+    }
+    &.md-white{
+        &,
+        &: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) / 2;
+                left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
+            }
+
+            .material-icons{
+                font-size: $mdb-btn-icon-size-mini;
+            }
+        }
+
+        i.material-icons {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
+          line-height: $mdb-btn-fab-font-size;
+          width: $mdb-btn-fab-font-size;
+          font-size: $mdb-btn-fab-font-size;
+        }
+    }
+
+    // Size variations
+    &.md-lg .md-ripple{
+        font-size: $mdb-btn-font-size-lg;
+        padding: 18px 36px !important;
+    }
+    &.md-sm .md-ripple{
+        padding: 0.40625rem 1.25rem !important;
+        font-size: $mdb-btn-font-size-sm;
+    }
+
+    &.btn-just-icon{
+        font-size: 20px;
+        padding: 12px 12px;
+        line-height: 1em;
+
+        i{
+            width: 20px;
+        }
+        &.btn-lg{
+            font-size: 22px;
+            padding: 13px 18px;
+        }
+    }
+
+    &.md-fab,
+    &.md-just-icon{
+      font-size: 24px;
+      height: 41px;
+      min-width: 41px;
+      width: 41px;
+      padding: 0;
+      overflow: hidden;
+      position: relative;
+      line-height: 41px;
+      border-radius: 50%;
+    }
+
+    .md-button-content{
+      display: flex;
+      align-items: center;
+      i{
+        font-size: 20px !important;
+      }
+    }
+}
+
+.btn{
+    // Align icons inside buttons with text
+    .material-icons{
+        vertical-align: middle;
+        font-size: $mdb-btn-icon-size-mini;
+        top: -1px;
+        position: relative;
+    }
+
+}
+
+.navbar .navbar-nav > li > {
+    a.btn{
+        margin-top: 2px;
+        margin-bottom: 2px;
+
+        &.btn-fab{
+            margin: 5px 2px;
+        }
+    }
+    a:not(.btn){
+        .material-icons{
+            margin-top: -3px;
+            top: 0px;
+            position: relative;
+            margin-right: 3px;
+        }
+    }
+    .profile-photo{
+        margin: 5px 2px;
+    }
+}
+
+.navbar-default:not(.navbar-transparent) .navbar-nav > li > {
+    a.btn{
+        &.btn-white.btn-simple{
+            color: $gray;
+        }
+    }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_cards.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_cards.scss
new file mode 100644
index 0000000..efe114e
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+        }
+    }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_chartist.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_chartist.scss
new file mode 100644
index 0000000..25d7e10
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_checkboxes.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_checkboxes.scss
new file mode 100644
index 0000000..fc5154a
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+    }
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_colors.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_colors.scss
new file mode 100644
index 0000000..efa253b
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_dialogs.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_dialogs.scss
new file mode 100644
index 0000000..050518a
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+    }
+}
\ No newline at end of file
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_dropdown.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_dropdown.scss
new file mode 100644
index 0000000..0a7eecc
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_footers.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_footers.scss
new file mode 100644
index 0000000..b065c60
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_forms.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_forms.scss
new file mode 100644
index 0000000..ea28713
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+    }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_inputs-size.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_inputs-size.scss
new file mode 100644
index 0000000..c86338c
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+      }
+    }
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_inputs.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_inputs.scss
new file mode 100644
index 0000000..a730d57
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+    }
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_layout.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_layout.scss
new file mode 100644
index 0000000..0745402
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_misc.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_misc.scss
new file mode 100644
index 0000000..8601e14
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_mixins.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_mixins.scss
new file mode 100644
index 0000000..05fbf9f
--- /dev/null
+++ b/forecast_dashboard/dashboard/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);
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_navbars.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_navbars.scss
new file mode 100644
index 0000000..80c93c8
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_pagination.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_pagination.scss
new file mode 100644
index 0000000..3671d4d
--- /dev/null
+++ b/forecast_dashboard/dashboard/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);
+            }
+        }
+    }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_pills.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_pills.scss
new file mode 100644
index 0000000..b9a9926
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_popups.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_popups.scss
new file mode 100644
index 0000000..90731f1
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_responsive.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_responsive.scss
new file mode 100644
index 0000000..ab9b17f
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+            }
+        }
+    }
+
+    .sidebar{
+        .navbar-form{
+            display: none !important;
+        }
+        .nav-mobile-menu{
+            display: none;
+        }
+    }
+}
+
+/*          Changes for small display      */
+
+@media (max-width: 991px){
+  .md-toolbar .md-collapse{
+    display: none !important;
+  }
+
+  .main-panel > .content{
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+    .sidebar{
+        display: none;
+        box-shadow: none;
+
+        .sidebar-wrapper{
+            padding-bottom: 60px;
+        }
+
+        .nav-mobile-menu{
+            margin-top: 0;
+
+            .md-field{
+              width: auto;
+              margin: 10px 36px 0;
+            }
+
+            .notification{
+                float: left;
+                line-height: 30px;
+                margin-right: 8px;
+            }
+        }
+
+        .dropdown-menu {
+            position: static;
+            float: none;
+            width: auto;
+            margin-top: 0;
+            background-color: transparent;
+            border: 0;
+            display: none;
+            -webkit-box-shadow: none;
+            box-shadow: none;
+        }
+
+        .dropdown.open .dropdown-menu{
+          display: block;
+        }
+
+        .dropdown{
+          li:hover a{
+            background-color: $brand-primary;
+            @include shadow-8dp();
+            color: $white-color !important;
+          }
+        }
+    }
+
+    html,
+    body{
+        overflow-x: hidden;
+    }
+
+    .menu-on-left{
+        .nav-open &{
+            .main-panel,
+            .wrapper-full-page,
+            .navbar-fixed > div{
+                @include transform-translate-x(260px);
+            }
+        }
+
+        .main-panel{
+            position: initial;
+        }
+
+        .sidebar,
+        .off-canvas-sidebar{
+            left: 0;
+            right: auto;
+            @include transform-translate-x(-260px);
+        }
+
+        #bodyClick{
+            left: 260px;
+            right: auto;
+        }
+    }
+
+    .main-panel{
+        width: 100%;
+    }
+    .navbar-transparent{
+        padding-top: 15px;
+        background-color: rgba(0, 0, 0, 0.45);
+    }
+    body,
+    html{
+        position: relative;
+        overflow-x: hidden;
+    }
+    .navbar .container{
+         left: 0;
+          width: 100%;
+         @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+         position: relative;
+    }
+    .navbar .navbar-collapse.collapse,
+    .navbar .navbar-collapse.collapse.in,
+    .navbar .navbar-collapse.collapsing{
+        display: none !important;
+    }
+
+    .navbar-nav > li{
+        float: none;
+        position: relative;
+        display: block;
+    }
+
+    .sidebar,
+    .off-canvas-sidebar{
+        position: fixed;
+        display: block;
+        top: 0;
+        height: 100vh;
+        width: 260px;
+        right: 0;
+        left: auto;
+        z-index: 1032;
+        visibility: visible;
+        background-color: #9A9A9A;
+        overflow-y: visible;
+        border-top: none;
+        text-align: left;
+        padding-right: 0px;
+        padding-left: 0;
+
+        @include transform-translate-x(260px);
+        @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+        > ul {
+            position: relative;
+            z-index: 4;
+            overflow-y:scroll;
+            height: calc(100vh - 61px);
+            width: 100%;
+        }
+        &::before{
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            display: block;
+            content: "";
+            z-index: 1;
+        }
+
+        .logo{
+            position: relative;
+            z-index: 4;
+        }
+
+        .navbar-form{
+            margin: 10px 15px;
+            float: none !important;
+            padding-top: 1px;
+            padding-bottom: 1px;
+        }
+
+        .table-responsive {
+            width: 100%;
+            margin-bottom: 15px;
+            overflow-x: scroll;
+            overflow-y: hidden;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+
+    .form-group{
+        .form-control{
+            font-size: 16px;
+            height: 37px
+        }
+    }
+
+    .navbar-form{
+        .btn{
+            position: absolute;
+            top: 27px;
+            right: 15px;
+        }
+    }
+
+    .nav-open .navbar-collapse{
+        @include transform-translate-x(0px);
+    }
+    .nav-open .navbar .container{
+        left: -250px;
+    }
+    .nav-open .main-panel{
+        left: 0;
+        @include transform-translate-x(-260px);
+    }
+
+    .nav-open .sidebar{
+        @include shadow-big();
+    }
+
+    .nav-open{
+        .off-canvas-sidebar,
+        .sidebar{
+            @include transform-translate-x(0);
+        }
+    }
+
+    .close-layer{
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        opacity: 0;
+        top: 0;
+        left: auto;
+
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+
+        @include transition($slow-transition-time, $transition-ease-in);
+
+        &.visible{
+            opacity: 1;
+        }
+    }
+
+    .navbar-toggle .icon-bar {
+          display: block;
+          position: relative;
+          background: #fff;
+          width: 24px;
+          height: 2px;
+          border-radius: 1px;
+          margin: 0 auto;
+    }
+
+    .navbar-header .navbar-toggle {
+        margin: 10px 15px 10px 0;
+        width: 40px;
+        height: 40px;
+    }
+    .bar1,
+    .bar2,
+    .bar3 {
+      outline: 1px solid transparent;
+    }
+
+    @include topbar-x-rotation();
+    @include topbar-back-rotation();
+    @include bottombar-x-rotation();
+    @include bottombar-back-rotation();
+
+    .md-toolbar-toggle{
+        .icon-bar:nth-child(2){
+          top: 0px;
+          @include bar-animation($topbar-back);
+        }
+        .icon-bar:nth-child(3){
+          opacity: 1;
+        }
+        .icon-bar:nth-child(4){
+          bottom: 0px;
+          @include bar-animation($bottombar-back);
+        }
+
+        &.toggled{
+            .icon-bar:nth-child(1){
+              top: 6px;
+              @include bar-animation($topbar-x);
+            }
+            .icon-bar:nth-child(2){
+              opacity: 0;
+            }
+            .icon-bar:nth-child(3){
+              bottom: 6px;
+              @include bar-animation($bottombar-x);
+            }
+        }
+    }
+
+    @-webkit-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @-moz-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+
+    .dropdown-menu .divider{
+        background-color: rgba(229, 229, 229, 0.15);
+    }
+
+    .navbar-nav {
+        margin: 1px 0;
+
+        .open .dropdown-menu > li {
+            & > a{
+                padding: 15px 15px 5px 50px;
+            }
+
+            &:first-child > a{
+                padding: 5px 15px 5px 50px;
+            }
+
+            &:last-child > a {
+                padding: 15px 15px 25px 50px;
+            }
+        }
+    }
+
+    [class*="navbar-"] .navbar-nav {
+        & > li > a,
+        > li > a:hover,
+        > li > a:focus,
+        .active > a,
+        .active > a:hover,
+        .active > a:focus,
+        .open .dropdown-menu > li > a,
+        .open .dropdown-menu > li > a:hover,
+        .open .dropdown-menu > li > a:focus,
+        .navbar-nav .open .dropdown-menu > li > a:active {
+            color: white;
+        }
+
+        & > li > a,
+        > li > a:hover,
+        > li > a:focus,
+        .open .dropdown-menu > li > a,
+        .open .dropdown-menu > li > a:hover,
+        .open .dropdown-menu > li > a:focus{
+            opacity: .7;
+            background: transparent;
+        }
+
+        &.navbar-nav .open .dropdown-menu > li > a:active {
+            opacity: 1;
+        }
+
+        & .dropdown > a{
+            &:hover .caret {
+                border-bottom-color: #777;
+                border-top-color: #777;
+            }
+            &:active .caret {
+                border-bottom-color: white;
+                border-top-color: white;
+            }
+        }
+
+    }
+
+    .dropdown-menu {
+        display: none;
+    }
+    .navbar-fixed-top {
+        -webkit-backface-visibility: hidden;
+    }
+    #bodyClick {
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        opacity: 0;
+        top: 0;
+        left: auto;
+        right: 260px;
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+    }
+
+    .social-line .btn{
+        margin: $margin-bottom;
+    }
+    .subscribe-line .form-control{
+        margin: $margin-bottom;
+    }
+    .social-line.pull-right{
+        float: none;
+    }
+    .footer:not(.footer-big) nav > ul li{
+        float: none;
+    }
+    .social-area.pull-right{
+        float: none !important;
+    }
+    .form-control + .form-control-feedback{
+        margin-top: -8px;
+    }
+    .navbar-toggle:hover,.navbar-toggle:focus {
+        background-color: transparent !important;
+    }
+    .btn.dropdown-toggle{
+        margin-bottom: 0;
+    }
+    .media-post .author{
+        width: 20%;
+        float: none !important;
+        display: block;
+        margin: 0 auto 10px;
+    }
+    .media-post .media-body{
+        width: 100%;
+    }
+
+    .navbar-collapse.collapse{
+        height: 100% !important;
+    }
+    .navbar-collapse.collapse.in {
+        display: block;
+    }
+    .navbar-header .collapse, .navbar-toggle {
+        display:block !important;
+    }
+    .navbar-header {
+        float:none;
+    }
+    .navbar-collapse{
+        .nav p{
+            font-size: $font-size-base;
+            margin: 0;
+        }
+
+        [class^="pe-7s-"]{
+            float: left;
+            font-size: 20px;
+            margin-right: 10px;
+        }
+    }
+}
+
+@media (max-width: 768px){
+  .footer .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;
+    }
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_ripples.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_ripples.scss
new file mode 100644
index 0000000..c305be0
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_shadows.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_shadows.scss
new file mode 100644
index 0000000..2ac1768
--- /dev/null
+++ b/forecast_dashboard/dashboard/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);
+// }
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_sidebar-and-main-panel.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_sidebar-and-main-panel.scss
new file mode 100644
index 0000000..66e6b40
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+      }
+    }
+  }
+}
+
+.sidebar,
+.off-canvas-sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    @include shadow-big();
+    background-size: cover;
+    background-position: center center;
+    @extend .animation-transition-general;
+
+    .md-icon.md-theme-default.md-icon-font,
+    .material-icons{
+      color: #fff !important;
+      opacity: .8
+    }
+
+    .md-list {
+      &.nav {
+        position: initial;
+      }
+
+      background-color: transparent !important;
+
+      .md-list-item a{
+        text-transform: capitalize;
+      }
+
+      .md-list-item-content{
+        justify-content: flex-start;
+        min-height: auto;
+      }
+
+      & .md-list-item-container:hover{
+        background-color: rgba(200, 200, 200, 0.2) !important;
+      }
+    }
+
+    .md-ripple span .md-ripple-wave{
+      background-color: rgba(200, 200, 200, 0.4) !important;
+    }
+
+
+    .sidebar-wrapper{
+        position: relative;
+        height: calc(100vh - 75px);
+        overflow: auto;
+        width: 260px;
+        z-index: 4;
+
+        .dropdown .dropdown-backdrop{
+            display: none !important;
+        }
+
+        .navbar-form{
+            border: none;
+        }
+
+        .nav{
+            padding: 0;
+
+            [data-toggle="collapse"] ~ div > ul > li > a{
+                padding-left: 60px;
+            }
+
+            .caret{
+                margin-top: 13px;
+                position: absolute;
+                right: 18px;
+            }
+        }
+
+    }
+
+    .logo-tim{
+        border-radius: 50%;
+        border: 1px solid #333;
+        display: block;
+        height: 61px;
+        width: 61px;
+        float: left;
+        overflow: hidden;
+
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+
+
+    .nav{
+        margin-top: 20px;
+
+        &.nav-mobile-menu{
+          li a {
+            padding: 10px 15px;
+          }
+        }
+
+        li{
+
+          a{
+            display: flex;
+            text-decoration: none;
+            margin: 10px 15px 0;
+            border-radius: $border-radius-base;
+            color: $white-color !important;
+            white-space: nowrap;
+            cursor: pointer;
+            width: auto;
+          }
+
+            &:first-child > a{
+                margin: 0 15px;
+            }
+
+            &:hover > a,
+            .dropdown:hover > a{
+                background: rgba(200, 200, 200, 0.2);
+                color: $black-color;
+            }
+
+            .active {
+                color: #FFFFFF !important;
+
+                .md-ripple i{
+                    opacity: 1;
+                }
+            }
+        }
+
+        .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;
+// }
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_tables.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_tables.scss
new file mode 100644
index 0000000..2d2fa84
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_tabs.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_tabs.scss
new file mode 100644
index 0000000..e479c10
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_togglebutton.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_togglebutton.scss
new file mode 100644
index 0000000..9e67690
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/assets/scss/md/_togglebutton.scss
@@ -0,0 +1,87 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.togglebutton {
+  vertical-align: middle;
+  &, label, input, .toggle {
+    user-select: none;
+  }
+  label {
+    cursor: pointer;
+    color: $mdb-toggle-label-color;
+    @include mdb-label-color-toggle-focus();
+
+    // Hide original checkbox
+    input[type=checkbox] {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .toggle {
+      text-align: left; // Issue #737 horizontal form
+      margin-left: 5px;
+    }
+    // Switch bg off and disabled
+    .toggle,
+    input[type=checkbox][disabled] + .toggle {
+      content: "";
+      display: inline-block;
+      width: 30px;
+      height: 15px;
+      background-color: rgba(80, 80, 80, 0.7);
+      border-radius: 15px;
+      margin-right: 15px;
+      transition: background 0.3s ease;
+      vertical-align: middle;
+    }
+    // Handle off
+    .toggle:after {
+      content: "";
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background-color: #FFFFFF;
+      border-radius: 20px;
+      position: relative;
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+      left: -5px;
+      top: -3px;
+      border: 1px solid $mdb-checkbox-border-color;
+      transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+    }
+    input[type=checkbox] {
+      // Handle disabled
+      &[disabled] {
+        & + .toggle:after,
+        &:checked + .toggle:after {
+          background-color: #BDBDBD;
+        }
+      }
+
+      & + .toggle:active:after,
+      &[disabled] + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+      }
+
+      // Ripple off and disabled
+      &:checked + .toggle:after {
+        left: 15px;
+      }
+    }
+
+    // set bg when checked
+    input[type=checkbox]:checked {
+      + .toggle {
+        background-color: rgba($brand-primary, (70/100)); // Switch bg on
+      }
+
+      + .toggle:after {
+        border-color: $brand-primary; // Handle on
+      }
+
+      + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
+      }
+    }
+  }
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_typography.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_typography.scss
new file mode 100644
index 0000000..3fe534e
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/_variables.scss b/forecast_dashboard/dashboard/src/assets/scss/md/_variables.scss
new file mode 100644
index 0000000..294eb6f
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/assets/scss/md/_variables.scss
@@ -0,0 +1,1127 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+@import '_colors';
+
+// Typography elements
+$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
+$mdb-text-color-light:  $white !default;
+$mdb-text-color-light-hex: $white !default; // for contrast function in inverse
+$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
+$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
+$icon-color: rgba(0,0,0,0.5) !default;
+
+
+$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
+$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;
+
+
+//---
+// Converted bs variables
+
+// Bootstrap brand color customization
+$white-color: #FFFFFF !default;
+
+$white-transparent: rgba($white-color, .8);
+
+$gray-color:  #999999 !default;
+
+$brand-primary: $purple !default;
+$brand-success: $green !default;
+$brand-danger: $red !default;
+$brand-warning: $orange !default;
+$brand-info: $cyan !default;
+$brand-rose: $pink !default;
+
+$border-radius-base: 3px !default;
+$border-radius-small: 2px !default;
+$border-radius-large: 6px !default;
+$border-radius-huge: 10px !default;
+$border-radius-label: 12px !default;
+$border-radius-extreme: 30px !default;
+
+// Typography
+$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
+$font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default;
+
+$headings-font-weight: 300 !default;
+
+$font-weight-light: 300 !default;
+$font-weight-default: 400 !default;
+$font-weight-bold:    500 !default;
+$font-weight-extra-bold: 700 !default;
+$font-weight-ultra-bold: 900 !default;
+
+$body-bg: #EEEEEE !default;
+//---
+
+// import bs variables for sass, first declared wins.
+$bootstrap-sass-asset-helper: false !default;
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-base:              #000 !default;
+$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:              lighten($gray-base, 20%) !default;   // #333
+$gray:                   lighten($gray-base, 33.5%) !default; // #555
+$gray-light:             #999999 !default; // #999999
+$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
+
+$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
+$brand-success:         #5cb85c !default;
+$brand-info:            #5bc0de !default;
+$brand-warning:         #f0ad4e !default;
+$brand-danger:          #d9534f !default;
+
+$black-color:           #495057 !default;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg:               #fff !default;
+//** Global text color on `<body>`.
+$text-color:            $gray-dark !default;
+
+//** Global textual link color.
+$link-color:            $brand-primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color:      darken($link-color, 15%) !default;
+//** Link hover decoration.
+$link-hover-decoration: underline !default;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-base:          14px !default;
+$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1:                 3.3125rem;
+$font-size-h2:                 2.25rem !default;
+$font-size-h3:                 1.5625rem;
+$font-size-h4:                 1.125rem !default;
+$font-size-h5:                 1.0625rem !default;
+$font-size-h6:                 0.75rem !default;
+$font-paragraph:               14px !default;
+$font-size-navbar:             16px !default;
+$font-size-small:              12px !default;
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base:        1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family:    inherit !default;
+$headings-font-weight:    500 !default;
+$headings-line-height:    1.1 !default;
+$headings-color:          inherit !default;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+
+//** File name for all font files.
+$icon-font-name:          "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base:              15px !default;
+$margin-base:               15px !default;
+
+$padding-base-vertical:     6px !default;
+$padding-base-horizontal:   12px !default;
+
+$padding-large-vertical:    10px !default;
+$padding-large-horizontal:  16px !default;
+
+$padding-small-vertical:    5px !default;
+$padding-small-horizontal:  10px !default;
+
+$padding-xs-vertical:       1px !default;
+$padding-xs-horizontal:     5px !default;
+
+$line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$line-height-small:         1.5 !default;
+
+$border-radius-base:        4px !default;
+$border-radius-large:       6px !default;
+$border-radius-small:       3px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding:            8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px !default;
+
+//** Default background color used for all tables.
+$table-bg:                      transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent:               #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover:                #f5f5f5 !default;
+$table-bg-active:               $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color:            #ddd !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal !default;
+
+$btn-default-color:              #333 !default;
+$btn-default-bg:                 #fff !default;
+$btn-default-border:             #ccc !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             darken($btn-primary-bg, 5%) !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $brand-success !default;
+$btn-success-border:             darken($btn-success-bg, 5%) !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $brand-info !default;
+$btn-info-border:                darken($btn-info-bg, 5%) !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-border:             darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-border:              darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color:        $gray-light !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base:         $border-radius-base !default;
+$btn-border-radius-large:        $border-radius-large !default;
+$btn-border-radius-small:        $border-radius-small !default;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg:                       #fff !default;
+//** `<input disabled>` background color
+$input-bg-disabled:              $gray-lighter !default;
+
+//** Text color for `<input>`s
+$input-color:                    $gray !default;
+//** `<input>` border color
+$input-border:                   #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+$input-border-radius:            $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-large:      $border-radius-large !default;
+//** Small `.form-control` border radius
+$input-border-radius-small:      $border-radius-small !default;
+
+//** Border color for inputs on focus
+$input-border-focus:             #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder:        #999 !default;
+
+//** Default `.form-control` height
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+//** `.form-group` margin
+$form-group-margin-bottom:       15px !default;
+
+$legend-color:                   $gray-dark !default;
+$legend-border-color:            #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg:           $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled:                not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color:            $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000 !default;
+$zindex-dropdown:          1000 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
+$zindex-navbar-fixed:      1030 !default;
+$zindex-modal-background:  1040 !default;
+$zindex-modal:             1050 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop:            (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:                    50px !default;
+$navbar-margin-bottom:             $line-height-computed !default;
+$navbar-border-radius:             $border-radius-base !default;
+$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height:       340px !default;
+
+$navbar-default-color:             #777 !default;
+$navbar-default-bg:                #f8f8f8 !default;
+$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+
+// Navbar links
+$navbar-default-link-color:                #777 !default;
+$navbar-default-link-hover-color:          #333 !default;
+$navbar-default-link-hover-bg:             transparent !default;
+$navbar-default-link-active-color:         #555 !default;
+$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color:       #ccc !default;
+$navbar-default-link-disabled-bg:          transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color:               $navbar-default-link-color !default;
+$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg:            transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:           #ddd !default;
+$navbar-default-toggle-icon-bar-bg:        #888 !default;
+$navbar-default-toggle-border-color:       #ddd !default;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
+$navbar-inverse-bg:                         #222 !default;
+$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color:           #fff !default;
+$navbar-inverse-link-hover-bg:              transparent !default;
+$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color:        #444 !default;
+$navbar-inverse-link-disabled-bg:           transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color:          #fff !default;
+$navbar-inverse-brand-hover-bg:             transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:            #333 !default;
+$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
+$navbar-inverse-toggle-border-color:        #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:                          10px 15px !default;
+$nav-link-hover-bg:                         $gray-lighter !default;
+
+$nav-disabled-link-color:                   $gray-light !default;
+$nav-disabled-link-hover-color:             $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color:                     #ddd !default;
+
+$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg:             $body-bg !default;
+$nav-tabs-active-link-hover-color:          $gray !default;
+$nav-tabs-active-link-hover-border-color:   #ddd !default;
+
+$nav-tabs-justified-link-border-color:            #ddd !default;
+$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius:                   $border-radius-base !default;
+$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+$nav-pills-active-link-hover-color:         $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     $link-color !default;
+$pagination-bg:                        #fff !default;
+$pagination-border:                    #ddd !default;
+
+$pagination-hover-color:               $link-hover-color !default;
+$pagination-hover-bg:                  $gray-lighter !default;
+$pagination-hover-border:              #ddd !default;
+
+$pagination-active-color:              #fff !default;
+$pagination-active-bg:                 $brand-primary !default;
+$pagination-active-border:             $brand-primary !default;
+
+$pagination-disabled-color:            $gray-light !default;
+$pagination-disabled-bg:               #fff !default;
+$pagination-disabled-border:           #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg !default;
+$pager-border:                         $pagination-border !default;
+$pager-border-radius:                  15px !default;
+
+$pager-hover-bg:                       $pagination-hover-bg !default;
+
+$pager-active-bg:                      $pagination-active-bg !default;
+$pager-active-color:                   $pagination-active-color !default;
+
+$pager-disabled-color:                 $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px !default;
+$jumbotron-color:                inherit !default;
+$jumbotron-bg:                   $gray-lighter !default;
+$jumbotron-heading-color:        inherit !default;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #3c763d !default;
+$state-success-bg:               #dff0d8 !default;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text:                #31708f !default;
+$state-info-bg:                  #d9edf7 !default;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text:             #8a6d3b !default;
+$state-warning-bg:               #fcf8e3 !default;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text:              #a94442 !default;
+$state-danger-bg:                #f2dede !default;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px !default;
+//** Tooltip text color
+$tooltip-color:               #fff !default;
+//** Tooltip background color
+$tooltip-bg:                  #000 !default;
+$tooltip-opacity:             .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          #fff !default;
+//** Popover maximum width
+$popover-max-width:                   276px !default;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color:       #ccc !default;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width:                 10px !default;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $gray-light !default;
+//** Primary label background color
+$label-primary-bg:            $brand-primary !default;
+//** Success label background color
+$label-success-bg:            $brand-success !default;
+//** Info label background color
+$label-info-bg:               $brand-info !default;
+//** Warning label background color
+$label-warning-bg:            $brand-warning !default;
+//** Danger label background color
+$label-danger-bg:             $brand-danger !default;
+
+//** Default label text color
+$label-color:                 #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px !default;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg:                             #fff !default;
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5 !default;
+//** Modal header border color
+$modal-header-border-color:   #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color !default;
+
+$modal-lg:                    900px !default;
+$modal-md:                    600px !default;
+$modal-sm:                    300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:               15px !default;
+$alert-border-radius:         $border-radius-base !default;
+$alert-link-font-weight:      bold !default;
+
+$alert-success-bg:            $state-success-bg !default;
+$alert-success-text:          $state-success-text !default;
+$alert-success-border:        $state-success-border !default;
+
+$alert-info-bg:               $state-info-bg !default;
+$alert-info-text:             $state-info-text !default;
+$alert-info-border:           $state-info-border !default;
+
+$alert-warning-bg:            $state-warning-bg !default;
+$alert-warning-text:          $state-warning-text !default;
+$alert-warning-border:        $state-warning-border !default;
+
+$alert-danger-bg:             $state-danger-bg !default;
+$alert-danger-text:           $state-danger-text !default;
+$alert-danger-border:         $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color:          #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:      $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 #fff !default;
+//** `.list-group-item` border color
+$list-group-border:             #ddd !default;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color:       $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color:         #555 !default;
+$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Panels
+//
+//##
+
+$panel-bg:                    #fff !default;
+$panel-body-padding:          15px !default;
+$panel-heading-padding:       10px 15px !default;
+$panel-footer-padding:        $panel-heading-padding !default;
+$panel-border-radius:         $border-radius-base !default;
+
+//** Border color for elements within panels
+$panel-inner-border:          #ddd !default;
+$panel-footer-bg:             #f5f5f5 !default;
+
+$panel-default-text:          $gray-dark !default;
+$panel-default-border:        #ddd !default;
+$panel-default-heading-bg:    #f5f5f5 !default;
+
+$panel-primary-text:          #fff !default;
+$panel-primary-border:        $brand-primary !default;
+$panel-primary-heading-bg:    $brand-primary !default;
+
+$panel-success-text:          $state-success-text !default;
+$panel-success-border:        $state-success-border !default;
+$panel-success-heading-bg:    $state-success-bg !default;
+
+$panel-info-text:             $state-info-text !default;
+$panel-info-border:           $state-info-border !default;
+$panel-info-heading-bg:       $state-info-bg !default;
+
+$panel-warning-text:          $state-warning-text !default;
+$panel-warning-border:        $state-warning-border !default;
+$panel-warning-heading-bg:    $state-warning-bg !default;
+
+$panel-danger-text:           $state-danger-text !default;
+$panel-danger-border:         $state-danger-border !default;
+$panel-danger-heading-bg:     $state-danger-bg !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding:           4px !default;
+//** Thumbnail background color
+$thumbnail-bg:                $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border:            #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius:     $border-radius-base !default;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color:     $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding:   9px !default;
+
+
+//== Wells
+//
+//##
+
+$well-bg:                     #f5f5f5 !default;
+$well-border:                 darken($well-bg, 7%) !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color:                 #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #fff !default;
+$badge-bg:                    $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color:          $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff !default;
+
+$badge-font-weight:           bold !default;
+$badge-line-height:           1 !default;
+$badge-border-radius:         10px !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg:                 #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color:              #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:                      #fff !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+$carousel-control-font-size:                  20px !default;
+
+$carousel-indicator-active-bg:                #fff !default;
+$carousel-indicator-border-color:             #fff !default;
+
+$carousel-caption-color:                      #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e !default;
+$code-bg:                     #f9f2f4 !default;
+
+$kbd-color:                   #fff !default;
+$kbd-bg:                      #333 !default;
+
+$pre-bg:                      #f5f5f5 !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$pre-scrollable-max-height:   340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted:                  $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light !default;
+//** Headings small color
+$headings-small-color:        $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color:      $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color:     $gray-lighter !default;
+//** Page header border color
+$page-header-border-color:    $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal !default;
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
+//** Horizontal line color.
+$hr-border:                   $gray-lighter !default;
+
+
+// Bootstrap Material Design variables start with mdb-
+$mdb-brand-inverse: $indigo !default;
+
+
+/* ANIMATION */
+$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
+
+
+//---
+// FIXME: Similar but not quite the same as Bootstrap variables
+// FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables
+$contrast-factor: 40% !default;
+//---
+
+
+
+
+// --------------------
+// inputs
+$mdb-input-placeholder-color: #AAAAAA !default;
+$mdb-input-underline-color: #D2D2D2 !default;
+$mdb-label-static-size-ratio: 75 / 100 !default;
+$mdb-help-block-size-ratio: 75 / 100 !default;
+
+$mdb-input-font-size-base: 14px !default;
+$mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
+$mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
+
+// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
+//** Unit-less `line-height` for use in components like buttons.
+
+$mdb-input-line-height-base:        $line-height-base; //1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$mdb-input-line-height-computed:    floor(($mdb-input-font-size-base * $mdb-input-line-height-base)) !default; // ~20px
+$mdb-input-line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$mdb-input-line-height-small:         1.5 !default;
+
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+$mdb-input-padding-base-vertical:     8px - 1px !default; // was 6.
+$mdb-input-padding-base-horizontal:   0 !default; // was 12.
+$mdb-label-as-placeholder-shim-base:  0 !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-base:           16px !default;
+
+$mdb-input-padding-large-vertical:    10px - 1px !default; // 10
+$mdb-input-padding-large-horizontal:  0 !default;  // 16
+$mdb-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-large:          16px !default;
+
+$mdb-input-padding-small-vertical:    4px - 1px !default; // 5
+$mdb-input-padding-small-horizontal:  0 !default; // 10
+$mdb-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
+$mdb-label-top-margin-small:          12px !default;
+
+$mdb-input-padding-xs-vertical:       2px !default; // 1
+$mdb-input-padding-xs-horizontal:     0 !default; // 5
+
+$mdb-input-border-radius-base:        0 !default;
+$mdb-input-border-radius-large:       0 !default;
+$mdb-input-border-radius-small:       0 !default;
+
+
+//** Default `.form-control` height
+$mdb-input-height-base:              ($mdb-input-line-height-computed + ($mdb-input-padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$mdb-input-height-large:             (ceil($mdb-input-font-size-large * $mdb-input-line-height-large) + ($mdb-input-padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$mdb-input-height-small:             (floor($mdb-input-font-size-small * $mdb-input-line-height-small) + ($mdb-input-padding-small-vertical * 2) + 2) !default;
+
+
+
+
+// Card
+$mdb-card-body-text: $mdb-text-color-primary !default;
+$mdb-card-body-background: #fff !default;
+$mdb-card-image-headline: #fff !default;
+
+$text-disabled: #a8a8a8 !default;
+$background-disabled: #eaeaea !default;
+
+// Checkboxes
+$mdb-checkbox-size: 20px !default;
+$mdb-checkbox-animation-ripple: 500ms !default;
+$mdb-checkbox-animation-check: 0.3s !default;
+$mdb-checkbox-checked-color: $brand-primary !default;
+
+$mdb-checkbox-label-color: $mdb-label-color !default;
+$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
+
+// Popovers and Popups
+$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
+$mdb-popover-color: #ececec !default;
+
+// Dropdown Menu
+$mdb-dropdown-font-size: 13px !default;
+
+// Toggle
+$mdb-toggle-label-color: $mdb-label-color !default;
+
+// Radio:
+$mdb-radio-label-color: $mdb-label-color !default;
+$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
+$mdb-radio-color-on: $brand-primary !default;
+
+// Buttons:
+$mdb-btn-font-size-base: 12px !default;
+$mdb-btn-font-size-lg: 14px !default;
+$mdb-btn-font-size-sm: 11px !default;
+$mdb-btn-font-size-xs: 10px !default;
+
+
+$mdb-btn-background-color: $body-bg; //transparent !default;
+$mdb-btn-background-color-text: $mdb-text-color-primary !default;
+
+
+$mdl-btn-border-radus: 2px !default;
+//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;
+
+$mdb-btn-fab-size: 56px !default;
+$mdb-btn-fab-size-mini: 40px !default;
+$mdb-btn-fab-font-size: 24px !default;
+
+$mdb-btn-icon-size: 32px !default;
+$mdb-btn-icon-size-mini: 17px !default;
+
+/* SHADOWS */
+$mdb-shadow-key-umbra-opacity: 0.2 !default;
+$mdb-shadow-key-penumbra-opacity: 0.14 !default;
+$mdb-shadow-ambient-shadow-opacity: 0.12 !default;
+
+
+$fancy-shadow: 0 13px 39px -10px rgba(0, 0, 0, 0.65), 0 1px 25px 0px rgba(0, 0, 0, 0.15);
+
+
+$general-transition-time:  300ms !default;
+
+$slow-transition-time:           370ms !default;
+$fast-transition-time:           150ms !default;
+
+$transition-linear:                                   linear !default;
+$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease:           ease 0s;
+
+//variables for social
+$social-facebook: 			#3b5998;
+$social-twitter: 			#55acee;
+$social-pinterest: 			#cc2127;
+$social-google: 			#dd4b39;
+$social-linkedin: 			#0976b4;
+$social-dribbble: 			#ea4c89;
+$social-github: 			#333333;
+$social-youtube: 			#e52d27;
+$social-instagram: 		    #125688;
+$social-reddit: 			#ff4500;
+$social-tumblr: 			#35465c;
+$social-behance: 			#1769ff;
+
+$transparent-bg:             transparent !default;
+
+$background-light-grey:     #E8E7E3 !default;
+$background-lighter-grey:   #F0EFEB !default;
+$font-background-light-grey: #9C9B99 !default;
+$font-hover-background-light-grey: #5E5E5C !default;
+
+
+// variables from lbd
+
+$transition-ease-in:              ease-in !default;
+$transition-ease-out:             ease-out !default;
+$ultra-fast-transition-time:      60ms  !default;
+$navbar-padding-a:               10px 15px;
+$padding-zero:                   0px !default;
+$sidebar-width:               calc(100% - 260px) !default;
+$topbar-back:          topbar-back !default;
+$bottombar-back:       bottombar-back !default;
+$topbar-x:             topbar-x !default;
+$bottombar-x:          bottombar-x !default;
+$margin-bottom:                0 0 10px 0 !default;
+$margin-base-vertical:         15px !default;
+
+// Variables for datetimepicker //
+$padding-default-vertical:     10px !default;
+$medium-pale-bg:             #F1EAE0 !default;
+$pale-bg:                    #F9F7F3 !default;
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/mixins/_chartist.scss b/forecast_dashboard/dashboard/src/assets/scss/md/mixins/_chartist.scss
new file mode 100644
index 0000000..9841d41
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/assets/scss/md/mixins/_chartist.scss
@@ -0,0 +1,89 @@
+// Scales for responsive SVG containers
+$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
+$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
+
+// Class names to be used when generating CSS
+$ct-class-chart: ct-chart !default;
+$ct-class-chart-line: ct-chart-line !default;
+$ct-class-chart-bar: ct-chart-bar !default;
+$ct-class-horizontal-bars: ct-horizontal-bars !default;
+$ct-class-chart-pie: ct-chart-pie !default;
+$ct-class-chart-donut: ct-chart-donut !default;
+$ct-class-label: ct-label !default;
+$ct-class-series: ct-series !default;
+$ct-class-line: ct-line !default;
+$ct-class-point: ct-point !default;
+$ct-class-area: ct-area !default;
+$ct-class-bar: ct-bar !default;
+$ct-class-slice-pie: ct-slice-pie !default;
+$ct-class-slice-donut: ct-slice-donut !default;
+$ct-class-grid: ct-grid !default;
+$ct-class-vertical: ct-vertical !default;
+$ct-class-horizontal: ct-horizontal !default;
+$ct-class-start: ct-start !default;
+$ct-class-end: ct-end !default;
+
+// Container ratio
+$ct-container-ratio: (1/1.618) !default;
+
+// Text styles for labels
+$ct-text-color: rgba(0, 0, 0, 0.4) !default;
+$ct-text-size: 0.875rem !default;
+$ct-text-align: flex-start !default;
+$ct-text-justify: flex-start !default;
+$ct-text-line-height: 1;
+
+.ct-big-chart-white{
+    $ct-grid-color: rgba(250, 250, 250, 0.7) !default;
+}
+// Grid styles
+$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
+$ct-grid-dasharray: 2px !default;
+$ct-grid-width: 1px !default;
+
+// Line chart properties
+$ct-line-width: 3px !default;
+$ct-line-dasharray: false !default;
+$ct-point-size: 8px !default;
+// Line chart point, can be either round or square
+$ct-point-shape: round !default;
+// Area fill transparency between 0 and 1
+$ct-area-opacity: 0.8 !default;
+
+// Bar chart bar width
+$ct-bar-width: 10px !default;
+
+// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
+$ct-donut-width: 60px !default;
+
+// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
+// should set this property to false
+$ct-include-classes: true !default;
+
+// If this is set to true the CSS will contain colored series. You can extend or change the color with the
+// properties below
+$ct-include-colored-series: $ct-include-classes !default;
+
+// If set to true this will include all responsive container variations using the scales defined at the top of the script
+$ct-include-alternative-responsive-containers: $ct-include-classes !default;
+
+// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
+$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
+$ct-series-colors: (
+
+  $brand-info,
+  $brand-danger,
+  $brand-warning,
+  $brand-primary,
+  $brand-success,
+  $font-background-light-grey,
+  $gray-color,
+  $social-google,
+  $social-tumblr,
+  $social-youtube,
+  $social-twitter,
+  $social-pinterest,
+  $social-behance,
+  #6188e2,
+  #a748ca
+) !default;
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/mixins/_transparency.scss b/forecast_dashboard/dashboard/src/assets/scss/md/mixins/_transparency.scss
new file mode 100644
index 0000000..da32b74
--- /dev/null
+++ b/forecast_dashboard/dashboard/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; 
+}
\ No newline at end of file
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/mixins/_vendor-prefixes.scss b/forecast_dashboard/dashboard/src/assets/scss/md/mixins/_vendor-prefixes.scss
new file mode 100644
index 0000000..88f6e21
--- /dev/null
+++ b/forecast_dashboard/dashboard/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);}
+    }
+
+}
diff --git a/forecast_dashboard/dashboard/src/assets/scss/md/plugins/_perfect-scrollbar.scss b/forecast_dashboard/dashboard/src/assets/scss/md/plugins/_perfect-scrollbar.scss
new file mode 100644
index 0000000..dbae094
--- /dev/null
+++ b/forecast_dashboard/dashboard/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; }
diff --git a/forecast_dashboard/dashboard/src/components/Addrule.vue b/forecast_dashboard/dashboard/src/components/Addrule.vue
new file mode 100644
index 0000000..d65baac
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Addrule.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class = "content">
+    <div class = "md-layout">
+
+
+
+
+        <div class="md-layout-item md-small-size-100 md-size-50">
+          <md-field>
+            <label>Target instance</label>
+            <md-select v-model="target" name = "target" id="target">
+              <md-option value="cdr">Coin CDR</md-option>
+              <md-option value="bill">Coin Bill</md-option>
+            </md-select>
+          </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-100">
+            <md-field>
+              <label>Rule</label>
+              <md-textarea style="height:300px" v-model="rule"></md-textarea>
+            </md-field>
+
+        </div>
+
+        <div class="md-layout-item md-small-size-100 md-size-100">
+
+        <md-button class="md-success" id="post" v-on:click="getJson">Execute</md-button>
+        <md-button id="clear" v-on:click="clear">Clear</md-button>
+
+    </div>
+
+
+
+</div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "addrule",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      target: "cdr",
+      rule: "",
+      info: null,
+      data: {
+        "target": "",
+        "rule": ""
+      },
+      selected: [],
+      records: []
+    };
+  },
+  methods:{
+    getJson: function(){
+      this.data.target = this.target
+      this.data.rule = this.rule
+      this.$axios
+        .post('http://127.0.0.1:5000/addrule',this.data)
+        .then(response => {
+          this.info = response.data;
+          this.$root.$emit('list');
+        })
+    },
+    clear: function(){
+      this.target = "cdr"
+      this.rule = ""
+      this.info = ""
+    }
+  }
+
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/components/Cards/ChartCard.vue b/forecast_dashboard/dashboard/src/components/Cards/ChartCard.vue
new file mode 100644
index 0000000..2045432
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Cards/ChartCard.vue
@@ -0,0 +1,95 @@
+<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() {
+      var chartIdQuery = `#${this.chartId}`;
+      this.$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();
+    this.$nextTick(this.initChart);
+  }
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/components/Cards/NavTabsCard.vue b/forecast_dashboard/dashboard/src/components/Cards/NavTabsCard.vue
new file mode 100644
index 0000000..2c80f09
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/components/Cards/StatsCard.vue b/forecast_dashboard/dashboard/src/components/Cards/StatsCard.vue
new file mode 100644
index 0000000..55bbd00
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/components/Cleanup.vue b/forecast_dashboard/dashboard/src/components/Cleanup.vue
new file mode 100644
index 0000000..a26ccad
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Cleanup.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class = "content">
+    <div class = "md-layout">
+
+    <div
+      class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50"
+      >
+      <md-card>
+        <md-card-header data-background-color="red">
+          <h4 class="title">Record Cleanup</h4>
+          <p class="category">Target model to clean-up</p>
+        </md-card-header>
+        <div class="md-layout-item md-small-size-100 md-size-50">
+          <md-field>
+            <label>Target model</label>
+            <md-input v-model="target" type="text"></md-input>
+          </md-field>
+
+        </div>
+
+        <div class="md-layout-item md-small-size-100 md-size-50">
+
+        <md-button class="md-danger" id="post" v-on:click="getJson">Execute</md-button>
+        <md-button id="clear" v-on:click="clear">Clear</md-button>
+
+    </div>
+
+    </md-card>
+    </div>
+
+    <div
+      class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50"
+      >
+      <md-card v-if="visible">
+        <md-card-header data-background-color="orange">
+          <h4 class="title">Cleanup Output</h4>
+          <p class="category">Records Deleted by Type</p>
+        </md-card-header>
+      <md-table v-model="records" :table-header-color="tableHeaderColor">
+        <md-table-row slot="md-table-row" slot-scope="{ item }">
+          <md-table-cell md-label="Type">{{ item.type }}</md-table-cell>
+          <md-table-cell md-label="Count">{{ item.count }}</md-table-cell>
+        </md-table-row>
+      </md-table>
+
+
+      </md-card>
+    </div>
+
+</div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "cleanup",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      target: "",
+      rules: false,
+      info: null,
+      visible: false,
+      data: {
+        "target": "",
+        "rules": false
+      },
+      selected: [],
+      records: [
+        {
+        type:"Bill",
+        count: 0
+        },
+        {
+        type:"Usage",
+        count: 0
+        },
+        {
+        type:"UDR",
+        count: 0
+        },
+        {
+        type:"CDR",
+        count: 0
+        }
+      ]
+    };
+  },
+  methods:{
+    getJson: function(){
+      if(this.target != ""){
+        this.records = []
+        this.data.target = this.target
+        this.data.rules = this.rules
+        this.$axios
+          .post('http://127.0.0.1:5000/cleanup',this.data)
+          .then(response => {
+            this.info = response.data
+            this.records.push({type:"Bill",count:this.info.bills})
+            this.records.push({type:"Usage",count:this.info.usages})
+            this.records.push({type:"UDR",count:this.info.udrs})
+            this.records.push({type:"CDR",count:this.info.cdrs})
+            this.visible = true
+            this.$emit('update')
+          })
+      }
+      //this.records.push({type:"Billing Rules",count:this.info.Bill_rules}),
+      //this.records.push({type:"Charge Rules",count:this.info.cdr_rules})))
+    },
+    clear: function(){
+      this.target = ""
+      this.rules = false
+      this.records = []
+      this.visible = false
+    }
+  }
+
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/components/Dropdown.vue b/forecast_dashboard/dashboard/src/components/Dropdown.vue
new file mode 100644
index 0000000..f426e73
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/components/Forecast.vue b/forecast_dashboard/dashboard/src/components/Forecast.vue
new file mode 100644
index 0000000..d93589e
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Forecast.vue
@@ -0,0 +1,158 @@
+<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="purple">
+          <h4 class="title">Input</h4>
+          <p class="category">Select forecast parameters</p>
+        </md-card-header>
+        <div class="md-layout-item md-small-size-100 md-size-100">
+        <md-field>
+          <label for="movie">Type</label>
+          <md-select v-model="type" name="type" id="type">
+            <md-option value="single">Single account</md-option>
+            <md-option value="global">Global</md-option>
+            <md-option value="pattern">Pattern-based global</md-option>
+          </md-select>
+        </md-field>
+      </div>
+        <div v-if="type === 'single'" class="md-layout-item md-small-size-100 md-size-100">
+          <md-field>
+            <label>Account</label>
+            <md-select v-model="account" name="account" id="account">
+              <md-option v-for="account in options" :value="account.value">{{account.text}}</md-option>
+            </md-select>
+          </md-field>
+          </div>
+
+        <div class="md-layout-item md-small-size-100 md-size-100">
+          <md-field>
+            <label>Target model</label>
+            <md-input v-model="target" type="text"></md-input>
+          </md-field>
+          </div>
+          <div class="md-layout-item md-small-size-100 md-size-100">
+            <md-field>
+              <label>Forecast length</label>
+              <md-input v-model="size" type="number"></md-input>
+            </md-field>
+
+        </div>
+
+        <div class="md-layout-item md-small-size-100 md-size-100">
+
+        <md-button class="md-success" id="post" v-on:click="getJson">Execute</md-button>
+        <md-button id="clear" v-on:click="clear">Clear</md-button>
+
+    </div>
+
+    </md-card>
+    </div>
+
+
+
+</div>
+</div>
+</template>
+
+<script>
+
+export default {
+
+  name: "forecast",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      type: "single",
+      account: null,
+      accounts: null,
+      options: [],
+      target: "",
+      size: 30,
+      info: null,
+      data: {},
+      bills: []
+
+    };
+  },
+  mounted(){
+    this.$axios
+      .get('http://127.0.0.1:5000/accounts')
+      .then(response => {
+        this.accounts = response.data;
+          for (var option in this.accounts){
+            this.options.push({'value':this.accounts[option],'text':this.accounts[option]})
+          }
+      })
+  },
+  methods:{
+    getJson: function(){
+      if(this.type === "single"){
+        this.data = {
+          "account": this.account,
+          "target": this.target,
+          "size": this.size
+        }
+        this.$axios
+          .post('http://127.0.0.1:5000/singleforecast',this.data)
+          .then(response => {
+            this.info = response.data;
+            for (var key in this.info){
+              this.bills.push({account:key,charge:this.info[key] + "CHF"})
+            }
+            this.$emit('update')
+          })
+      }
+      else if(this.type === "global"){
+        this.data = {
+          "target": this.target,
+          "size": this.size
+        }
+        this.$axios
+          .post('http://127.0.0.1:5000/globalforecast',this.data)
+          .then(response => {
+            this.info = response.data;
+            for (var key in this.info){
+              this.bills.push({account:key,charge:this.info[key] + "CHF"})
+            }
+            this.$emit('update')
+          })
+      }
+      else if(this.type === "pattern"){
+        this.data = {
+          "target": this.target,
+          "size": this.size
+        }
+        this.$axios
+          .post('http://127.0.0.1:5000/patternforecast',this.data)
+          .then(response => {
+            this.info = response.data;
+            for (var key in this.info){
+              this.bills.push({account:key,charge:this.info[key] + "CHF"})
+            }
+            this.$emit('update')
+          })
+      }
+
+    },
+    clear: function(){
+      this.type = "single"
+      this.target = ""
+      this.account = ""
+      this.size = 30
+      this.data = {}
+      this.info = ""
+    }
+  }
+
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/components/Listrules.vue b/forecast_dashboard/dashboard/src/components/Listrules.vue
new file mode 100644
index 0000000..d5ecb57
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Listrules.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <nav-tabs-card >
+      <template slot="content">
+        <span class="md-nav-tabs-title">Rules:</span>
+        <md-tabs class="md-info" md-alignment="left">
+          <md-tab id="tab-coin" md-label="Coin CDR" md-icon="code">
+            <md-card>
+              <md-card-header data-background-color="orange">
+                <h4 class="title">CDR Rules</h4>
+                <p class="category">Rules for generating CDRs from UDRs</p>
+              </md-card-header>
+            <md-table v-model="cdrrules" :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="Rule"><pre>{{ item.rule }}</pre></md-table-cell>
+                <md-table-cell md-label="Delete">
+                  <md-button class="md-just-icon md-simple md-danger" v-on:click="deleteRule('cdr',item.name)" id="delete">
+                    <md-icon>close</md-icon>
+                    <md-tooltip md-direction="top">Delete</md-tooltip>
+                  </md-button>
+                </md-table-cell>
+              </md-table-row>
+            </md-table>
+          </md-card>
+        </md-tab>
+        <md-tab id="tab-bill" md-label="Coin Bill" md-icon="code">
+          <md-card>
+            <md-card-header data-background-color="orange">
+              <h4 class="title">Billing Rules</h4>
+              <p class="category">Rules for generating Bills from CDRs</p>
+            </md-card-header>
+          <md-table v-model="billrules" :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="Rule"><pre>{{ item.rule }}</pre></md-table-cell>
+              <md-table-cell md-label="Delete">
+                <md-button class="md-just-icon md-simple md-danger" v-on:click="deleteRule('bill',item.name)" id="delete">
+                  <md-icon>close</md-icon>
+                  <md-tooltip md-direction="top">Delete</md-tooltip>
+                </md-button>
+              </md-table-cell>
+            </md-table-row>
+          </md-table>
+        </md-card>
+      </md-tab>
+      <md-tab id="add-rule" md-label="New Rule" md-icon="add">
+        <md-card>
+          <md-card-header data-background-color="orange">
+            <h4 class="title">Add Rule</h4>
+            <p class="category">Add rules to pricing models</p>
+          </md-card-header>
+          <md-card-content>
+            <addrule table-header-color="green"></addrule>
+          </md-card-content>
+        </md-card>
+      </md-tab>
+</md-tabs>
+</template>
+</nav-tabs-card>
+  </div>
+
+</template>
+
+<script>
+import {
+  NavTabsCard,
+  Addrule
+} from "./";
+export default {
+  components:{
+    NavTabsCard,
+    Addrule
+  },
+  name: "listrules",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      info: null,
+      cdrrules: [],
+      billrules: [],
+      data: {
+        "target": "",
+        "rule": ""
+      }
+    };
+  },
+  mounted(){
+      this.updateList();
+      this.$root.$on('list', () => {
+        this.updateList();
+      })
+
+  },
+  methods:{
+    deleteRule: function(target,rule){
+      this.data.target = target
+      this.data.rule = rule
+      this.$axios
+        .post('http://127.0.0.1:5000/removerule',this.data)
+        .then(response => {
+          this.info = response.data;
+          this.$root.$emit('list');
+        })
+    },
+    updateList: function(){
+      this.cdrrules = []
+      this.billrules = []
+      this.$axios
+        .get('http://127.0.0.1:5000/listcdrrules')
+        .then(response => {
+          this.info = response.data;
+          for (var key in this.info){
+            this.cdrrules.push({name:key,rule:this.info[key]})
+          }
+        })
+      this.$axios
+        .get('http://127.0.0.1:5000/listbillrules')
+        .then(response => {
+          this.info = response.data;
+          for (var key in this.info){
+            this.billrules.push({name:key,rule:this.info[key]})
+          }
+        })
+
+    }
+  }
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/components/NotificationPlugin/Notification.vue b/forecast_dashboard/dashboard/src/components/NotificationPlugin/Notification.vue
new file mode 100644
index 0000000..53c9437
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/components/NotificationPlugin/Notifications.vue b/forecast_dashboard/dashboard/src/components/NotificationPlugin/Notifications.vue
new file mode 100644
index 0000000..40042f1
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/components/NotificationPlugin/index.js b/forecast_dashboard/dashboard/src/components/NotificationPlugin/index.js
new file mode 100644
index 0000000..8feb96b
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/NotificationPlugin/index.js
@@ -0,0 +1,58 @@
+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;
diff --git a/forecast_dashboard/dashboard/src/components/Remove.vue b/forecast_dashboard/dashboard/src/components/Remove.vue
new file mode 100644
index 0000000..a6c8237
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Remove.vue
@@ -0,0 +1,91 @@
+<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>
+
+        <div class="md-layout-item md-small-size-100 md-size-50">
+          <md-field>
+            <label>Target instance</label>
+            <md-select v-model="target" name = "target" id="target">
+              <md-option value="cdr">Coin CDR</md-option>
+              <md-option value="bill">Coin Bill</md-option>
+            </md-select>
+          </md-field>
+          </div>
+          <div v-if="target === 'cdr'" class="md-layout-item md-small-size-100 md-size-100">
+            <md-field>
+              <label>Rule name</label>
+              <md-input v-model="rule" type="text"></md-input>
+            </md-field>
+          </div>
+          <div v-if="target === 'bill'" class="md-layout-item md-small-size-100 md-size-100">
+            <md-field>
+              <label>Rule name</label>
+              <md-input v-model="rule" type="text"></md-input>
+            </md-field>
+          </div>
+
+        <div class="md-layout-item md-small-size-100 md-size-50">
+
+        <md-button class="md-danger" id="post" v-on:click="getJson">Execute</md-button>
+        <md-button id="clear" v-on:click="clear">Clear</md-button>
+
+    </div>
+
+    </md-card>
+    </div>
+
+
+
+</div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "remove",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      target: "",
+      rule: "",
+      info: null,
+      cdrrules: [],
+      billrules: [],
+      data: {
+        "target": "",
+        "rule": ""
+      },
+      selected: [],
+      records: []
+    };
+  },
+  methods:{
+    getJson: function(){
+      this.data.target = this.target
+      this.data.rule = this.rule
+      this.$axios
+        .post('http://127.0.0.1:5000/removerule',this.data)
+        .then(response => {
+          this.info = response.data;
+          this.$root.$emit('list');
+        })
+    },
+    clear: function(){
+      this.target = ""
+      this.rule = ""
+      this.info = ""
+    }
+  }
+
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/components/SidebarPlugin/SideBar.vue b/forecast_dashboard/dashboard/src/components/SidebarPlugin/SideBar.vue
new file mode 100644
index 0000000..c1adb2b
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/SidebarPlugin/SideBar.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="sidebar"
+    :data-color="activeColor"
+    :data-image="backgroundImage"
+    :style="sidebarStyle"
+  >
+    <div class="logo">
+      <a href="#" class="simple-text logo-mini">
+        <div class="logo-img">
+          <img :src="imgLogo" alt="" />
+        </div>
+      </a>
+
+      <a
+        href="#"
+        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: "CE&F Engine"
+    },
+    backgroundImage: {
+      type: String,
+      default: require("@/assets/img/sidebar-3.jpg")
+    },
+    imgLogo: {
+      type: String,
+      default: require("@/assets/img/cenf.png")
+    },
+    activeColor: {
+      type: String,
+      default: "purple",
+      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.backgroundImage})`
+      };
+    }
+  }
+};
+</script>
+<style>
+@media screen and (min-width: 991px) {
+  .nav-mobile-menu {
+    display: none;
+  }
+}
+</style>
diff --git a/forecast_dashboard/dashboard/src/components/SidebarPlugin/SidebarLink.vue b/forecast_dashboard/dashboard/src/components/SidebarPlugin/SidebarLink.vue
new file mode 100644
index 0000000..2035eb3
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/components/SidebarPlugin/index.js b/forecast_dashboard/dashboard/src/components/SidebarPlugin/index.js
new file mode 100644
index 0000000..c29e591
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
diff --git a/forecast_dashboard/dashboard/src/components/Tables/NavTabsTable.vue b/forecast_dashboard/dashboard/src/components/Tables/NavTabsTable.vue
new file mode 100644
index 0000000..885ba15
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Tables/NavTabsTable.vue
@@ -0,0 +1,52 @@
+<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>
diff --git a/forecast_dashboard/dashboard/src/components/Tables/OrderedTable.vue b/forecast_dashboard/dashboard/src/components/Tables/OrderedTable.vue
new file mode 100644
index 0000000..8e8fb77
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/components/Tables/SimpleTable.vue b/forecast_dashboard/dashboard/src/components/Tables/SimpleTable.vue
new file mode 100644
index 0000000..863e9d8
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/Tables/SimpleTable.vue
@@ -0,0 +1,57 @@
+<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>
+      {{info}}
+    </div>
+    <div>
+      <md-button id="btn" v-on:click="getJson">button</md-button>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "simple-table",
+  props: {
+    tableHeaderColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      info: null,
+      data: {
+    "hello": "hello"
+      },
+      selected: [],
+      users: [
+        {
+          name: "Dakota Rice",
+          salary: "$36,738",
+          country: "Niger",
+          city: "Oud-Turnhout"
+        }
+      ]
+    };
+  },
+  methods:{
+    getJson: function(){
+
+      this.$axios
+        .post('http://127.0.0.1:5000/test',this.data)
+        .then(response => (this.info = response))
+    }
+  }
+
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/components/index.js b/forecast_dashboard/dashboard/src/components/index.js
new file mode 100644
index 0000000..d6fb6e2
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/components/index.js
@@ -0,0 +1,28 @@
+// 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";
+import Cleanup from "./Cleanup.vue"
+import Remove from "./Remove.vue"
+import Addrule from "./Addrule.vue"
+import Forecast from "./Forecast.vue"
+import Listrules from "./Listrules.vue"
+
+export {
+  ChartCard,
+  NavTabsCard,
+  StatsCard,
+  NavTabsTable,
+  OrderedTable,
+  SimpleTable,
+  Cleanup,
+  Remove,
+  Addrule,
+  Forecast,
+  Listrules
+};
diff --git a/forecast_dashboard/dashboard/src/globalComponents.js b/forecast_dashboard/dashboard/src/globalComponents.js
new file mode 100644
index 0000000..23d5ee4
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/globalComponents.js
@@ -0,0 +1,15 @@
+import DropDown from "./components/Dropdown.vue";
+import ChartCard from "./components/Cards/ChartCard.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);
+    Vue.component("chart-card", ChartCard);
+  }
+};
+
+export default GlobalComponents;
diff --git a/forecast_dashboard/dashboard/src/globalDirectives.js b/forecast_dashboard/dashboard/src/globalDirectives.js
new file mode 100644
index 0000000..76b7f2e
--- /dev/null
+++ b/forecast_dashboard/dashboard/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;
diff --git a/forecast_dashboard/dashboard/src/main.js b/forecast_dashboard/dashboard/src/main.js
new file mode 100644
index 0000000..c12df79
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/main.js
@@ -0,0 +1,45 @@
+// 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";
+import axios from "axios";
+
+// 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);
+Vue.prototype.$axios = axios
+
+
+/* eslint-disable no-new */
+new Vue({
+  el: "#app",
+  render: h => h(App),
+  router,
+  data: {
+    Chartist: Chartist
+  }
+});
diff --git a/forecast_dashboard/dashboard/src/material-dashboard.js b/forecast_dashboard/dashboard/src/material-dashboard.js
new file mode 100644
index 0000000..d8cc45d
--- /dev/null
+++ b/forecast_dashboard/dashboard/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.min.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);
+  }
+};
diff --git a/forecast_dashboard/dashboard/src/pages/Forecasting.vue b/forecast_dashboard/dashboard/src/pages/Forecasting.vue
new file mode 100644
index 0000000..b1d50fc
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/pages/Forecasting.vue
@@ -0,0 +1,315 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-30"
+      >
+
+            <forecast @update="onUpdate" table-header-color="green"></forecast>
+
+      </div>
+      <div v-if="total != '0.00 CHF'"
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-35"
+        >
+        <chart-card :key="componentKey"
+          :chart-data="billchart.data"
+          :chart-options="billchart.options"
+          :chart-responsive-options="billchart.responsiveOptions"
+          :chart-type="'Pie'"
+          data-background-color="blue"
+        >
+        <template slot="content">
+          <h4 class="title">Cost by account</h4>
+          <md-table v-model="bills" :key="componentKey" :table-header-color="tableHeaderColor">
+            <md-table-row slot="md-table-row" slot-scope="{ item }">
+              <md-table-cell md-label="Account">{{ item.account }}</md-table-cell>
+              <md-table-cell md-label="Charge">{{ item.charge }}</md-table-cell>
+              <md-table-cell md-label="%">{{ item.percentage }}</md-table-cell>
+            </md-table-row>
+          </md-table>
+        </template>
+
+
+        </chart-card>
+          <stats-card :key="componentKey" data-background-color="purple">
+            <template slot="header">
+              <md-icon>store</md-icon>
+            </template>
+
+            <template slot="content">
+              <p class="category">Total Forecast</p>
+              <h3 class="title">{{total}}</h3>
+            </template>
+          </stats-card>
+
+      </div>
+      <div v-if="total != '0.00 CHF'"
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-35"
+      >
+      <md-card>
+        <md-card-header data-background-color="blue">
+        <h4 class="title">Cost by metric</h4>
+      </md-card-header>
+        <md-table v-model="metrics" :key="componentKey" :table-header-color="tableHeaderColor">
+          <md-table-row slot="md-table-row" slot-scope="{ item }">
+            <md-table-cell md-label="Type">{{ item.type }}</md-table-cell>
+            <md-table-cell md-label="Usage">{{ item.usage }}</md-table-cell>
+            <md-table-cell md-label="Charge">{{ item.charge }}</md-table-cell>
+            <md-table-cell md-label="%">{{ item.percentage }}</md-table-cell>
+          </md-table-row>
+        </md-table>
+
+
+    </md-card>
+
+      </div>
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-70"
+      >
+
+            <cleanup @update="onUpdate" table-header-color="green"></cleanup>
+
+      </div>
+  </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import { Forecast, ChartCard, StatsCard, Cleanup } from "@/components";
+
+export default {
+  components: {
+    Forecast,
+    ChartCard,
+    StatsCard,
+    Cleanup
+  },
+data(){
+  return{
+    componentKey: 0,
+    info: null,
+    bills: [],
+    total: 0,
+    metrics: [
+      {
+        type:"Memory Used Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"CPU Used Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Service External IP count",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Storage Allocated",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Storage Requested",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Memory Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"CPU Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Service Port Count",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+    ],
+    billchart: {
+      data: {
+        labels: [],
+        series: []
+      },
+      options: {
+        labelInterpolationFnc: function(value) {
+        return value.substring(0,4)
+      }
+      },
+      responsiveOptions: []
+    },
+    metricchart: {
+      data: {
+        labels: ['RAM','CPU','IP','SA','SR','P','RAM_A','CPU_A'],
+        series: [0,0,0,0,0,0,0,0]
+      },
+      options: {
+      },
+      responsiveOptions: []
+    }
+  }
+},
+mounted(){
+  this.onUpdate();
+},
+methods:{
+  onUpdate(){
+    this.bills = []
+    this.metrics = [
+      {
+        type:"Memory Used Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"CPU Used Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Service External IP count",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Storage Allocated",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Storage Requested",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Memory Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"CPU Limit",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+      {
+        type:"Service Port Count",
+        usage:0,
+        charge:0,
+        percentage:0
+      },
+    ]
+    this.total = 0
+    this.billchart.data = {
+      labels: [],
+      series: []
+    }
+    this.metricchart.data.series = [0,0,0,0,0,0,0,0]
+    this.$axios
+        .get('http://127.0.0.1:5000/bills')
+        .then(response => {
+          this.info = response.data.data;
+          //var tmp = [];
+          for (var i=0; i<this.info.length; i++){
+            var obj = this.info[i];
+            var string = obj['account'];
+            var regex = /arima/;
+            if(regex.test(string)){
+              this.billchart.data.labels.push(obj['account']);
+              this.billchart.data.series.push(obj['charge']);
+              this.total += parseFloat(obj['charge']);
+              this.bills.push({account:obj['account'].substring(0,4),charge:parseFloat(obj['charge']),percentage:0});
+              for (var j=0; j<obj['data'].length;j++){
+                var record = obj['data'][j];
+                if(record['metric']==='cpu'){
+                  this.metrics[1].usage+=record['data']['usage'];
+                  this.metrics[1].charge+=record['charge'];
+                  this.metricchart.data.series[1]+=record['charge'];
+                }
+                if(record['metric']==='memory'){
+                  this.metrics[0].usage+=record['data']['usage'];
+                  this.metrics[0].charge+=record['charge'];
+                  this.metricchart.data.series[0]=record['charge'];
+                }
+                if(record['metric']==='ip'){
+                  this.metrics[2].usage+=record['data']['usage'];
+                  this.metrics[2].charge+=record['charge'];
+                  this.metricchart.data.series[2]+=record['charge'];
+                }
+                if(record['metric']==='storage_allocated'){
+                  this.metrics[3].usage+=record['data']['usage'];
+                  this.metrics[3].charge+=record['charge'];
+                  this.metricchart.data.series[3]+=record['charge'];
+                }
+                if(record['metric']==='storage_requested'){
+                  this.metrics[4].usage+=record['data']['usage'];
+                  this.metrics[4].charge+=record['charge'];
+                  this.metricchart.data.series[4]+=record['charge'];
+                }
+                if(record['metric']==='memory_limit'){
+                  this.metrics[5].usage+=record['data']['usage'];
+                  this.metrics[5].charge+=record['charge'];
+                  this.metricchart.data.series[5]+=record['charge'];
+                }
+                if(record['metric']==='cpu_limit'){
+                  this.metrics[6].usage+=record['data']['usage'];
+                  this.metrics[6].charge+=record['charge'];
+                  this.metricchart.data.series[6]+=record['charge'];
+                }
+                if(record['metric']==='port'){
+                  this.metrics[7].usage+=record['data']['usage'];
+                  this.metrics[7].charge+=record['charge'];
+                  this.metricchart.data.series[7]+=record['charge'];
+                }
+              }
+            }
+            //tmp.push(obj['charge']);
+          }
+          for (var i=0; i<this.bills.length; i++){
+            this.bills[i].percentage = ((this.bills[i].charge/this.total)*100).toFixed(2) + '%';
+            this.bills[i].charge = this.bills[i].charge.toFixed(2) + " CHF";
+          }
+          for (var i=0; i<this.metrics.length; i++){
+            this.metrics[i].percentage = ((this.metrics[i].charge/this.total)*100).toFixed(2) + '%';
+            this.metrics[i].charge = this.metrics[i].charge.toFixed(2) + " CHF";
+          }
+          this.metrics[0].usage = (this.metrics[0].usage/1000000000).toFixed(0) + ' GB*h';
+          this.metrics[1].usage = (this.metrics[1].usage/1000).toFixed(0) + ' KCU*h';
+          this.metrics[2].usage = (this.metrics[2].usage).toFixed(0) + ' IP*h';
+          this.metrics[3].usage = (this.metrics[3].usage/1000000000).toFixed(0) + ' GB*h';
+          this.metrics[4].usage = (this.metrics[4].usage/1000000000).toFixed(0) + ' GB*h';
+          this.metrics[5].usage = (this.metrics[5].usage/1000000000).toFixed(0) + ' GB*h';
+          this.metrics[6].usage = (this.metrics[6].usage/1000).toFixed(0) + ' KCU*h';
+          this.metrics[7].usage = (this.metrics[7].usage).toFixed(0) + ' Port*h';
+          this.total = this.total.toFixed(2) + " CHF"
+          this.componentKey += 1;
+          //this.billchart.data.series.push(tmp);
+        })
+  }
+}
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/pages/Layout/Content.vue b/forecast_dashboard/dashboard/src/pages/Layout/Content.vue
new file mode 100644
index 0000000..80e5761
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/pages/Layout/Content.vue
@@ -0,0 +1,22 @@
+<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>
diff --git a/forecast_dashboard/dashboard/src/pages/Layout/ContentFooter.vue b/forecast_dashboard/dashboard/src/pages/Layout/ContentFooter.vue
new file mode 100644
index 0000000..026e171
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/pages/Layout/ContentFooter.vue
@@ -0,0 +1,9 @@
+<template>
+  <footer class="footer">
+    
+  </footer>
+</template>
+<script>
+export default {};
+</script>
+<style></style>
diff --git a/forecast_dashboard/dashboard/src/pages/Layout/DashboardLayout.vue b/forecast_dashboard/dashboard/src/pages/Layout/DashboardLayout.vue
new file mode 100644
index 0000000..0035529
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/pages/Layout/DashboardLayout.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
+    <notifications></notifications>
+
+    <side-bar>
+      <mobile-menu slot="content"></mobile-menu>
+
+      <sidebar-link to="/forecast">
+        <md-icon>dashboard</md-icon>
+        <p>Forecasting</p>
+      </sidebar-link>
+      <sidebar-link to="/rulemgmt">
+        <md-icon>content_paste</md-icon>
+        <p>Rule Management</p>
+      </sidebar-link>
+
+
+    </side-bar>
+
+    <div class="main-panel">
+      <top-navbar></top-navbar>
+
+      <dashboard-content> </dashboard-content>
+
+      <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+    </div>
+  </div>
+</template>
+<style lang="scss"></style>
+<script>
+import TopNavbar from "./TopNavbar.vue";
+import ContentFooter from "./ContentFooter.vue";
+import DashboardContent from "./Content.vue";
+import MobileMenu from "@/pages/Layout/MobileMenu.vue";
+
+export default {
+  components: {
+    TopNavbar,
+    DashboardContent,
+    ContentFooter,
+    MobileMenu
+  }
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/pages/Layout/MobileMenu.vue b/forecast_dashboard/dashboard/src/pages/Layout/MobileMenu.vue
new file mode 100644
index 0000000..c70433b
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/pages/Layout/MobileMenu.vue
@@ -0,0 +1,23 @@
+<template>
+
+</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>
diff --git a/forecast_dashboard/dashboard/src/pages/Layout/TopNavbar.vue b/forecast_dashboard/dashboard/src/pages/Layout/TopNavbar.vue
new file mode 100644
index 0000000..c23625c
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/pages/Layout/TopNavbar.vue
@@ -0,0 +1,73 @@
+<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">
+          
+
+            <!-- <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> -->
+
+
+
+
+          </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>
diff --git a/forecast_dashboard/dashboard/src/pages/RuleMgmt.vue b/forecast_dashboard/dashboard/src/pages/RuleMgmt.vue
new file mode 100644
index 0000000..8a048b8
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/pages/RuleMgmt.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="content">
+    <div class="md-layout">
+
+      <div
+        class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"
+      >
+            <listrules table-header-color="green"></listrules>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { Remove, Addrule, Listrules } from "@/components";
+
+export default {
+  components: {
+    Remove,
+    Addrule,
+    Listrules
+  }
+};
+</script>
diff --git a/forecast_dashboard/dashboard/src/pages/UserProfile/EditProfileForm.vue b/forecast_dashboard/dashboard/src/pages/UserProfile/EditProfileForm.vue
new file mode 100644
index 0000000..a101e1d
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/pages/UserProfile/UserCard.vue b/forecast_dashboard/dashboard/src/pages/UserProfile/UserCard.vue
new file mode 100644
index 0000000..01ddfba
--- /dev/null
+++ b/forecast_dashboard/dashboard/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>
diff --git a/forecast_dashboard/dashboard/src/pages/index.js b/forecast_dashboard/dashboard/src/pages/index.js
new file mode 100644
index 0000000..35d4a50
--- /dev/null
+++ b/forecast_dashboard/dashboard/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 };
diff --git a/forecast_dashboard/dashboard/src/routes/routes.js b/forecast_dashboard/dashboard/src/routes/routes.js
new file mode 100644
index 0000000..556582a
--- /dev/null
+++ b/forecast_dashboard/dashboard/src/routes/routes.js
@@ -0,0 +1,28 @@
+import DashboardLayout from "@/pages/Layout/DashboardLayout.vue";
+
+
+import RuleMgmt from "@/pages/RuleMgmt.vue";
+import Forecasting from "@/pages/Forecasting.vue"
+
+const routes = [
+  {
+    path: "/",
+    component: DashboardLayout,
+    redirect: "/forecast",
+    children: [
+      
+      {
+        path: "rulemgmt",
+        name: "Rule Management",
+        component: RuleMgmt
+      },
+      {
+        path: "forecast",
+        name: "Forecasting",
+        component: Forecasting
+      }
+    ]
+  }
+];
+
+export default routes;
diff --git a/forecast_dashboard/dbaccess.py b/forecast_dashboard/dbaccess.py
new file mode 100644
index 0000000..2e00848
--- /dev/null
+++ b/forecast_dashboard/dbaccess.py
@@ -0,0 +1,183 @@
+import psycopg2
+import requests
+from flask import jsonify
+
+
+class DBAccess:
+    def __init__(self, settings):
+        self.settings = settings
+
+    def printbill(self, target):
+        bills = {}
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.billdb)
+        cursor = connection.cursor()
+        postgreSQL_select_Query = "select account,charge,currency from bill where " \
+                                  "account like '%{}%'".format(target)
+        cursor.execute(postgreSQL_select_Query)
+        records = cursor.fetchall()
+        for row in records:
+            bills[row[0]] = row[1]
+        cursor.close()
+        connection.close()
+        return bills
+
+    def printaccounts(self):
+        accounts = []
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.udrdb)
+        cursor = connection.cursor()
+        postgreSQL_select_Query = "select distinct account from usage"
+        cursor.execute(postgreSQL_select_Query)
+        records = cursor.fetchall()
+        for row in records:
+            accounts.append(row[0])
+        cursor.close()
+        connection.close()
+        return accounts
+
+    def printcdrrules(self):
+        rules = {}
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.cdrdb)
+        cursor = connection.cursor()
+        postgreSQL_select_Query = "select name,rule from instanceorm"
+        cursor.execute(postgreSQL_select_Query)
+        records = cursor.fetchall()
+        for row in records:
+            rules[row[0]] = row[1]
+        cursor.close()
+        connection.close()
+        return rules
+
+    def printbillrules(self):
+        rules = {}
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.billdb)
+        cursor = connection.cursor()
+        postgreSQL_select_Query = "select name,rule from instanceorm"
+        cursor.execute(postgreSQL_select_Query)
+        records = cursor.fetchall()
+        for row in records:
+            rules[row[0]] = row[1]
+        cursor.close()
+        connection.close()
+        return rules
+
+    def deleterule(self, db, target):
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=db)
+        cursor = connection.cursor()
+        postgreSQL_select_Query = "select * from instanceorm where " \
+                                  "name like '{}'".format(target)
+        cursor.execute(postgreSQL_select_Query)
+        records = cursor.fetchall()
+        if db == self.settings.cdrdb:
+            for row in records:
+                print(row[0])
+                requests.delete(self.settings.cdrRuleEndpoint + '/' + str(row[0]))
+        if db == self.settings.billdb:
+            for row in records:
+                print(row[0])
+                requests.delete(self.settings.billRuleEndpoint + '/' + str(row[0]))
+        cursor.close()
+        connection.close()
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=db)
+        cursor = connection.cursor()
+        postgreSQL_delete_Query = "delete from instanceorm where " \
+                                  "name like '{}'".format(target)
+        cursor.execute(postgreSQL_delete_Query)
+        connection.commit()
+        count = cursor.rowcount
+        print(count, "rules deleted successfully ")
+        cursor.close()
+        connection.close()
+        return count
+
+    def deleteusage(self, target):
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.udrdb)
+        cursor = connection.cursor()
+        postgreSQL_delete_Query = "delete from usage where " \
+                                  "account like '{}'".format(target)
+        cursor.execute(postgreSQL_delete_Query)
+        connection.commit()
+        count = cursor.rowcount
+        print(count, "usage records deleted successfully ")
+        cursor.close()
+        connection.close()
+        return count
+
+    def deleteudr(self, target):
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.udrdb)
+        cursor = connection.cursor()
+        postgreSQL_delete_Query = "delete from udr where " \
+                                  "account like '{}'".format(target)
+        cursor.execute(postgreSQL_delete_Query)
+        connection.commit()
+        count = cursor.rowcount
+        print(count, "UDRs deleted successfully ")
+        cursor.close()
+        connection.close()
+        return count
+
+    def deletecdr(self, target):
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.cdrdb)
+        cursor = connection.cursor()
+        postgreSQL_delete_Query = "delete from cdr where " \
+                                  "account like '{}'".format(target)
+        cursor.execute(postgreSQL_delete_Query)
+        connection.commit()
+        count = cursor.rowcount
+        print(count, "CDRs deleted successfully ")
+        cursor.close()
+        connection.close()
+        return count
+
+    def deletebill(self, target):
+        connection = psycopg2.connect(user=self.settings.dbuser,
+                                      password=self.settings.dbpass,
+                                      host=self.settings.dbhost,
+                                      port=self.settings.dbport,
+                                      database=self.settings.billdb)
+        cursor = connection.cursor()
+        postgreSQL_delete_Query = "delete from bill where " \
+                                  "account like '{}'".format(target)
+        cursor.execute(postgreSQL_delete_Query)
+        connection.commit()
+        count = cursor.rowcount
+        print(count, "Bills deleted successfully ")
+        cursor.close()
+        connection.close()
+        return count
+
diff --git a/forecast_dashboard/requirements.txt b/forecast_dashboard/requirements.txt
new file mode 100644
index 0000000..391e70e
--- /dev/null
+++ b/forecast_dashboard/requirements.txt
@@ -0,0 +1,3 @@
+flask
+psycopg2==2.8.3
+requests==2.21
\ No newline at end of file
diff --git a/forecast_dashboard/settings.py b/forecast_dashboard/settings.py
new file mode 100644
index 0000000..31dd46e
--- /dev/null
+++ b/forecast_dashboard/settings.py
@@ -0,0 +1,19 @@
+import configparser
+
+
+class Settings:
+    def __init__(self, path):
+        config = configparser.ConfigParser()
+        config.read(path)
+        self.cdrRuleEndpoint = config['ENDPOINTS']['cdrRuleEndpoint']
+        self.billRuleEndpoint = config['ENDPOINTS']['billRuleEndpoint']
+        self.forecastEndpoint = config['ENDPOINTS']['udrEndpoint']
+        self.billEndpoint = config['ENDPOINTS']['billEndpoint']
+        self.dbuser = config['DB']['user']
+        self.dbpass = config['DB']['password']
+        self.dbhost = config['DB']['host']
+        self.dbport = config['DB']['port']
+        self.udrdb = config['DB']['cyclops_udr']
+        self.cdrdb = config['DB']['cyclops_cdr']
+        self.billdb = config['DB']['cyclops_billing']
+