From af6fa2d7e76ada850c156cb11b403ace3b7239dd Mon Sep 17 00:00:00 2001
From: Maisam Afshar <maisam.afshar@gmail.com>
Date: Wed, 26 Jul 2023 11:12:06 +0330
Subject: [PATCH] update deps

---
 .eslintrc.js                                  |  43 +-
 .npmrc                                        |   3 +
 CHANGELOG.md                                  |  10 +-
 README.md                                     |  52 +-
 babel.config.js                               |   6 +-
 jest.config.js                                |  56 +-
 package.json                                  |  56 +-
 postcss.config.js                             |   6 +-
 public/index.html                             |  27 +-
 src/App.vue                                   |   6 +-
 src/components/base/Card.vue                  |  10 +-
 src/components/base/Item.vue                  |  68 +-
 src/components/base/ItemGroup.vue             | 142 ++--
 src/components/base/ItemSubGroup.vue          |  28 +-
 src/components/base/MaterialAlert.vue         |  10 +-
 src/components/base/MaterialCard.vue          | 158 ++---
 src/components/base/MaterialChartCard.vue     |  64 +-
 src/components/base/MaterialSnackbar.vue      |  58 +-
 src/components/base/MaterialStatsCard.vue     | 102 ++-
 src/components/base/MaterialTabs.vue          |  24 +-
 src/components/base/MaterialTestimony.vue     |  89 +--
 src/components/base/Subheading.vue            |  35 +-
 src/components/base/VComponent.vue            |  37 +-
 src/i18n.js                                   |  14 +-
 src/main.js                                   |  28 +-
 src/plugins/base.js                           |  12 +-
 src/plugins/vee-validate.js                   |  20 +-
 src/plugins/vuetify.js                        |  26 +-
 src/router.js                                 | 110 +--
 src/sass/overrides.sass                       |   4 +-
 src/sass/vuetify-material/_view.sass          |   4 +-
 src/store.js                                  |  30 +-
 src/views/dashboard/Dashboard.vue             | 648 ++++++++----------
 src/views/dashboard/Index.vue                 |  24 +-
 src/views/dashboard/Upgrade.vue               |  49 +-
 src/views/dashboard/component/Buttons.vue     | 156 ++---
 src/views/dashboard/component/Grid.vue        |  26 +-
 src/views/dashboard/component/Icons.vue       | 446 ++++++------
 .../dashboard/component/Notifications.vue     | 294 +++-----
 src/views/dashboard/component/Tabs.vue        | 335 +++++----
 src/views/dashboard/component/Typography.vue  | 125 ++--
 .../dashboard/components/core/AppBar.vue      | 130 ++--
 .../dashboard/components/core/Drawer.vue      | 294 ++++----
 .../dashboard/components/core/Footer.vue      |  77 +--
 .../dashboard/components/core/Settings.vue    | 200 +++---
 src/views/dashboard/components/core/View.vue  |  16 +-
 src/views/dashboard/pages/Rtl.vue             | 358 +++++-----
 src/views/dashboard/pages/Timeline.vue        |  88 +--
 src/views/dashboard/pages/UserProfile.vue     | 132 +---
 tests/e2e/.eslintrc.js                        |  20 +-
 tests/e2e/plugins/index.js                    |  22 +-
 tests/e2e/specs/test.js                       |   8 +-
 tests/unit/.eslintrc.js                       |   6 +-
 tests/unit/example.spec.js                    |   4 +-
 vue.config.js                                 |  24 +-
 55 files changed, 2230 insertions(+), 2590 deletions(-)
 create mode 100644 .npmrc

diff --git a/.eslintrc.js b/.eslintrc.js
index 5620e7a8..a4617949 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,14 +1,31 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: 'vuetify',
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-  },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
-}
+	root: true,
+	env: {
+		node: true,
+	},
+	extends: "vuetify",
+	rules: {
+		"vue/max-attributes-per-line": [
+			"error",
+			{
+				singleline: 3,
+				multiline: {
+					max: 1,
+					allowFirstLine: true,
+				},
+			},
+		],
+		indent: [2, "tab"],
+		// space before function ()
+		"space-before-function-paren": "off",
+		"vue/script-indent": "off",
+		semi: 0,
+		quotes: 0,
+		"no-tabs": 0,
+		"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+		"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+	},
+	parserOptions: {
+		parser: "@babel/eslint-parser",
+	},
+};
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..5c6c9587
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+auto-install-peers=true
+strict-peer-dependencies=false
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index bcefe07b..026badd3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,15 @@
 # Change Log
 
+## [2.1.1] 2023-07-26
+
+- Update dependencies & devDependencies
+- Fix installation issue when running `npm i`
+- Other minor fixes
+
 ## [2.1.0] 2020-02-29
-- refactor: all the product was changed and now it's the same version with PRO version and also the structure it's the same 
+
+- refactor: all the product was changed and now it's the same version with PRO version and also the structure it's the same
 
 ## [1.0.0] 2018-10-16
+
 ### Initial Release
diff --git a/README.md b/README.md
index 79cf0936..8b1de37c 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,12 @@
 # [Vuetify Material Dashboard](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=vtymdp-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/share?url=https%3A%2F%2Fwww.creative-tim.com%2Fvuetify-material-dashboard&text=Vuetify%20Material%20Dashboard%20PRO%20by%20Creative%20Tim&via=CreativeTim&hashtags=vuejs%20%23vuex%20%23vuetify%20%23material)
 
