From ca05dde708e90d2999ebfbc1edaa06818dce5193 Mon Sep 17 00:00:00 2001
From: Dragos <dragosct10@gmail.com>
Date: Tue, 12 Feb 2019 10:58:11 +0200
Subject: [PATCH] packgage.json updated all + lint all

---
 package.json                                  |  26 +-
 src/App.vue                                   |   8 +-
 src/components/Badge.vue                      |   3 +-
 src/components/Dropdown.vue                   |  30 +-
 src/components/Modal.vue                      |   1 -
 src/components/Pagination.vue                 |  30 +-
 src/components/Parallax.vue                   |   6 +-
 src/components/Slider.vue                     |   9 +-
 src/components/Tabs.vue                       |  32 +-
 src/components/cards/LoginCard.vue            |   5 +-
 src/components/cards/NavTabsCard.vue          |   5 +-
 src/layout/MainFooter.vue                     |  74 ++--
 src/layout/MainNavbar.vue                     |  79 +++-
 src/layout/MobileMenu.vue                     |   5 +-
 src/views/Index.vue                           | 177 ++++++--
 src/views/Landing.vue                         | 343 +++++++++------
 src/views/Login.vue                           |  25 +-
 src/views/Profile.vue                         |  68 ++-
 src/views/components/BasicElementsSection.vue | 105 +++--
 .../JavascriptComponentsSection.vue           |  80 ++--
 src/views/components/NavPillsSection.vue      |  54 ++-
 src/views/components/NavigationSection.vue    | 407 ++++++++++--------
 src/views/components/NotificationsSection.vue |  43 +-
 .../components/SmallNavigationSection.vue     | 219 ++++++----
 src/views/components/TabsSection.vue          |  65 ++-
 .../components/TypographyImagesSection.vue    | 185 +++++---
 26 files changed, 1339 insertions(+), 745 deletions(-)

diff --git a/package.json b/package.json
index 111a109..aa5cf79 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,33 @@
 {
   "name": "vue-material-kit",
-  "author": "Dragos Ct <dragos@creative-tim.com>",
+  "author": "Creative Tim https://www.creative-tim.com/",
   "description": "Vue Material Kit",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "dev": "npm run serve",
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run dev"
   },
   "dependencies": {
-    "nouislider": "11.1.0",
+    "nouislider": "13.1.0",
     "v-tooltip": "2.0.0-rc.33",
-    "vue": "2.5.17",
-    "vue-carousel": "0.13.1",
+    "vue": "2.6.6",
+    "vue-carousel": "0.17.0",
     "vue-clickaway": "2.2.2",
     "vue-lazyload": "1.2.6",
     "vue-material": "1.0.0-beta-10.2",
-    "vue-router": "3.0.1"
+    "vue-router": "3.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.0.1",
-    "@vue/cli-plugin-eslint": "3.0.1",
-    "@vue/cli-service": "3.0.1",
-    "@vue/eslint-config-prettier": "3.0.1",
-    "node-sass": "4.9.3",
+    "@vue/cli-plugin-babel": "3.4.0",
+    "@vue/cli-plugin-eslint": "3.4.0",
+    "@vue/cli-service": "3.4.0",
+    "@vue/eslint-config-prettier": "4.0.1",
+    "node-sass": "4.11.0",
     "sass-loader": "7.1.0",
-    "vue-template-compiler": "2.5.17"
+    "vue-template-compiler": "2.6.6"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index a755b0a..6e76020 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="material-kit">
-    <div :class="{'nav-open': NavbarStore.showNavbar}">
-      <router-view name="header"/>
+    <div :class="{ 'nav-open': NavbarStore.showNavbar }">
+      <router-view name="header" />
       <div>
-        <router-view/>
+        <router-view />
       </div>
-      <router-view name="footer"/>
+      <router-view name="footer" />
     </div>
   </div>
 </template>
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
index 1e2372b..9456f97 100644
--- a/src/components/Badge.vue
+++ b/src/components/Badge.vue
@@ -30,5 +30,4 @@ export default {
   }
 };
 </script>
-<style>
-</style>
+<style></style>
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 430af39..b01fcd6 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -1,17 +1,23 @@
 <template>
-  <div :class="[
-       {open:isOpen},
-       {'dropdown': direction === 'down'},
-       {'dropup': direction ==='up'}
-      ]"
+  <div
+    :class="[
+      { open: isOpen },
+      { dropdown: direction === 'down' },
+      { dropup: direction === 'up' }
+    ]"
     @click="toggleDropDown"
-    v-click-outside="closeDropDown">
-      <slot name="title">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
-          <i :class="icon"></i>
-          <p>{{title}}</p>
-        </a>
-      </slot>
+    v-click-outside="closeDropDown"
+  >
+    <slot name="title">
+      <a
+        class="dropdown-toggle"
+        data-toggle="dropdown"
+        href="javascript:void(0)"
+      >
+        <i :class="icon"></i>
+        <p>{{ title }}</p>
+      </a>
+    </slot>
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 5afd867..dad76e9 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -3,7 +3,6 @@
     <div class="modal-mask">
       <div class="modal-wrapper">
         <div class="modal-container" v-click-outside="closeModal">
-
           <div class="modal-header">
             <slot name="header"></slot>
           </div>
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index d3e392f..41d332d 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -1,20 +1,32 @@
 <template>
   <ul class="pagination" :class="paginationClass">
-    <li class="page-item prev-page" :class="{'disabled': value === 1, 'no-arrows': noArrows}">
+    <li
+      class="page-item prev-page"
+      :class="{ disabled: value === 1, 'no-arrows': noArrows }"
+    >
       <a class="page-link" aria-label="Previous" @click="prevPage">
-        <template v-if="withText">Prev</template>
+        <template v-if="withText"
+          >Prev</template
+        >
         <i class="fas fa-angle-double-left" v-else></i>
       </a>
     </li>
-    <li class="page-item"
-        v-for="item in range(minPage, maxPage)"
-        :key="item"
-        :class="{active: value === item}">
-      <a class="page-link" @click="changePage(item)">{{item}}</a>
+    <li
+      class="page-item"
+      v-for="item in range(minPage, maxPage)"
+      :key="item"
+      :class="{ active: value === item }"
+    >
+      <a class="page-link" @click="changePage(item)">{{ item }}</a>
     </li>
-    <li class="page-item page-pre next-page" :class="{ 'disabled': value === totalPages, 'no-arrows': noArrows}">
+    <li
+      class="page-item page-pre next-page"
+      :class="{ disabled: value === totalPages, 'no-arrows': noArrows }"
+    >
       <a class="page-link" aria-label="Next" @click="nextPage">
-        <template v-if="withText">Next</template>
+        <template v-if="withText"
+          >Next</template
+        >
         <i class="fas fa-angle-double-right" v-else></i>
       </a>
     </li>
diff --git a/src/components/Parallax.vue b/src/components/Parallax.vue
index e40397a..e481e97 100644
--- a/src/components/Parallax.vue
+++ b/src/components/Parallax.vue
@@ -1,7 +1,7 @@
 <template>
-    <div :style="styles">
-        <slot></slot>
-    </div>
+  <div :style="styles">
+    <slot></slot>
+  </div>
 </template>
 <script>
 function debounce(func, wait, immediate) {
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
index d190f92..b451b39 100644
--- a/src/components/Slider.vue
+++ b/src/components/Slider.vue
@@ -1,9 +1,5 @@
 <template>
-  <div class="slider"
-       :class="[`slider-${type}`]"
-       :disabled="disabled">
-
-  </div>
+  <div class="slider" :class="[`slider-${type}`]" :disabled="disabled"></div>
 </template>
 <script>
 import noUiSlider from "nouislider";
@@ -86,5 +82,4 @@ export default {
   }
 };
 </script>
-<style>
-</style>
+<style></style>
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 8546769..97d125c 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -1,13 +1,13 @@
 <template>
-  <md-card class="md-card-tabs"
+  <md-card
+    class="md-card-tabs"
     :class="[
-      {'flex-column': flexColumn},
-      {'nav-pills-icons': navPillsIcons},
-      {'md-card-plain': plain}
-    ]">
-    <md-card-header slot="header-title">
-
-    </md-card-header>
+      { 'flex-column': flexColumn },
+      { 'nav-pills-icons': navPillsIcons },
+      { 'md-card-plain': plain }
+    ]"
+  >
+    <md-card-header slot="header-title"> </md-card-header>
 
     <md-card-content>
       <md-list class="nav-tabs">
@@ -16,10 +16,12 @@
           @click="switchPanel(tabName[index])"
           :key="item"
           :class="[
-            {active: isActivePanel(tabName[index])},
-            {[getColorButton(colorButton)]: isActivePanel(tabName[index])}]">
-            {{tabName[index]}}
-            <md-icon v-if="navPillsIcons">{{tabIcon[index]}}</md-icon>
+            { active: isActivePanel(tabName[index]) },
+            { [getColorButton(colorButton)]: isActivePanel(tabName[index]) }
+          ]"
+        >
+          {{ tabName[index] }}
+          <md-icon v-if="navPillsIcons">{{ tabIcon[index] }}</md-icon>
         </md-list-item>
       </md-list>
 
@@ -29,7 +31,8 @@
             :class="getTabContent(index + 1)"
             v-for="(item, index) in tabName"
             :key="item"
-            v-if="isActivePanel(tabName[index])">
+            v-if="isActivePanel(tabName[index])"
+          >
             <slot :name="getTabContent(index + 1)">
               This is the default text!
             </slot>
@@ -75,5 +78,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/components/cards/LoginCard.vue b/src/components/cards/LoginCard.vue
index ced23e4..116b945 100644
--- a/src/components/cards/LoginCard.vue
+++ b/src/components/cards/LoginCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-card class="md-card-login" :class="{'md-card-hidden': cardHidden}">
+  <md-card class="md-card-login" :class="{ 'md-card-hidden': cardHidden }">
     <md-card-header :class="getClass(headerColor)">
       <slot name="title"></slot>
       <div class="social-line">
@@ -46,5 +46,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/components/cards/NavTabsCard.vue b/src/components/cards/NavTabsCard.vue
index 2b7c058..e3556ec 100644
--- a/src/components/cards/NavTabsCard.vue
+++ b/src/components/cards/NavTabsCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <md-card class="md-card-nav-tabs" :class="{'no-label': noLabel, 'md-card-plain': tabsPlain}">
+  <md-card
+    class="md-card-nav-tabs"
+    :class="{ 'no-label': noLabel, 'md-card-plain': tabsPlain }"
+  >
     <md-card-content>
       <slot name="content"></slot>
     </md-card-content>
diff --git a/src/layout/MainFooter.vue b/src/layout/MainFooter.vue
index bbaea4a..2f0a24f 100644
--- a/src/layout/MainFooter.vue
+++ b/src/layout/MainFooter.vue
@@ -1,38 +1,41 @@
 <template>