-
-![version](https://img.shields.io/badge/version-2.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/ct-vuetify-material-dashboard.svg)](https://github.com/creativetimofficial/ct-vuetify-material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/creativetimofficial/ct-vuetify-material-dashboard.svg?maxAge=259200)](https://github.com/creativetimofficial/ct-vuetify-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/material-dashboard) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
+![version](https://img.shields.io/badge/version-2.1.1-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/ct-vuetify-material-dashboard.svg)](https://github.com/creativetimofficial/ct-vuetify-material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/creativetimofficial/ct-vuetify-material-dashboard.svg?maxAge=259200)](https://github.com/creativetimofficial/ct-vuetify-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/material-dashboard) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
 
 ![Product Gif](https://s3.amazonaws.com/creativetim_bucket/products/207/original/opt_mdp_vuetify_thumbnail.jpg?1566575158)
 
 **Vuetify Material Dashboard** is a beautiful resource built over [Vuetify](https://vuetifyjs.com/en/), [Vuex](https://vuex.vuejs.org/installation.html) and [Vuejs](https://vuejs.org/). It will help you get started developing dashboards in no time. Vuetify Material Dashboard is the official Vuejs version of the Original [Material Dashboard PRO](https://www.creative-tim.com/product/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. **Vuetify Material Dashboard**  contains handpicked and optimized 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](https://www.creative-tim.com) is a customization of this product.
+We have created it thinking about things you actually need in a dashboard. **Vuetify Material Dashboard** contains handpicked and optimized 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](https://www.creative-tim.com) is a customization of this product.
 
 **Vuetify** is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
 
@@ -16,6 +15,7 @@ We have created it thinking about things you actually need in a dashboard. **Vue
 Let us know what you think and what we can improve below. And good luck with development!
 
 ## Getting Started
+
 - Install Nodejs from [Nodejs Official Page](https://nodejs.org/en/)
 - Open your terminal
 - Navigate to the project
@@ -24,12 +24,13 @@ Let us know what you think and what we can improve below. And good luck with dev
 - A new tab will be opened in your browser
 
 You can also run additional npm tasks such as
+
 - `npm run build` to build your app for production
 - `npm run lint` to run linting.
 
 ## Vuetify
-Vuetify is developed exactly according to Material Design spec. Every component is hand crafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
 
+Vuetify is developed exactly according to Material Design spec. Every component is hand crafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
 
 ## Vuex
 
@@ -43,43 +44,39 @@ to as little as possible. Almost everything is inside `package.json` + some othe
 
 Let us know what you think and what we can improve below. And good luck with development!
 
-
 #### Special thanks
+
 During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
-- [Vuetify](https://vuetifyjs.com/en/) for the wonderful framework
 
+- [Vuetify](https://vuetifyjs.com/en/) for the wonderful framework
 
 Let us know your thoughts 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](#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://pbs.twimg.com/profile_images/900908683927982080/GWykKJ7r_400x400.jpg" width="60" height="60" />](https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vtymdp-readme)
 [<img src="https://s3.amazonaws.com/creativetim_bucket/github/html.png" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-pro?ref=vtymdp-readme)
 [<img src="https://s3.amazonaws.com/creativetim_bucket/github/react.svg" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-pro-react?ref=vtymdp-readme)
 [<img src="https://s3.amazonaws.com/creativetim_bucket/github/vuejs.png" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=vtymdp-readme)
 [<img src="https://s3.amazonaws.com/creativetim_bucket/github/angular.png" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-pro-angular2?ref=vtymdp-readme)
 
-
-Vuetify | Vue | React | Angular | HTML |
-| --- | --- | --- | --- | --- |
-| [![Vuetify Material Dashboard PRO](https://s3.amazonaws.com/creativetim_bucket/products/207/original/opt_mdp_vuetify_thumbnail.jpg)](https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vtymdp-readme) | [![Vue Material Dashboard PRO](https://s3.amazonaws.com/creativetim_bucket/products/87/original/opt_mdp_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=vtymdp-readme) | [![Material Dashboard PRO React](https://s3.amazonaws.com/creativetim_bucket/products/80/original/opt_mdp_react_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-pro-react?ref=vtymdp-readme)  | [![Material Dashboard PRO Angular](https://s3.amazonaws.com/creativetim_bucket/products/55/original/opt_mdp_angular_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-angular2?ref=vtymdp-readme) | [![Material Dashboard PRO HTML](https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-pro/examples/dashboard.html?ref=vtymdp-readme)
+| Vuetify                                                                                                                                                                                                                     | Vue                                                                                                                                                                                                            | React                                                                                                                                                                                                                | Angular                                                                                                                                                                                                                 | HTML                                                                                                                                                                                                                            |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [![Vuetify Material Dashboard PRO](https://s3.amazonaws.com/creativetim_bucket/products/207/original/opt_mdp_vuetify_thumbnail.jpg)](https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vtymdp-readme) | [![Vue Material Dashboard PRO](https://s3.amazonaws.com/creativetim_bucket/products/87/original/opt_mdp_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=vtymdp-readme) | [![Material Dashboard PRO React](https://s3.amazonaws.com/creativetim_bucket/products/80/original/opt_mdp_react_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-pro-react?ref=vtymdp-readme) | [![Material Dashboard PRO Angular](https://s3.amazonaws.com/creativetim_bucket/products/55/original/opt_mdp_angular_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-angular2?ref=vtymdp-readme) | [![Material Dashboard PRO HTML](https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-pro/examples/dashboard.html?ref=vtymdp-readme) |
 
 ## Demo
 
@@ -88,17 +85,15 @@ Vuetify | Vue | React | Angular | HTML |
 
 [View More](https://demos.creative-tim.com/vuetify-material-dashboard-pro?ref=vtymdp-readme).
 
-
 ## Quick start
 
 Quick start options:
 
 - Download from [Creative Tim](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=vtymdp-readme)
 
-
 ## Documentation
-The documentation for the **Vuetify Material Dashboard** is hosted on vuetify [website](https://vuetifyjs.com/en/components/api-explorer).
 
+The documentation for the **Vuetify Material Dashboard** is hosted on vuetify [website](https://vuetifyjs.com/en/components/api-explorer).
 
 ## File Structure
 
@@ -198,8 +193,8 @@ At present, we officially aim to support the last two versions of the following
 
 <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
+
 - [Live Preview](https://demos.creative-tim.com/vuetify-material-dashboard?ref=vtymdp-readme)
 - Download Page: [Download](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=vtymdp-readme)
 - Documentation is [Here](https://vuetifyjs.com/en/components/api-explorer)
@@ -210,6 +205,7 @@ At present, we officially aim to support the last two versions of the following
 - For Front End Development - [Material Kit Pro ](https://www.creative-tim.com/product/material-kit-pro?ref=vtymdp-readme)
 
 ## Reporting Issues
+
 We use GitHub Issues as the official bug tracker for the **Vuetify 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 **Vuetify Material Dashboard**. Check the **CHANGELOG** from your dashboard on our [website](https://www.creative-tim.com/).
diff --git a/babel.config.js b/babel.config.js
index d39e57b4..600fd223 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: [
-    '@vue/app',
-  ],
+	presets: [
+		'@vue/app',
+	],
 }
diff --git a/jest.config.js b/jest.config.js
index d3550bae..5a3c18e4 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,30 +1,30 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue',
-  ],
-  transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest',
-  },
-  transformIgnorePatterns: [
-    '/node_modules/',
-  ],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
-  snapshotSerializers: [
-    'jest-serializer-vue',
-  ],
-  testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
-  ],
-  testURL: 'http://localhost/',
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
+	moduleFileExtensions: [
+		'js',
+		'jsx',
+		'json',
+		'vue',
+	],
+	transform: {
+		'^.+\\.vue$': 'vue-jest',
+		'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+		'^.+\\.jsx?$': 'babel-jest',
+	},
+	transformIgnorePatterns: [
+		'/node_modules/',
+	],
+	moduleNameMapper: {
+		'^@/(.*)$': '<rootDir>/src/$1',
+	},
+	snapshotSerializers: [
+		'jest-serializer-vue',
+	],
+	testMatch: [
+		'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
+	],
+	testURL: 'http://localhost/',
+	watchPlugins: [
+		'jest-watch-typeahead/filename',
+		'jest-watch-typeahead/testname',
+	],
 }
diff --git a/package.json b/package.json
index f9f812d9..e5bbbfff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuetify-material-dashboard",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve --open",
@@ -13,35 +13,35 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "core-js": "^3.6.2",
-    "vue": "^2.6.11",
-    "vue-i18n": "^8.15.3",
-    "vue-router": "^3.1.3",
-    "vuetify": "^2.2.11",
-    "vuex": "^3.1.2"
+    "core-js": "3.30.1",
+    "vue": "2.7.14",
+    "vue-i18n": "8.28.2",
+    "vue-router": "3.1.3",
+    "vuetify": "2.6.15",
+    "vuex": "3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-e2e-cypress": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.2",
-    "@vue/cli-plugin-unit-jest": "^4.1.2",
-    "@vue/cli-service": "^4.1.2",
-    "@vue/eslint-config-standard": "^5.0.1",
-    "@vue/test-utils": "1.0.0-beta.30",
+    "@babel/eslint-parser": "7.22.9",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-e2e-cypress": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-unit-jest": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/eslint-config-standard": "8.0.1",
+    "@vue/test-utils": "1.3.5",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.8.0",
-    "eslint-config-vuetify": "^0.4.1",
-    "eslint-plugin-vue": "^6.1.2",
-    "sass": "^1.24.3",
-    "sass-loader": "^8.0.0",
-    "vee-validate": "^3.2.2",
-    "vue-chartist": "^2.2.1",
-    "vue-cli-plugin-i18n": "^0.6.0",
-    "vue-cli-plugin-vuetify": "^2.0.3",
-    "vue-template-compiler": "^2.6.11",
-    "vue-world-map": "^0.1.1",
-    "vuetify-loader": "^1.4.3"
+    "babel-jest": "29.6.1",
+    "eslint": "8.39.0",
+    "eslint-config-vuetify": "0.6.1",
+    "eslint-plugin-vue": "7.1.0",
+    "sass": "1.62.1",
+    "sass-loader": "13.2.2",
+    "vee-validate": "3.4.15",
+    "vue-chartist": "2.2.1",
+    "vue-cli-plugin-i18n": "2.3.2",
+    "vue-cli-plugin-vuetify": "2.5.8",
+    "vue-template-compiler": "2.7.14",
+    "vue-world-map": "0.1.1",
+    "vuetify-loader": "1.9.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 90d9fffc..ebb5551d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: {
-    autoprefixer: {},
-  },
+	plugins: {
+		autoprefixer: {},
+	},
 }
diff --git a/public/index.html b/public/index.html
index 75c356c1..ba35b615 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,11 +1,11 @@
 <!--
 
 =========================================================
-* Vuetify Material Dashboard - v2.1.0
+* Vuetify Material Dashboard - v2.1.1
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 
 * Coded by Creative Tim
 
@@ -18,17 +18,26 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
     <title>Vuetify Material Dashboard - by Creative Tim</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
+    />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but material doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but material doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App.vue b/src/App.vue
index 795f530d..a65418b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  export default {
-    name: 'App',
-  }
+export default {
+	name: 'App',
+}
 </script>
diff --git a/src/components/base/Card.vue b/src/components/base/Card.vue
index 43e0a895..8ac0fd42 100644
--- a/src/components/base/Card.vue
+++ b/src/components/base/Card.vue
@@ -1,9 +1,9 @@
 <script>
-  import { VCard } from 'vuetify/lib'
+import { VCard } from 'vuetify/lib'
 
-  export default {
-    name: 'Card',
+export default {
+	name: 'Card',
 
-    extends: VCard,
-  }
+	extends: VCard,
+}
 </script>
diff --git a/src/components/base/Item.vue b/src/components/base/Item.vue
index b5e06b3b..381f69aa 100644
--- a/src/components/base/Item.vue
+++ b/src/components/base/Item.vue
@@ -25,45 +25,45 @@
 </template>
 
 <script>
-  import Themeable from 'vuetify/lib/mixins/themeable'
+import Themeable from 'vuetify/lib/mixins/themeable'
 
-  export default {
-    name: 'Item',
+export default {
+	name: 'Item',
 
-    mixins: [Themeable],
+	mixins: [Themeable],
 
-    props: {
-      item: {
-        type: Object,
-        default: () => ({
-          href: undefined,
-          icon: undefined,
-          subtitle: undefined,
-          title: undefined,
-          to: undefined,
-        }),
-      },
-      text: {
-        type: Boolean,
-        default: false,
-      },
-    },
+	props: {
+		item: {
+			type: Object,
+			default: () => ({
+				href: undefined,
+				icon: undefined,
+				subtitle: undefined,
+				title: undefined,
+				to: undefined,
+			}),
+		},
+		text: {
+			type: Boolean,
+			default: false,
+		},
+	},
 
-    computed: {
-      computedText () {
-        if (!this.item || !this.item.title) return ''
+	computed: {
+		computedText () {
+			if (!this.item || !this.item.title) return ''
 
-        let text = ''
+			let text = ''
 
-        this.item.title.split(' ').forEach(val => {
-          text += val.substring(0, 1)
-        })
+			this.item.title.split(' ').forEach(val => {
+				text += val.substring(0, 1)
+			})
 
-        return text
-      },
-      href () {
-        return this.item.href || (!this.item.to ? '#' : undefined)
-      },
-    },
-  }
+			return text
+		},
+		href () {
+			return this.item.href || (!this.item.to ? '#' : undefined)
+		},
+	},
+}
 </script>
diff --git a/src/components/base/ItemGroup.vue b/src/components/base/ItemGroup.vue
index 0665efda..32b407ea 100644
--- a/src/components/base/ItemGroup.vue
+++ b/src/components/base/ItemGroup.vue
@@ -6,7 +6,7 @@
     append-icon="mdi-menu-down"
     :color="barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'"
   >
-    <template v-slot:activator>
+    <template #activator>
       <v-list-item-icon
         v-if="text"
         class="v-list-item__icon--text"
@@ -45,76 +45,76 @@
 </template>
 
 <script>
-  // Utilities
-  import kebabCase from 'lodash/kebabCase'
-  import { mapState } from 'vuex'
-
-  export default {
-    name: 'ItemGroup',
-
-    inheritAttrs: false,
-
-    props: {
-      item: {
-        type: Object,
-        default: () => ({
-          avatar: undefined,
-          group: undefined,
-          title: undefined,
-          children: [],
-        }),
-      },
-      subGroup: {
-        type: Boolean,
-        default: false,
-      },
-      text: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    computed: {
-      ...mapState(['barColor']),
-      children () {
-        return this.item.children.map(item => ({
-          ...item,
-          to: !item.to ? undefined : `${this.item.group}/${item.to}`,
-        }))
-      },
-      computedText () {
-        if (!this.item || !this.item.title) return ''
-
-        let text = ''
-
-        this.item.title.split(' ').forEach(val => {
-          text += val.substring(0, 1)
-        })
-
-        return text
-      },
-      group () {
-        return this.genGroup(this.item.children)
-      },
-    },
-
-    methods: {
-      genGroup (children) {
-        return children
-          .filter(item => item.to)
-          .map(item => {
-            const parent = item.group || this.item.group
-            let group = `${parent}/${kebabCase(item.to)}`
-
-            if (item.children) {
-              group = `${group}|${this.genGroup(item.children)}`
-            }
-
-            return group
-          }).join('|')
-      },
-    },
-  }
+// Utilities
+import kebabCase from 'lodash/kebabCase'
+import { mapState } from 'vuex'
+
+export default {
+	name: 'ItemGroup',
+
+	inheritAttrs: false,
+
+	props: {
+		item: {
+			type: Object,
+			default: () => ({
+				avatar: undefined,
+				group: undefined,
+				title: undefined,
+				children: [],
+			}),
+		},
+		subGroup: {
+			type: Boolean,
+			default: false,
+		},
+		text: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		...mapState(['barColor']),
+		children () {
+			return this.item.children.map(item => ({
+				...item,
+				to: !item.to ? undefined : `${this.item.group}/${item.to}`,
+			}))
+		},
+		computedText () {
+			if (!this.item || !this.item.title) return ''
+
+			let text = ''
+
+			this.item.title.split(' ').forEach(val => {
+				text += val.substring(0, 1)
+			})
+
+			return text
+		},
+		group () {
+			return this.genGroup(this.item.children)
+		},
+	},
+
+	methods: {
+		genGroup (children) {
+			return children
+				.filter(item => item.to)
+				.map(item => {
+					const parent = item.group || this.item.group
+					let group = `${parent}/${kebabCase(item.to)}`
+
+					if (item.children) {
+						group = `${group}|${this.genGroup(item.children)}`
+					}
+
+					return group
+				}).join('|')
+		},
+	},
+}
 </script>
 
 <style>
diff --git a/src/components/base/ItemSubGroup.vue b/src/components/base/ItemSubGroup.vue
index 98de3049..930dd992 100644
--- a/src/components/base/ItemSubGroup.vue
+++ b/src/components/base/ItemSubGroup.vue
@@ -7,19 +7,19 @@
 </template>
 
 <script>
-  export default {
-    name: 'ItemSubGroup',
+export default {
+	name: 'ItemSubGroup',
 
-    props: {
-      item: {
-        type: Object,
-        default: () => ({
-          avatar: undefined,
-          group: undefined,
-          title: undefined,
-          children: [],
-        }),
-      },
-    },
-  }
+	props: {
+		item: {
+			type: Object,
+			default: () => ({
+				avatar: undefined,
+				group: undefined,
+				title: undefined,
+				children: [],
+			}),
+		},
+	},
+}
 </script>
diff --git a/src/components/base/MaterialAlert.vue b/src/components/base/MaterialAlert.vue
index 8407f388..607822ad 100644
--- a/src/components/base/MaterialAlert.vue
+++ b/src/components/base/MaterialAlert.vue
@@ -7,7 +7,7 @@
   >
     <template
       v-if="$attrs.icon"
-      v-slot:prepend
+      #prepend
     >
       <v-icon
         class="v-alert__icon elevation-6 white"
@@ -22,7 +22,7 @@
 
     <template
       v-if="$attrs.dismissible"
-      v-slot:close="{ toggle }"
+      #close="{ toggle }"
     >
       <v-btn
         :aria-label="$vuetify.lang.t('$vuetify.close')"
@@ -40,9 +40,9 @@
 </template>
 
 <script>
-  export default {
-    name: 'MaterialAlert',
-  }
+export default {
+	name: 'MaterialAlert',
+}
 </script>
 
 <style lang="sass">
diff --git a/src/components/base/MaterialCard.vue b/src/components/base/MaterialCard.vue
index 330773bd..3a34071f 100644
--- a/src/components/base/MaterialCard.vue
+++ b/src/components/base/MaterialCard.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-card
-    v-bind="$attrs"
-    :class="classes"
-    class="v-card--material pa-3"
-  >
+  <v-card v-bind="$attrs" :class="classes" class="v-card--material pa-3">
     <div class="d-flex grow flex-wrap">
       <v-avatar
         v-if="avatar"
@@ -17,7 +13,7 @@
       <v-sheet
         v-else
         :class="{
-          'pa-7': !$slots.image
+          'pa-7': !$slots.image,
         }"
         :color="color"
         :max-height="icon ? 90 : undefined"
@@ -26,51 +22,27 @@
         class="text-start v-card--material__heading mb-n6"
         dark
       >
-        <slot
-          v-if="$slots.heading"
-          name="heading"
-        />
+        <slot v-if="$slots.heading" name="heading" />
 
-        <slot
-          v-else-if="$slots.image"
-          name="image"
-        />
+        <slot v-else-if="$slots.image" name="image" />
 
         <div
           v-else-if="title && !icon"
-          class="display-1 font-weight-light"
+          class="text-h4 font-weight-light"
           v-text="title"
         />
 
-        <v-icon
-          v-else-if="icon"
-          size="32"
-          v-text="icon"
-        />
+        <v-icon v-else-if="icon" size="32" v-text="icon" />
 
-        <div
-          v-if="text"
-          class="headline font-weight-thin"
-          v-text="text"
-        />
+        <div v-if="text" class="text-h5 font-weight-thin" v-text="text" />
       </v-sheet>
 
-      <div
-        v-if="$slots['after-heading']"
-        class="ml-6"
-      >
+      <div v-if="$slots['after-heading']" class="ml-6">
         <slot name="after-heading" />
       </div>
 
-      <div
-        v-else-if="icon && title"
-        class="ml-4"
-      >
-        <div
-
-          class="card-title font-weight-light"
-          v-text="title"
-        />
+      <div v-else-if="icon && title" class="ml-4">
+        <div class="card-title font-weight-light" v-text="title" />
       </div>
     </div>
 
@@ -87,62 +59,62 @@
 </template>
 
 <script>
-  export default {
-    name: 'MaterialCard',
-
-    props: {
-      avatar: {
-        type: String,
-        default: '',
-      },
-      color: {
-        type: String,
-        default: 'success',
-      },
-      icon: {
-        type: String,
-        default: undefined,
-      },
-      image: {
-        type: Boolean,
-        default: false,
-      },
-      text: {
-        type: String,
-        default: '',
-      },
-      title: {
-        type: String,
-        default: '',
-      },
-    },
-
-    computed: {
-      classes () {
-        return {
-          'v-card--material--has-heading': this.hasHeading,
-        }
-      },
-      hasHeading () {
-        return Boolean(this.$slots.heading || this.title || this.icon)
-      },
-      hasAltHeading () {
-        return Boolean(this.$slots.heading || (this.title && this.icon))
-      },
-    },
-  }
+export default {
+	name: "MaterialCard",
+
+	props: {
+		avatar: {
+			type: String,
+			default: "",
+		},
+		color: {
+			type: String,
+			default: "success",
+		},
+		icon: {
+			type: String,
+			default: undefined,
+		},
+		image: {
+			type: Boolean,
+			default: false,
+		},
+		text: {
+			type: String,
+			default: "",
+		},
+		title: {
+			type: String,
+			default: "",
+		},
+	},
+
+	computed: {
+		classes() {
+			return {
+				"v-card--material--has-heading": this.hasHeading,
+			};
+		},
+		hasHeading() {
+			return Boolean(this.$slots.heading || this.title || this.icon);
+		},
+		hasAltHeading() {
+			return Boolean(this.$slots.heading || (this.title && this.icon));
+		},
+	},
+};
 </script>
 
 <style lang="sass">
-  .v-card--material
-    &__avatar
-      position: relative
-      top: -64px
-      margin-bottom: -32px
-
-    &__heading
-      position: relative
-      top: -40px
-      transition: .3s ease
-      z-index: 1
+.v-card--material
+  &__avatar
+    position: relative
+    top: -64px
+    margin-bottom: -32px
+
+  &__heading
+    position: relative
+    top: -40px
+    transition: .3s ease
+    z-index: 1
 </style>
diff --git a/src/components/base/MaterialChartCard.vue b/src/components/base/MaterialChartCard.vue
index a607d474..66b5821a 100644
--- a/src/components/base/MaterialChartCard.vue
+++ b/src/components/base/MaterialChartCard.vue
@@ -4,7 +4,7 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <template v-slot:heading>
+    <template #heading>
       <chartist
         :data="data"
         :event-handlers="eventHandlers"
@@ -31,39 +31,39 @@
 </template>
 
 <script>
-  export default {
-    name: 'MaterialChartCard',
+export default {
+	name: 'MaterialChartCard',
 
-    inheritAttrs: false,
+	inheritAttrs: false,
 
-    props: {
-      data: {
-        type: Object,
-        default: () => ({}),
-      },
-      eventHandlers: {
-        type: Array,
-        default: () => ([]),
-      },
-      options: {
-        type: Object,
-        default: () => ({}),
-      },
-      ratio: {
-        type: String,
-        default: undefined,
-      },
-      responsiveOptions: {
-        type: Array,
-        default: () => ([]),
-      },
-      type: {
-        type: String,
-        required: true,
-        validator: v => ['Bar', 'Line', 'Pie'].includes(v),
-      },
-    },
-  }
+	props: {
+		data: {
+			type: Object,
+			default: () => ({}),
+		},
+		eventHandlers: {
+			type: Array,
+			default: () => ([]),
+		},
+		options: {
+			type: Object,
+			default: () => ({}),
+		},
+		ratio: {
+			type: String,
+			default: undefined,
+		},
+		responsiveOptions: {
+			type: Array,
+			default: () => ([]),
+		},
+		type: {
+			type: String,
+			required: true,
+			validator: v => ['Bar', 'Line', 'Pie'].includes(v),
+		},
+	},
+}
 </script>
 
 <style lang="sass">
diff --git a/src/components/base/MaterialSnackbar.vue b/src/components/base/MaterialSnackbar.vue
index f454ed5a..cebc278b 100644
--- a/src/components/base/MaterialSnackbar.vue
+++ b/src/components/base/MaterialSnackbar.vue
@@ -20,40 +20,40 @@
   </v-snackbar>
 </template>
 <script>
-  export default {
-    name: 'BaseMaterialSnackbar',
+export default {
+	name: 'BaseMaterialSnackbar',
 
-    props: {
-      dismissible: {
-        type: Boolean,
-        default: true,
-      },
-      type: {
-        type: String,
-        default: '',
-      },
-      value: Boolean,
-    },
+	props: {
+		dismissible: {
+			type: Boolean,
+			default: true,
+		},
+		type: {
+			type: String,
+			default: '',
+		},
+		value: Boolean,
+	},
 
-    data () {
-      return {
-        internalValue: this.value,
-      }
-    },
+	data () {
+		return {
+			internalValue: this.value,
+		}
+	},
 
-    watch: {
-      internalValue (val, oldVal) {
-        if (val === oldVal) return
+	watch: {
+		internalValue (val, oldVal) {
+			if (val === oldVal) return
 
-        this.$emit('input', val)
-      },
-      value (val, oldVal) {
-        if (val === oldVal) return
+			this.$emit('input', val)
+		},
+		value (val, oldVal) {
+			if (val === oldVal) return
 
-        this.internalValue = val
-      },
-    },
-  }
+			this.internalValue = val
+		},
+	},
+}
 </script>
 
 <style lang="sass">
diff --git a/src/components/base/MaterialStatsCard.vue b/src/components/base/MaterialStatsCard.vue
index 633d7b10..eae8c349 100644
--- a/src/components/base/MaterialStatsCard.vue
+++ b/src/components/base/MaterialStatsCard.vue
@@ -5,86 +5,76 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <template v-slot:after-heading>
+    <template #after-heading>
       <div class="ml-auto text-right">
-        <div
-          class="body-3 grey--text font-weight-light"
-          v-text="title"
-        />
+        <div class="body-3 grey--text font-weight-light" v-text="title" />
 
-        <h3 class="display-2 font-weight-light text--primary">
+        <h3 class="text-h3 font-weight-light text--primary">
           {{ value }} <small>{{ smallValue }}</small>
         </h3>
       </div>
     </template>
 
-    <v-col
-      cols="12"
-      class="px-0"
-    >
+    <v-col cols="12" class="px-0">
       <v-divider />
     </v-col>
 
-    <v-icon
-      :color="subIconColor"
-      size="16"
-      class="ml-2 mr-1"
-    >
+    <v-icon :color="subIconColor" size="16" class="ml-2 mr-1">
       {{ subIcon }}
     </v-icon>
 
     <span
       :class="subTextColor"
-      class="caption grey--text font-weight-light"
+      class="text-caption grey--text font-weight-light"
       v-text="subText"
     />
   </base-material-card>
 </template>
 
 <script>
-  import Card from './Card'
+import Card from "./Card";
 
-  export default {
-    name: 'MaterialStatsCard',
+export default {
+	name: "MaterialStatsCard",
 
-    inheritAttrs: false,
+	inheritAttrs: false,
 
-    props: {
-      ...Card.props,
-      icon: {
-        type: String,
-        required: true,
-      },
-      subIcon: {
-        type: String,
-        default: undefined,
-      },
-      subIconColor: {
-        type: String,
-        default: undefined,
-      },
-      subTextColor: {
-        type: String,
-        default: undefined,
-      },
-      subText: {
-        type: String,
-        default: undefined,
-      },
-      title: {
-        type: String,
-        default: undefined,
-      },
-      value: {
-        type: String,
-        default: undefined,
-      },
-      smallValue: {
-        type: String,
-        default: undefined,
-      },
-    },
-  }
+	props: {
+		...Card.props,
+		icon: {
+			type: String,
+			required: true,
+		},
+		subIcon: {
+			type: String,
+			default: undefined,
+		},
+		subIconColor: {
+			type: String,
+			default: undefined,
+		},
+		subTextColor: {
+			type: String,
+			default: undefined,
+		},
+		subText: {
+			type: String,
+			default: undefined,
+		},
+		title: {
+			type: String,
+			default: undefined,
+		},
+		value: {
+			type: String,
+			default: undefined,
+		},
+		smallValue: {
+			type: String,
+			default: undefined,
+		},
+	},
+};
 </script>
 
 <style lang="sass">
diff --git a/src/components/base/MaterialTabs.vue b/src/components/base/MaterialTabs.vue
index 7f4dde7b..59754b2f 100644
--- a/src/components/base/MaterialTabs.vue
+++ b/src/components/base/MaterialTabs.vue
@@ -13,21 +13,21 @@
 </template>
 
 <script>
-  // Mixins
-  import Proxyable from 'vuetify/lib/mixins/proxyable'
+// Mixins
+import Proxyable from 'vuetify/lib/mixins/proxyable'
 
-  export default {
-    name: 'MaterialTabs',
+export default {
+	name: 'MaterialTabs',
 
-    mixins: [Proxyable],
+	mixins: [Proxyable],
 
-    props: {
-      color: {
-        type: String,
-        default: 'primary',
-      },
-    },
-  }
+	props: {
+		color: {
+			type: String,
+			default: 'primary',
+		},
+	},
+}
 </script>
 
 <style lang="sass">
diff --git a/src/components/base/MaterialTestimony.vue b/src/components/base/MaterialTestimony.vue
index 880a9198..2f0e1456 100644
--- a/src/components/base/MaterialTestimony.vue
+++ b/src/components/base/MaterialTestimony.vue
@@ -1,38 +1,22 @@
 <template>
   <v-card class="text-center v-card--testimony">
     <div class="pt-6">
-      <v-icon
-        color="black"
-        x-large
-      >
+      <v-icon color="black" x-large>
         mdi-format-quote-close
       </v-icon>
     </div>
 
     <v-card-text
-      class="display-1 font-weight-light font-italic mb-3"
+      class="text-h4 font-weight-light font-italic mb-3"
       v-text="blurb"
     />
 
-    <div
-      class="display-2 font-weight-light mb-2"
-      v-text="author"
-    />
+    <div class="text-h3 font-weight-light mb-2" v-text="author" />
 
-    <div
-      class="body-2 text-uppercase grey--text"
-      v-text="handle"
-    />
+    <div class="text-body-2 text-uppercase grey--text" v-text="handle" />
 
-    <v-avatar
-      class="elevation-12"
-      color="grey"
-      size="100"
-    >
-      <v-img
-        :alt="`${author} Testimonial`"
-        :src="avatar"
-      />
+    <v-avatar class="elevation-12" color="grey" size="100">
+      <v-img :alt="`${author} Testimonial`" :src="avatar" />
     </v-avatar>
 
     <div />
@@ -40,37 +24,38 @@
 </template>
 
 <script>
-  export default {
-    name: 'BaseMaterialTestimony',
-
-    props: {
-      author: {
-        type: String,
-        default: '',
-      },
-      avatar: {
-        type: String,
-        default: 'https://demos.creative-tim.com/material-dashboard/assets/img/faces/card-profile1-square.jpg',
-      },
-      blurb: {
-        type: String,
-        default: '',
-      },
-      handle: {
-        type: String,
-        default: '',
-      },
-    },
-  }
+export default {
+	name: "BaseMaterialTestimony",
+
+	props: {
+		author: {
+			type: String,
+			default: "",
+		},
+		avatar: {
+			type: String,
+			default:
+        "https://demos.creative-tim.com/material-dashboard/assets/img/faces/card-profile1-square.jpg",
+		},
+		blurb: {
+			type: String,
+			default: "",
+		},
+		handle: {
+			type: String,
+			default: "",
+		},
+	},
+};
 </script>
 
 <style lang="sass">
-  .v-card--testimony
-    padding-bottom: 72px
-    margin-bottom: 64px
-
-    .v-avatar
-      position: absolute
-      left: calc(50% - 64px)
-      top: calc(100% - 64px)
+.v-card--testimony
+  padding-bottom: 72px
+  margin-bottom: 64px
+
+  .v-avatar
+    position: absolute
+    left: calc(50% - 64px)
+    top: calc(100% - 64px)
 </style>
diff --git a/src/components/base/Subheading.vue b/src/components/base/Subheading.vue
index f0cc6637..373aa35e 100644
--- a/src/components/base/Subheading.vue
+++ b/src/components/base/Subheading.vue
@@ -1,12 +1,11 @@
 <template>
-  <div class="display-2 font-weight-light col col-12 text-left text--primary pa-0 mb-8">
+  <div
+    class="text-h3 font-weight-light col col-12 text-left text--primary pa-0 mb-8"
+  >
     <h5 class="font-weight-light">
       {{ subheading }}
       <template v-if="text">
-        <span
-          class="subtitle-1"
-          v-text="text"
-        />
+        <span class="text-subtitle-1" v-text="text" />
       </template>
     </h5>
 
@@ -17,18 +16,18 @@
 </template>
 
 <script>
-  export default {
-    name: 'Subheading',
+export default {
+	name: "Subheading",
 
-    props: {
-      subheading: {
-        type: String,
-        default: '',
-      },
-      text: {
-        type: String,
-        default: '',
-      },
-    },
-  }
+	props: {
+		subheading: {
+			type: String,
+			default: "",
+		},
+		text: {
+			type: String,
+			default: "",
+		},
+	},
+};
 </script>
diff --git a/src/components/base/VComponent.vue b/src/components/base/VComponent.vue
index 935a9f30..49cf7c99 100644
--- a/src/components/base/VComponent.vue
+++ b/src/components/base/VComponent.vue
@@ -1,20 +1,15 @@
 <template>
   <section class="mb-12 text-center">
-    <h1
-      class="font-weight-light mb-2 headline"
-      v-text="`Vuetify ${heading}`"
-    />
+    <h1 class="font-weight-light mb-2 text-h5" v-text="`Vuetify ${heading}`" />
 
-    <span
-      class="font-weight-light subtitle-1"
-    >
+    <span class="font-weight-light text-subtitle-1">
       Please checkout the
       <a
         :href="`https://vuetifyjs.com/${link}`"
         rel="noopener"
         target="_blank"
         class="secondary--text"
-        style="text-decoration:none;"
+        style="text-decoration: none"
       >
         full documentation
       </a>
@@ -23,18 +18,18 @@
 </template>
 
 <script>
-  export default {
-    name: 'VComponent',
+export default {
+	name: "VComponent",
 
-    props: {
-      heading: {
-        type: String,
-        default: '',
-      },
-      link: {
-        type: String,
-        default: '',
-      },
-    },
-  }
+	props: {
+		heading: {
+			type: String,
+			default: "",
+		},
+		link: {
+			type: String,
+			default: "",
+		},
+	},
+};
 </script>
diff --git a/src/i18n.js b/src/i18n.js
index 602b343c..a49bfafa 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -6,14 +6,14 @@ import en from 'vuetify/lib/locale/en'
 Vue.use(VueI18n)
 
 const messages = {
-  en: {
-    ...require('@/locales/en.json'),
-    $vuetify: en,
-  },
+	en: {
+		...require('@/locales/en.json'),
+		$vuetify: en,
+	},
 }
 
 export default new VueI18n({
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
-  messages,
+	locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+	fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+	messages,
 })
diff --git a/src/main.js b/src/main.js
index 549cac67..178106d4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,9 @@
 // =========================================================
-// * Vuetify Material Dashboard - v2.1.0
+// * Vuetify Material Dashboard - v2.1.1
 // =========================================================
 //
 // * Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
-// * Copyright 2019 Creative Tim (https://www.creative-tim.com)
+// * Copyright 2023 Creative Tim (https://www.creative-tim.com)
 //
 // * Coded by Creative Tim
 //
@@ -11,22 +11,22 @@
 //
 // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import './plugins/base'
-import './plugins/chartist'
-import './plugins/vee-validate'
-import vuetify from './plugins/vuetify'
-import i18n from './i18n'
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import "./plugins/base";
+import "./plugins/chartist";
+import "./plugins/vee-validate";
+import vuetify from "./plugins/vuetify";
+import i18n from "./i18n";
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
   vuetify,
   i18n,
-  render: h => h(App),
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/src/plugins/base.js b/src/plugins/base.js
index daebef58..7ec4a1f3 100644
--- a/src/plugins/base.js
+++ b/src/plugins/base.js
@@ -3,15 +3,15 @@ import upperFirst from 'lodash/upperFirst'
 import camelCase from 'lodash/camelCase'
 
 const requireComponent = require.context(
-  '@/components/base', true, /\.vue$/,
+	'@/components/base', true, /\.vue$/,
 )
 
 requireComponent.keys().forEach(fileName => {
-  const componentConfig = requireComponent(fileName)
+	const componentConfig = requireComponent(fileName)
 
-  const componentName = upperFirst(
-    camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')),
-  )
+	const componentName = upperFirst(
+		camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')),
+	)
 
-  Vue.component(`Base${componentName}`, componentConfig.default || componentConfig)
+	Vue.component(`Base${componentName}`, componentConfig.default || componentConfig)
 })
diff --git a/src/plugins/vee-validate.js b/src/plugins/vee-validate.js
index 3ea02dec..fbd3dc66 100644
--- a/src/plugins/vee-validate.js
+++ b/src/plugins/vee-validate.js
@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import {
-  extend,
-  ValidationObserver,
-  ValidationProvider,
+	extend,
+	ValidationObserver,
+	ValidationProvider,
 } from 'vee-validate'
 import {
-  email,
-  max,
-  min,
-  numeric,
-  required,
+	email,
+	max,
+	min,
+	numeric,
+	required,
 } from 'vee-validate/dist/rules'
 
 extend('email', email)
@@ -18,5 +18,5 @@ extend('min', min)
 extend('numeric', numeric)
 extend('required', required)
 
-Vue.component('validation-provider', ValidationProvider)
-Vue.component('validation-observer', ValidationObserver)
+Vue.component('ValidationProvider', ValidationProvider)
+Vue.component('ValidationObserver', ValidationObserver)
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index c6246f45..6fca3e44 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -6,20 +6,20 @@ import '@/sass/overrides.sass'
 Vue.use(Vuetify)
 
 const theme = {
-  primary: '#4CAF50',
-  secondary: '#9C27b0',
-  accent: '#9C27b0',
-  info: '#00CAE3',
+	primary: '#4CAF50',
+	secondary: '#9C27b0',
+	accent: '#9C27b0',
+	info: '#00CAE3',
 }
 
 export default new Vuetify({
-  lang: {
-    t: (key, ...params) => i18n.t(key, params),
-  },
-  theme: {
-    themes: {
-      dark: theme,
-      light: theme,
-    },
-  },
+	lang: {
+		t: (key, ...params) => i18n.t(key, params),
+	},
+	theme: {
+		themes: {
+			dark: theme,
+			light: theme,
+		},
+	},
 })
diff --git a/src/router.js b/src/router.js
index 6b923562..8dd557d0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,59 +4,59 @@ import Router from 'vue-router'
 Vue.use(Router)
 
 export default new Router({
-  mode: 'hash',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      component: () => import('@/views/dashboard/Index'),
-      children: [
-        // Dashboard
-        {
-          name: 'Dashboard',
-          path: '',
-          component: () => import('@/views/dashboard/Dashboard'),
-        },
-        // Pages
-        {
-          name: 'User Profile',
-          path: 'pages/user',
-          component: () => import('@/views/dashboard/pages/UserProfile'),
-        },
-        {
-          name: 'Notifications',
-          path: 'components/notifications',
-          component: () => import('@/views/dashboard/component/Notifications'),
-        },
-        {
-          name: 'Icons',
-          path: 'components/icons',
-          component: () => import('@/views/dashboard/component/Icons'),
-        },
-        {
-          name: 'Typography',
-          path: 'components/typography',
-          component: () => import('@/views/dashboard/component/Typography'),
-        },
-        // Tables
-        {
-          name: 'Regular Tables',
-          path: 'tables/regular-tables',
-          component: () => import('@/views/dashboard/tables/RegularTables'),
-        },
-        // Maps
-        {
-          name: 'Google Maps',
-          path: 'maps/google-maps',
-          component: () => import('@/views/dashboard/maps/GoogleMaps'),
-        },
-        // Upgrade
-        {
-          name: 'Upgrade',
-          path: 'upgrade',
-          component: () => import('@/views/dashboard/Upgrade'),
-        },
-      ],
-    },
-  ],
+	mode: 'hash',
+	base: process.env.BASE_URL,
+	routes: [
+		{
+			path: '/',
+			component: () => import('@/views/dashboard/Index'),
+			children: [
+				// Dashboard
+				{
+					name: 'Dashboard',
+					path: '',
+					component: () => import('@/views/dashboard/Dashboard'),
+				},
+				// Pages
+				{
+					name: 'User Profile',
+					path: 'pages/user',
+					component: () => import('@/views/dashboard/pages/UserProfile'),
+				},
+				{
+					name: 'Notifications',
+					path: 'components/notifications',
+					component: () => import('@/views/dashboard/component/Notifications'),
+				},
+				{
+					name: 'Icons',
+					path: 'components/icons',
+					component: () => import('@/views/dashboard/component/Icons'),
+				},
+				{
+					name: 'Typography',
+					path: 'components/typography',
+					component: () => import('@/views/dashboard/component/Typography'),
+				},
+				// Tables
+				{
+					name: 'Regular Tables',
+					path: 'tables/regular-tables',
+					component: () => import('@/views/dashboard/tables/RegularTables'),
+				},
+				// Maps
+				{
+					name: 'Google Maps',
+					path: 'maps/google-maps',
+					component: () => import('@/views/dashboard/maps/GoogleMaps'),
+				},
+				// Upgrade
+				{
+					name: 'Upgrade',
+					path: 'upgrade',
+					component: () => import('@/views/dashboard/Upgrade'),
+				},
+			],
+		},
+	],
 })
diff --git a/src/sass/overrides.sass b/src/sass/overrides.sass
index 4ad1942c..b7cd9376 100644
--- a/src/sass/overrides.sass
+++ b/src/sass/overrides.sass
@@ -1,9 +1,9 @@
 // =========================================================
-// * Vuetify Material Dashboard - v2.1.0
+// * Vuetify Material Dashboard - v2.1.1
 // =========================================================
 //
 // * Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
-// * Copyright 2019 Creative Tim (https://www.creative-tim.com)
+// * Copyright 2023 Creative Tim (https://www.creative-tim.com)
 //
 // * Coded by Creative Tim
 //
diff --git a/src/sass/vuetify-material/_view.sass b/src/sass/vuetify-material/_view.sass
index 9e0dbcb4..020a13d2 100644
--- a/src/sass/vuetify-material/_view.sass
+++ b/src/sass/vuetify-material/_view.sass
@@ -1,4 +1,4 @@
-.v-content__wrap
+.v-main__wrap
   .container--fluid
     padding-left: 30px
     padding-right: 30px
@@ -17,7 +17,7 @@
     font-weight: 400
 
 @media(max-width:960px)
-  .v-content__wrap
+  .v-main__wrap
     .container--fluid
       padding-left: 15px
       padding-right: 15px
diff --git a/src/store.js b/src/store.js
index 60f2af1a..ca31dfb1 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,20 +4,20 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-    barColor: 'rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)',
-    barImage: 'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg',
-    drawer: null,
-  },
-  mutations: {
-    SET_BAR_IMAGE (state, payload) {
-      state.barImage = payload
-    },
-    SET_DRAWER (state, payload) {
-      state.drawer = payload
-    },
-  },
-  actions: {
+	state: {
+		barColor: 'rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)',
+		barImage: 'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg',
+		drawer: null,
+	},
+	mutations: {
+		SET_BAR_IMAGE (state, payload) {
+			state.barImage = payload
+		},
+		SET_DRAWER (state, payload) {
+			state.drawer = payload
+		},
+	},
+	actions: {
 
-  },
+	},
 })
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 582d0dc3..8cf32517 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,14 +1,7 @@
 <template>
-  <v-container
-    id="dashboard"
-    fluid
-    tag="section"
-  >
+  <v-container id="dashboard" fluid tag="section">
     <v-row>
-      <v-col
-        cols="12"
-        lg="4"
-      >
+      <v-col cols="12" lg="4">
         <base-material-chart-card
           :data="emailsSubscriptionChart.data"
           :options="emailsSubscriptionChart.options"
@@ -17,18 +10,15 @@
           hover-reveal
           type="Bar"
         >
-          <template v-slot:reveal-actions>
+          <template #reveal-actions>
             <v-tooltip bottom>
-              <template v-slot:activator="{ attrs, on }">
-                <v-btn
-                  v-bind="attrs"
-                  color="info"
-                  icon
-                  v-on="on"
+              <template #activator="{ attrs, on }">
+                <v-btn v-bind="attrs"
+                       color="info"
+                       icon
+                       v-on="on"
                 >
-                  <v-icon
-                    color="info"
-                  >
+                  <v-icon color="info">
                     mdi-refresh
                   </v-icon>
                 </v-btn>
@@ -38,12 +28,11 @@
             </v-tooltip>
 
             <v-tooltip bottom>
-              <template v-slot:activator="{ attrs, on }">
-                <v-btn
-                  v-bind="attrs"
-                  light
-                  icon
-                  v-on="on"
+              <template #activator="{ attrs, on }">
+                <v-btn v-bind="attrs"
+                       light
+                       icon
+                       v-on="on"
                 >
                   <v-icon>mdi-pencil</v-icon>
                 </v-btn>
@@ -61,22 +50,16 @@
             Last Campaign Performance
           </p>
 
-          <template v-slot:actions>
-            <v-icon
-              class="mr-1"
-              small
-            >
+          <template #actions>
+            <v-icon class="mr-1" small>
               mdi-clock-outline
             </v-icon>
-            <span class="caption grey--text font-weight-light">updated 10 minutes ago</span>
+            <span class="text-caption grey--text font-weight-light">updated 10 minutes ago</span>
           </template>
         </base-material-chart-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        lg="4"
-      >
+      <v-col cols="12" lg="4">
         <base-material-chart-card
           :data="dailySalesChart.data"
           :options="dailySalesChart.options"
@@ -84,18 +67,15 @@
           hover-reveal
           type="Line"
         >
-          <template v-slot:reveal-actions>
+          <template #reveal-actions>
             <v-tooltip bottom>
-              <template v-slot:activator="{ attrs, on }">
-                <v-btn
-                  v-bind="attrs"
-                  color="info"
-                  icon
-                  v-on="on"
+              <template #activator="{ attrs, on }">
+                <v-btn v-bind="attrs"
+                       color="info"
+                       icon
+                       v-on="on"
                 >
-                  <v-icon
-                    color="info"
-                  >
+                  <v-icon color="info">
                     mdi-refresh
                   </v-icon>
                 </v-btn>
@@ -105,12 +85,11 @@
             </v-tooltip>
 
             <v-tooltip bottom>
-              <template v-slot:activator="{ attrs, on }">
-                <v-btn
-                  v-bind="attrs"
-                  light
-                  icon
-                  v-on="on"
+              <template #activator="{ attrs, on }">
+                <v-btn v-bind="attrs"
+                       light
+                       icon
+                       v-on="on"
                 >
                   <v-icon>mdi-pencil</v-icon>
                 </v-btn>
@@ -125,32 +104,22 @@
           </h4>
 
           <p class="d-inline-flex font-weight-light ml-2 mt-1">
-            <v-icon
-              color="green"
-              small
-            >
+            <v-icon color="green" small>
               mdi-arrow-up
             </v-icon>
-            <span class="green--text">55%</span>&nbsp;
-            increase in today's sales
+            <span class="green--text">55%</span>&nbsp; increase in today's sales
           </p>
 
-          <template v-slot:actions>
-            <v-icon
-              class="mr-1"
-              small
-            >
+          <template #actions>
+            <v-icon class="mr-1" small>
               mdi-clock-outline
             </v-icon>
-            <span class="caption grey--text font-weight-light">updated 4 minutes ago</span>
+            <span class="text-caption grey--text font-weight-light">updated 4 minutes ago</span>
           </template>
         </base-material-chart-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        lg="4"
-      >
+      <v-col cols="12" lg="4">
         <base-material-chart-card
           :data="dataCompletedTasksChart.data"
           :options="dataCompletedTasksChart.options"
@@ -158,18 +127,15 @@
           color="info"
           type="Line"
         >
-          <template v-slot:reveal-actions>
+          <template #reveal-actions>
             <v-tooltip bottom>
-              <template v-slot:activator="{ attrs, on }">
-                <v-btn
-                  v-bind="attrs"
-                  color="info"
-                  icon
-                  v-on="on"
+              <template #activator="{ attrs, on }">
+                <v-btn v-bind="attrs"
+                       color="info"
+                       icon
+                       v-on="on"
                 >
-                  <v-icon
-                    color="info"
-                  >
+                  <v-icon color="info">
                     mdi-refresh
                   </v-icon>
                 </v-btn>
@@ -179,12 +145,11 @@
             </v-tooltip>
 
             <v-tooltip bottom>
-              <template v-slot:activator="{ attrs, on }">
-                <v-btn
-                  v-bind="attrs"
-                  light
-                  icon
-                  v-on="on"
+              <template #activator="{ attrs, on }">
+                <v-btn v-bind="attrs"
+                       light
+                       icon
+                       v-on="on"
                 >
                   <v-icon>mdi-pencil</v-icon>
                 </v-btn>
@@ -202,23 +167,16 @@
             Last Last Campaign Performance
           </p>
 
-          <template v-slot:actions>
-            <v-icon
-              class="mr-1"
-              small
-            >
+          <template #actions>
+            <v-icon class="mr-1" small>
               mdi-clock-outline
             </v-icon>
-            <span class="caption grey--text font-weight-light">campaign sent 26 minutes ago</span>
+            <span class="text-caption grey--text font-weight-light">campaign sent 26 minutes ago</span>
           </template>
         </base-material-chart-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        sm="6"
-        lg="3"
-      >
+      <v-col cols="12" sm="6" lg="3">
         <base-material-stats-card
           color="info"
           icon="mdi-twitter"
@@ -229,11 +187,7 @@
         />
       </v-col>
 
-      <v-col
-        cols="12"
-        sm="6"
-        lg="3"
-      >
+      <v-col cols="12" sm="6" lg="3">
         <base-material-stats-card
           color="primary"
           icon="mdi-poll"
@@ -244,11 +198,7 @@
         />
       </v-col>
 
-      <v-col
-        cols="12"
-        sm="6"
-        lg="3"
-      >
+      <v-col cols="12" sm="6" lg="3">
         <base-material-stats-card
           color="success"
           icon="mdi-store"
@@ -259,11 +209,7 @@
         />
       </v-col>
 
-      <v-col
-        cols="12"
-        sm="6"
-        lg="3"
-      >
+      <v-col cols="12" sm="6" lg="3">
         <base-material-stats-card
           color="orange"
           icon="mdi-sofa"
@@ -275,38 +221,26 @@
         />
       </v-col>
 
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <base-material-card
-          color="warning"
-          class="px-5 py-3"
-        >
-          <template v-slot:heading>
-            <div class="display-2 font-weight-light">
+      <v-col cols="12" md="6">
+        <base-material-card color="warning" class="px-5 py-3">
+          <template #heading>
+            <div class="text-h3 font-weight-light">
               Employees Stats
             </div>
 
-            <div class="subtitle-1 font-weight-light">
+            <div class="text-subtitle-1 font-weight-light">
               New employees on 15th September, 2016
             </div>
           </template>
           <v-card-text>
-            <v-data-table
-              :headers="headers"
-              :items="items"
-            />
+            <v-data-table :headers="headers" :items="items" />
           </v-card-text>
         </base-material-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        md="6"
-      >
+      <v-col cols="12" md="6">
         <base-material-card class="px-5 py-3">
-          <template v-slot:heading>
+          <template #heading>
             <v-tabs
               v-model="tabs"
               background-color="transparent"
@@ -337,47 +271,26 @@
             </v-tabs>
           </template>
 
-          <v-tabs-items
-            v-model="tabs"
-            class="transparent"
-          >
-            <v-tab-item
-              v-for="n in 3"
-              :key="n"
-            >
+          <v-tabs-items v-model="tabs" class="transparent">
+            <v-tab-item v-for="n in 3" :key="n">
               <v-card-text>
                 <template v-for="(task, i) in tasks[tabs]">
-                  <v-row
-                    :key="i"
-                    align="center"
-                  >
+                  <v-row :key="i" align="center">
                     <v-col cols="1">
                       <v-list-item-action>
-                        <v-checkbox
-                          v-model="task.value"
-                          color="secondary"
-                        />
+                        <v-checkbox v-model="task.value" color="secondary" />
                       </v-list-item-action>
                     </v-col>
 
                     <v-col cols="9">
-                      <div
-                        class="font-weight-light"
-                        v-text="task.text"
-                      />
+                      <div class="font-weight-light" v-text="task.text" />
                     </v-col>
 
-                    <v-col
-                      cols="2"
-                      class="text-right"
-                    >
+                    <v-col cols="2" class="text-right">
                       <v-icon class="mx-1">
                         mdi-pencil
                       </v-icon>
-                      <v-icon
-                        color="error"
-                        class="mx-1"
-                      >
+                      <v-icon color="error" class="mx-1">
                         mdi-close
                       </v-icon>
                     </v-col>
@@ -393,209 +306,220 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardDashboard',
-
-    data () {
-      return {
-        dailySalesChart: {
-          data: {
-            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
-            series: [
-              [12, 17, 7, 17, 23, 18, 38],
-            ],
-          },
-          options: {
-            lineSmooth: this.$chartist.Interpolation.cardinal({
-              tension: 0,
-            }),
-            low: 0,
-            high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
-            chartPadding: {
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            },
-          },
-        },
-        dataCompletedTasksChart: {
-          data: {
-            labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
-            series: [
-              [230, 750, 450, 300, 280, 240, 200, 190],
-            ],
-          },
-          options: {
-            lineSmooth: this.$chartist.Interpolation.cardinal({
-              tension: 0,
-            }),
-            low: 0,
-            high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
-            chartPadding: {
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            },
-          },
-        },
-        emailsSubscriptionChart: {
-          data: {
-            labels: ['Ja', 'Fe', 'Ma', 'Ap', 'Mai', 'Ju', 'Jul', 'Au', 'Se', 'Oc', 'No', 'De'],
-            series: [
-              [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
-
-            ],
-          },
-          options: {
-            axisX: {
-              showGrid: false,
-            },
-            low: 0,
-            high: 1000,
-            chartPadding: {
-              top: 0,
-              right: 5,
-              bottom: 0,
-              left: 0,
-            },
-          },
-          responsiveOptions: [
-            ['screen and (max-width: 640px)', {
-              seriesBarDistance: 5,
-              axisX: {
-                labelInterpolationFnc: function (value) {
-                  return value[0]
-                },
-              },
-            }],
-          ],
-        },
-        headers: [
-          {
-            sortable: false,
-            text: 'ID',
-            value: 'id',
-          },
-          {
-            sortable: false,
-            text: 'Name',
-            value: 'name',
-          },
-          {
-            sortable: false,
-            text: 'Salary',
-            value: 'salary',
-            align: 'right',
-          },
-          {
-            sortable: false,
-            text: 'Country',
-            value: 'country',
-            align: 'right',
-          },
-          {
-            sortable: false,
-            text: 'City',
-            value: 'city',
-            align: 'right',
-          },
-        ],
-        items: [
-          {
-            id: 1,
-            name: 'Dakota Rice',
-            country: 'Niger',
-            city: 'Oud-Tunrhout',
-            salary: '$35,738',
-          },
-          {
-            id: 2,
-            name: 'Minerva Hooper',
-            country: 'Curaçao',
-            city: 'Sinaai-Waas',
-            salary: '$23,738',
-          },
-          {
-            id: 3,
-            name: 'Sage Rodriguez',
-            country: 'Netherlands',
-            city: 'Overland Park',
-            salary: '$56,142',
-          },
-          {
-            id: 4,
-            name: 'Philip Chanley',
-            country: 'Korea, South',
-            city: 'Gloucester',
-            salary: '$38,735',
-          },
-          {
-            id: 5,
-            name: 'Doris Greene',
-            country: 'Malawi',
-            city: 'Feldkirchen in Kārnten',
-            salary: '$63,542',
-          },
-        ],
-        tabs: 0,
-        tasks: {
-          0: [
-            {
-              text: 'Sign contract for "What are conference organizers afraid of?"',
-              value: true,
-            },
-            {
-              text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
-              value: false,
-            },
-            {
-              text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
-              value: false,
-            },
-            {
-              text: 'Create 4 Invisible User Experiences you Never Knew About',
-              value: true,
-            },
-          ],
-          1: [
-            {
-              text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
-              value: true,
-            },
-            {
-              text: 'Sign contract for "What are conference organizers afraid of?"',
-              value: false,
-            },
-          ],
-          2: [
-            {
-              text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
-              value: false,
-            },
-            {
-              text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
-              value: true,
-            },
-            {
-              text: 'Sign contract for "What are conference organizers afraid of?"',
-              value: true,
-            },
-          ],
-        },
-        list: {
-          0: false,
-          1: false,
-          2: false,
-        },
-      }
-    },
-
-    methods: {
-      complete (index) {
-        this.list[index] = !this.list[index]
-      },
-    },
-  }
+export default {
+	name: "DashboardDashboard",
+
+	data() {
+		return {
+			dailySalesChart: {
+				data: {
+					labels: ["M", "T", "W", "T", "F", "S", "S"],
+					series: [[12, 17, 7, 17, 23, 18, 38]],
+				},
+				options: {
+					lineSmooth: this.$chartist.Interpolation.cardinal({
+						tension: 0,
+					}),
+					low: 0,
+					high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+					chartPadding: {
+						top: 0,
+						right: 0,
+						bottom: 0,
+						left: 0,
+					},
+				},
+			},
+			dataCompletedTasksChart: {
+				data: {
+					labels: ["12am", "3pm", "6pm", "9pm", "12pm", "3am", "6am", "9am"],
+					series: [[230, 750, 450, 300, 280, 240, 200, 190]],
+				},
+				options: {
+					lineSmooth: this.$chartist.Interpolation.cardinal({
+						tension: 0,
+					}),
+					low: 0,
+					high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+					chartPadding: {
+						top: 0,
+						right: 0,
+						bottom: 0,
+						left: 0,
+					},
+				},
+			},
+			emailsSubscriptionChart: {
+				data: {
+					labels: [
+						"Ja",
+						"Fe",
+						"Ma",
+						"Ap",
+						"Mai",
+						"Ju",
+						"Jul",
+						"Au",
+						"Se",
+						"Oc",
+						"No",
+						"De",
+					],
+					series: [
+						[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
+					],
+				},
+				options: {
+					axisX: {
+						showGrid: false,
+					},
+					low: 0,
+					high: 1000,
+					chartPadding: {
+						top: 0,
+						right: 5,
+						bottom: 0,
+						left: 0,
+					},
+				},
+				responsiveOptions: [
+					[
+						"screen and (max-width: 640px)",
+						{
+							seriesBarDistance: 5,
+							axisX: {
+								labelInterpolationFnc: function (value) {
+									return value[0];
+								},
+							},
+						},
+					],
+				],
+			},
+			headers: [
+				{
+					sortable: false,
+					text: "ID",
+					value: "id",
+				},
+				{
+					sortable: false,
+					text: "Name",
+					value: "name",
+				},
+				{
+					sortable: false,
+					text: "Salary",
+					value: "salary",
+					align: "right",
+				},
+				{
+					sortable: false,
+					text: "Country",
+					value: "country",
+					align: "right",
+				},
+				{
+					sortable: false,
+					text: "City",
+					value: "city",
+					align: "right",
+				},
+			],
+			items: [
+				{
+					id: 1,
+					name: "Dakota Rice",
+					country: "Niger",
+					city: "Oud-Tunrhout",
+					salary: "$35,738",
+				},
+				{
+					id: 2,
+					name: "Minerva Hooper",
+					country: "Curaçao",
+					city: "Sinaai-Waas",
+					salary: "$23,738",
+				},
+				{
+					id: 3,
+					name: "Sage Rodriguez",
+					country: "Netherlands",
+					city: "Overland Park",
+					salary: "$56,142",
+				},
+				{
+					id: 4,
+					name: "Philip Chanley",
+					country: "Korea, South",
+					city: "Gloucester",
+					salary: "$38,735",
+				},
+				{
+					id: 5,
+					name: "Doris Greene",
+					country: "Malawi",
+					city: "Feldkirchen in Kārnten",
+					salary: "$63,542",
+				},
+			],
+			tabs: 0,
+			tasks: {
+				0: [
+					{
+						text: 'Sign contract for "What are conference organizers afraid of?"',
+						value: true,
+					},
+					{
+						text: "Lines From Great Russian Literature? Or E-mails From My Boss?",
+						value: false,
+					},
+					{
+						text: "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
+						value: false,
+					},
+					{
+						text: "Create 4 Invisible User Experiences you Never Knew About",
+						value: true,
+					},
+				],
+				1: [
+					{
+						text: "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
+						value: true,
+					},
+					{
+						text: 'Sign contract for "What are conference organizers afraid of?"',
+						value: false,
+					},
+				],
+				2: [
+					{
+						text: "Lines From Great Russian Literature? Or E-mails From My Boss?",
+						value: false,
+					},
+					{
+						text: "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
+						value: true,
+					},
+					{
+						text: 'Sign contract for "What are conference organizers afraid of?"',
+						value: true,
+					},
+				],
+			},
+			list: {
+				0: false,
+				1: false,
+				2: false,
+			},
+		};
+	},
+
+	methods: {
+		complete(index) {
+			this.list[index] = !this.list[index];
+		},
+	},
+};
 </script>
diff --git a/src/views/dashboard/Index.vue b/src/views/dashboard/Index.vue
index 5092f7cb..407c6d6e 100644
--- a/src/views/dashboard/Index.vue
+++ b/src/views/dashboard/Index.vue
@@ -11,18 +11,18 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardIndex',
+export default {
+	name: 'DashboardIndex',
 
-    components: {
-      DashboardCoreAppBar: () => import('./components/core/AppBar'),
-      DashboardCoreDrawer: () => import('./components/core/Drawer'),
-      DashboardCoreSettings: () => import('./components/core/Settings'),
-      DashboardCoreView: () => import('./components/core/View'),
-    },
+	components: {
+		DashboardCoreAppBar: () => import('./components/core/AppBar'),
+		DashboardCoreDrawer: () => import('./components/core/Drawer'),
+		DashboardCoreSettings: () => import('./components/core/Settings'),
+		DashboardCoreView: () => import('./components/core/View'),
+	},
 
-    data: () => ({
-      expandOnHover: false,
-    }),
-  }
+	data: () => ({
+		expandOnHover: false,
+	}),
+}
 </script>
diff --git a/src/views/dashboard/Upgrade.vue b/src/views/dashboard/Upgrade.vue
index e21dbcf0..9a070b78 100644
--- a/src/views/dashboard/Upgrade.vue
+++ b/src/views/dashboard/Upgrade.vue
@@ -1,22 +1,16 @@
 <template>
-  <v-container
-    id="upgrade"
-    fluid
-    tag="section"
-  >
+  <v-container id="upgrade" fluid tag="section">
     <v-row justify="center">
-      <v-col
-        cols="12"
-        md="8"
-      >
+      <v-col cols="12" md="8">
         <base-material-card color="primary">
-          <template v-slot:heading>
-            <div class="display-2 font-weight-light">
+          <template #heading>
+            <div class="text-h3 font-weight-light">
               Vuetify Material Dashboard
             </div>
 
-            <div class="subtitle-1 font-weight-light">
-              Are you looking for more components? Please check our Premium Version of Vuetify Material Dashboard
+            <div class="text-subtitle-1 font-weight-light">
+              Are you looking for more components? Please check our Premium
+              Version of Vuetify Material Dashboard
             </div>
           </template>
 
@@ -34,28 +28,28 @@
             </thead>
             <tbody class="text-center">
               <tr>
-                <th class="text-left font-weight-light subtitle-1">
+                <th class="text-left font-weight-light text-subtitle-1">
                   Components
                 </th>
                 <td>60</td>
                 <td>200</td>
               </tr>
               <tr>
-                <th class="text-left font-weight-light subtitle-1">
+                <th class="text-left font-weight-light text-subtitle-1">
                   Plugins
                 </th>
                 <td>2</td>
                 <td>4</td>
               </tr>
               <tr>
-                <th class="text-left font-weight-light subtitle-1">
+                <th class="text-left font-weight-light text-subtitle-1">
                   Example Pages
                 </th>
                 <td>3</td>
                 <td>8</td>
               </tr>
               <tr>
-                <th class="text-left font-weight-light subtitle-1">
+                <th class="text-left font-weight-light text-subtitle-1">
                   Login, Register, Pricing, Lock Pages
                 </th>
                 <td>
@@ -70,7 +64,7 @@
                 </td>
               </tr>
               <tr>
-                <th class="text-left font-weight-light subtitle-1">
+                <th class="text-left font-weight-light text-subtitle-1">
                   Premium Support
                 </th>
                 <td>
@@ -92,10 +86,7 @@
               <tr>
                 <th />
                 <td>
-                  <v-btn
-                    color="grey"
-                    disabled
-                  >
+                  <v-btn color="grey" disabled>
                     Current Version
                   </v-btn>
                 </td>
@@ -118,14 +109,14 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardDashboard',
-  }
+export default {
+	name: "DashboardDashboard",
+};
 </script>
 
 <style lang="sass">
-  #upgrade
-    .v-data-table
-      th, td
-        border: none !important
+#upgrade
+  .v-data-table
+    th, td
+      border: none !important
 </style>
diff --git a/src/views/dashboard/component/Buttons.vue b/src/views/dashboard/component/Buttons.vue
index 7f343e1f..71feb04a 100644
--- a/src/views/dashboard/component/Buttons.vue
+++ b/src/views/dashboard/component/Buttons.vue
@@ -350,83 +350,83 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardButtons',
+export default {
+	name: 'DashboardButtons',
 
-    data: () => ({
-      colors: [
-        'default',
-        'secondary',
-        'info',
-        'success',
-        'warning',
-        'error',
-      ],
-      icons: {
-        left: 'mdi-chevron-left',
-        right: 'mdi-chevron-right',
-        info: 'mdi-exclamation',
-        success: 'mdi-check',
-        warning: 'mdi-alert',
-        error: 'mdi-close',
-      },
-      social: [
-        {
-          color: '#55ACEE',
-          icon: 'mdi-twitter',
-          text: 'Connect with Twitter',
-        },
-        {
-          color: '#3B5998',
-          icon: 'mdi-facebook',
-          text: 'Share - 2.2K',
-        },
-        {
-          color: '#DD4b39',
-          icon: 'mdi-google-plus',
-          text: 'Share on Google+',
-        },
-        {
-          color: '#0976B4',
-          icon: 'mdi-linkedin',
-          text: 'Connect with LinkedIn',
-        },
-        {
-          color: '#CC2127',
-          icon: 'mdi-pinterest',
-          text: 'Pint It - 212',
-        },
-        {
-          color: '#E52D27',
-          icon: 'mdi-youtube',
-          text: 'View on Youtube',
-        },
-        {
-          color: '#35465C',
-          icon: 'mdi-tumblr',
-          text: 'Repost',
-        },
-        {
-          color: '#333333',
-          icon: 'mdi-github-circle',
-          text: 'Connect with Github',
-        },
-        {
-          color: '#1769FF',
-          icon: 'mdi-behance',
-          text: 'Follow Us',
-        },
-        {
-          color: '#EA4C89',
-          icon: 'mdi-dribbble',
-          text: 'Follow us on Dribbble',
-        },
-        {
-          color: '#FF4500',
-          icon: 'mdi-reddit',
-          text: 'Repost - 232',
-        },
-      ],
-    }),
-  }
+	data: () => ({
+		colors: [
+			'default',
+			'secondary',
+			'info',
+			'success',
+			'warning',
+			'error',
+		],
+		icons: {
+			left: 'mdi-chevron-left',
+			right: 'mdi-chevron-right',
+			info: 'mdi-exclamation',
+			success: 'mdi-check',
+			warning: 'mdi-alert',
+			error: 'mdi-close',
+		},
+		social: [
+			{
+				color: '#55ACEE',
+				icon: 'mdi-twitter',
+				text: 'Connect with Twitter',
+			},
+			{
+				color: '#3B5998',
+				icon: 'mdi-facebook',
+				text: 'Share - 2.2K',
+			},
+			{
+				color: '#DD4b39',
+				icon: 'mdi-google-plus',
+				text: 'Share on Google+',
+			},
+			{
+				color: '#0976B4',
+				icon: 'mdi-linkedin',
+				text: 'Connect with LinkedIn',
+			},
+			{
+				color: '#CC2127',
+				icon: 'mdi-pinterest',
+				text: 'Pint It - 212',
+			},
+			{
+				color: '#E52D27',
+				icon: 'mdi-youtube',
+				text: 'View on Youtube',
+			},
+			{
+				color: '#35465C',
+				icon: 'mdi-tumblr',
+				text: 'Repost',
+			},
+			{
+				color: '#333333',
+				icon: 'mdi-github-circle',
+				text: 'Connect with Github',
+			},
+			{
+				color: '#1769FF',
+				icon: 'mdi-behance',
+				text: 'Follow Us',
+			},
+			{
+				color: '#EA4C89',
+				icon: 'mdi-dribbble',
+				text: 'Follow us on Dribbble',
+			},
+			{
+				color: '#FF4500',
+				icon: 'mdi-reddit',
+				text: 'Repost - 232',
+			},
+		],
+	}),
+}
 </script>
diff --git a/src/views/dashboard/component/Grid.vue b/src/views/dashboard/component/Grid.vue
index 83e4f6ef..f845451f 100644
--- a/src/views/dashboard/component/Grid.vue
+++ b/src/views/dashboard/component/Grid.vue
@@ -284,17 +284,17 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardGrid',
-
-    components: {
-      ParagraphHeading: {
-        render (h) {
-          return h('div', {
-            class: 'headline font-weight-light col cols-12',
-          }, this.$slots.default)
-        },
-      },
-    },
-  }
+export default {
+	name: 'DashboardGrid',
+
+	components: {
+		ParagraphHeading: {
+			render (h) {
+				return h('div', {
+					class: 'headline font-weight-light col cols-12',
+				}, this.$slots.default)
+			},
+		},
+	},
+}
 </script>
diff --git a/src/views/dashboard/component/Icons.vue b/src/views/dashboard/component/Icons.vue
index b61361b9..3752d2c4 100644
--- a/src/views/dashboard/component/Icons.vue
+++ b/src/views/dashboard/component/Icons.vue
@@ -12,12 +12,12 @@
     <v-row>
       <v-col cols="12">
         <base-material-card color="green">
-          <template v-slot:heading>
-            <div class="display-2 font-weight-light">
+          <template #heading>
+            <div class="text-h3 font-weight-light">
               Material Design Icons
             </div>
 
-            <div class="subtitle-1 font-weight-light">
+            <div class="text-subtitle-1 font-weight-light">
               See all available
               <a
                 class="white--text"
@@ -42,7 +42,7 @@
                 content-class="top"
                 top
               >
-                <template v-slot:activator="{ attrs, on }">
+                <template #activator="{ attrs, on }">
                   <v-icon
                     v-bind="attrs"
                     v-on="on"
@@ -78,224 +78,224 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardIcons',
+export default {
+	name: 'DashboardIcons',
 
-    data: () => ({
-      icons: [
-        'mdi-access-point',
-        'mdi-access-point-network',
-        'mdi-account',
-        'mdi-account-alert',
-        'mdi-account-box',
-        'mdi-account-box-multiple',
-        'mdi-account-box-outline',
-        'mdi-account-card-details',
-        'mdi-account-check',
-        'mdi-account-circle',
-        'mdi-account-convert',
-        'mdi-account-edit',
-        'mdi-account-group',
-        'mdi-account-heart',
-        'mdi-account-key',
-        'mdi-account-location',
-        'mdi-account-minus',
-        'mdi-account-multiple',
-        'mdi-account-multiple-check',
-        'mdi-account-multiple-minus',
-        'mdi-account-multiple-outline',
-        'mdi-account-multiple-plus',
-        'mdi-account-multiple-plus-outline',
-        'mdi-account-network',
-        'mdi-account-off',
-        'mdi-account-outline',
-        'mdi-account-plus',
-        'mdi-account-plus-outline',
-        'mdi-account-remove',
-        'mdi-account-search',
-        'mdi-account-search-outline',
-        'mdi-account-settings',
-        'mdi-account-settings-variant',
-        'mdi-account-star',
-        'mdi-account-switch',
-        'mdi-accusoft',
-        'mdi-adjust',
-        'mdi-adobe',
-        'mdi-air-conditioner',
-        'mdi-airballoon',
-        'mdi-airplane',
-        'mdi-airplane-landing',
-        'mdi-airplane-off',
-        'mdi-airplane-takeoff',
-        'mdi-airplay',
-        'mdi-airport',
-        'mdi-alarm',
-        'mdi-alarm-bell',
-        'mdi-alarm-check',
-        'mdi-alarm-light',
-        'mdi-alarm-multiple',
-        'mdi-alarm-off',
-        'mdi-alarm-plus',
-        'mdi-alarm-snooze',
-        'mdi-album',
-        'mdi-alert',
-        'mdi-alert-box',
-        'mdi-alert-circle',
-        'mdi-alert-circle-outline',
-        'mdi-alert-decagram',
-        'mdi-alert-octagon',
-        'mdi-alert-octagram',
-        'mdi-alert-outline',
-        'mdi-alien',
-        'mdi-all-inclusive',
-        'mdi-alpha',
-        'mdi-alphabetical',
-        'mdi-altimeter',
-        'mdi-amazon',
-        'mdi-amazon-alexa',
-        'mdi-amazon-drive',
-        'mdi-ambulance',
-        'mdi-amplifier',
-        'mdi-anchor',
-        'mdi-android',
-        'mdi-android-debug-bridge',
-        'mdi-android-head',
-        'mdi-android-studio',
-        'mdi-angle-acute',
-        'mdi-angle-obtuse',
-        'mdi-angle-right',
-        'mdi-angular',
-        'mdi-angularjs',
-        'mdi-animation',
-        'mdi-animation-play',
-        'mdi-anvil',
-        'mdi-apple',
-        'mdi-apple-finder',
-        'mdi-apple-icloud',
-        'mdi-apple-ios',
-        'mdi-apple-keyboard-caps',
-        'mdi-apple-keyboard-command',
-        'mdi-apple-keyboard-control',
-        'mdi-apple-keyboard-option',
-        'mdi-apple-keyboard-shift',
-        'mdi-apple-safari',
-        'mdi-application',
-        'mdi-approval',
-        'mdi-apps',
-        'mdi-arch',
-        'mdi-archive',
-        'mdi-arrange-bring-forward',
-        'mdi-arrange-bring-to-front',
-        'mdi-arrange-send-backward',
-        'mdi-arrange-send-to-back',
-        'mdi-arrow-all',
-        'mdi-arrow-bottom-left',
-        'mdi-arrow-bottom-left-bold-outline',
-        'mdi-arrow-bottom-left-thick',
-        'mdi-arrow-bottom-right',
-        'mdi-arrow-bottom-right-bold-outline',
-        'mdi-arrow-bottom-right-thick',
-        'mdi-arrow-collapse',
-        'mdi-arrow-collapse-all',
-        'mdi-arrow-collapse-down',
-        'mdi-arrow-collapse-horizontal',
-        'mdi-arrow-collapse-left',
-        'mdi-arrow-collapse-right',
-        'mdi-arrow-collapse-up',
-        'mdi-arrow-collapse-vertical',
-        'mdi-arrow-decision',
-        'mdi-arrow-decision-auto',
-        'mdi-arrow-decision-auto-outline',
-        'mdi-arrow-decision-outline',
-        'mdi-arrow-down',
-        'mdi-arrow-down-bold',
-        'mdi-arrow-down-bold-box',
-        'mdi-arrow-down-bold-box-outline',
-        'mdi-arrow-down-bold-circle',
-        'mdi-arrow-down-bold-circle-outline',
-        'mdi-arrow-down-bold-hexagon-outline',
-        'mdi-arrow-down-bold-outline',
-        'mdi-arrow-down-box',
-        'mdi-arrow-down-drop-circle',
-        'mdi-arrow-down-drop-circle-outline',
-        'mdi-arrow-down-thick',
-        'mdi-arrow-expand',
-        'mdi-arrow-expand-all',
-        'mdi-arrow-expand-down',
-        'mdi-arrow-expand-horizontal',
-        'mdi-arrow-expand-left',
-        'mdi-arrow-expand-right',
-        'mdi-arrow-expand-up',
-        'mdi-arrow-expand-vertical',
-        'mdi-arrow-left',
-        'mdi-arrow-left-bold',
-        'mdi-arrow-left-bold-box',
-        'mdi-arrow-left-bold-box-outline',
-        'mdi-arrow-left-bold-circle',
-        'mdi-arrow-left-bold-circle-outline',
-        'mdi-arrow-left-bold-hexagon-outline',
-        'mdi-arrow-left-bold-outline',
-        'mdi-arrow-left-box',
-        'mdi-arrow-left-drop-circle',
-        'mdi-arrow-left-drop-circle-outline',
-        'mdi-arrow-left-right-bold-outline',
-        'mdi-arrow-left-thick',
-        'mdi-arrow-right',
-        'mdi-arrow-right-bold',
-        'mdi-arrow-right-bold-box',
-        'mdi-arrow-right-bold-box-outline',
-        'mdi-arrow-right-bold-circle',
-        'mdi-arrow-right-bold-circle-outline',
-        'mdi-arrow-right-bold-hexagon-outline',
-        'mdi-arrow-right-bold-outline',
-        'mdi-arrow-right-box',
-        'mdi-arrow-right-drop-circle',
-        'mdi-arrow-right-drop-circle-outline',
-        'mdi-arrow-right-thick',
-        'mdi-arrow-split-horizontal',
-        'mdi-arrow-split-vertical',
-        'mdi-arrow-top-left',
-        'mdi-arrow-top-left-bold-outline',
-        'mdi-arrow-top-left-thick',
-        'mdi-arrow-top-right',
-        'mdi-arrow-top-right-bold-outline',
-        'mdi-arrow-top-right-thick',
-        'mdi-arrow-up',
-        'mdi-arrow-up-bold',
-        'mdi-arrow-up-bold-box',
-        'mdi-arrow-up-bold-box-outline',
-        'mdi-arrow-up-bold-circle',
-        'mdi-arrow-up-bold-circle-outline',
-        'mdi-arrow-up-bold-hexagon-outline',
-        'mdi-arrow-up-bold-outline',
-        'mdi-arrow-up-box',
-        'mdi-arrow-up-down-bold-outline',
-        'mdi-arrow-up-drop-circle',
-        'mdi-arrow-up-drop-circle-outline',
-        'mdi-arrow-up-thick',
-        'mdi-artist',
-        'mdi-assistant',
-        'mdi-asterisk',
-        'mdi-at',
-        'mdi-atlassian',
-        'mdi-atom',
-        'mdi-attachment',
-        'mdi-audio-video',
-        'mdi-audiobook',
-        'mdi-augmented-reality',
-        'mdi-auto-fix',
-        'mdi-auto-upload',
-        'mdi-autorenew',
-        'mdi-av-timer',
-        'mdi-axe',
-        'mdi-azure',
-        'mdi-baby',
-        'mdi-baby-buggy',
-        'mdi-backburger',
-        'mdi-backspace',
-        'mdi-backup-restore',
-        'mdi-badminton',
-      ],
-    }),
-  }
+	data: () => ({
+		icons: [
+			'mdi-access-point',
+			'mdi-access-point-network',
+			'mdi-account',
+			'mdi-account-alert',
+			'mdi-account-box',
+			'mdi-account-box-multiple',
+			'mdi-account-box-outline',
+			'mdi-account-card-details',
+			'mdi-account-check',
+			'mdi-account-circle',
+			'mdi-account-convert',
+			'mdi-account-edit',
+			'mdi-account-group',
+			'mdi-account-heart',
+			'mdi-account-key',
+			'mdi-account-location',
+			'mdi-account-minus',
+			'mdi-account-multiple',
+			'mdi-account-multiple-check',
+			'mdi-account-multiple-minus',
+			'mdi-account-multiple-outline',
+			'mdi-account-multiple-plus',
+			'mdi-account-multiple-plus-outline',
+			'mdi-account-network',
+			'mdi-account-off',
+			'mdi-account-outline',
+			'mdi-account-plus',
+			'mdi-account-plus-outline',
+			'mdi-account-remove',
+			'mdi-account-search',
+			'mdi-account-search-outline',
+			'mdi-account-settings',
+			'mdi-account-settings-variant',
+			'mdi-account-star',
+			'mdi-account-switch',
+			'mdi-accusoft',
+			'mdi-adjust',
+			'mdi-adobe',
+			'mdi-air-conditioner',
+			'mdi-airballoon',
+			'mdi-airplane',
+			'mdi-airplane-landing',
+			'mdi-airplane-off',
+			'mdi-airplane-takeoff',
+			'mdi-airplay',
+			'mdi-airport',
+			'mdi-alarm',
+			'mdi-alarm-bell',
+			'mdi-alarm-check',
+			'mdi-alarm-light',
+			'mdi-alarm-multiple',
+			'mdi-alarm-off',
+			'mdi-alarm-plus',
+			'mdi-alarm-snooze',
+			'mdi-album',
+			'mdi-alert',
+			'mdi-alert-box',
+			'mdi-alert-circle',
+			'mdi-alert-circle-outline',
+			'mdi-alert-decagram',
+			'mdi-alert-octagon',
+			'mdi-alert-octagram',
+			'mdi-alert-outline',
+			'mdi-alien',
+			'mdi-all-inclusive',
+			'mdi-alpha',
+			'mdi-alphabetical',
+			'mdi-altimeter',
+			'mdi-amazon',
+			'mdi-amazon-alexa',
+			'mdi-amazon-drive',
+			'mdi-ambulance',
+			'mdi-amplifier',
+			'mdi-anchor',
+			'mdi-android',
+			'mdi-android-debug-bridge',
+			'mdi-android-head',
+			'mdi-android-studio',
+			'mdi-angle-acute',
+			'mdi-angle-obtuse',
+			'mdi-angle-right',
+			'mdi-angular',
+			'mdi-angularjs',
+			'mdi-animation',
+			'mdi-animation-play',
+			'mdi-anvil',
+			'mdi-apple',
+			'mdi-apple-finder',
+			'mdi-apple-icloud',
+			'mdi-apple-ios',
+			'mdi-apple-keyboard-caps',
+			'mdi-apple-keyboard-command',
+			'mdi-apple-keyboard-control',
+			'mdi-apple-keyboard-option',
+			'mdi-apple-keyboard-shift',
+			'mdi-apple-safari',
+			'mdi-application',
+			'mdi-approval',
+			'mdi-apps',
+			'mdi-arch',
+			'mdi-archive',
+			'mdi-arrange-bring-forward',
+			'mdi-arrange-bring-to-front',
+			'mdi-arrange-send-backward',
+			'mdi-arrange-send-to-back',
+			'mdi-arrow-all',
+			'mdi-arrow-bottom-left',
+			'mdi-arrow-bottom-left-bold-outline',
+			'mdi-arrow-bottom-left-thick',
+			'mdi-arrow-bottom-right',
+			'mdi-arrow-bottom-right-bold-outline',
+			'mdi-arrow-bottom-right-thick',
+			'mdi-arrow-collapse',
+			'mdi-arrow-collapse-all',
+			'mdi-arrow-collapse-down',
+			'mdi-arrow-collapse-horizontal',
+			'mdi-arrow-collapse-left',
+			'mdi-arrow-collapse-right',
+			'mdi-arrow-collapse-up',
+			'mdi-arrow-collapse-vertical',
+			'mdi-arrow-decision',
+			'mdi-arrow-decision-auto',
+			'mdi-arrow-decision-auto-outline',
+			'mdi-arrow-decision-outline',
+			'mdi-arrow-down',
+			'mdi-arrow-down-bold',
+			'mdi-arrow-down-bold-box',
+			'mdi-arrow-down-bold-box-outline',
+			'mdi-arrow-down-bold-circle',
+			'mdi-arrow-down-bold-circle-outline',
+			'mdi-arrow-down-bold-hexagon-outline',
+			'mdi-arrow-down-bold-outline',
+			'mdi-arrow-down-box',
+			'mdi-arrow-down-drop-circle',
+			'mdi-arrow-down-drop-circle-outline',
+			'mdi-arrow-down-thick',
+			'mdi-arrow-expand',
+			'mdi-arrow-expand-all',
+			'mdi-arrow-expand-down',
+			'mdi-arrow-expand-horizontal',
+			'mdi-arrow-expand-left',
+			'mdi-arrow-expand-right',
+			'mdi-arrow-expand-up',
+			'mdi-arrow-expand-vertical',
+			'mdi-arrow-left',
+			'mdi-arrow-left-bold',
+			'mdi-arrow-left-bold-box',
+			'mdi-arrow-left-bold-box-outline',
+			'mdi-arrow-left-bold-circle',
+			'mdi-arrow-left-bold-circle-outline',
+			'mdi-arrow-left-bold-hexagon-outline',
+			'mdi-arrow-left-bold-outline',
+			'mdi-arrow-left-box',
+			'mdi-arrow-left-drop-circle',
+			'mdi-arrow-left-drop-circle-outline',
+			'mdi-arrow-left-right-bold-outline',
+			'mdi-arrow-left-thick',
+			'mdi-arrow-right',
+			'mdi-arrow-right-bold',
+			'mdi-arrow-right-bold-box',
+			'mdi-arrow-right-bold-box-outline',
+			'mdi-arrow-right-bold-circle',
+			'mdi-arrow-right-bold-circle-outline',
+			'mdi-arrow-right-bold-hexagon-outline',
+			'mdi-arrow-right-bold-outline',
+			'mdi-arrow-right-box',
+			'mdi-arrow-right-drop-circle',
+			'mdi-arrow-right-drop-circle-outline',
+			'mdi-arrow-right-thick',
+			'mdi-arrow-split-horizontal',
+			'mdi-arrow-split-vertical',
+			'mdi-arrow-top-left',
+			'mdi-arrow-top-left-bold-outline',
+			'mdi-arrow-top-left-thick',
+			'mdi-arrow-top-right',
+			'mdi-arrow-top-right-bold-outline',
+			'mdi-arrow-top-right-thick',
+			'mdi-arrow-up',
+			'mdi-arrow-up-bold',
+			'mdi-arrow-up-bold-box',
+			'mdi-arrow-up-bold-box-outline',
+			'mdi-arrow-up-bold-circle',
+			'mdi-arrow-up-bold-circle-outline',
+			'mdi-arrow-up-bold-hexagon-outline',
+			'mdi-arrow-up-bold-outline',
+			'mdi-arrow-up-box',
+			'mdi-arrow-up-down-bold-outline',
+			'mdi-arrow-up-drop-circle',
+			'mdi-arrow-up-drop-circle-outline',
+			'mdi-arrow-up-thick',
+			'mdi-artist',
+			'mdi-assistant',
+			'mdi-asterisk',
+			'mdi-at',
+			'mdi-atlassian',
+			'mdi-atom',
+			'mdi-attachment',
+			'mdi-audio-video',
+			'mdi-audiobook',
+			'mdi-augmented-reality',
+			'mdi-auto-fix',
+			'mdi-auto-upload',
+			'mdi-autorenew',
+			'mdi-av-timer',
+			'mdi-axe',
+			'mdi-azure',
+			'mdi-baby',
+			'mdi-baby-buggy',
+			'mdi-backburger',
+			'mdi-backspace',
+			'mdi-backup-restore',
+			'mdi-badminton',
+		],
+	}),
+}
 </script>
diff --git a/src/views/dashboard/component/Notifications.vue b/src/views/dashboard/component/Notifications.vue
index f7b45043..0fe2810f 100644
--- a/src/views/dashboard/component/Notifications.vue
+++ b/src/views/dashboard/component/Notifications.vue
@@ -1,45 +1,30 @@
 <template>
-  <v-container
-    id="alerts"
-    fluid
-    tag="section"
-  >
-    <base-v-component
-      heading="Alerts"
-      link="components/alerts"
-    />
+  <v-container id="alerts" fluid tag="section">
+    <base-v-component heading="Alerts" link="components/alerts" />
 
     <v-row>
-      <v-col
-        cols="12"
-        md="6"
-      >
+      <v-col cols="12" md="6">
         <v-card>
           <v-card-text>
             <base-subheading subheading="Notification Style" />
 
-            <base-material-alert
-              color="info"
-              dark
-            >
+            <base-material-alert color="info" dark>
               This is a plain notification.
             </base-material-alert>
 
-            <base-material-alert
-              color="info"
-              dark
-              dismissible
-            >
+            <base-material-alert color="info" dark dismissible>
               This is a notification with close button.
             </base-material-alert>
 
-            <base-material-alert
-              color="info"
-              dark
-              dismissible
-              icon="mdi-bell"
+            <base-material-alert color="info"
+                                 dark
+                                 dismissible
+                                 icon="mdi-bell"
             >
-              This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
+              This is a notification with close button and icon and have many
+              lines. You can see that the icon and the close button are always
+              vertically aligned. This is a beautiful notification. So you don't
+              have to worry about the style.
             </base-material-alert>
 
             <base-material-alert
@@ -48,47 +33,38 @@
               dismissible
               icon="mdi-bell"
             >
-              You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
+              You can see that the icon and the close button are always
+              vertically aligned. This is a beautiful notification. So you don't
+              have to worry about the style.
             </base-material-alert>
           </v-card-text>
         </v-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        md="6"
-      >
+      <v-col cols="12" md="6">
         <v-card>
           <v-card-text>
             <base-subheading subheading="Notification states" />
 
             <base-material-alert
-              v-for="color in colors"
-              :key="color"
-              :color="color"
+              v-for="colour in colors"
+              :key="colour"
+              :color="colour"
               dark
               dismissible
             >
-              <span
-                class="text-uppercase"
-                v-text="color"
-              /> — This is a regular alert made with the color of "{{ color }}"
+              <span class="text-uppercase" v-text="colour" /> — This is a
+              regular alert made with the color of "{{ colour }}"
             </base-material-alert>
 
-            <base-material-alert
-              color="secondary"
-              dark
-              dismissible
-            >
-              <span>PRIMARY</span> — This is a regular alert made with the color "secondary"
+            <base-material-alert color="secondary" dark dismissible>
+              <span>PRIMARY</span> — This is a regular alert made with the color
+              "secondary"
             </base-material-alert>
 
-            <base-material-alert
-              color="pink darken-1"
-              dark
-              dismissible
-            >
-              <span>PINK DARKEN-1</span> — This is a regular alert made with the color "pink darken-1"
+            <base-material-alert color="pink darken-1" dark dismissible>
+              <span>PINK DARKEN-1</span> — This is a regular alert made with the
+              color "pink darken-1"
             </base-material-alert>
           </v-card-text>
         </v-card>
@@ -102,25 +78,17 @@
               subheading="Snackbar Locations"
             />
 
-            <v-row
-              class="mt-n12"
-              justify="center"
-            >
-              <v-col
-                cols="10"
-                lg="8"
-              >
+            <v-row class="mt-n12" justify="center">
+              <v-col cols="10" lg="8">
                 <v-row>
-                  <v-col
-                    v-for="dir in directions"
-                    :key="dir"
-                    cols="4"
-                  >
+                  <v-col v-for="dir in directions" :key="dir" cols="4">
                     <v-btn
                       color="secondary"
                       default
                       class="v-btn--block"
-                      @click="randomColor(), direction = dir, snackbar = true"
+                      @click="
+                        randomColor(), (direction = dir), (snackbar = true)
+                      "
                     >
                       {{ dir }}
                     </v-btn>
@@ -129,19 +97,10 @@
               </v-col>
             </v-row>
 
-            <base-subheading
-              class="text-center"
-              subheading="Dialogs"
-            />
+            <base-subheading class="text-center" subheading="Dialogs" />
 
-            <v-row
-              class="mt-n12"
-              justify="center"
-            >
-              <v-col
-                cols="10"
-                lg="8"
-              >
+            <v-row class="mt-n12" justify="center">
+              <v-col cols="10" lg="8">
                 <v-row>
                   <v-col cols="4">
                     <v-btn
@@ -154,11 +113,10 @@
                     </v-btn>
                   </v-col>
                   <v-col cols="4">
-                    <v-btn
-                      color="info"
-                      default
-                      rounded
-                      @click="dialog2 = true"
+                    <v-btn color="info"
+                           default
+                           rounded
+                           @click="dialog2 = true"
                     >
                       Notice Modal
                     </v-btn>
@@ -187,87 +145,78 @@
       :type="color"
       v-bind="{
         [parsedDirection[0]]: true,
-        [parsedDirection[1]]: true
+        [parsedDirection[1]]: true,
       }"
     >
-      Welcome to <span class="font-weight-bold">&nbsp;MATERIAL DASHBOARD&nbsp;</span> — a beautiful admin panel for every web developer.
+      Welcome to
+      <span class="font-weight-bold">&nbsp;MATERIAL DASHBOARD&nbsp;</span> — a
+      beautiful admin panel for every web developer.
     </base-material-snackbar>
 
-    <v-dialog
-      v-model="dialog"
-      max-width="500"
-    >
+    <v-dialog v-model="dialog" max-width="500">
       <v-card class="text-center">
         <v-card-title>
           Dialog Title
 
           <v-spacer />
 
-          <v-icon
-            aria-label="Close"
-            @click="dialog = false"
-          >
+          <v-icon aria-label="Close" @click="dialog = false">
             mdi-close
           </v-icon>
         </v-card-title>
 
         <v-card-text>
-          Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
+          Far far away, behind the word mountains, far from the countries
+          Vokalia and Consonantia, there live the blind texts. Separated they
+          live in Bookmarksgrove right at the coast of the Semantics, a large
+          language ocean. A small river named Duden flows by their place and
+          supplies it with the necessary regelialia. It is a paradisematic
+          country, in which roasted parts of sentences fly into your mouth. Even
+          the all-powerful Pointing has no control about the blind texts it is
+          an almost unorthographic life One day however a small line of blind
+          text by the name of Lorem Ipsum decided to leave for the far World of
+          Grammar.
         </v-card-text>
 
         <v-card-actions>
           <v-spacer />
 
-          <v-btn
-            color="error"
-            text
-            @click="dialog = false"
-          >
+          <v-btn color="error" text @click="dialog = false">
             Close
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
-    <v-dialog
-      v-model="dialog2"
-      max-width="500"
-    >
+    <v-dialog v-model="dialog2" max-width="500">
       <v-card>
         <v-card-title>
           How do you become an affiliate?
 
           <v-spacer />
 
-          <v-icon
-            aria-label="Close"
-            @click="dialog2 = false"
-          >
+          <v-icon aria-label="Close" @click="dialog2 = false">
             mdi-close
           </v-icon>
         </v-card-title>
 
-        <v-card-text class="body-1 text-center">
+        <v-card-text class="text-body-1 text-center">
           <v-row>
-            <v-col
-              cols="12"
-              md="8"
-            >
+            <v-col cols="12" md="8">
               <div>
                 <div>
                   <strong>1. Register</strong>
                 </div>
 
                 <div class="grey--text">
-                  The first step is to create an account at Creative Tim. You can choose a social network or go for the classic version, whatever works best for you.
+                  The first step is to create an account at Creative Tim. You
+                  can choose a social network or go for the classic version,
+                  whatever works best for you.
                 </div>
               </div>
             </v-col>
 
-            <v-col
-              class="hidden-sm-and-down"
-              md="4"
-            >
+            <v-col class="hidden-sm-and-down" md="4">
               <v-sheet>
                 <v-img
                   src="https://demos.creative-tim.com/material-dashboard/assets/img/card-1.jpg"
@@ -277,25 +226,22 @@
               </v-sheet>
             </v-col>
 
-            <v-col
-              cols="12"
-              md="8"
-            >
+            <v-col cols="12" md="8">
               <div>
                 <div>
                   <strong>2. Apply</strong>
                 </div>
 
                 <div class="grey--text">
-                  The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.
+                  The first step is to create an account at
+                  <a href="http://www.creative-tim.com/">Creative Tim</a>. You
+                  can choose a social network or go for the classic version,
+                  whatever works best for you.
                 </div>
               </div>
             </v-col>
 
-            <v-col
-              class="hidden-sm-and-down"
-              md="4"
-            >
+            <v-col class="hidden-sm-and-down" md="4">
               <v-sheet>
                 <v-img
                   src="https://demos.creative-tim.com/material-dashboard/assets/img/card-2.jpg"
@@ -306,7 +252,8 @@
             </v-col>
 
             <v-col cols="12">
-              If you have more questions, don't hesitate to contact us or send us a tweet @creativetim. We're here to help!
+              If you have more questions, don't hesitate to contact us or send
+              us a tweet @creativetim. We're here to help!
             </v-col>
           </v-row>
 
@@ -324,38 +271,24 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog
-      v-model="dialog3"
-      max-width="300"
-    >
+    <v-dialog v-model="dialog3" max-width="300">
       <v-card>
         <v-card-title>
           Are you sure?
 
           <v-spacer />
 
-          <v-icon
-            aria-label="Close"
-            @click="dialog3 = false"
-          >
+          <v-icon aria-label="Close" @click="dialog3 = false">
             mdi-close
           </v-icon>
         </v-card-title>
 
         <v-card-text class="pb-6 pt-12 text-center">
-          <v-btn
-            class="mr-3"
-            text
-            @click="dialog3 = false"
-          >
+          <v-btn class="mr-3" text @click="dialog3 = false">
             Nevermind
           </v-btn>
 
-          <v-btn
-            color="success"
-            text
-            @click="dialog3 = false"
-          >
+          <v-btn color="success" text @click="dialog3 = false">
             Yes
           </v-btn>
         </v-card-text>
@@ -365,42 +298,37 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardNotifications',
-
-    data: () => ({
-      color: 'info',
-      colors: [
-        'info',
-        'success',
-        'warning',
-        'error',
-      ],
-      dialog: false,
-      dialog2: false,
-      dialog3: false,
-      direction: 'top center',
-      directions: [
-        'top left',
-        'top center',
-        'top right',
-        'bottom left',
-        'bottom center',
-        'bottom right',
-      ],
-      snackbar: false,
-    }),
-
-    computed: {
-      parsedDirection () {
-        return this.direction.split(' ')
-      },
-    },
-
-    methods: {
-      randomColor () {
-        this.color = this.colors[Math.floor(Math.random() * this.colors.length)]
-      },
-    },
-  }
+export default {
+	name: "DashboardNotifications",
+
+	data: () => ({
+		color: "info",
+		colors: ["info", "success", "warning", "error"],
+		dialog: false,
+		dialog2: false,
+		dialog3: false,
+		direction: "top center",
+		directions: [
+			"top left",
+			"top center",
+			"top right",
+			"bottom left",
+			"bottom center",
+			"bottom right",
+		],
+		snackbar: false,
+	}),
+
+	computed: {
+		parsedDirection() {
+			return this.direction.split(" ");
+		},
+	},
+
+	methods: {
+		randomColor() {
+			this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
+		},
+	},
+};
 </script>