-    <footer class="footer"
-            :class="{[`footer-${type}`]: type}"
-            :data-background-color="backgroundColor">
-        <div class="container">
-            <nav>
-                <ul>
-                    <li>
-                        <a href="https://www.creative-tim.com">
-                            Creative Tim
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https:///presentation.creative-tim.com">
-                            About Us
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https:///blog.creative-tim.com">
-                            Blog
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https://www.creative-tim.com/license">
-                            Licenses
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-            <div class="copyright">
-                &copy; {{year}}, made with <md-icon>favorite</md-icon> by
-                <a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a> for a better web.
-            </div>
-        </div>
-    </footer>
+  <footer
+    class="footer"
+    :class="{ [`footer-${type}`]: type }"
+    :data-background-color="backgroundColor"
+  >
+    <div class="container">
+      <nav>
+        <ul>
+          <li>
+            <a href="https://www.creative-tim.com">
+              Creative Tim
+            </a>
+          </li>
+          <li>
+            <a href="https:///presentation.creative-tim.com">
+              About Us
+            </a>
+          </li>
+          <li>
+            <a href="https:///blog.creative-tim.com">
+              Blog
+            </a>
+          </li>
+          <li>
+            <a href="https://www.creative-tim.com/license">
+              Licenses
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div class="copyright">
+        &copy; {{ year }}, made with <md-icon>favorite</md-icon> by
+        <a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a>
+        for a better web.
+      </div>
+    </div>
+  </footer>
 </template>
 <script>
 export default {
@@ -47,5 +50,4 @@ export default {
   }
 };
 </script>
-<style>
-</style>
+<style></style>
diff --git a/src/layout/MainNavbar.vue b/src/layout/MainNavbar.vue
index f425246..ac279db 100644
--- a/src/layout/MainNavbar.vue
+++ b/src/layout/MainNavbar.vue
@@ -1,11 +1,21 @@
 <template>
-  <md-toolbar id="toolbar" md-elevation="0" class="md-transparent md-absolute" :class="extraNavClasses" :color-on-scroll="colorOnScroll">
+  <md-toolbar
+    id="toolbar"
+    md-elevation="0"
+    class="md-transparent md-absolute"
+    :class="extraNavClasses"
+    :color-on-scroll="colorOnScroll"
+  >
     <div class="md-toolbar-row md-collapse-lateral">
       <div class="md-toolbar-section-start">
         <h3 class="md-title">Vue Material Kit</h3>
       </div>
       <div class="md-toolbar-section-end">
-        <md-button class="md-just-icon md-simple md-toolbar-toggle" :class="{toggled: toggledClass}" @click="toggleNavbarMobile()">
+        <md-button
+          class="md-just-icon md-simple md-toolbar-toggle"
+          :class="{ toggled: toggledClass }"
+          @click="toggleNavbarMobile()"
+        >
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
@@ -18,10 +28,17 @@
             </mobile-menu>
             <md-list>
               <li class="md-list-item" v-if="!showDownload">
-                <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
+                <a
+                  href="javascript:void(0)"
+                  class="md-list-item-router md-list-item-container md-button-clean dropdown"
+                >
                   <div class="md-list-item-content">
                     <drop-down direction="down">
-                      <md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
+                      <md-button
+                        slot="title"
+                        class="md-button md-button-link md-white md-simple dropdown-toggle"
+                        data-toggle="dropdown"
+                      >
                         <i class="material-icons">apps</i>
                         <p>Components</p>
                       </md-button>
@@ -33,7 +50,9 @@
                           </a>
                         </li>
                         <li>
-                          <a href="https://demos.creative-tim.com/vue-material-kit/documentation/" >
+                          <a
+                            href="https://demos.creative-tim.com/vue-material-kit/documentation/"
+                          >
                             <i class="material-icons">content_paste</i>
                             <p>Documentation</p>
                           </a>
@@ -44,21 +63,36 @@
                 </a>
               </li>
 
-              <md-list-item href="https://demos.creative-tim.com/vue-material-kit/documentation/"  target="_blank" v-if="showDownload">
+              <md-list-item
+                href="https://demos.creative-tim.com/vue-material-kit/documentation/"
+                target="_blank"
+                v-if="showDownload"
+              >
                 <i class="material-icons">content_paste</i>
                 <p>Documentation</p>
               </md-list-item>
 
-              <md-list-item href="javascript:void(0)" @click="scrollToElement()" v-if="showDownload">
+              <md-list-item
+                href="javascript:void(0)"
+                @click="scrollToElement()"
+                v-if="showDownload"
+              >
                 <i class="material-icons">cloud_download</i>
                 <p>Download</p>
               </md-list-item>
 
               <li class="md-list-item" v-else>
-                <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
+                <a
+                  href="javascript:void(0)"
+                  class="md-list-item-router md-list-item-container md-button-clean dropdown"
+                >
                   <div class="md-list-item-content">
                     <drop-down direction="down">
-                      <md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
+                      <md-button
+                        slot="title"
+                        class="md-button md-button-link md-white md-simple dropdown-toggle"
+                        data-toggle="dropdown"
+                      >
                         <i class="material-icons">view_carousel</i>
                         <p>Examples</p>
                       </md-button>
@@ -87,20 +121,35 @@
                 </a>
               </li>
 
-              <md-list-item href="https://twitter.com/CreativeTim" target="_blank">
+              <md-list-item
+                href="https://twitter.com/CreativeTim"
+                target="_blank"
+              >
                 <i class="fab fa-twitter"></i>
                 <p class="hidden-lg">Twitter</p>
-                <md-tooltip md-direction="bottom">Follow us on Twitter</md-tooltip>
+                <md-tooltip md-direction="bottom"
+                  >Follow us on Twitter</md-tooltip
+                >
               </md-list-item>
-              <md-list-item href="https://www.facebook.com/CreativeTim" target="_blank">
+              <md-list-item
+                href="https://www.facebook.com/CreativeTim"
+                target="_blank"
+              >
                 <i class="fab fa-facebook-square"></i>
                 <p class="hidden-lg">Facebook</p>
-                <md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip>
+                <md-tooltip md-direction="bottom"
+                  >Like us on Facebook</md-tooltip
+                >
               </md-list-item>
-              <md-list-item href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
+              <md-list-item
+                href="https://www.instagram.com/CreativeTimOfficial"
+                target="_blank"
+              >
                 <i class="fab fa-instagram"></i>
                 <p class="hidden-lg">Instagram</p>
-                <md-tooltip md-direction="bottom">Follow us on Instagram</md-tooltip>
+                <md-tooltip md-direction="bottom"
+                  >Follow us on Instagram</md-tooltip
+                >
               </md-list-item>
             </md-list>
           </div>
diff --git a/src/layout/MobileMenu.vue b/src/layout/MobileMenu.vue
index c9859a1..b6af460 100644
--- a/src/layout/MobileMenu.vue
+++ b/src/layout/MobileMenu.vue
@@ -1,5 +1,8 @@
 <template>
-  <md-list class="nav-mobile-menu nav-mobile-section-start" v-if="navMobileSectionStart === 'true'">
+  <md-list
+    class="nav-mobile-menu nav-mobile-section-start"
+    v-if="navMobileSectionStart === 'true'"
+  >
     <slot></slot>
   </md-list>
 </template>
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 8a04349..311b73e 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -4,16 +4,15 @@
       <div class="md-layout">
         <div class="md-layout-item">
           <div class="image-wrapper">
-            <img :src="leaf4" alt="leaf4" class="leaf4" v-show="leafShow">
-            <img :src="leaf3" alt="leaf3" class="leaf3" v-show="leafShow">
-            <img :src="leaf2" alt="leaf2" class="leaf2" v-show="leafShow">
-            <img :src="leaf1" alt="leaf1" class="leaf1" v-show="leafShow">
+            <img :src="leaf4" alt="leaf4" class="leaf4" v-show="leafShow" />
+            <img :src="leaf3" alt="leaf3" class="leaf3" v-show="leafShow" />
+            <img :src="leaf2" alt="leaf2" class="leaf2" v-show="leafShow" />
+            <img :src="leaf1" alt="leaf1" class="leaf1" v-show="leafShow" />
             <div class="brand">
               <h1>Vue Material Kit</h1>
               <h3>A Badass Vue.js UI Kit made with Material Design.</h3>
             </div>
           </div>
-
         </div>
       </div>
     </parallax>
@@ -63,26 +62,47 @@
       <div class="section">
         <div class="container text-center">
           <div class="md-layout">
-              <div class="md-layout-item md-size-66 md-xsmall-size-100 ml-auto mr-auto text-center">
-                  <h2>Completed with examples</h2>
-                  <h4>The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.</h4>
-              </div>
+            <div
+              class="md-layout-item md-size-66 md-xsmall-size-100 ml-auto mr-auto text-center"
+            >
+              <h2>Completed with examples</h2>
+              <h4>
+                The kit comes with three pre-built pages to help you get started
+                faster. You can change the text and images and you're good to
+                go. More importantly, looking at them will give you a picture of
+                what you can built with this powerful kit.
+              </h4>
+            </div>
           </div>
         </div>
       </div>
       <div class="section section-signup page-header" :style="signupImage">
         <div class="container">
           <div class="md-layout">
-            <div class="md-layout-item md-size-33 md-medium-size-40 md-small-size-50 md-xsmall-size-70 mx-auto text-center">
+            <div
+              class="md-layout-item md-size-33 md-medium-size-40 md-small-size-50 md-xsmall-size-70 mx-auto text-center"
+            >
               <login-card header-color="green">
                 <h4 slot="title" class="card-title">Login</h4>
-                <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
+                <md-button
+                  slot="buttons"
+                  href="javascript:void(0)"
+                  class="md-just-icon md-simple md-white"
+                >
                   <i class="fab fa-facebook-square"></i>
                 </md-button>
-                <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
+                <md-button
+                  slot="buttons"
+                  href="javascript:void(0)"
+                  class="md-just-icon md-simple md-white"
+                >
                   <i class="fab fa-twitter"></i>
                 </md-button>
-                <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
+                <md-button
+                  slot="buttons"
+                  href="javascript:void(0)"
+                  class="md-just-icon md-simple md-white"
+                >
                   <i class="fab fa-google-plus-g"></i>
                 </md-button>
                 <p slot="description" class="description">Or Be Classical</p>
@@ -111,25 +131,39 @@
       </div>
       <div class="md-layout">
         <div class="md-layout-item text-center">
-          <md-button href="#/login" class="md-simple md-success md-lg">View Login Page</md-button>
+          <md-button href="#/login" class="md-simple md-success md-lg"
+            >View Login Page</md-button
+          >
         </div>
       </div>
       <div class="section section-examples">
         <div class="container-fluid text-center">
-            <div class="md-layout">
-                <div class="md-layout-item">
-                    <a href="#/landing" target="_blank">
-                        <img :src="landing" alt="Rounded Image" class="img-raised rounded img-fluid">
-                    </a>
-                    <md-button href="#/landing" class="md-simple md-success md-lg">View Landing Page</md-button>
-                </div>
-                <div class="md-layout-item">
-                  <a href="#/profile" target="_blank">
-                      <img :src="profile" alt="Rounded Image" class="img-raised rounded img-fluid">
-                  </a>
-                  <md-button href="#/profile" class="md-simple md-success md-lg">View Profile Page</md-button>
-                </div>
+          <div class="md-layout">
+            <div class="md-layout-item">
+              <a href="#/landing" target="_blank">
+                <img
+                  :src="landing"
+                  alt="Rounded Image"
+                  class="img-raised rounded img-fluid"
+                />
+              </a>
+              <md-button href="#/landing" class="md-simple md-success md-lg"
+                >View Landing Page</md-button
+              >
             </div>
+            <div class="md-layout-item">
+              <a href="#/profile" target="_blank">
+                <img
+                  :src="profile"
+                  alt="Rounded Image"
+                  class="img-raised rounded img-fluid"
+                />
+              </a>
+              <md-button href="#/profile" class="md-simple md-success md-lg"
+                >View Profile Page</md-button
+              >
+            </div>
+          </div>
         </div>
       </div>
       <div class="section section-download" id="downloadSection">