diff --git a/src/views/dashboard/component/Tabs.vue b/src/views/dashboard/component/Tabs.vue
index 2d0fb230..78be3edf 100644
--- a/src/views/dashboard/component/Tabs.vue
+++ b/src/views/dashboard/component/Tabs.vue
@@ -1,19 +1,9 @@
 <template>
-  <v-container
-    id="panels"
-    fluid
-    tag="section"
-  >
-    <base-v-component
-      heading="Tabs"
-      link="components/tabs"
-    />
+  <v-container id="panels" fluid tag="section">
+    <base-v-component heading="Tabs" link="components/tabs" />
 
     <v-row>
-      <v-col
-        cols="12"
-        md="6"
-      >
+      <v-col cols="12" md="6">
         <v-card class="my-0">
           <v-card-text>
             <base-subheading
@@ -22,25 +12,24 @@
             />
 
             <base-material-tabs color="warning">
-              <v-tab
-                v-for="(tab, i) in tabs"
-                :key="i"
-              >
-                {{ tab }}
+              <v-tab v-for="(t, i) in tabs" :key="i">
+                {{ t }}
               </v-tab>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text>
                     <p>
-                      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                      Collaboratively administrate empowered markets via
+                      plug-and-play networks. Dynamically procrastinate B2C
+                      users after installed base benefits.
                     </p>
 
                     <p>
-                      Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                      Dramatically visualize customer directed convergence
+                      without revolutionary ROI. Collaboratively administrate
+                      empowered markets via plug-and-play networks. Dynamically
+                      procrastinate B2C users after installed base benefits.
                     </p>
 
                     <div>This is very nice.</div>
@@ -49,34 +38,34 @@
               </v-tab-item>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text>
                     <p>
-                      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
+                      Efficiently unleash cross-media information without
+                      cross-media value. Quickly maximize timely deliverables
+                      for real-time schemas.
                     </p>
 
                     <div>
-                      Dramatically maintain clicks-and-mortar solutions without functional solutions.
+                      Dramatically maintain clicks-and-mortar solutions without
+                      functional solutions.
                     </div>
                   </v-card-text>
                 </v-card>
               </v-tab-item>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text>
                     <p>
-                      Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
+                      Completely synergize resource taxing relationships via
+                      premier niche markets. Professionally cultivate one-to-one
+                      customer service with robust ideas.
                     </p>
 
                     <div>
-                      Dynamically innovate resource-leveling customer service for state of the art customer service.
+                      Dynamically innovate resource-leveling customer service
+                      for state of the art customer service.
                     </div>
                   </v-card-text>
                 </v-card>
@@ -86,10 +75,7 @@
         </v-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        md="6"