@@ -137,26 +171,73 @@
           <div class="md-layout text-center">
             <div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
               <h2>Do you love this UI Kit?</h2>
-              <h4>Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from <a href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" target="_blank">ThemeIsle</a> created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!</h4>
+              <h4>
+                Cause if you do, it can be yours for FREE. Hit the buttons below
+                to navigate to our website where you can find the kit. Our
+                friends from
+                <a
+                  href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website"
+                  target="_blank"
+                  >ThemeIsle</a
+                >
+                created a Wordpress Theme which can be also downloaded for free.
+                Start a new project or give an old Bootstrap project a new look!
+              </h4>
             </div>
             <div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
-              <md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-success md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button>
-              <md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" class="md-success md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
+              <md-button
+                href="https://www.creative-tim.com/product/material-kit"
+                target="_blank"
+                class="md-success md-lg"
+                ><i class="fab fa-html5"></i> Free HTML Download</md-button
+              >
+              <md-button
+                href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website"
+                class="md-success md-lg"
+                target="_blank"
+                ><i class="fab fa-wordpress"></i> Wordpress Theme</md-button
+              >
             </div>
-  	      </div>
-    	    <br><br>
+          </div>
+          <br /><br />
 
-        	<div class="md-layout text-center">
-        		<div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
+          <div class="md-layout text-center">
+            <div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
               <h2>Want more?</h2>
-              <h4>We've just launched <a href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-mk-demos" target="_blank">Vue Material Dashboard PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
+              <h4>
+                We've just launched
+                <a
+                  href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-mk-demos"
+                  target="_blank"
+                  >Vue Material Dashboard PRO</a
+                >
+                and
+                <a
+                  href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos"
+                  target="_blank"
+                  >Vue Material Kit PRO</a
+                >. Every product has a huge number of components, sections and
+                example pages. Start Your Development With A Badass Bootstrap UI
+                Kit inspired by Material Design.
+              </h4>
             </div>
-        		<div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
+            <div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
               <div class="btn-container">
-                <md-button href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos" class="md-button md-success md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button>
-                <md-button href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmd-demos" class="md-button md-success md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
+                <md-button
+                  href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos"
+                  class="md-button md-success md-lg md-upgrade"
+                  target="_blank"
+                  ><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button
+                >
+                <md-button
+                  href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmd-demos"
+                  class="md-button md-success md-lg md-upgrade"
+                  target="_blank"
+                  ><md-icon>unarchive</md-icon>Vue Material Dashboard
+                  PRO</md-button
+                >
               </div>
-        		</div>
+            </div>
           </div>
 
           <div class="sharing-area text-center">
@@ -166,17 +247,23 @@
               </div>
             </div>
 
-            <md-button class="md-twitter"><i class="fab fa-twitter"></i>Tweet</md-button>
-            <md-button class="md-facebook"><i class="fab fa-facebook-square"></i> Share</md-button>
-            <md-button class="md-google"><i class="fab fa-google-plus"></i> Share</md-button>
-            <md-button class="md-github"><i class="fab fa-github"></i> Star</md-button>
+            <md-button class="md-twitter"
+              ><i class="fab fa-twitter"></i>Tweet</md-button
+            >
+            <md-button class="md-facebook"
+              ><i class="fab fa-facebook-square"></i> Share</md-button
+            >
+            <md-button class="md-google"
+              ><i class="fab fa-google-plus"></i> Share</md-button
+            >
+            <md-button class="md-github"
+              ><i class="fab fa-github"></i> Star</md-button
+            >
           </div>
         </div>
       </div>
     </div>
   </div>
-
-
 </template>
 
 <script>
diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 7e17b6d..7ff800b 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -3,12 +3,24 @@
     <parallax class="section page-header header-filter" :style="headerStyle">
       <div class="container">
         <div class="md-layout">
-    			<div class="md-layout-item md-size-50 md-small-size-70 md-xsmall-size-100">
-    				<h1 class="title">Your Story Starts With Us.</h1>
-              <h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
-              <br>
-              <md-button href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="md-success md-lg" target="_blank"><i class="fas fa-play"></i> Watch video</md-button>
-    			</div>
+          <div
+            class="md-layout-item md-size-50 md-small-size-70 md-xsmall-size-100"
+          >
+            <h1 class="title">Your Story Starts With Us.</h1>
+            <h4>
+              Every landing page needs a small description after the big bold
+              title, that's why we added this text here. Add here all the
+              information that can make you or your product create the first
+              impression.
+            </h4>
+            <br />
+            <md-button
+              href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+              class="md-success md-lg"
+              target="_blank"
+              ><i class="fas fa-play"></i> Watch video</md-button
+            >
+          </div>
         </div>
       </div>
     </parallax>
@@ -16,9 +28,17 @@
       <div class="section">
         <div class="container">
           <div class="md-layout">
-            <div class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto text-center">
+            <div
+              class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto text-center"
+            >
               <h2 class="title text-center">Let's talk product</h2>
-              <h5 class="description">This is the paragraph where you can write more details about your product. Keep you user engaged by providing meaningful information. Remember that by this time, the user is curious, otherwise he wouldn't scroll to get here. Add a button if you want the user to see more.</h5>
+              <h5 class="description">
+                This is the paragraph where you can write more details about
+                your product. Keep you user engaged by providing meaningful
+                information. Remember that by this time, the user is curious,
+                otherwise he wouldn't scroll to get here. Add a button if you
+                want the user to see more.
+              </h5>
             </div>
           </div>
           <div class="features text-center">
@@ -29,26 +49,38 @@
                     <md-icon>chat</md-icon>
                   </div>
                   <h4 class="info-title">Free Chat</h4>
-                  <p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
+                  <p>
+                    Divide details about your product or agency work into parts.
+                    Write a few lines about each one. A paragraph describing a
+                    feature will be enough.
+                  </p>
                 </div>
               </div>
               <div class="md-layout-item md-medium-size-33 md-small-size-100">
-                  <div class="info">
-                    <div class="icon icon-success">
-                      <md-icon>verified_user</md-icon>
-                    </div>
-                    <h4 class="info-title">Verified Users</h4>
-                    <p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
+                <div class="info">
+                  <div class="icon icon-success">
+                    <md-icon>verified_user</md-icon>
                   </div>
+                  <h4 class="info-title">Verified Users</h4>
+                  <p>
+                    Divide details about your product or agency work into parts.
+                    Write a few lines about each one. A paragraph describing a
+                    feature will be enough.
+                  </p>
+                </div>
               </div>
               <div class="md-layout-item md-medium-size-33 md-small-size-100">
-                  <div class="info">
-                    <div class="icon icon-danger">
-                      <md-icon>fingerprint</md-icon>
-                    </div>
-                    <h4 class="info-title">Fingerprint</h4>
-                    <p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
+                <div class="info">
+                  <div class="icon icon-danger">
+                    <md-icon>fingerprint</md-icon>
                   </div>
+                  <h4 class="info-title">Fingerprint</h4>
+                  <p>
+                    Divide details about your product or agency work into parts.
+                    Write a few lines about each one. A paragraph describing a
+                    feature will be enough.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
@@ -58,92 +90,148 @@
         <div class="container">
           <h2 class="title">Here is our team</h2>
           <div class="team">
-              <div class="md-layout">
-                  <div class="md-layout-item md-medium-size-33 md-small-size-100">
-                    <div class="team-player">
-                      <md-card class="md-card-plain">
-                        <div class="md-layout-item md-size-50 mx-auto">
-                          <img :src="teamImg1" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
-                        </div>
-                        <h4 class="card-title">Gigi Hadid
-                          <br>
-                          <small class="card-description text-muted">Model</small>
-                        </h4>
-
-                        <md-card-content>
-                          <p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
-                        </md-card-content>
-
-                        <md-card-actions class="text-center">
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-twitter"></i>
-                          </md-button>
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-instagram"></i>
-                          </md-button>
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-facebook-square"></i>
-                          </md-button>
-                        </md-card-actions>
-                      </md-card>
+            <div class="md-layout">
+              <div class="md-layout-item md-medium-size-33 md-small-size-100">
+                <div class="team-player">
+                  <md-card class="md-card-plain">
+                    <div class="md-layout-item md-size-50 mx-auto">
+                      <img
+                        :src="teamImg1"
+                        alt="Thumbnail Image"
+                        class="img-raised rounded-circle img-fluid"
+                      />
                     </div>
-                  </div>
-                  <div class="md-layout-item md-medium-size-33 md-small-size-100">
-                    <div class="team-player">
-                      <md-card class="md-card-plain">
-                        <div class="md-layout-item md-size-50 mx-auto">
-                          <img :src="teamImg2" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
-                        </div>
-                        <h4 class="card-title">Carla Hortensia
-                          <br>
-                          <small class="card-description text-muted">Designer</small>
-                        </h4>
+                    <h4 class="card-title">
+                      Gigi Hadid
+                      <br />
+                      <small class="card-description text-muted">Model</small>
+                    </h4>
 
-                        <md-card-content>
-                          <p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
-                        </md-card-content>
+                    <md-card-content>
+                      <p class="card-description">
+                        You can write here details about one of your team
+                        members. You can give more details about what they do.
+                        Feel free to add some <a href="#">links</a> for people
+                        to be able to follow them outside the site.
+                      </p>
+                    </md-card-content>
 
-                        <md-card-actions class="text-center">
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-twitter"></i>
-                          </md-button>
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-linkedin"></i>
-                          </md-button>
-                        </md-card-actions>
-                      </md-card>
-                    </div>
-                  </div>
-                  <div class="md-layout-item md-medium-size-33 md-small-size-100">
-                    <div class="team-player">
-                      <md-card class="md-card-plain">
-                        <div class="md-layout-item md-size-50 mx-auto">
-                          <img :src="teamImg3" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
-                        </div>
-                        <h4 class="card-title">Kendall Jenner
-                          <br>
-                          <small class="card-description text-muted">Model</small>
-                        </h4>
-
-                        <md-card-content>
-                          <p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
-                        </md-card-content>
-
-                        <md-card-actions class="text-center">
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-twitter"></i>
-                          </md-button>
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-instagram"></i>
-                          </md-button>
-                          <md-button href="javascript:void(0)" class="md-just-icon md-simple">
-                            <i class="fab fa-facebook-square"></i>
-                          </md-button>
-                        </md-card-actions>
-                      </md-card>
-                    </div>
-                  </div>
+                    <md-card-actions class="text-center">
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-twitter"></i>
+                      </md-button>
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-instagram"></i>
+                      </md-button>
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-facebook-square"></i>
+                      </md-button>
+                    </md-card-actions>
+                  </md-card>
+                </div>
               </div>