-      >
+      <v-col cols="12" md="6">
         <v-card class="mt-0">
           <v-card-text>
             <base-subheading
@@ -97,30 +83,25 @@
               text="Vertical Tabs"
             />
 
-            <base-material-tabs
-              color="success"
-              vertical
-            >
-              <v-tab
-                v-for="(tab, i) in tabs"
-                :key="i"
-                class="mb-1"
-              >
-                {{ tab }}
+            <base-material-tabs color="success" vertical>
+              <v-tab v-for="(t, i) in tabs" :key="i" class="mb-1">
+                {{ t }}
               </v-tab>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text class="pt-0">
                     <p>
-                      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                      Collaboratively administrate empowered markets via
+                      plug-and-play networks. Dynamically procrastinate B2C
+                      users after installed base benefits.
                     </p>
 
                     <p>
-                      Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                      Dramatically visualize customer directed convergence
+                      without revolutionary ROI. Collaboratively administrate
+                      empowered markets via plug-and-play networks. Dynamically
+                      procrastinate B2C users after installed base benefits.
                     </p>
 
                     <div>This is very nice.</div>
@@ -129,34 +110,34 @@
               </v-tab-item>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text class="pt-0">
                     <p>
-                      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
+                      Efficiently unleash cross-media information without
+                      cross-media value. Quickly maximize timely deliverables
+                      for real-time schemas.
                     </p>
 
                     <div>