+              <div class="md-layout-item md-medium-size-33 md-small-size-100">
+                <div class="team-player">
+                  <md-card class="md-card-plain">
+                    <div class="md-layout-item md-size-50 mx-auto">
+                      <img
+                        :src="teamImg2"
+                        alt="Thumbnail Image"
+                        class="img-raised rounded-circle img-fluid"
+                      />
+                    </div>
+                    <h4 class="card-title">
+                      Carla Hortensia
+                      <br />
+                      <small class="card-description text-muted"
+                        >Designer</small
+                      >
+                    </h4>
+
+                    <md-card-content>
+                      <p class="card-description">
+                        You can write here details about one of your team
+                        members. You can give more details about what they do.
+                        Feel free to add some <a href="#">links</a> for people
+                        to be able to follow them outside the site.
+                      </p>
+                    </md-card-content>
+
+                    <md-card-actions class="text-center">
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-twitter"></i>
+                      </md-button>
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-linkedin"></i>
+                      </md-button>
+                    </md-card-actions>
+                  </md-card>
+                </div>
+              </div>
+              <div class="md-layout-item md-medium-size-33 md-small-size-100">
+                <div class="team-player">
+                  <md-card class="md-card-plain">
+                    <div class="md-layout-item md-size-50 mx-auto">
+                      <img
+                        :src="teamImg3"
+                        alt="Thumbnail Image"
+                        class="img-raised rounded-circle img-fluid"
+                      />
+                    </div>
+                    <h4 class="card-title">
+                      Kendall Jenner
+                      <br />
+                      <small class="card-description text-muted">Model</small>
+                    </h4>
+
+                    <md-card-content>
+                      <p class="card-description">
+                        You can write here details about one of your team
+                        members. You can give more details about what they do.
+                        Feel free to add some <a href="#">links</a> for people
+                        to be able to follow them outside the site.
+                      </p>
+                    </md-card-content>
+
+                    <md-card-actions class="text-center">
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-twitter"></i>
+                      </md-button>
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-instagram"></i>
+                      </md-button>
+                      <md-button
+                        href="javascript:void(0)"
+                        class="md-just-icon md-simple"
+                      >
+                        <i class="fab fa-facebook-square"></i>
+                      </md-button>
+                    </md-card-actions>
+                  </md-card>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -152,31 +240,36 @@
           <div class="md-layout">
             <div class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto">
               <h2 class="text-center title">Work with us</h2>
-              <h4 class="text-center description">Divide details about your product or agency work into parts. Write a few lines about each one and contact us about any further collaboration. We will responde get back to you in a couple of hours.</h4>
+              <h4 class="text-center description">
+                Divide details about your product or agency work into parts.
+                Write a few lines about each one and contact us about any
+                further collaboration. We will responde get back to you in a
+                couple of hours.
+              </h4>
               <form class="contact-form">
-                  <div class="md-layout">
-                      <div class="md-layout-item md-size-50">
-                        <md-field>
-                          <label>Your Name</label>
-                          <md-input v-model="name" type="text"></md-input>
-                        </md-field>
-                      </div>
-                      <div class="md-layout-item md-size-50">
-                        <md-field>
-                          <label>Your Email</label>
-                          <md-input v-model="email" type="email"></md-input>
-                        </md-field>
-                      </div>
+                <div class="md-layout">
+                  <div class="md-layout-item md-size-50">
+                    <md-field>
+                      <label>Your Name</label>
+                      <md-input v-model="name" type="text"></md-input>
+                    </md-field>
                   </div>
-                  <md-field maxlength="5">
-                    <label>Your Message</label>
-                    <md-textarea v-model="message"></md-textarea>
-                  </md-field>
-                  <div class="md-layout">
-                    <div class="md-layout-item md-size-33 mx-auto text-center">
-                      <md-button class="md-success">Send Message</md-button>
-                    </div>
+                  <div class="md-layout-item md-size-50">
+                    <md-field>
+                      <label>Your Email</label>
+                      <md-input v-model="email" type="email"></md-input>
+                    </md-field>
                   </div>
+                </div>
+                <md-field maxlength="5">
+                  <label>Your Message</label>
+                  <md-textarea v-model="message"></md-textarea>
+                </md-field>
+                <div class="md-layout">
+                  <div class="md-layout-item md-size-33 mx-auto text-center">
+                    <md-button class="md-success">Send Message</md-button>
+                  </div>
+                </div>
               </form>
             </div>
           </div>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 9e522e1..aa72f86 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -3,16 +3,30 @@
     <div class="section page-header header-filter" :style="headerStyle">
       <div class="container">
         <div class="md-layout">
-          <div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto">
+          <div
+            class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto"
+          >
             <login-card header-color="green">
               <h4 slot="title" class="card-title">Login</h4>
-              <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
+              <md-button
+                slot="buttons"
+                href="javascript:void(0)"
+                class="md-just-icon md-simple md-white"
+              >
                 <i class="fab fa-facebook-square"></i>
               </md-button>
-              <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
+              <md-button
+                slot="buttons"
+                href="javascript:void(0)"
+                class="md-just-icon md-simple md-white"
+              >
                 <i class="fab fa-twitter"></i>
               </md-button>
-              <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
+              <md-button
+                slot="buttons"
+                href="javascript:void(0)"
+                class="md-just-icon md-simple md-white"
+              >
                 <i class="fab fa-google-plus-g"></i>
               </md-button>
               <p slot="description" class="description">Or Be Classical</p>
@@ -73,5 +87,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 3376789..bebac81 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="wrapper">
-    <parallax class="section page-header header-filter" :style="headerStyle"></parallax>
+    <parallax
+      class="section page-header header-filter"
+      :style="headerStyle"
+    ></parallax>
     <div class="main main-raised">
       <div class="section profile-content">
         <div class="container">
@@ -8,20 +11,41 @@
             <div class="md-layout-item md-size-50 mx-auto">
               <div class="profile">
                 <div class="avatar">
-                  <img :src="img" alt="Circle Image" class="img-raised rounded-circle img-fluid">
+                  <img
+                    :src="img"
+                    alt="Circle Image"
+                    class="img-raised rounded-circle img-fluid"
+                  />
                 </div>
                 <div class="name">
                   <h3 class="title">Carla Hortensia</h3>
                   <h6>Designer</h6>
-                  <md-button href="javascript:void(0)" class="md-just-icon md-simple md-dribbble"><i class="fab fa-dribbble"></i></md-button>
-                  <md-button href="javascript:void(0)" class="md-just-icon md-simple md-twitter"><i class="fab fa-twitter"></i></md-button>
-                  <md-button href="javascript:void(0)" class="md-just-icon md-simple md-pinterest"><i class="fab fa-pinterest"></i></md-button>
+                  <md-button
+                    href="javascript:void(0)"
+                    class="md-just-icon md-simple md-dribbble"
+                    ><i class="fab fa-dribbble"></i
+                  ></md-button>
+                  <md-button
+                    href="javascript:void(0)"
+                    class="md-just-icon md-simple md-twitter"
+                    ><i class="fab fa-twitter"></i
+                  ></md-button>
+                  <md-button
+                    href="javascript:void(0)"
+                    class="md-just-icon md-simple md-pinterest"
+                    ><i class="fab fa-pinterest"></i
+                  ></md-button>
                 </div>
               </div>
             </div>
           </div>
           <div class="description text-center">
-            <p>An artist of considerable range, Chet Faker — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. </p>
+            <p>
+              An artist of considerable range, Chet Faker — the name taken by
+              Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs
+              and records all of his own music, giving it a warm, intimate feel
+              with a solid groove structure.
+            </p>
           </div>
           <div class="profile-tabs">
             <tabs
@@ -29,44 +53,44 @@
               :tab-icon="['camera', 'palette', 'favorite']"
               plain
               nav-pills-icons
-              color-button="success">
-
+              color-button="success"
+            >
               <!-- here you can add your content for tab-content -->
               <template slot="tab-pane-1">
                 <div class="md-layout">
                   <div class="md-layout-item md-size-25 ml-auto">
-                    <img :src="tabPane1[0].image" class="rounded">
-                    <img :src="tabPane1[1].image" class="rounded">
+                    <img :src="tabPane1[0].image" class="rounded" />
+                    <img :src="tabPane1[1].image" class="rounded" />
                   </div>
                   <div class="md-layout-item md-size-25 mr-auto">
-                    <img :src="tabPane1[3].image" class="rounded">
-                    <img :src="tabPane1[2].image" class="rounded">
+                    <img :src="tabPane1[3].image" class="rounded" />
+                    <img :src="tabPane1[2].image" class="rounded" />
                   </div>
                 </div>
               </template>
               <template slot="tab-pane-2">
                 <div class="md-layout">
                   <div class="md-layout-item md-size-25 ml-auto">
-                    <img :src="tabPane2[0].image" class="rounded">
-                    <img :src="tabPane2[1].image" class="rounded">
-                    <img :src="tabPane2[2].image" class="rounded">
+                    <img :src="tabPane2[0].image" class="rounded" />
+                    <img :src="tabPane2[1].image" class="rounded" />
+                    <img :src="tabPane2[2].image" class="rounded" />
                   </div>
                   <div class="md-layout-item md-size-25 mr-auto">
-                    <img :src="tabPane2[3].image" class="rounded">
-                    <img :src="tabPane2[4].image" class="rounded">
+                    <img :src="tabPane2[3].image" class="rounded" />
+                    <img :src="tabPane2[4].image" class="rounded" />
                   </div>
                 </div>
               </template>
               <template slot="tab-pane-3">
                 <div class="md-layout">
                   <div class="md-layout-item md-size-25 ml-auto">
-                    <img :src="tabPane3[0].image" class="rounded">
-                    <img :src="tabPane3[1].image" class="rounded">
+                    <img :src="tabPane3[0].image" class="rounded" />
+                    <img :src="tabPane3[1].image" class="rounded" />
                   </div>
                   <div class="md-layout-item md-size-25 mr-auto">
-                    <img :src="tabPane3[2].image" class="rounded">
-                    <img :src="tabPane3[3].image" class="rounded">
-                    <img :src="tabPane3[4].image" class="rounded">
+                    <img :src="tabPane3[2].image" class="rounded" />
+                    <img :src="tabPane3[3].image" class="rounded" />
+                    <img :src="tabPane3[4].image" class="rounded" />
                   </div>
                 </div>
               </template>
diff --git a/src/views/components/BasicElementsSection.vue b/src/views/components/BasicElementsSection.vue
index 0a8f2c7..9f44f0e 100644
--- a/src/views/components/BasicElementsSection.vue
+++ b/src/views/components/BasicElementsSection.vue
@@ -2,7 +2,8 @@
   <div class="wrapper">
     <div id="buttons">
       <div class="title">
-        <h3>Buttons <br>
+        <h3>
+          Buttons <br />
           <small>Pick your style</small>
         </h3>
       </div>
@@ -10,8 +11,12 @@
         <div class="md-layout-item md-size-66 mx-auto">
           <md-button class="md-primary">Default</md-button>
           <md-button class="md-primary md-round">Round</md-button>
-          <md-button class="md-primary"><md-icon >favorite</md-icon> With Icon</md-button>
-          <md-button class="md-primary md-just-icon md-round"><md-icon >favorite</md-icon></md-button>
+          <md-button class="md-primary"
+            ><md-icon>favorite</md-icon> With Icon</md-button
+          >
+          <md-button class="md-primary md-just-icon md-round"
+            ><md-icon>favorite</md-icon></md-button
+          >
           <md-button class="md-primary md-simple">Simple</md-button>
         </div>
       </div>
@@ -51,41 +56,59 @@
         <h3>Inputs</h3>
       </div>
       <div class="md-layout">
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <md-field>
             <md-input v-model="initial" placeholder="Regular"></md-input>
           </md-field>
         </div>
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <md-field>
             <label>With Floating Label</label>
             <md-input v-model="floatingLabel" type="text"></md-input>
           </md-field>
         </div>
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <md-field class="md-valid">
             <label>Success Input</label>
             <md-input v-model="success" type="text"></md-input>
             <md-icon>done</md-icon>
           </md-field>
         </div>
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <md-field class="md-error">
             <label>Error Input</label>
             <md-input v-model="error" type="text"></md-input>
             <md-icon>clear</md-icon>
           </md-field>
         </div>
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <md-field class="md-form-group">
             <md-icon>face</md-icon>
-            <md-input v-model="withMIcon" placeholder="With Material Icons"></md-input>
+            <md-input
+              v-model="withMIcon"
+              placeholder="With Material Icons"
+            ></md-input>
           </md-field>
         </div>
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <md-field class="md-form-group">
             <i class="fas fa-users"></i>
-            <md-input v-model="withFaIcon" placeholder="With Font Awesome Icons"></md-input>
+            <md-input
+              v-model="withFaIcon"
+              placeholder="With Font Awesome Icons"
+            ></md-input>
           </md-field>
         </div>
       </div>
@@ -97,29 +120,43 @@
     <!-- Checkboxes/Radios/Toggle -->
     <div id="checkRadios">
       <div class="md-layout">
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <div class="title">
             <h3>Checkboxes</h3>
           </div>
           <div class="flex-column">
             <md-checkbox v-model="checkbox1">Checked</md-checkbox>
             <md-checkbox v-model="checkbox2">Unchecked</md-checkbox>
-            <md-checkbox v-model="checkbox3" disabled>Disabled Checked</md-checkbox>
-            <md-checkbox v-model="checkbox4" disabled>Disabled Unchecked</md-checkbox>
+            <md-checkbox v-model="checkbox3" disabled
+              >Disabled Checked</md-checkbox
+            >
+            <md-checkbox v-model="checkbox4" disabled
+              >Disabled Unchecked</md-checkbox
+            >
           </div>
         </div>
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <div class="title">
             <h3>Radios</h3>
           </div>
           <div class="flex-column">
             <md-radio v-model="radio1" :value="true">Radio is on</md-radio>
             <md-radio v-model="radio1" :value="false">Radio is off</md-radio>
-            <md-radio v-model="radio2" :value="true" disabled>Disabled Radio is on</md-radio>
-            <md-radio v-model="radio2" :value="false" disabled>Disabled Radio is off</md-radio>
+            <md-radio v-model="radio2" :value="true" disabled
+              >Disabled Radio is on</md-radio
+            >
+            <md-radio v-model="radio2" :value="false" disabled
+              >Disabled Radio is off</md-radio
+            >
           </div>
         </div>
-        <div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
+        <div
+          class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
+        >
           <div class="title">
             <h3>Toggle Buttons</h3>
           </div>
@@ -141,24 +178,33 @@
           <div class="title">
             <h3>Progress</h3>
           </div>
-          <md-progress-bar class="md-primary" :md-value="amount"></md-progress-bar>
-          <md-progress-bar class="md-info" :md-value="amount2"></md-progress-bar>
-          <md-progress-bar class="md-warning" md-mode="buffer" :md-value="buffer" :md-buffer="buffer"></md-progress-bar>
+          <md-progress-bar
+            class="md-primary"
+            :md-value="amount"
+          ></md-progress-bar>
+          <md-progress-bar
+            class="md-info"
+            :md-value="amount2"
+          ></md-progress-bar>
+          <md-progress-bar
+            class="md-warning"
+            md-mode="buffer"
+            :md-value="buffer"
+            :md-buffer="buffer"
+          ></md-progress-bar>
         </div>
         <div class="md-layout-item md-size-50 md-xsmall-size-100">
           <div class="title">
             <h3>Pagination</h3>
           </div>
-          <pagination
-            no-arrows
-            v-model="defaultPagination"
-            :page-count="5">
+          <pagination no-arrows v-model="defaultPagination" :page-count="5">
           </pagination>
           <pagination
             class="pagination-info"
             v-model="infoPagination"
             with-text
-            :page-count="5">
+            :page-count="5"
+          >
           </pagination>
         </div>
       </div>
@@ -174,12 +220,9 @@
           <div class="title">
             <h3>Sliders</h3>
           </div>
-          <slider v-model="sliders.simple">
-          </slider>
+          <slider v-model="sliders.simple"> </slider>
 
-          <slider v-model="sliders.rangeSlider"
-                  type="info"
-                  :connect="true">
+          <slider v-model="sliders.rangeSlider" type="info" :connect="true">
           </slider>
         </div>
         <div class="md-layout-item md-size-50 md-xsmall-size-100">
diff --git a/src/views/components/JavascriptComponentsSection.vue b/src/views/components/JavascriptComponentsSection.vue
index d4df1a8..3fbf8d9 100644
--- a/src/views/components/JavascriptComponentsSection.vue
+++ b/src/views/components/JavascriptComponentsSection.vue
@@ -11,22 +11,45 @@
           </div>
           <div class="md-layout">
             <div class="md-layout-item md-size-33">
-              <md-button class="md-success md-block" @click="classicModal = true"><md-icon>library_books</md-icon> Classic</md-button>
+              <md-button
+                class="md-success md-block"
+                @click="classicModal = true"
+                ><md-icon>library_books</md-icon> Classic</md-button
+              >
               <modal v-if="classicModal" @close="classicModalHide">
                 <template slot="header">
                   <h4 class="modal-title">Modal Title</h4>
-                  <md-button class="md-simple md-just-icon md-round modal-default-button" @click="classicModalHide">
+                  <md-button
+                    class="md-simple md-just-icon md-round modal-default-button"
+                    @click="classicModalHide"
+                  >
                     <md-icon>clear</md-icon>
                   </md-button>
                 </template>
 
                 <template slot="body">
-                  <p>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.</p>
+                  <p>
+                    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.
+                  </p>
                 </template>
 
                 <template slot="footer">
                   <md-button class="md-simple">Nice Button</md-button>
-                  <md-button class="md-danger md-simple" @click="classicModalHide">Close</md-button>
+                  <md-button
+                    class="md-danger md-simple"
+                    @click="classicModalHide"
+                    >Close</md-button
+                  >
                 </template>
               </modal>
             </div>
@@ -48,48 +71,45 @@
           </div>
           <div class="md-layout">
             <div class="md-layout-item">
-              <v-popover
-                offset="8"
-                placement="left"
-              >
+              <v-popover offset="8" placement="left">
                 <md-button>On left</md-button>
 
                 <template slot="popover">
                   <h3 class="popover-header">Popover on left</h3>
-                  <div class="popover-body">Here will be some very useful information about his popover. Here will be some very useful information about his popover.</div>
+                  <div class="popover-body">
+                    Here will be some very useful information about his popover.
+                    Here will be some very useful information about his popover.
+                  </div>
                 </template>
               </v-popover>
-              <v-popover
-                offset="4"
-                placement="top"
-              >
+              <v-popover offset="4" placement="top">
                 <md-button>On top</md-button>
 
                 <template slot="popover">
                   <h3 class="popover-header">Popover on top</h3>
-                  <div class="popover-body">Here will be some very useful information about his popover.</div>
+                  <div class="popover-body">
+                    Here will be some very useful information about his popover.
+                  </div>
                 </template>
               </v-popover>
-              <v-popover
-                offset="4"
-                placement="bottom"
-              >
+              <v-popover offset="4" placement="bottom">
                 <md-button>On bottom</md-button>
 
                 <template slot="popover">
                   <h3 class="popover-header">Popover on bottom</h3>
-                  <div class="popover-body">Here will be some very useful information about his popover.</div>
+                  <div class="popover-body">
+                    Here will be some very useful information about his popover.
+                  </div>
                 </template>
               </v-popover>
-              <v-popover
-                offset="8"
-                placement="right"
-              >
+              <v-popover offset="8" placement="right">
                 <md-button>On right</md-button>
 
                 <template slot="popover">
                   <h3 class="popover-header">Popover on right</h3>
-                  <div class="popover-body">Here will be some very useful information about his popover.</div>
+                  <div class="popover-body">
+                    Here will be some very useful information about his popover.
+                  </div>
                 </template>
               </v-popover>
             </div>
@@ -122,7 +142,7 @@
           </div>
         </div>
       </div>
-      <br>
+      <br />
       <div class="title">
         <h3>Carousel</h3>
       </div>
@@ -138,7 +158,8 @@
               :mouse-drag="false"
               navigationEnabled
               navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
-              navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>">
+              navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>"
+            >
               <slide>
                 <div class="carousel-caption">
                   <h4>
@@ -146,7 +167,7 @@
                     Somewhere Beyond, United States
                   </h4>
                 </div>
-                <img :src="carousel1" alt="carousel1">
+                <img :src="carousel1" alt="carousel1" />
               </slide>
               <slide>
                 <div class="carousel-caption">
@@ -155,7 +176,7 @@
                     Yellowstone National Park, United States
                   </h4>
                 </div>
-                <img :src="carousel2" alt="carousel2">
+                <img :src="carousel2" alt="carousel2" />
               </slide>
               <slide>
                 <div class="carousel-caption">
@@ -164,11 +185,10 @@
                     Yellowstone National Park, United States
                   </h4>
                 </div>
-                <img :src="carousel3" alt="carousel3">
+                <img :src="carousel3" alt="carousel3" />
               </slide>
             </carousel>
           </md-card>
-
         </div>
       </div>
     </div>
diff --git a/src/views/components/NavPillsSection.vue b/src/views/components/NavPillsSection.vue
index 4c5dc9f..ee5f1bb 100644
--- a/src/views/components/NavPillsSection.vue
+++ b/src/views/components/NavPillsSection.vue
@@ -14,23 +14,31 @@
             :tab-icon="['dashboard', 'schedule', 'list']"
             plain
             nav-pills-icons
-            color-button="primary">
-
+            color-button="primary"
+          >
             <!-- here you can add your content for tab-content -->
             <template slot="tab-pane-1">
-              Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
-              <br><br>
-              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.
+              <br /><br />
+              Dramatically visualize customer directed convergence without
+              revolutionary ROI.
             </template>
             <template slot="tab-pane-2">
-              Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
-              <br><br>
-              Dramatically maintain clicks-and-mortar solutions without functional solutions.
+              Efficiently unleash cross-media information without cross-media
+              value. Quickly maximize timely deliverables for real-time schemas.
+              <br /><br />
+              Dramatically maintain clicks-and-mortar solutions without
+              functional solutions.
             </template>
             <template slot="tab-pane-3">
-              Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
-              <br><br>
-              Dynamically innovate resource-leveling customer service for state of the art customer service.
+              Completely synergize resource taxing relationships via premier
+              niche markets. Professionally cultivate one-to-one customer
+              service with robust ideas.
+              <br /><br />
+              Dynamically innovate resource-leveling customer service for state
+              of the art customer service.
             </template>
           </tabs>
         </div>
@@ -41,18 +49,23 @@
             plain
             flex-column
             nav-pills-icons
-            color-button="primary">
-
+            color-button="primary"
+          >
             <!-- here you can add your content for tab-content -->
             <template slot="tab-pane-1">
-              Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
-              <br><br>
-              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.
+              <br /><br />
+              Dramatically visualize customer directed convergence without
+              revolutionary ROI.
             </template>
             <template slot="tab-pane-2">
-              Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
-              <br><br>
-              Dramatically maintain clicks-and-mortar solutions without functional solutions.
+              Efficiently unleash cross-media information without cross-media
+              value. Quickly maximize timely deliverables for real-time schemas.
+              <br /><br />
+              Dramatically maintain clicks-and-mortar solutions without
+              functional solutions.
             </template>
           </tabs>
         </div>