-                      Dramatically maintain clicks-and-mortar solutions without functional solutions.
+                      Dramatically maintain clicks-and-mortar solutions without
+                      functional solutions.
                     </div>
                   </v-card-text>
                 </v-card>
               </v-tab-item>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text class="pt-0">
                     <p>
-                      Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
+                      Completely synergize resource taxing relationships via
+                      premier niche markets. Professionally cultivate one-to-one
+                      customer service with robust ideas.
                     </p>
 
                     <div>
-                      Dynamically innovate resource-leveling customer service for state of the art customer service.
+                      Dynamically innovate resource-leveling customer service
+                      for state of the art customer service.
                     </div>
                   </v-card-text>
                 </v-card>
@@ -166,25 +147,29 @@
         </v-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        md="6"
-      >
+      <v-col cols="12" md="6">
         <v-card>
           <v-card-text>
             <base-subheading subheading="Collapsible Accordion" />
 
             <v-expansion-panels>
-              <v-expansion-panel
-                v-for="n in 5"
-                :key="n"
-              >
+              <v-expansion-panel v-for="n in 5" :key="n">
                 <v-expansion-panel-header>
                   Collapsible Group Item #{{ n }}
                 </v-expansion-panel-header>
 
                 <v-expansion-panel-content>
-                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life
+                  accusamus terry richardson ad squid. 3 wolf moon officia aute,
+                  non cupidatat skateboard dolor brunch. Food truck quinoa
+                  nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
+                  aliqua put a bird on it squid single-origin coffee nulla
+                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
+                  beer labore wes anderson cred nesciunt sapiente ea proident.
+                  Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                  beer farm-to-table, raw denim aesthetic synth nesciunt you
+                  probably haven't heard of them accusamus labore sustainable
+                  VHS.
                 </v-expansion-panel-content>
               </v-expansion-panel>
             </v-expansion-panels>
@@ -192,11 +177,7 @@
         </v-card>
       </v-col>
 
-      <v-col
-        class="mb-12"
-        cols="12"
-        md="6"
-      >
+      <v-col class="mb-12" cols="12" md="6">
         <v-card>
           <v-card-text>
             <base-subheading
@@ -204,53 +185,50 @@
               text="Vertical Tabs"
             />
 
-            <base-material-tabs
-              color="success"
-              icons-and-text
-              vertical
-            >
-              <v-tab
-                v-for="(tab, i) in tabs2"
-                :key="i"
-                class="mb-5"
-              >
-                {{ tab.text }}
-                <v-icon v-text="tab.icon" />
+            <base-material-tabs color="success" icons-and-text vertical>
+              <v-tab v-for="(tab2, i) in tabs2" :key="i" class="mb-5">
+                {{ tab2.text }}
+                <v-icon v-text="tab2.icon" />
               </v-tab>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text class="pt-0">
                     <p>
-                      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                      Collaboratively administrate empowered markets via
+                      plug-and-play networks. Dynamically procrastinate B2C
+                      users after installed base benefits.
                     </p>
 
                     <p>
-                      Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                      Dramatically visualize customer directed convergence
+                      without revolutionary ROI. Collaboratively administrate
+                      empowered markets via plug-and-play networks. Dynamically
+                      procrastinate B2C users after installed base benefits.
                     </p>
 
                     <div>
-                      Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                      Dramatically visualize customer directed convergence
+                      without revolutionary ROI. Collaboratively administrate
+                      empowered markets via plug-and-play networks. Dynamically
+                      procrastinate B2C users after installed base benefits.
                     </div>
                   </v-card-text>
                 </v-card>
               </v-tab-item>
 
               <v-tab-item>
-                <v-card
-                  flat
-                  class="my-0"
-                >
+                <v-card flat class="my-0">
                   <v-card-text class="pt-0">
                     <p>
-                      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
+                      Efficiently unleash cross-media information without
+                      cross-media value. Quickly maximize timely deliverables
+                      for real-time schemas.
                     </p>
 
                     <div>
-                      Dramatically maintain clicks-and-mortar solutions without functional solutions.
+                      Dramatically maintain clicks-and-mortar solutions without
+                      functional solutions.
                     </div>
                   </v-card-text>
                 </v-card>
@@ -260,12 +238,8 @@
         </v-card>
       </v-col>
 
-      <v-col
-        class="mx-auto"
-        cols="12"
-        md="8"
-      >
-        <div class="text-center headline font-weight-light mb-12 pl-0">
+      <v-col class="mx-auto" cols="12" md="8">
+        <div class="text-center text-h5 font-weight-light mb-12 pl-0">
           Page Subcategories
         </div>
 
@@ -276,33 +250,32 @@
           color="warning"
           icons-and-text
         >
-          <v-tab
-            v-for="(tab, i) in tabs3"
-            :key="i"
-          >
-            {{ tab.text }}
-            <v-icon v-text="tab.icon" />
+          <v-tab v-for="(tab3, i) in tabs3" :key="i">
+            {{ tab3.text }}
+            <v-icon v-text="tab3.icon" />
           </v-tab>
 
-          <v-tabs-items
-            v-model="tab"
-            class="pt-12 transparent"
-          >
+          <v-tabs-items v-model="tab" class="pt-12 transparent">
             <v-tab-item>
               <v-card class="mt-0 px-5">
                 <v-card-text>
                   <base-subheading subheading="Description about product">
-                    <p class="grey--text body-2 font-weight-light">
+                    <p class="grey--text text-body-2 font-weight-light">
                       More Information here
                     </p>
                   </base-subheading>
 
                   <p>
-                    Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                    Collaboratively administrate empowered markets via
+                    plug-and-play networks. Dynamically procrastinate B2C users
+                    after installed base benefits.
                   </p>
 
                   <div>
-                    Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
+                    Dramatically visualize customer directed convergence without
+                    revolutionary ROI. Collaboratively administrate empowered
+                    markets via plug-and-play networks. Dynamically
+                    procrastinate B2C users after installed base benefits.
                   </div>
                 </v-card-text>
               </v-card>
@@ -312,17 +285,20 @@
               <v-card class="mt-0 px-5">
                 <v-card-text>
                   <base-subheading subheading="Location of the product product">
-                    <p class="grey--text body-2 font-weight-light">
+                    <p class="grey--text text-body-2 font-weight-light">
                       More Information here
                     </p>
                   </base-subheading>
 
                   <p>
-                    Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
+                    Efficiently unleash cross-media information without
+                    cross-media value. Quickly maximize timely deliverables for
+                    real-time schemas.
                   </p>
 
                   <div>
-                    Dramatically maintain clicks-and-mortar solutions without functional solutions
+                    Dramatically maintain clicks-and-mortar solutions without
+                    functional solutions
                   </div>
                 </v-card-text>
               </v-card>
@@ -331,18 +307,23 @@
             <v-tab-item>
               <v-card class="mt-0 px-5">
                 <v-card-text>
-                  <base-subheading subheading="Legal info of the product product">
-                    <p class="grey--text body-2 font-weight-light">
+                  <base-subheading
+                    subheading="Legal info of the product product"
+                  >
+                    <p class="grey--text text-body-2 font-weight-light">
                       More Information here
                     </p>
                   </base-subheading>
 
                   <p>
-                    Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
+                    Completely synergize resource taxing relationships via
+                    premier niche markets. Professionally cultivate one-to-one
+                    customer service with robust ideas.
                   </p>
 
                   <div>
-                    Dynamically innovate resource-leveling customer service for state of the art customer service.
+                    Dynamically innovate resource-leveling customer service for
+                    state of the art customer service.
                   </div>
                 </v-card-text>
               </v-card>
@@ -352,17 +333,23 @@
               <v-card class="mt-0 px-5">
                 <v-card-text>
                   <base-subheading heading="Help center">
-                    <p class="grey--text body-2 font-weight-light">
+                    <p class="grey--text text-body-2 font-weight-light">
                       More Information here
                     </p>
                   </base-subheading>
 
                   <p>
-                    From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
+                    From the seamless transition of glass and metal to the
+                    streamlined profile, every detail was carefully considered
+                    to enhance your experience. So while its display is larger,
+                    the phone feels just right.
                   </p>
 
                   <div>
-                    Another Text. The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
+                    Another Text. The first thing you notice when you hold the
+                    phone is how great it feels in your hand. The cover glass
+                    curves down around the sides to meet the anodized aluminum
+                    enclosure in a remarkable, simplified design.
                   </div>
                 </v-card-text>
               </v-card>
@@ -375,44 +362,40 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardPanels',
-
-    data: () => ({
-      tab: 0,
-      tabs: [
-        'Profile',
-        'Settings',
-        'Options',
-      ],
-      tabs2: [
-        {
-          text: 'Home',
-          icon: 'mdi-view-dashboard',
-        },
-        {
-          text: 'Settings',
-          icon: 'mdi-clock-outline',
-        },
-      ],
-      tabs3: [
-        {
-          text: 'Description',
-          icon: 'mdi-information',
-        },
-        {
-          text: 'Location',
-          icon: 'mdi-map-marker',
-        },
-        {
-          text: 'Legal Info',
-          icon: 'mdi-gavel',
-        },
-        {
-          text: 'Help Center',
-          icon: 'mdi-help-circle-outline',
-        },
-      ],
-    }),
-  }
+export default {
+	name: "DashboardPanels",
+
+	data: () => ({
+		tab: 0,
+		tabs: ["Profile", "Settings", "Options"],
+		tabs2: [
+			{
+				text: "Home",
+				icon: "mdi-view-dashboard",
+			},
+			{
+				text: "Settings",
+				icon: "mdi-clock-outline",
+			},
+		],
+		tabs3: [
+			{
+				text: "Description",
+				icon: "mdi-information",
+			},
+			{
+				text: "Location",
+				icon: "mdi-map-marker",
+			},
+			{
+				text: "Legal Info",
+				icon: "mdi-gavel",
+			},
+			{
+				text: "Help Center",
+				icon: "mdi-help-circle-outline",
+			},
+		],
+	}),
+};
 </script>
diff --git a/src/views/dashboard/component/Typography.vue b/src/views/dashboard/component/Typography.vue
index 4f9bade3..1b2f22d4 100644
--- a/src/views/dashboard/component/Typography.vue
+++ b/src/views/dashboard/component/Typography.vue
@@ -1,57 +1,29 @@
 <template>
-  <v-container
-    id="typography"
-    fluid
-    tag="section"
-  >
-    <base-v-component
-      heading="Typography"
-      link="styles/typography"
-    />
+  <v-container id="typography" fluid tag="section">
+    <base-v-component heading="Typography" link="styles/typography" />
 
-    <v-row
-      align="center"
-      justify="center"
-    >
+    <v-row align="center" justify="center">
       <v-col cols="12">
-        <base-material-card
-          color="green"
-        >
-          <template v-slot:heading>
-            <div class="display-2 font-weight-light">
+        <base-material-card color="green">
+          <template #heading>
+            <div class="text-h3 font-weight-light">
               Material Dashboard Heading
             </div>
 
-            <div class="subtitle-1 font-weight-light">
+            <div class="text-subtitle-1 font-weight-light">
               Created using Roboto Font Family
             </div>
           </template>
 
           <v-card-text>
-            <v-container
-              class="pa-0"
-              fluid
-            >
-              <v-row
-                v-for="(t, i) in typography"
-                :key="i"
-                align="center"
-              >
-                <v-col
-                  cols="1"
-                  md="3"
-                >
-                  <span
-                    class="tim-note"
-                    v-text="t[0]"
-                  />
+            <v-container class="pa-0" fluid>
+              <v-row v-for="(t, i) in typography" :key="i" align="center">
+                <v-col cols="1" md="3">
+                  <span class="tim-note" v-text="t[0]" />
                 </v-col>
 
                 <v-col cols="8">
-                  <component
-                    :is="t[2]"
-                    :class="i"
-                  >
+                  <component :is="t[2]" :class="i">
                     <template v-if="i !== 'quote'">
                       {{ t[1] }}
                     </template>
@@ -77,44 +49,45 @@
 </template>
 
 <script>
-  const leader = 'I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.'
-  const leaderShort = leader.slice(0, 105) + '...'
-  const material = 'The Life of Material Dashboard'
-  const small = 'Header with small subtitle'
+const leader =
+  "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.";
+const leaderShort = leader.slice(0, 105) + "...";
+const material = "The Life of Material Dashboard";
+const small = "Header with small subtitle";
 
-  export default {
-    data: () => ({
-      typography: {
-        'display-4': ['Display 4', material, 'h1'],
-        'display-3': ['Display 3', material, 'h2'],
-        'display-2': ['Display 2', material, 'h3'],
-        'display-1': ['Display 1', material, 'h4'],
-        headline: ['Headline', material, 'h5'],
-        'title text-uppercase': ['Title', material, 'h6'],
-        '': ['Paragraph', leader, 'p'],
-        blockquote: ['Quote', leader, 'blockquote'],
-        'text--disabled': ['Muted Text', leaderShort, 'p'],
-        'primary--text': ['Primary Text', leaderShort, 'p'],
-        'info--text': ['Info Text', leaderShort, 'p'],
-        'success--text': ['Success Text', leaderShort, 'p'],
-        'warning--text': ['Warning Text', leaderShort, 'p'],
-        'danger--text': ['Danger Text', leaderShort, 'p'],
-        small: ['Small Tag', small, 'h2'],
-      },
-    }),
-  }
+export default {
+	data: () => ({
+		typography: {
+			"display-4": ["Display 4", material, "h1"],
+			"display-3": ["Display 3", material, "h2"],
+			"display-2": ["Display 2", material, "h3"],
+			"display-1": ["Display 1", material, "h4"],
+			headline: ["Headline", material, "h5"],
+			"title text-uppercase": ["Title", material, "h6"],
+			"": ["Paragraph", leader, "p"],
+			blockquote: ["Quote", leader, "blockquote"],
+			"text--disabled": ["Muted Text", leaderShort, "p"],
+			"primary--text": ["Primary Text", leaderShort, "p"],
+			"info--text": ["Info Text", leaderShort, "p"],
+			"success--text": ["Success Text", leaderShort, "p"],
+			"warning--text": ["Warning Text", leaderShort, "p"],
+			"danger--text": ["Danger Text", leaderShort, "p"],
+			small: ["Small Tag", small, "h2"],
+		},
+	}),
+};
 </script>
 
 <style lang="scss">
-  .tim-note {
-    bottom: 10px;
-    color: #c0c1c2;
-    display: block;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 13px;
-    left: 0;
-    margin-left: 20px;
-    width: 260px;
-  }
+.tim-note {
+  bottom: 10px;
+  color: #c0c1c2;
+  display: block;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 13px;
+  left: 0;
+  margin-left: 20px;
+  width: 260px;
+}
 </style>
diff --git a/src/views/dashboard/components/core/AppBar.vue b/src/views/dashboard/components/core/AppBar.vue
index ded84be1..8ce9925f 100644
--- a/src/views/dashboard/components/core/AppBar.vue
+++ b/src/views/dashboard/components/core/AppBar.vue
@@ -38,7 +38,7 @@
     >
       <template
         v-if="$vuetify.breakpoint.mdAndUp"
-        v-slot:append-outer
+        #append-outer
       >
         <v-btn
           class="mt-n2"
@@ -69,7 +69,7 @@
       origin="top right"
       transition="scale-transition"
     >
-      <template v-slot:activator="{ attrs, on }">
+      <template #activator="{ attrs, on }">
         <v-btn
           class="ml-2"
           min-width="0"
@@ -82,7 +82,7 @@
             overlap
             bordered
           >
-            <template v-slot:badge>
+            <template #badge>
               <span>5</span>
             </template>
 
@@ -118,66 +118,66 @@
 </template>
 
 <script>
-  // Components
-  import { VHover, VListItem } from 'vuetify/lib'
-
-  // Utilities
-  import { mapState, mapMutations } from 'vuex'
-
-  export default {
-    name: 'DashboardCoreAppBar',
-
-    components: {
-      AppBarItem: {
-        render (h) {
-          return h(VHover, {
-            scopedSlots: {
-              default: ({ hover }) => {
-                return h(VListItem, {
-                  attrs: this.$attrs,
-                  class: {
-                    'black--text': !hover,
-                    'white--text secondary elevation-12': hover,
-                  },
-                  props: {
-                    activeClass: '',
-                    dark: hover,
-                    link: true,
-                    ...this.$attrs,
-                  },
-                }, this.$slots.default)
-              },
-            },
-          })
-        },
-      },
-    },
-
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    data: () => ({
-      notifications: [
-        'Mike John Responded to your email',
-        'You have 5 new tasks',
-        'You\'re now friends with Andrew',
-        'Another Notification',
-        'Another one',
-      ],
-    }),
-
-    computed: {
-      ...mapState(['drawer']),
-    },
-
-    methods: {
-      ...mapMutations({
-        setDrawer: 'SET_DRAWER',
-      }),
-    },
-  }
+// Components
+import { VHover, VListItem } from 'vuetify/lib'
+
+// Utilities
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+	name: 'DashboardCoreAppBar',
+
+	components: {
+		AppBarItem: {
+			render (h) {
+				return h(VHover, {
+					scopedSlots: {
+						default: ({ hover }) => {
+							return h(VListItem, {
+								attrs: this.$attrs,
+								class: {
+									'black--text': !hover,
+									'white--text secondary elevation-12': hover,
+								},
+								props: {
+									activeClass: '',
+									dark: hover,
+									link: true,
+									...this.$attrs,
+								},
+							}, this.$slots.default)
+						},
+					},
+				})
+			},
+		},
+	},
+
+	props: {
+		value: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data: () => ({
+		notifications: [
+			'Mike John Responded to your email',
+			'You have 5 new tasks',
+			'You\'re now friends with Andrew',
+			'Another Notification',
+			'Another one',
+		],
+	}),
+
+	computed: {
+		...mapState(['drawer']),
+	},
+
+	methods: {
+		...mapMutations({
+			setDrawer: 'SET_DRAWER',
+		}),
+	},
+}
 </script>
diff --git a/src/views/dashboard/components/core/Drawer.vue b/src/views/dashboard/components/core/Drawer.vue
index 38646b15..3613606b 100644
--- a/src/views/dashboard/components/core/Drawer.vue
+++ b/src/views/dashboard/components/core/Drawer.vue
@@ -6,30 +6,20 @@
     :expand-on-hover="expandOnHover"
     :right="$vuetify.rtl"
     :src="barImage"
-    mobile-break-point="960"
+    mobile-breakpoint="960"
     app
     width="260"
     v-bind="$attrs"
   >
-    <template v-slot:img="props">
-      <v-img
-        :gradient="`to bottom, ${barColor}`"
-        v-bind="props"
-      />
+    <template #img="props">
+      <v-img :gradient="`to bottom, ${barColor}`" v-bind="props" />
     </template>
 
     <v-divider class="mb-1" />
 