@@ -71,5 +84,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/views/components/NavigationSection.vue b/src/views/components/NavigationSection.vue
index 1817778..774a487 100644
--- a/src/views/components/NavigationSection.vue
+++ b/src/views/components/NavigationSection.vue
@@ -5,226 +5,262 @@
         <div class="md-layout">
           <div class="md-layout-item">
             <md-toolbar class="md-rose">
-            <div class="md-toolbar-row">
-              <div class="md-toolbar-section-start">
-                <h3 class="md-title">Brand</h3>
-                <md-list>
-                  <md-list-item to="/">
-                    <p>Link</p>
-                  </md-list-item>
+              <div class="md-toolbar-row">
+                <div class="md-toolbar-section-start">
+                  <h3 class="md-title">Brand</h3>
+                  <md-list>
+                    <md-list-item to="/">
+                      <p>Link</p>
+                    </md-list-item>
 
-                  <md-list-item href="javascript:void(0)">
-                    <p>Link</p>
-                  </md-list-item>
-                </md-list>
+                    <md-list-item href="javascript:void(0)">
+                      <p>Link</p>
+                    </md-list-item>
+                  </md-list>
+                </div>
+                <div class="md-toolbar-section-end">
+                  <md-button
+                    class="md-just-icon md-simple md-white md-toolbar-toggle"
+                  >
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </md-button>
 
-              </div>
-              <div class="md-toolbar-section-end">
-                <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </md-button>
-
-
-                <div class="md-collapse">
-                  <div class="md-autocomplete">
-                    <md-autocomplete class="search has-white" v-model="selectedEmployee" :md-options="employees" :md-open-on-focus="false">
-                      <label>Search...</label>
-                    </md-autocomplete>
+                  <div class="md-collapse">
+                    <div class="md-autocomplete">
+                      <md-autocomplete
+                        class="search has-white"
+                        v-model="selectedEmployee"
+                        :md-options="employees"
+                        :md-open-on-focus="false"
+                      >
+                        <label>Search...</label>
+                      </md-autocomplete>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </md-toolbar>
+            </md-toolbar>
             <md-toolbar class="md-info">
-            <div class="md-toolbar-row">
-              <div class="md-toolbar-section-start">
-                <h3 class="md-title">Info Color</h3>
-              </div>
-              <div class="md-toolbar-section-end">
-                <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </md-button>
+              <div class="md-toolbar-row">
+                <div class="md-toolbar-section-start">
+                  <h3 class="md-title">Info Color</h3>
+                </div>
+                <div class="md-toolbar-section-end">
+                  <md-button
+                    class="md-just-icon md-simple md-white md-toolbar-toggle"
+                  >
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </md-button>
 
+                  <div class="md-collapse">
+                    <md-list>
+                      <md-list-item to="/">
+                        <p>Discover</p>
+                      </md-list-item>
 
-                <div class="md-collapse">
-                  <md-list>
-                    <md-list-item to="/">
-                      <p>Discover</p>
-                    </md-list-item>
+                      <md-list-item href="javascript:void(0)">
+                        <p>Profile</p>
+                      </md-list-item>
 
-                    <md-list-item href="javascript:void(0)">
-                      <p>Profile</p>
-                    </md-list-item>
-
-                    <md-list-item href="javascript:void(0)">
-                      <p>Settings</p>
-                    </md-list-item>
-                  </md-list>
+                      <md-list-item href="javascript:void(0)">
+                        <p>Settings</p>
+                      </md-list-item>
+                    </md-list>
+                  </div>
                 </div>
               </div>
-            </div>
-          </md-toolbar>
+            </md-toolbar>
             <md-toolbar class="md-primary">
-            <div class="md-toolbar-row">
-              <div class="md-toolbar-section-start">
-                <h3 class="md-title">Primary Color</h3>
-              </div>
-              <div class="md-toolbar-section-end">
-                <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </md-button>
+              <div class="md-toolbar-row">
+                <div class="md-toolbar-section-start">
+                  <h3 class="md-title">Primary Color</h3>
+                </div>
+                <div class="md-toolbar-section-end">
+                  <md-button
+                    class="md-just-icon md-simple md-white md-toolbar-toggle"
+                  >
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </md-button>
 
+                  <div class="md-collapse">
+                    <md-list>
+                      <md-list-item to="/">
+                        <md-icon>explore</md-icon>
+                        <p>Discover</p>
+                      </md-list-item>
 
-                <div class="md-collapse">
-                  <md-list>
-                    <md-list-item to="/">
-                      <md-icon>explore</md-icon>
-                      <p>Discover</p>
-                    </md-list-item>
+                      <md-list-item href="javascript:void(0)">
+                        <md-icon>account_circle</md-icon>
+                        <p>Profile</p>
+                      </md-list-item>
 
-                    <md-list-item href="javascript:void(0)">
-                      <md-icon>account_circle</md-icon>
-                      <p>Profile</p>
-                    </md-list-item>
-
-                    <md-list-item href="javascript:void(0)">
-                      <md-icon>settings</md-icon>
-                      <p>Settings</p>
-                    </md-list-item>
-                  </md-list>
+                      <md-list-item href="javascript:void(0)">
+                        <md-icon>settings</md-icon>
+                        <p>Settings</p>
+                      </md-list-item>
+                    </md-list>
+                  </div>
                 </div>
               </div>
-            </div>
-          </md-toolbar>
+            </md-toolbar>
             <md-toolbar class="md-dark">
-            <div class="md-toolbar-row">
-              <div class="md-toolbar-section-start">
-                <h3 class="md-title">Navbar with notification</h3>
-              </div>
-              <div class="md-toolbar-section-end">
-                <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </md-button>
+              <div class="md-toolbar-row">
+                <div class="md-toolbar-section-start">
+                  <h3 class="md-title">Navbar with notification</h3>
+                </div>
+                <div class="md-toolbar-section-end">
+                  <md-button
+                    class="md-just-icon md-simple md-white md-toolbar-toggle"
+                  >
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </md-button>
 
+                  <div class="md-collapse">
+                    <md-list>
+                      <md-list-item href="javascript:void(0)">
+                        <p>Discover</p>
+                      </md-list-item>
 
-                <div class="md-collapse">
-                  <md-list>
-                    <md-list-item href="javascript:void(0)">
-                      <p>Discover</p>
-                    </md-list-item>
+                      <md-list-item href="javascript:void(0)">
+                        <p>Whishlist</p>
+                      </md-list-item>
 
-                    <md-list-item href="javascript:void(0)">
-                      <p>Whishlist</p>
-                    </md-list-item>
+                      <li class="md-list-item">
+                        <a
+                          href="javascript:void(0)"
+                          class="md-list-item-router md-list-item-container md-button-clean"
+                        >
+                          <div class="md-list-item-content">
+                            <md-button class="md-rose md-just-icon md-round"
+                              ><md-icon>email</md-icon></md-button
+                            >
+                          </div>
+                        </a>
+                      </li>
 
-                    <li class="md-list-item">
-                      <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean">
-                        <div class="md-list-item-content">
-                          <md-button class="md-rose md-just-icon md-round"><md-icon>email</md-icon></md-button>
-                        </div>
-                      </a>
-                    </li>
-
-                    <li class="md-list-item">
-                      <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
-                        <div class="md-list-item-content">
-                          <drop-down direction="down" class="profile-photo">
-                            <div class="profile-photo-small" slot="title" data-toggle="dropdown">
-                              <img :src="img" alt="Circle Image">
-                            </div>
-                            <ul class="dropdown-menu dropdown-menu-right">
-                              <li class="dropdown-header">Dropdown header</li>
-                              <li><a href="#pablo" class="dropdown-item">Me</a></li>
-                              <li> <a href="#pablo" class="dropdown-item">Settings and other stuff</a></li>
-                              <li><a href="#pablo" class="dropdown-item">Sign Out</a></li>
-                            </ul>
-                          </drop-down>
-                        </div>
-                      </a>
-                    </li>
-                  </md-list>
+                      <li class="md-list-item">
+                        <a
+                          href="javascript:void(0)"
+                          class="md-list-item-router md-list-item-container md-button-clean dropdown"
+                        >
+                          <div class="md-list-item-content">
+                            <drop-down direction="down" class="profile-photo">
+                              <div
+                                class="profile-photo-small"
+                                slot="title"
+                                data-toggle="dropdown"
+                              >
+                                <img :src="img" alt="Circle Image" />
+                              </div>
+                              <ul class="dropdown-menu dropdown-menu-right">
+                                <li class="dropdown-header">Dropdown header</li>
+                                <li>
+                                  <a href="#pablo" class="dropdown-item">Me</a>
+                                </li>
+                                <li>
+                                  <a href="#pablo" class="dropdown-item"
+                                    >Settings and other stuff</a
+                                  >
+                                </li>
+                                <li>
+                                  <a href="#pablo" class="dropdown-item"
+                                    >Sign Out</a
+                                  >
+                                </li>
+                              </ul>
+                            </drop-down>
+                          </div>
+                        </a>
+                      </li>
+                    </md-list>
+                  </div>
                 </div>
               </div>
-            </div>
-          </md-toolbar>
+            </md-toolbar>
             <md-toolbar class="md-white">
-            <div class="md-toolbar-row">
-              <div class="md-toolbar-section-start">
-                <h3 class="md-title">Navbar with profile</h3>
-              </div>
-              <div class="md-toolbar-section-end">
-                <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </md-button>
+              <div class="md-toolbar-row">
+                <div class="md-toolbar-section-start">
+                  <h3 class="md-title">Navbar with profile</h3>
+                </div>
+                <div class="md-toolbar-section-end">
+                  <md-button
+                    class="md-just-icon md-simple md-white md-toolbar-toggle"
+                  >
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </md-button>
 
+                  <div class="md-collapse">
+                    <md-list>
+                      <md-list-item href="javascript:void(0)">
+                        <p>Discover</p>
+                      </md-list-item>
 
-                <div class="md-collapse">
-                  <md-list>
-                    <md-list-item href="javascript:void(0)">
-                      <p>Discover</p>
-                    </md-list-item>
+                      <md-list-item href="javascript:void(0)">
+                        <p>Whishlist</p>
+                      </md-list-item>
 
-                    <md-list-item href="javascript:void(0)">
-                      <p>Whishlist</p>
-                    </md-list-item>
-
-                    <li class="md-list-item">
-                      <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean">
-                        <div class="md-list-item-content">
-                          <md-button class="md-rose md-round">Register</md-button>
-                        </div>
-                      </a>
-                    </li>
-                  </md-list>
+                      <li class="md-list-item">
+                        <a
+                          href="javascript:void(0)"
+                          class="md-list-item-router md-list-item-container md-button-clean"
+                        >
+                          <div class="md-list-item-content">
+                            <md-button class="md-rose md-round"
+                              >Register</md-button
+                            >
+                          </div>
+                        </a>
+                      </li>
+                    </md-list>
+                  </div>
                 </div>
               </div>
-            </div>
-          </md-toolbar>
+            </md-toolbar>
             <md-toolbar class="md-transparent">
-            <div class="md-toolbar-row">
-              <div class="md-toolbar-section-start">
-                <h3 class="md-title">Transparent</h3>
-              </div>
-              <div class="md-toolbar-section-end">
-                <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </md-button>
+              <div class="md-toolbar-row">
+                <div class="md-toolbar-section-start">
+                  <h3 class="md-title">Transparent</h3>
+                </div>
+                <div class="md-toolbar-section-end">
+                  <md-button
+                    class="md-just-icon md-simple md-white md-toolbar-toggle"
+                  >
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </md-button>
 
+                  <div class="md-collapse">
+                    <md-list>
+                      <md-list-item href="javascript:void(0)">
+                        <i class="fab fa-facebook-square"></i>
+                        <p>Facebook</p>
+                      </md-list-item>
 
-                <div class="md-collapse">
-                  <md-list>
-                    <md-list-item href="javascript:void(0)">
-                      <i class="fab fa-facebook-square"></i>
-                      <p>Facebook</p>
-                    </md-list-item>
+                      <md-list-item href="javascript:void(0)">
+                        <i class="fab fa-twitter"></i>
+                        <p>Twitter</p>
+                      </md-list-item>
 
-                    <md-list-item href="javascript:void(0)">
-                      <i class="fab fa-twitter"></i>
-                      <p>Twitter</p>
-                    </md-list-item>
-
-                    <md-list-item href="javascript:void(0)">
-                      <i class="fab fa-instagram"></i>
-                      <p>Instagram</p>
-                    </md-list-item>
-
-                  </md-list>
+                      <md-list-item href="javascript:void(0)">
+                        <i class="fab fa-instagram"></i>
+                        <p>Instagram</p>
+                      </md-list-item>
+                    </md-list>
+                  </div>
                 </div>
               </div>
-            </div>
-          </md-toolbar>
+            </md-toolbar>
           </div>
         </div>
       </div>
@@ -269,5 +305,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/views/components/NotificationsSection.vue b/src/views/components/NotificationsSection.vue
index 64e3af9..909aa81 100644
--- a/src/views/components/NotificationsSection.vue
+++ b/src/views/components/NotificationsSection.vue
@@ -3,47 +3,71 @@
     <div id="notifications">
       <div class="alert alert-info">
         <div class="container">
-          <button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-info')">
+          <button
+            type="button"
+            aria-hidden="true"
+            class="close"
+            @click="event => removeNotify(event, 'alert-info')"
+          >
             <md-icon>clear</md-icon>
           </button>
           <div class="alert-icon">
             <md-icon>info_outline</md-icon>
           </div>
-          <b> INFO ALERT </b> : You've got some friends nearby, stop looking at your phone and find them...
+          <b> INFO ALERT </b> : You've got some friends nearby, stop looking at
+          your phone and find them...
         </div>
       </div>
       <div class="alert alert-success">
         <div class="container">
-          <button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-success')">
+          <button
+            type="button"
+            aria-hidden="true"
+            class="close"
+            @click="event => removeNotify(event, 'alert-success')"
+          >
             <md-icon>clear</md-icon>
           </button>
           <div class="alert-icon">
             <md-icon>check</md-icon>
           </div>
 
-          <b> SUCCESS ALERT </b> : Yuhuuu! You've got your $11.99 album from The Weeknd
+          <b> SUCCESS ALERT </b> : Yuhuuu! You've got your $11.99 album from The
+          Weeknd
         </div>
       </div>
       <div class="alert alert-warning">
         <div class="container">
-          <button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-warning')">
+          <button
+            type="button"
+            aria-hidden="true"
+            class="close"
+            @click="event => removeNotify(event, 'alert-warning')"
+          >
             <md-icon>clear</md-icon>
           </button>
           <div class="alert-icon">
             <md-icon>warning</md-icon>
           </div>
-          <b> WARNING ALERT </b> : Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
+          <b> WARNING ALERT </b> : Hey, it looks like you still have the
+          "copyright © 2015" in your footer. Please update it!
         </div>
       </div>
       <div class="alert alert-danger">
         <div class="container">
-          <button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-danger')">
+          <button
+            type="button"
+            aria-hidden="true"
+            class="close"
+            @click="event => removeNotify(event, 'alert-danger')"
+          >
             <md-icon>clear</md-icon>
           </button>
           <div class="alert-icon">
             <md-icon>info_outline</md-icon>
           </div>
-          <b> ERROR ALERT </b> : Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
+          <b> ERROR ALERT </b> : Damn man! You screwed up the server this time.
+          You should find a good excuse for your Boss...
         </div>
       </div>
     </div>
@@ -64,5 +88,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/views/components/SmallNavigationSection.vue b/src/views/components/SmallNavigationSection.vue
index 719c593..f042f1e 100644
--- a/src/views/components/SmallNavigationSection.vue
+++ b/src/views/components/SmallNavigationSection.vue
@@ -7,98 +7,62 @@
             <h3>Menu</h3>
           </div>
           <md-toolbar class="md-primary">
-          <div class="md-toolbar-row">
-            <div class="md-toolbar-section-start">
-              <h3 class="md-title">Menu</h3>
-              <md-list>
-                <md-list-item to="/">
-                  <p>Link</p>
-                </md-list-item>
-
-                <md-list-item href="javascript:void(0)">
-                  <p>Link</p>
-                </md-list-item>
-
-                <li class="md-list-item">
-                  <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
-                    <div class="md-list-item-content">
-                      <drop-down direction="down">
-                        <md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
-                          <p>Dropdown</p>
-                        </md-button>
-                        <ul class="dropdown-menu" :class="{'dropdown-menu-right': responsive}">
-                          <li class="dropdown-header">Dropdown header</li>
-                          <li><a href="#pablo" class="dropdown-item">Action</a></li>
-                          <li> <a href="#pablo" class="dropdown-item">Another action</a></li>
-                          <li><a href="#pablo" class="dropdown-item">Something else here</a></li>
-                          <li class="dropdown-divider"></li>
-                          <li><a href="#pablo" class="dropdown-item">Separated link</a></li>
-                          <li class="dropdown-divider"></li>
-                          <li><a href="#pablo" class="dropdown-item">One more separated link</a></li>
-                        </ul>
-                      </drop-down>
-                    </div>
-                  </a>
-                </li>
-              </md-list>
-            </div>
-            <div class="md-toolbar-section-end">
-              <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-              </md-button>
-
-              <div class="md-collapse">
-
-              </div>
-            </div>
-          </div>
-        </md-toolbar>
-        </div>
-        <div class="md-layout-item md-size-50 md-small-size-100">
-          <div class="title">
-            <h3>Menu with Icons</h3>
-          </div>
-          <md-toolbar class="md-info">
-          <div class="md-toolbar-row">
-            <div class="md-toolbar-section-start">
-              <h3 class="md-title">Icons</h3>
-
-            </div>
-            <div class="md-toolbar-section-end">
-              <md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-              </md-button>
-
-              <div class="md-collapse">
+            <div class="md-toolbar-row">
+              <div class="md-toolbar-section-start">
+                <h3 class="md-title">Menu</h3>
                 <md-list>
-                  <md-list-item href="javascript:void(0)">
-                    <md-icon>email</md-icon>
+                  <md-list-item to="/">
+                    <p>Link</p>
                   </md-list-item>
 
                   <md-list-item href="javascript:void(0)">
-                    <md-icon>face</md-icon>
+                    <p>Link</p>
                   </md-list-item>
 
                   <li class="md-list-item">
-                    <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
+                    <a
+                      href="javascript:void(0)"
+                      class="md-list-item-router md-list-item-container md-button-clean dropdown"
+                    >
                       <div class="md-list-item-content">
                         <drop-down direction="down">
-                          <md-button slot="title" class="md-button md-button-link md-white md-simple md-just-icon" data-toggle="dropdown">
-                            <md-icon>settings</md-icon>
+                          <md-button
+                            slot="title"
+                            class="md-button md-button-link md-white md-simple dropdown-toggle"
+                            data-toggle="dropdown"
+                          >
+                            <p>Dropdown</p>
                           </md-button>
-                          <ul class="dropdown-menu dropdown-menu-right">
+                          <ul
+                            class="dropdown-menu"
+                            :class="{ 'dropdown-menu-right': responsive }"
+                          >
                             <li class="dropdown-header">Dropdown header</li>
-                            <li><a href="#pablo" class="dropdown-item">Action</a></li>
-                            <li> <a href="#pablo" class="dropdown-item">Another action</a></li>
-                            <li><a href="#pablo" class="dropdown-item">Something else here</a></li>
+                            <li>
+                              <a href="#pablo" class="dropdown-item">Action</a>
+                            </li>
+                            <li>
+                              <a href="#pablo" class="dropdown-item"
+                                >Another action</a
+                              >
+                            </li>
+                            <li>
+                              <a href="#pablo" class="dropdown-item"
+                                >Something else here</a
+                              >
+                            </li>
                             <li class="dropdown-divider"></li>
-                            <li><a href="#pablo" class="dropdown-item">Separated link</a></li>
+                            <li>
+                              <a href="#pablo" class="dropdown-item"
+                                >Separated link</a
+                              >
+                            </li>
                             <li class="dropdown-divider"></li>
-                            <li><a href="#pablo" class="dropdown-item">One more separated link</a></li>
+                            <li>
+                              <a href="#pablo" class="dropdown-item"
+                                >One more separated link</a
+                              >
+                            </li>
                           </ul>
                         </drop-down>
                       </div>
@@ -106,9 +70,101 @@
                   </li>
                 </md-list>
               </div>
+              <div class="md-toolbar-section-end">
+                <md-button
+                  class="md-just-icon md-simple md-white md-toolbar-toggle"
+                >
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </md-button>
+
+                <div class="md-collapse"></div>
+              </div>
             </div>
+          </md-toolbar>
+        </div>
+        <div class="md-layout-item md-size-50 md-small-size-100">
+          <div class="title">
+            <h3>Menu with Icons</h3>
           </div>
-        </md-toolbar>
+          <md-toolbar class="md-info">
+            <div class="md-toolbar-row">
+              <div class="md-toolbar-section-start">
+                <h3 class="md-title">Icons</h3>
+              </div>
+              <div class="md-toolbar-section-end">
+                <md-button
+                  class="md-just-icon md-simple md-white md-toolbar-toggle"
+                >
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </md-button>
+
+                <div class="md-collapse">
+                  <md-list>
+                    <md-list-item href="javascript:void(0)">
+                      <md-icon>email</md-icon>
+                    </md-list-item>
+
+                    <md-list-item href="javascript:void(0)">
+                      <md-icon>face</md-icon>
+                    </md-list-item>
+
+                    <li class="md-list-item">
+                      <a
+                        href="javascript:void(0)"
+                        class="md-list-item-router md-list-item-container md-button-clean dropdown"
+                      >
+                        <div class="md-list-item-content">
+                          <drop-down direction="down">
+                            <md-button
+                              slot="title"
+                              class="md-button md-button-link md-white md-simple md-just-icon"
+                              data-toggle="dropdown"
+                            >
+                              <md-icon>settings</md-icon>
+                            </md-button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                              <li class="dropdown-header">Dropdown header</li>
+                              <li>
+                                <a href="#pablo" class="dropdown-item"
+                                  >Action</a
+                                >
+                              </li>
+                              <li>
+                                <a href="#pablo" class="dropdown-item"
+                                  >Another action</a
+                                >
+                              </li>
+                              <li>
+                                <a href="#pablo" class="dropdown-item"
+                                  >Something else here</a
+                                >
+                              </li>
+                              <li class="dropdown-divider"></li>
+                              <li>
+                                <a href="#pablo" class="dropdown-item"
+                                  >Separated link</a
+                                >
+                              </li>
+                              <li class="dropdown-divider"></li>
+                              <li>
+                                <a href="#pablo" class="dropdown-item"
+                                  >One more separated link</a
+                                >
+                              </li>
+                            </ul>
+                          </drop-down>
+                        </div>
+                      </a>
+                    </li>
+                  </md-list>
+                </div>
+              </div>
+            </div>
+          </md-toolbar>
         </div>
       </div>
       <div class="title">