-    <v-list
-      dense
-      nav
-    >
+    <v-list dense nav>
       <v-list-item>
-        <v-list-item-avatar
-          class="align-self-center"
-          color="white"
-          contain
-        >
+        <v-list-item-avatar class="align-self-center" color="white" contain>
           <v-img
             src="https://demos.creative-tim.com/vuetify-material-dashboard/favicon.ico"
             max-height="30"
@@ -37,38 +27,24 @@
         </v-list-item-avatar>
 
         <v-list-item-content>
-          <v-list-item-title
-            class="display-1"
-            v-text="profile.title"
-          />
+          <v-list-item-title class="text-h4" v-text="profile.title" />
         </v-list-item-content>
       </v-list-item>
     </v-list>
 
     <v-divider class="mb-2" />
 
-    <v-list
-      expand
-      nav
-    >
+    <v-list expand nav>
       <!-- Style cascading bug  -->
       <!-- https://github.com/vuetifyjs/vuetify/pull/8574 -->
       <div />
 
       <template v-for="(item, i) in computedItems">
-        <base-item-group
-          v-if="item.children"
-          :key="`group-${i}`"
-          :item="item"
-        >
+        <base-item-group v-if="item.children" :key="`group-${i}`" :item="item">
           <!--  -->
         </base-item-group>
 
-        <base-item
-          v-else
-          :key="`item-${i}`"
-          :item="item"
-        />
+        <base-item v-else :key="`item-${i}`" :item="item" />
       </template>
 
       <!-- Style cascading bug  -->
@@ -76,7 +52,7 @@
       <div />
     </v-list>
 
-    <template v-slot:append>
+    <template #append>
       <base-item
         :item="{
           title: $t('upgrade'),
@@ -89,147 +65,145 @@
 </template>
 
 <script>