@@ -145,5 +201,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/views/components/TabsSection.vue b/src/views/components/TabsSection.vue
index 3e9cd4f..1341f7a 100644
--- a/src/views/components/TabsSection.vue
+++ b/src/views/components/TabsSection.vue
@@ -8,17 +8,40 @@
           <nav-tabs-card no-label>
             <template slot="content">
               <md-tabs md-sync-route class="md-primary" md-alignment="left">
-
                 <md-tab id="tab-home" md-label="Profile" md-icon="face">
-                  <p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+                  <p>
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers. I understand
+                    culture. I am the nucleus. I think that’s a responsibility
+                    that I have, to push possibilities, to show people, this is
+                    the level that things could be at. I think that’s a
+                    responsibility that I have, to push possibilities, to show
+                    people, this is the level that things could be at.
+                  </p>
                 </md-tab>
 
                 <md-tab id="tab-pages" md-label="Messages" md-icon="chat">
-                  <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+                  <p>
+                    I think that’s a responsibility that I have, to push
+                    possibilities, to show people, this is the level that things
+                    could be at. I will be the leader of a company that ends up
+                    being worth billions of dollars, because I got the answers.
+                    I understand culture. I am the nucleus. I think that’s a
+                    responsibility that I have, to push possibilities, to show
+                    people, this is the level that things could be at.
+                  </p>
                 </md-tab>
 
                 <md-tab id="tab-posts" md-label="Settings" md-icon="build">
-                  <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. 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.</p>
+                  <p>
+                    I think that’s a responsibility that I have, to push
+                    possibilities, to show people, this is the level that things
+                    could be at. So when you get something that has the name
+                    Kanye West on it, it’s supposed to be pushing the furthest
+                    possibilities. 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.
+                  </p>
                 </md-tab>
               </md-tabs>
             </template>
@@ -29,17 +52,40 @@
           <nav-tabs-card no-label tabs-plain>
             <template slot="content">
               <md-tabs md-sync-route class="md-danger" md-alignment="left">
-
                 <md-tab id="tab-home" md-label="Home">
-                  <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. 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.</p>
+                  <p>
+                    I think that’s a responsibility that I have, to push
+                    possibilities, to show people, this is the level that things
+                    could be at. So when you get something that has the name
+                    Kanye West on it, it’s supposed to be pushing the furthest
+                    possibilities. 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.
+                  </p>
                 </md-tab>
 
                 <md-tab id="tab-pages" md-label="Updates">
-                  <p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+                  <p>
+                    I will be the leader of a company that ends up being worth
+                    billions of dollars, because I got the answers. I understand
+                    culture. I am the nucleus. I think that’s a responsibility
+                    that I have, to push possibilities, to show people, this is
+                    the level that things could be at. I think that’s a
+                    responsibility that I have, to push possibilities, to show
+                    people, this is the level that things could be at.
+                  </p>
                 </md-tab>
 
                 <md-tab id="tab-posts" md-label="History">
-                  <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+                  <p>
+                    I think that’s a responsibility that I have, to push
+                    possibilities, to show people, this is the level that things
+                    could be at. I will be the leader of a company that ends up
+                    being worth billions of dollars, because I got the answers.
+                    I understand culture. I am the nucleus. I think that’s a
+                    responsibility that I have, to push possibilities, to show
+                    people, this is the level that things could be at.
+                  </p>
                 </md-tab>
               </md-tabs>
             </template>
@@ -60,5 +106,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/src/views/components/TypographyImagesSection.vue b/src/views/components/TypographyImagesSection.vue
index b89de9b..4b4304d 100644
--- a/src/views/components/TypographyImagesSection.vue
+++ b/src/views/components/TypographyImagesSection.vue
@@ -7,88 +7,132 @@
       <div class="md-layout">
         <div class="md-layout-item">
           <div class="tim-typo">
-              <h1><span class="tim-note">Header 1</span>The Life of Material Kit </h1>
+            <h1>
+              <span class="tim-note">Header 1</span>The Life of Material Kit
+            </h1>
           </div>
           <div class="tim-typo">
-              <h2><span class="tim-note">Header 2</span>The Life of Material Kit</h2>
+            <h2>
+              <span class="tim-note">Header 2</span>The Life of Material Kit
+            </h2>
           </div>
           <div class="tim-typo">
-              <h3><span class="tim-note">Header 3</span>The Life of Material Kit</h3>
+            <h3>
+              <span class="tim-note">Header 3</span>The Life of Material Kit
+            </h3>
           </div>
           <div class="tim-typo">
-              <h4><span class="tim-note">Header 4</span>The Life of Material Kit</h4>
+            <h4>
+              <span class="tim-note">Header 4</span>The Life of Material Kit
+            </h4>
           </div>
           <div class="tim-typo">
-              <h5><span class="tim-note">Header 5</span>The Life of Material Kit</h5>
+            <h5>
+              <span class="tim-note">Header 5</span>The Life of Material Kit
+            </h5>
           </div>
           <div class="tim-typo">
-              <h6><span class="tim-note">Header 6</span>The Life of Material Kit</h6>
+            <h6>
+              <span class="tim-note">Header 6</span>The Life of Material Kit
+            </h6>
           </div>
           <div class="tim-typo">
-              <h1 class="title"><span class="tim-note">Header 1 Title</span>The Life of Material Kit </h1>
+            <h1 class="title">
+              <span class="tim-note">Header 1 Title</span>The Life of Material
+              Kit
+            </h1>
           </div>
           <div class="tim-typo">
-              <h2 class="title"><span class="tim-note">Header 2 Title</span>The Life of Material Kit</h2>
+            <h2 class="title">
+              <span class="tim-note">Header 2 Title</span>The Life of Material
+              Kit
+            </h2>
           </div>
           <div class="tim-typo">
-              <h3 class="title"><span class="tim-note">Header 3 Title</span>The Life of Material Kit</h3>
+            <h3 class="title">
+              <span class="tim-note">Header 3 Title</span>The Life of Material
+              Kit
+            </h3>
           </div>
           <div class="tim-typo">
-              <h4 class="title"><span class="tim-note">Header 4 Title</span>The Life of Material Kit</h4>
+            <h4 class="title">
+              <span class="tim-note">Header 4 Title</span>The Life of Material
+              Kit
+            </h4>
           </div>
           <div class="tim-typo">
-              <p><span class="tim-note">Paragraph</span>
-                  I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that&#x2019;s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
+            <p>
+              <span class="tim-note">Paragraph</span> I will be the leader of a
+              company that ends up being worth billions of dollars, because I
+              got the answers. I understand culture. I am the nucleus. I think
+              that&#x2019;s a responsibility that I have, to push possibilities,
+              to show people, this is the level that things could be at.
+            </p>
           </div>
           <div class="tim-typo">
-              <span class="tim-note">Quote</span>
-              <div class="blockquote undefined">
-               <p>
-               I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that&#x2019;s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
-               </p>
-               <small>
-               Kanye West, Musician
-               </small>
-              </div>
+            <span class="tim-note">Quote</span>
+            <div class="blockquote undefined">
+              <p>
+                I will be the leader of a company that ends up being worth
+                billions of dollars, because I got the answers. I understand
+                culture. I am the nucleus. I think that&#x2019;s a
+                responsibility that I have, to push possibilities, to show
+                people, this is the level that things could be at.
+              </p>
+              <small>
+                Kanye West, Musician
+              </small>
+            </div>
           </div>
 
           <div class="tim-typo">
-              <span class="tim-note">Muted Text</span>
-              <p class="text-muted">
-              I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
-              </p>
+            <span class="tim-note">Muted Text</span>
+            <p class="text-muted">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
           </div>
           <div class="tim-typo">
-              <span class="tim-note">Primary Text</span>
-              <p class="text-primary">
-              I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
+            <span class="tim-note">Primary Text</span>
+            <p class="text-primary">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
           </div>
           <div class="tim-typo">
-              <span class="tim-note">Info Text</span>
-              <p class="text-info">
-              I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
+            <span class="tim-note">Info Text</span>
+            <p class="text-info">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
           </div>
           <div class="tim-typo">
-              <span class="tim-note">Success Text</span>
-              <p class="text-success">
-              I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
+            <span class="tim-note">Success Text</span>
+            <p class="text-success">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
           </div>
           <div class="tim-typo">
-              <span class="tim-note">Warning Text</span>
-              <p class="text-warning">
-              I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
-              </p>
+            <span class="tim-note">Warning Text</span>
+            <p class="text-warning">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
           </div>
           <div class="tim-typo">
-              <span class="tim-note">Danger Text</span>
-              <p class="text-danger">
-              I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
+            <span class="tim-note">Danger Text</span>
+            <p class="text-danger">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
           </div>
           <div class="tim-typo">
-              <h2><span class="tim-note">Small Tag</span>
-                  Header with small subtitle <br>
-                  <small>Use &quot;small&quot; tag for the headers</small>
-              </h2>
+            <h2>
+              <span class="tim-note">Small Tag</span> Header with small subtitle
+              <br />
+              <small>Use &quot;small&quot; tag for the headers</small>
+            </h2>
           </div>
         </div>
       </div>
@@ -100,21 +144,53 @@
         <h2>Images</h2>
       </div>
       <div class="md-layout">
-        <div class="md-layout-item md-size-20 md-xsmall-size-100" :class="{'text-center': responsive}">
+        <div
+          class="md-layout-item md-size-20 md-xsmall-size-100"
+          :class="{ 'text-center': responsive }"
+        >
           <h4>Rounded Image</h4>
-          <img :src="image" alt="Rounded Image" class="rounded" :class="{'responsive-image': responsive}">
+          <img
+            :src="image"
+            alt="Rounded Image"
+            class="rounded"
+            :class="{ 'responsive-image': responsive }"
+          />
         </div>
-        <div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
+        <div
+          class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto"
+          :class="{ 'text-center': responsive }"
+        >
           <h4>Circle Image</h4>
-          <img :src="image" alt="Circle Image" class="rounded-circle" :class="{'responsive-image': responsive}">
+          <img
+            :src="image"
+            alt="Circle Image"
+            class="rounded-circle"
+            :class="{ 'responsive-image': responsive }"
+          />
         </div>
-        <div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
+        <div
+          class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto"
+          :class="{ 'text-center': responsive }"
+        >
           <h4>Rounded Raised</h4>
-          <img :src="image" alt="Raised Image" class="img-raised rounded" :class="{'responsive-image': responsive}">
+          <img
+            :src="image"
+            alt="Raised Image"
+            class="img-raised rounded"
+            :class="{ 'responsive-image': responsive }"
+          />
         </div>
-        <div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
+        <div
+          class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto"
+          :class="{ 'text-center': responsive }"
+        >
           <h4>Circle Raised</h4>
-          <img :src="image" alt="Thumbnail Image" class="img-raised rounded-circle" :class="{'responsive-image': responsive}">
+          <img
+            :src="image"
+            alt="Thumbnail Image"
+            class="img-raised rounded-circle"
+            :class="{ 'responsive-image': responsive }"
+          />
         </div>
       </div>
     </div>
@@ -148,5 +224,4 @@ export default {
 };
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>