-  // Utilities
-  import {
-    mapState,
-  } from 'vuex'
-
-  export default {
-    name: 'DashboardCoreDrawer',
-
-    props: {
-      expandOnHover: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    data: () => ({
-      items: [
-        {
-          icon: 'mdi-view-dashboard',
-          title: 'dashboard',
-          to: '/',
-        },
-        {
-          icon: 'mdi-account',
-          title: 'user',
-          to: '/pages/user',
-        },
-        {
-          title: 'rtables',
-          icon: 'mdi-clipboard-outline',
-          to: '/tables/regular-tables',
-        },
-        {
-          title: 'typography',
-          icon: 'mdi-format-font',
-          to: '/components/typography',
-        },
-        {
-          title: 'icons',
-          icon: 'mdi-chart-bubble',
-          to: '/components/icons',
-        },
-        {
-          title: 'google',
-          icon: 'mdi-map-marker',
-          to: '/maps/google-maps',
-        },
-        {
-          title: 'notifications',
-          icon: 'mdi-bell',
-          to: '/components/notifications',
-        },
-      ],
-    }),
-
-    computed: {
-      ...mapState(['barColor', 'barImage']),
-      drawer: {
-        get () {
-          return this.$store.state.drawer
-        },
-        set (val) {
-          this.$store.commit('SET_DRAWER', val)
-        },
-      },
-      computedItems () {
-        return this.items.map(this.mapItem)
-      },
-      profile () {
-        return {
-          avatar: true,
-          title: this.$t('avatar'),
-        }
-      },
-    },
-
-    methods: {
-      mapItem (item) {
-        return {
-          ...item,
-          children: item.children ? item.children.map(this.mapItem) : undefined,
-          title: this.$t(item.title),
-        }
-      },
-    },
-  }
+// Utilities
+import { mapState } from "vuex";
+
+export default {
+	name: "DashboardCoreDrawer",
+
+	props: {
+		expandOnHover: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data: () => ({
+		items: [
+			{
+				icon: "mdi-view-dashboard",
+				title: "dashboard",
+				to: "/",
+			},
+			{
+				icon: "mdi-account",
+				title: "user",
+				to: "/pages/user",
+			},
+			{
+				title: "rtables",
+				icon: "mdi-clipboard-outline",
+				to: "/tables/regular-tables",
+			},
+			{
+				title: "typography",
+				icon: "mdi-format-font",
+				to: "/components/typography",
+			},
+			{
+				title: "icons",
+				icon: "mdi-chart-bubble",
+				to: "/components/icons",
+			},
+			{
+				title: "google",
+				icon: "mdi-map-marker",
+				to: "/maps/google-maps",
+			},
+			{
+				title: "notifications",
+				icon: "mdi-bell",
+				to: "/components/notifications",
+			},
+		],
+	}),
+
+	computed: {
+		...mapState(["barColor", "barImage"]),
+		drawer: {
+			get() {
+				return this.$store.state.drawer;
+			},
+			set(val) {
+				this.$store.commit("SET_DRAWER", val);
+			},
+		},
+		computedItems() {
+			return this.items.map(this.mapItem);
+		},
+		profile() {
+			return {
+				avatar: true,
+				title: this.$t("avatar"),
+			};
+		},
+	},
+
+	methods: {
+		mapItem(item) {
+			return {
+				...item,
+				children: item.children ? item.children.map(this.mapItem) : undefined,
+				title: this.$t(item.title),
+			};
+		},
+	},
+};
 </script>
 
 <style lang="sass">
-  @import '~vuetify/src/styles/tools/_rtl.sass'
+@import '~vuetify/src/styles/tools/_rtl.sass'
+
+#core-navigation-drawer
+  .v-list-group__header.v-list-item--active:before
+    opacity: .24
+
+  .v-list-item
+    &__icon--text,
+    &__icon:first-child
+      justify-content: center
+      text-align: center
+      width: 20px
 
-  #core-navigation-drawer
-    .v-list-group__header.v-list-item--active:before
-      opacity: .24
+      +ltr()
+        margin-right: 24px
+        margin-left: 12px !important
 
+      +rtl()
+        margin-left: 24px
+        margin-right: 12px !important
+
+  .v-list--dense
     .v-list-item
       &__icon--text,
       &__icon:first-child
-        justify-content: center
-        text-align: center
-        width: 20px
+        margin-top: 10px
 
-        +ltr()
-          margin-right: 24px
-          margin-left: 12px !important
+  .v-list-group--sub-group
+    .v-list-item
+      +ltr()
+        padding-left: 8px
 
-        +rtl()
-          margin-left: 24px
-          margin-right: 12px !important
+      +rtl()
+        padding-right: 8px
 
-    .v-list--dense
-      .v-list-item
-        &__icon--text,
-        &__icon:first-child
-          margin-top: 10px
+    .v-list-group__header
+      +ltr()
+        padding-right: 0
 
-    .v-list-group--sub-group
-      .v-list-item
-        +ltr()
-          padding-left: 8px
+      +rtl()
+        padding-right: 0
 
-        +rtl()
-          padding-right: 8px
+      .v-list-item__icon--text
+        margin-top: 19px
+        order: 0
+
+      .v-list-group__header__prepend-icon
+        order: 2
 
-      .v-list-group__header
         +ltr()
-          padding-right: 0
+          margin-right: 8px
 
         +rtl()
-          padding-right: 0
-
-        .v-list-item__icon--text
-          margin-top: 19px
-          order: 0
-
-        .v-list-group__header__prepend-icon
-          order: 2
-
-          +ltr()
-            margin-right: 8px
-
-          +rtl()
-            margin-left: 8px
+          margin-left: 8px
 </style>
diff --git a/src/views/dashboard/components/core/Footer.vue b/src/views/dashboard/components/core/Footer.vue
index d1121ca2..22506dc2 100644
--- a/src/views/dashboard/components/core/Footer.vue
+++ b/src/views/dashboard/components/core/Footer.vue
@@ -1,12 +1,7 @@
 <template>
-  <v-footer
-    id="dashboard-core-footer"
-  >
+  <v-footer id="dashboard-core-footer">
     <v-container>
-      <v-row
-        align="center"
-        no-gutters
-      >
+      <v-row align="center" no-gutters>
         <v-col
           v-for="(link, i) in links"
           :key="i"
@@ -24,16 +19,14 @@
 
         <v-spacer class="hidden-sm-and-down" />
 
-        <v-col
-          cols="12"
-          md="auto"
-        >
-          <div class="body-1 font-weight-light pt-6 pt-md-0 text-center">
+        <v-col cols="12" md="auto">
+          <div class="text-body-1 font-weight-light pt-6 pt-md-0 text-center">
             &copy; 2019, made with
             <v-icon size="18">
               mdi-heart
             </v-icon>
-            by <a href="https://www.creative-tim.com">Creative Tim</a> for a better web.
+            by <a href="https://www.creative-tim.com">Creative Tim</a> for a
+            better web.
           </div>
         </v-col>
       </v-row>
@@ -42,37 +35,37 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardCoreFooter',
+export default {
+	name: "DashboardCoreFooter",
 
-    data: () => ({
-      links: [
-        {
-          href: '#',
-          text: 'Creative Tim',
-        },
-        {
-          href: '#',
-          text: 'About Us',
-        },
-        {
-          href: '#',
-          text: 'Blog',
-        },
-        {
-          href: '#',
-          text: 'Licenses',
-        },
-      ],
-    }),
-  }
+	data: () => ({
+		links: [
+			{
+				href: "#",
+				text: "Creative Tim",
+			},
+			{
+				href: "#",
+				text: "About Us",
+			},
+			{
+				href: "#",
+				text: "Blog",
+			},
+			{
+				href: "#",
+				text: "Licenses",
+			},
+		],
+	}),
+};
 </script>
 
 <style lang="sass">
-  #dashboard-core-footer
-    a
-      font-size: .825rem
-      font-weight: 500
-      text-decoration: none
-      text-transform: uppercase
+#dashboard-core-footer
+  a
+    font-size: .825rem
+    font-weight: 500
+    text-decoration: none
+    text-transform: uppercase
 </style>
diff --git a/src/views/dashboard/components/core/Settings.vue b/src/views/dashboard/components/core/Settings.vue
index 9b0cc5ec..8261c6dc 100644
--- a/src/views/dashboard/components/core/Settings.vue
+++ b/src/views/dashboard/components/core/Settings.vue
@@ -8,7 +8,7 @@
       flat
       link
       min-width="100"
-      style="position: fixed; top: 115px; right: -35px; border-radius: 8px;"
+      style="position: fixed; top: 115px; right: -35px; border-radius: 8px"
     >
       <v-icon large>
         mdi-settings
@@ -27,23 +27,16 @@
       origin="top right"
       transition="scale-transition"
     >
-      <v-card
-        class="text-center mb-0"
-        width="300"
-      >
+      <v-card class="text-center mb-0" width="300">
         <v-card-text>
           <strong class="mb-3 d-inline-block">SIDEBAR FILTERS</strong>
 
           <v-item-group v-model="color">
-            <v-item
-              v-for="color in colors"
-              :key="color"
-              :value="color"
-            >
-              <template v-slot="{ active, toggle }">
+            <v-item v-for="colour in colors" :key="colour" :value="colour">
+              <template #default="{ active, toggle }">
                 <v-avatar
                   :class="active && 'v-settings__item--active'"
-                  :color="color"
+                  :color="colour"
                   class="v-settings__item"
                   size="25"
                   @click="toggle"
@@ -54,10 +47,7 @@
 
           <v-divider class="my-4 secondary" />
 
-          <v-row
-            align="center"
-            no-gutters
-          >
+          <v-row align="center" no-gutters>
             <v-col cols="auto">
               Dark Mode
             </v-col>
@@ -76,10 +66,7 @@
 
           <v-divider class="my-4 secondary" />
 
-          <v-row
-            align="center"
-            no-gutters
-          >
+          <v-row align="center" no-gutters>
             <v-col cols="auto">
               Sidebar Image
             </v-col>
@@ -104,23 +91,18 @@
             v-model="image"
             class="d-flex justify-space-between mb-3"
           >
-            <v-item
-              v-for="image in images"
-              :key="image"
-              :value="image"
-              class="mx-1"
+            <v-item v-for="img in images"
+                    :key="img"
+                    :value="img"
+                    class="mx-1"
             >
-              <template v-slot="{ active, toggle }">
+              <template #default="{ active, toggle }">
                 <v-sheet
                   :class="active && 'v-settings__item--active'"
                   class="d-inline-block v-settings__item"
                   @click="toggle"
                 >
-                  <v-img
-                    :src="image"
-                    height="100"
-                    width="50"
-                  />
+                  <v-img :src="img" height="100" width="50" />
                 </v-sheet>
               </template>
             </v-item>
@@ -157,23 +139,21 @@
             <strong class="mb-3 d-inline-block">THANK YOU FOR SHARING!</strong>
           </div>
 
-          <v-btn
-            class="ma-1"
-            color="#55acee"
-            dark
-            default
-            rounded
+          <v-btn class="ma-1"
+                 color="#55acee"
+                 dark
+                 default
+                 rounded
           >
             <v-icon>mdi-twitter</v-icon>
             - 45
           </v-btn>
 
-          <v-btn
-            class="ma-1"
-            color="#3b5998"
-            dark
-            default
-            rounded
+          <v-btn class="ma-1"
+                 color="#3b5998"
+                 dark
+                 default
+                 rounded
           >
             <v-icon>mdi-facebook</v-icon>
             - 50
@@ -185,79 +165,73 @@
 </template>
 
 <script>
-  // Mixins
-  import Proxyable from 'vuetify/lib/mixins/proxyable'
-  import { mapMutations, mapState } from 'vuex'
-
-  export default {
-    name: 'DashboardCoreSettings',
-
-    mixins: [Proxyable],
-
-    data: () => ({
-      color: '#E91E63',
-      colors: [
-        '#9C27b0',
-        '#00CAE3',
-        '#4CAF50',
-        '#ff9800',
-        '#E91E63',
-        '#FF5252',
-      ],
-      image: 'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg',
-      images: [
-        'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg',
-        'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-2.jpg',
-        'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-3.jpg',
-        'https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-4.jpg',
-      ],
-      menu: false,
-      saveImage: '',
-      showImg: true,
-    }),
-
-    computed: {
-      ...mapState(['barImage']),
-    },
-
-    watch: {
-      color (val) {
-        this.$vuetify.theme.themes[this.isDark ? 'dark' : 'light'].primary = val
-      },
-      showImg (val) {
-        if (!val) {
-          this.saveImage = this.barImage
-          this.setBarImage('')
-        } else if (this.saveImage) {
-          this.setBarImage(this.saveImage)
-          this.saveImage = ''
-        } else {
-          this.setBarImage(val)
-        }
-      },
-      image (val) {
-        this.setBarImage(val)
-      },
-    },
-
-    methods: {
-      ...mapMutations({
-        setBarImage: 'SET_BAR_IMAGE',
-      }),
-    },
-  }
+// Mixins
+import Proxyable from "vuetify/lib/mixins/proxyable";
+import { mapMutations, mapState } from "vuex";
+
+export default {
+	name: "DashboardCoreSettings",
+
+	mixins: [Proxyable],
+
+	data: () => ({
+		color: "#E91E63",
+		colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
+		image:
+      "https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg",
+		images: [
+			"https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-1.jpg",
+			"https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-2.jpg",
+			"https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-3.jpg",
+			"https://demos.creative-tim.com/material-dashboard/assets/img/sidebar-4.jpg",
+		],
+		menu: false,
+		saveImage: "",
+		showImg: true,
+	}),
+
+	computed: {
+		...mapState(["barImage"]),
+	},
+
+	watch: {
+		color(val) {
+			this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
+		},
+		showImg(val) {
+			if (!val) {
+				this.saveImage = this.barImage;
+				this.setBarImage("");
+			} else if (this.saveImage) {
+				this.setBarImage(this.saveImage);
+				this.saveImage = "";
+			} else {
+				this.setBarImage(val);
+			}
+		},
+		image(val) {
+			this.setBarImage(val);
+		},
+	},
+
+	methods: {
+		...mapMutations({
+			setBarImage: "SET_BAR_IMAGE",
+		}),
+	},
+};
 </script>
 
 <style lang="sass">
-  .v-settings
-    .v-item-group > *
-      cursor: pointer
+.v-settings
+  .v-item-group > *
+    cursor: pointer
 
-    &__item
-      border-width: 3px
-      border-style: solid
-      border-color: transparent !important
+  &__item
+    border-width: 3px
+    border-style: solid
+    border-color: transparent !important
 
-      &--active
-        border-color: #00cae3 !important
+    &--active
+      border-color: #00cae3 !important
 </style>
diff --git a/src/views/dashboard/components/core/View.vue b/src/views/dashboard/components/core/View.vue
index 177f8a65..1fca35f9 100644
--- a/src/views/dashboard/components/core/View.vue
+++ b/src/views/dashboard/components/core/View.vue
@@ -1,17 +1,17 @@
 <template>
-  <v-content>
+  <v-main>
     <router-view />
 
     <dashboard-core-footer />
-  </v-content>
+  </v-main>
 </template>
 
 <script>
-  export default {
-    name: 'DashboardCoreView',
+export default {
+	name: "DashboardCoreView",
 
-    components: {
-      DashboardCoreFooter: () => import('./Footer'),
-    },
-  }
+	components: {
+		DashboardCoreFooter: () => import("./Footer"),
+	},
+};
 </script>
diff --git a/src/views/dashboard/pages/Rtl.vue b/src/views/dashboard/pages/Rtl.vue
index e0348cb3..35ce1dd7 100644
--- a/src/views/dashboard/pages/Rtl.vue
+++ b/src/views/dashboard/pages/Rtl.vue
@@ -28,7 +28,7 @@
         md="6"
       >
         <base-material-card>
-          <template v-slot:heading>
+          <template #heading>
             <v-tabs
               v-model="tabs"
               background-color="transparent"
@@ -160,19 +160,19 @@
             <v-card class="pa-6">
               <v-chip
                 :color="timeline.color"
-                class="overline mb-3"
+                class="text-overline mb-3"
                 small
               >
                 {{ timeline.chip }}
               </v-chip>
 
               <p
-                class="subtitle-1"
+                class="text-subtitle-1"
                 v-text="timeline.text"
               />
 
               <div
-                class="text-uppercase body-2"
+                class="text-uppercase text-body-2"
                 v-text="timeline.subtext"
               />
 
@@ -187,7 +187,7 @@
                   right
                   transition="scale-transition"
                 >
-                  <template v-slot:activator="{ attrs, on }">
+                  <template #activator="{ attrs, on }">
                     <v-btn
                       v-bind="attrs"
                       :color="timeline.action"
@@ -227,183 +227,183 @@
 </template>
 
 <script>
-  // Components
-  import PagesPlanCard from '@/views/pages/components/PlanCard'
+// Components
+import PagesPlanCard from '@/views/pages/components/PlanCard'
 
-  export default {
-    name: 'Widgets',
+export default {
+	name: 'Widgets',
 
-    components: {
-      PagesPlanCard,
-    },
+	components: {
+		PagesPlanCard,
+	},
 
-    data: () => ({
-      headers: [
-        {
-          sortable: false,
-          text: 'هوية شخصية',
-          value: 'id',
-        },
-        {
-          sortable: false,
-          text: 'اسم',
-          value: 'name',
-        },
-        {
-          sortable: false,
-          text: 'راتب',
-          value: 'salary',
-          align: 'right',
-        },
-        {
-          sortable: false,
-          text: 'بلد',
-          value: 'country',
-          align: 'right',
-        },
-        {
-          sortable: false,
-          text: 'مدينة',
-          value: 'city',
-          align: 'right',
-        },
-      ],
-      items: [
-        {
-          id: 1,
-          name: 'داكوتا رايس',
-          country: 'النيجر',
-          city: 'العود-تورنهاوت',
-          salary: '$35,738',
-        },
-        {
-          id: 2,
-          name: 'مينيرفا هوبر',
-          country: 'كوراساو',
-          city: 'Sinaai-واس',
-          salary: '$23,738',
-        },
-        {
-          id: 3,
-          name: 'سيج رودريجيز',
-          country: 'هولندا',
-          city: 'أوفرلاند بارك',
-          salary: '$56,142',
-        },
-        {
-          id: 4,
-          name: 'فيليب شانلي',
-          country: 'كوريا، جنوب',
-          city: 'غلوستر',
-          salary: '$38,735',
-        },
-        {
-          id: 5,
-          name: 'دوريس جرين',
-          country: 'مالاوي',
-          city: 'فيلدكيرشن في كارنتن',
-          salary: '$63,542',
-        },
-      ],
-      menu: false,
-      plans: [
-        {
-          best: true,
-          heading: 'جيوب سليمان، الإنزال',
-          icon: 'mdi-home',
-          title: '29$',
-          text: 'الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.',
-        },
-        {
-          heading: 'المتحدة لتقليعة',
-          icon: 'mdi-sofa',
-          title: 'قائمة',
-          text: 'الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.',
-        },
-      ],
-      tabs: 0,
-      tasks: {
-        0: [
-          {
-            text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
-            value: true,
-          },
-          {
-            text: 'خطوط من الأدب الروسي العظيم؟ أو رسائل البريد الإلكتروني من بوسي؟',
-            value: false,
-          },
-          {
-            text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
-            value: false,
-          },
-          {
-            text: 'قم بإنشاء 4 تجارب مستخدم غير مرئية لم تعرف عنها أبدًا',
-            value: true,
-          },
-        ],
-        1: [
-          {
-            text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
-            value: true,
-          },
-          {
-            text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
-            value: false,
-          },
-        ],
-        2: [
-          {
-            text: 'خطوط من الأدب الروسي العظيم؟ أو رسائل البريد الإلكتروني من بوسي؟',
-            value: false,
-          },
-          {
-            text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
-            value: true,
-          },
-          {
-            text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
-            value: true,
-          },
-        ],
-      },
-      timelines: [
-        {
-          chip: 'جهة أي',
-          color: 'error',
-          icon: 'mdi-briefcase',
-          text: 'قام كل ماذا العصبة اوروبا. أي جورج العالمي أخر, كان تم أطراف القوى استبدال. أسر ميناء تكتيكاً الجديدة، كل. جُل اللا التكاليف بـ, عرفها النزاع لليابان بـ أضف. انتهت المدن الثالث من وقد.وقبل قادة إحتار عن أخر. حين ونتج أخرى قد. بالعمل بالمطالبة فقد قد. عن جنوب ومضى الشتاء.',
-          subtext: 'مدن أن هُزم سكان, مكن.',
-        },
-        {
-          chip: 'جُل حكومة',
-          color: 'success',
-          icon: 'mdi-puzzle',
-          text: 'عل فكانت الثقيلة بلا. شيء بخطوط بالرّغم التبرعات عن, يطول بأيدي لم كلّ. معقل الغالي واتّجه لم وتم, أن الصفحة بالمحور حول, بال مرمى الصفحات قُدُماً و. الأخذ سبتمبر العالم من ذلك. ان يبق شدّت الأبرياء, الى الربيع، والمانيا كل.ودول الأهداف التقليدي عل أضف, كلا يقوم الأخذ الآلاف بل.',
-        },
-        {
-          chip: 'هذا غينيا',
-          color: 'info',
-          icon: 'mdi-fingerprint',
-          text: 'جهة المارق والديون التقليدية في, هو وترك المجتمع بريطانيا ذلك, لمّ ما العالم، اليابان،. ٣٠ فقامت أوروبا مشاركة بعد, ٢٠٠٤ الجو مساعدة ما حدى. في عليها وبحلول معارضة بعض. عن الأرض وبداية العمليات ولم. الجو جديداً الأوروبيّون أم به،. ثم التي نتيجة الآلاف جعل, عن المارق السادس قام. ما أخر فقامت الأجل الشرق،, فصل كل وسوء الأرواح. ثم بعد وشعار بأيدي. قبل وكسبت الغالي الولايات بل, ٣٠ أمّا أخرى لأداء أضف. هو منتصف معزّزة على. بـ أفريقيا التغييرات مما, أثره،.',
-          action: 'info',
-          actionIcon: 'mdi-wrench',
-          actions: [
-            'عمل',
-            'عمل آخر',
-            'شيء آخر هنا',
-          ],
-        },
-      ],
-    }),
+	data: () => ({
+		headers: [
+			{
+				sortable: false,
+				text: 'هوية شخصية',
+				value: 'id',
+			},
+			{
+				sortable: false,
+				text: 'اسم',
+				value: 'name',
+			},
+			{
+				sortable: false,
+				text: 'راتب',
+				value: 'salary',
+				align: 'right',
+			},
+			{
+				sortable: false,
+				text: 'بلد',
+				value: 'country',
+				align: 'right',
+			},
+			{
+				sortable: false,
+				text: 'مدينة',
+				value: 'city',
+				align: 'right',
+			},
+		],
+		items: [
+			{
+				id: 1,
+				name: 'داكوتا رايس',
+				country: 'النيجر',
+				city: 'العود-تورنهاوت',
+				salary: '$35,738',
+			},
+			{
+				id: 2,
+				name: 'مينيرفا هوبر',
+				country: 'كوراساو',
+				city: 'Sinaai-واس',
+				salary: '$23,738',
+			},
+			{
+				id: 3,
+				name: 'سيج رودريجيز',
+				country: 'هولندا',
+				city: 'أوفرلاند بارك',
+				salary: '$56,142',
+			},
+			{
+				id: 4,
+				name: 'فيليب شانلي',
+				country: 'كوريا، جنوب',
+				city: 'غلوستر',
+				salary: '$38,735',
+			},
+			{
+				id: 5,
+				name: 'دوريس جرين',
+				country: 'مالاوي',
+				city: 'فيلدكيرشن في كارنتن',
+				salary: '$63,542',
+			},
+		],
+		menu: false,
+		plans: [
+			{
+				best: true,
+				heading: 'جيوب سليمان، الإنزال',
+				icon: 'mdi-home',
+				title: '29$',
+				text: 'الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.',
+			},
+			{
+				heading: 'المتحدة لتقليعة',
+				icon: 'mdi-sofa',
+				title: 'قائمة',
+				text: 'الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.',
+			},
+		],
+		tabs: 0,
+		tasks: {
+			0: [
+				{
+					text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
+					value: true,
+				},
+				{
+					text: 'خطوط من الأدب الروسي العظيم؟ أو رسائل البريد الإلكتروني من بوسي؟',
+					value: false,
+				},
+				{
+					text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
+					value: false,
+				},
+				{
+					text: 'قم بإنشاء 4 تجارب مستخدم غير مرئية لم تعرف عنها أبدًا',
+					value: true,
+				},
+			],
+			1: [
+				{
+					text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
+					value: true,
+				},
+				{
+					text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
+					value: false,
+				},
+			],
+			2: [
+				{
+					text: 'خطوط من الأدب الروسي العظيم؟ أو رسائل البريد الإلكتروني من بوسي؟',
+					value: false,
+				},
+				{
+					text: 'بحث. كل مما ٢٠٠٤ شاسعة العسكري جعل السبب وفرنسا الصينية أي.',
+					value: true,
+				},
+				{
+					text: 'فقد لمحاكم الاندونيسية, بلاده بالتوقيع تم يبق. جعل السبب وفرنسا الصينية أي.',
+					value: true,
+				},
+			],
+		},
+		timelines: [
+			{
+				chip: 'جهة أي',
+				color: 'error',
+				icon: 'mdi-briefcase',
+				text: 'قام كل ماذا العصبة اوروبا. أي جورج العالمي أخر, كان تم أطراف القوى استبدال. أسر ميناء تكتيكاً الجديدة، كل. جُل اللا التكاليف بـ, عرفها النزاع لليابان بـ أضف. انتهت المدن الثالث من وقد.وقبل قادة إحتار عن أخر. حين ونتج أخرى قد. بالعمل بالمطالبة فقد قد. عن جنوب ومضى الشتاء.',
+				subtext: 'مدن أن هُزم سكان, مكن.',
+			},
+			{
+				chip: 'جُل حكومة',
+				color: 'success',
+				icon: 'mdi-puzzle',
+				text: 'عل فكانت الثقيلة بلا. شيء بخطوط بالرّغم التبرعات عن, يطول بأيدي لم كلّ. معقل الغالي واتّجه لم وتم, أن الصفحة بالمحور حول, بال مرمى الصفحات قُدُماً و. الأخذ سبتمبر العالم من ذلك. ان يبق شدّت الأبرياء, الى الربيع، والمانيا كل.ودول الأهداف التقليدي عل أضف, كلا يقوم الأخذ الآلاف بل.',
+			},
+			{
+				chip: 'هذا غينيا',
+				color: 'info',
+				icon: 'mdi-fingerprint',
+				text: 'جهة المارق والديون التقليدية في, هو وترك المجتمع بريطانيا ذلك, لمّ ما العالم، اليابان،. ٣٠ فقامت أوروبا مشاركة بعد, ٢٠٠٤ الجو مساعدة ما حدى. في عليها وبحلول معارضة بعض. عن الأرض وبداية العمليات ولم. الجو جديداً الأوروبيّون أم به،. ثم التي نتيجة الآلاف جعل, عن المارق السادس قام. ما أخر فقامت الأجل الشرق،, فصل كل وسوء الأرواح. ثم بعد وشعار بأيدي. قبل وكسبت الغالي الولايات بل, ٣٠ أمّا أخرى لأداء أضف. هو منتصف معزّزة على. بـ أفريقيا التغييرات مما, أثره،.',
+				action: 'info',
+				actionIcon: 'mdi-wrench',
+				actions: [
+					'عمل',
+					'عمل آخر',
+					'شيء آخر هنا',
+				],
+			},
+		],
+	}),
 
-    created () {
-      this.$vuetify.rtl = true
-      this.$i18n.locale = 'ar'
-    },
+	created () {
+		this.$vuetify.rtl = true
+		this.$i18n.locale = 'ar'
+	},
 
-    beforeDestroy () {
-      this.$vuetify.rtl = false
-      this.$i18n.locale = 'en'
-    },
-  }
+	beforeDestroy () {
+		this.$vuetify.rtl = false
+		this.$i18n.locale = 'en'
+	},
+}
 </script>
diff --git a/src/views/dashboard/pages/Timeline.vue b/src/views/dashboard/pages/Timeline.vue
index 15023e69..21c8d07a 100644
--- a/src/views/dashboard/pages/Timeline.vue
+++ b/src/views/dashboard/pages/Timeline.vue
@@ -23,19 +23,19 @@
             <v-card class="pa-6">
               <v-chip
                 :color="timeline.color"
-                class="overline mb-3"
+                class="text-overline mb-3"
                 small
               >
                 {{ timeline.chip }}
               </v-chip>
 
               <p
-                class="subtitle-1 font-weight-light"
+                class="text-subtitle-1 font-weight-light"
                 v-text="timeline.text"
               />
 
               <div
-                class="text-uppercase body-2"
+                class="text-uppercase text-body-2"
                 v-text="timeline.subtext"
               />
 
@@ -50,7 +50,7 @@
                   right
                   transition="scale-transition"
                 >
-                  <template v-slot:activator="{ attrs, on }">
+                  <template #activator="{ attrs, on }">
                     <v-btn
                       v-bind="attrs"
                       :color="timeline.action"
@@ -90,45 +90,45 @@
 </template>
 
 <script>
-  export default {
-    name: 'DashboardPagesTimeline',
+export default {
+	name: 'DashboardPagesTimeline',
 
-    data: () => ({
-      menu: false,
-      timelines: [
-        {
-          chip: 'Some title',
-          color: 'error',
-          icon: 'mdi-briefcase',
-          text: 'Wifey made the best Father\'s Day meal ever. So thankful so happy so blessed. Thank you for making my family We just had fun with the “future” theme !!! It was a fun night all together ... The always rude Kanye Show at 2am Sold Out Famous viewing @ Figueroa and 12th in downtown.',
-          subtext: '11 hours ago via twitter',
-        },
-        {
-          chip: 'Another one',
-          color: 'success',
-          icon: 'mdi-puzzle',
-          text: 'Thank God for the support of my wife and real friends. I also wanted to point out that it’s the first album to go number 1 off of streaming!!! I love you Ellen and also my number one design rule of anything I do from shoes to music to homes is that Kim has to like it....',
-        },
-        {
-          chip: 'Another title',
-          color: 'info',
-          icon: 'mdi-fingerprint',
-          text: 'Called I Miss the Old Kanye That’s all it was Kanye And I love you like Kanye loves Kanye Famous viewing @ Figueroa and 12th in downtown LA 11:10PM. What if Kanye made a song about Kanye Royère doesn\'t make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own It wasn’t any Kanyes Set on his goals Kanye',
-          action: 'info',
-          actionIcon: 'mdi-wrench',
-          actions: [
-            'Action',
-            'Another Action',
-            'Something else here',
-          ],
-        },
-        {
-          chip: 'Another one',
-          color: 'warning',
-          icon: 'mdi-airplane-landing',
-          text: 'Tune into Big Boy\'s 92.3 I\'m about to play the first single from Cruel Winter also to Kim’s hair and makeup Lorraine jewelry and the whole style squad at Balmain and the Yeezy team. Thank you Anna for the invite thank you to the whole Vogue team',
-        },
-      ],
-    }),
-  }
+	data: () => ({
+		menu: false,
+		timelines: [
+			{
+				chip: 'Some title',
+				color: 'error',
+				icon: 'mdi-briefcase',
+				text: 'Wifey made the best Father\'s Day meal ever. So thankful so happy so blessed. Thank you for making my family We just had fun with the “future” theme !!! It was a fun night all together ... The always rude Kanye Show at 2am Sold Out Famous viewing @ Figueroa and 12th in downtown.',
+				subtext: '11 hours ago via twitter',
+			},
+			{
+				chip: 'Another one',
+				color: 'success',
+				icon: 'mdi-puzzle',
+				text: 'Thank God for the support of my wife and real friends. I also wanted to point out that it’s the first album to go number 1 off of streaming!!! I love you Ellen and also my number one design rule of anything I do from shoes to music to homes is that Kim has to like it....',
+			},
+			{
+				chip: 'Another title',
+				color: 'info',
+				icon: 'mdi-fingerprint',
+				text: 'Called I Miss the Old Kanye That’s all it was Kanye And I love you like Kanye loves Kanye Famous viewing @ Figueroa and 12th in downtown LA 11:10PM. What if Kanye made a song about Kanye Royère doesn\'t make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own It wasn’t any Kanyes Set on his goals Kanye',
+				action: 'info',
+				actionIcon: 'mdi-wrench',
+				actions: [
+					'Action',
+					'Another Action',
+					'Something else here',
+				],
+			},
+			{
+				chip: 'Another one',
+				color: 'warning',
+				icon: 'mdi-airplane-landing',
+				text: 'Tune into Big Boy\'s 92.3 I\'m about to play the first single from Cruel Winter also to Kim’s hair and makeup Lorraine jewelry and the whole style squad at Balmain and the Yeezy team. Thank you Anna for the invite thank you to the whole Vogue team',
+			},
+		],
+	}),
+}
 </script>
diff --git a/src/views/dashboard/pages/UserProfile.vue b/src/views/dashboard/pages/UserProfile.vue
index f29ce0c3..1498d302 100644
--- a/src/views/dashboard/pages/UserProfile.vue
+++ b/src/views/dashboard/pages/UserProfile.vue
@@ -1,21 +1,14 @@
 <template>
-  <v-container
-    id="user-profile"
-    fluid
-    tag="section"
-  >
+  <v-container id="user-profile" fluid tag="section">
     <v-row justify="center">
-      <v-col
-        cols="12"
-        md="8"
-      >
+      <v-col cols="12" md="8">
         <base-material-card>
-          <template v-slot:heading>
-            <div class="display-2 font-weight-light">
+          <template #heading>
+            <div class="text-h3 font-weight-light">
               Edit Profile
             </div>
 
-            <div class="subtitle-1 font-weight-light">
+            <div class="text-subtitle-1 font-weight-light">
               Complete your profile
             </div>
           </template>
@@ -23,87 +16,39 @@
           <v-form>
             <v-container class="py-0">
               <v-row>
-                <v-col
-                  cols="12"
-                  md="4"
-                >
-                  <v-text-field
-                    label="Company (disabled)"
-                    disabled
-                  />
+                <v-col cols="12" md="4">
+                  <v-text-field label="Company (disabled)" disabled />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  md="4"
-                >
-                  <v-text-field
-                    class="purple-input"
-                    label="User Name"
-                  />
+                <v-col cols="12" md="4">
+                  <v-text-field class="purple-input" label="User Name" />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  md="4"
-                >
-                  <v-text-field
-                    label="Email Address"
-                    class="purple-input"
-                  />
+                <v-col cols="12" md="4">
+                  <v-text-field label="Email Address" class="purple-input" />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  md="6"
-                >
-                  <v-text-field
-                    label="First Name"
-                    class="purple-input"
-                  />
+                <v-col cols="12" md="6">
+                  <v-text-field label="First Name" class="purple-input" />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  md="6"
-                >
-                  <v-text-field
-                    label="Last Name"
-                    class="purple-input"
-                  />
+                <v-col cols="12" md="6">
+                  <v-text-field label="Last Name" class="purple-input" />
                 </v-col>
 
                 <v-col cols="12">
-                  <v-text-field
-                    label="Adress"
-                    class="purple-input"
-                  />
+                  <v-text-field label="Adress" class="purple-input" />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  md="4"
-                >
-                  <v-text-field
-                    label="City"
-                    class="purple-input"
-                  />
+                <v-col cols="12" md="4">
+                  <v-text-field label="City" class="purple-input" />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  md="4"
-                >
-                  <v-text-field
-                    label="Country"
-                    class="purple-input"
-                  />
+                <v-col cols="12" md="4">
+                  <v-text-field label="Country" class="purple-input" />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  md="4"
-                >
+                <v-col cols="12" md="4">
                   <v-text-field
                     class="purple-input"
                     label="Postal Code"
@@ -119,14 +64,8 @@
                   />
                 </v-col>
 
-                <v-col
-                  cols="12"
-                  class="text-right"
-                >
-                  <v-btn
-                    color="success"
-                    class="mr-0"
-                  >
+                <v-col cols="12" class="text-right">
+                  <v-btn color="success" class="mr-0">
                     Update Profile
                   </v-btn>
                 </v-col>
@@ -136,32 +75,27 @@
         </base-material-card>
       </v-col>
 
-      <v-col
-        cols="12"
-        md="4"
-      >
+      <v-col cols="12" md="4">
         <base-material-card
           class="v-card-profile"
           avatar="https://demos.creative-tim.com/vue-material-dashboard/img/marc.aba54d65.jpg"
         >
           <v-card-text class="text-center">
-            <h6 class="display-1 mb-1 grey--text">
+            <h6 class="text-h4 mb-1 grey--text">
               CEO / CO-FOUNDER
             </h6>
 
-            <h4 class="display-2 font-weight-light mb-3 black--text">
+            <h4 class="text-h3 font-weight-light mb-3 black--text">
               Alec Thompson
             </h4>
 
             <p class="font-weight-light grey--text">
-              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...
+              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>
 
-            <v-btn
-              color="success"
-              rounded
-              class="mr-0"
-            >
+            <v-btn color="success" rounded class="mr-0">
               Follow
             </v-btn>
           </v-card-text>
@@ -171,8 +105,4 @@
   </v-container>
 </template>
 
-<script>
-  export default {
-    //
-  }
-</script>
+<script></script>
diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js
index 0c938b0e..1b67ca13 100644
--- a/tests/e2e/.eslintrc.js
+++ b/tests/e2e/.eslintrc.js
@@ -1,12 +1,12 @@
 module.exports = {
-  plugins: [
-    'cypress',
-  ],
-  env: {
-    mocha: true,
-    'cypress/globals': true,
-  },
-  rules: {
-    strict: 'off',
-  },
+	plugins: [
+		'cypress',
+	],
+	env: {
+		mocha: true,
+		'cypress/globals': true,
+	},
+	rules: {
+		strict: 'off',
+	},
 }
diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js
index b3e91716..f801687b 100644
--- a/tests/e2e/plugins/index.js
+++ b/tests/e2e/plugins/index.js
@@ -9,16 +9,16 @@
 // const webpack = require('@cypress/webpack-preprocessor')
 
 module.exports = (on, config) => {
-  // on('file:preprocessor', webpack({
-  //  webpackOptions: require('@vue/cli-service/webpack.config'),
-  //  watchOptions: {}
-  // }))
+	// on('file:preprocessor', webpack({
+	//  webpackOptions: require('@vue/cli-service/webpack.config'),
+	//  watchOptions: {}
+	// }))
 
-  return Object.assign({}, config, {
-    fixturesFolder: 'tests/e2e/fixtures',
-    integrationFolder: 'tests/e2e/specs',
-    screenshotsFolder: 'tests/e2e/screenshots',
-    videosFolder: 'tests/e2e/videos',
-    supportFile: 'tests/e2e/support/index.js',
-  })
+	return Object.assign({}, config, {
+		fixturesFolder: 'tests/e2e/fixtures',
+		integrationFolder: 'tests/e2e/specs',
+		screenshotsFolder: 'tests/e2e/screenshots',
+		videosFolder: 'tests/e2e/videos',
+		supportFile: 'tests/e2e/support/index.js',
+	})
 }
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 41ad94a0..a52fbb25 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -1,8 +1,8 @@
 // https://docs.cypress.io/api/introduction/api.html
 
 describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'Welcome to Your Vue.js App')
-  })
+	it('Visits the app root url', () => {
+		cy.visit('/')
+		cy.contains('h1', 'Welcome to Your Vue.js App')
+	})
 })
diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js
index c529c260..1ba0ea5b 100644
--- a/tests/unit/.eslintrc.js
+++ b/tests/unit/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  env: {
-    jest: true,
-  },
+	env: {
+		jest: true,
+	},
 }
diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js
index 07ee415b..4c77d59d 100644
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
@@ -2,6 +2,6 @@ import { shallowMount } from '@vue/test-utils'
 import App from '@/App.vue'
 
 test('App should work', () => {
-  const wrapper = shallowMount(App)
-  expect(wrapper.text()).toMatch('Welcome to Your Vue.js App')
+	const wrapper = shallowMount(App)
+	expect(wrapper.text()).toMatch('Welcome to Your Vue.js App')
 })
diff --git a/vue.config.js b/vue.config.js
index f7b87181..c24cec49 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,16 +1,12 @@
 module.exports = {
-  devServer: {
-    disableHostCheck: true,
-  },
+	transpileDependencies: ["vuetify"],
 
-  transpileDependencies: ['vuetify'],
-
-  pluginOptions: {
-    i18n: {
-      locale: 'en',
-      fallbackLocale: 'en',
-      localeDir: 'locales',
-      enableInSFC: false,
-    },
-  },
-}
+	pluginOptions: {
+		i18n: {
+			locale: "en",
+			fallbackLocale: "en",
+			localeDir: "locales",
+			enableInSFC: false,
+		},
+	},
+};