diff --git a/src/assets/scss/material-kit/_navbars.scss b/src/assets/scss/material-kit/_navbars.scss
index ea56595..1c18dbe 100644
--- a/src/assets/scss/material-kit/_navbars.scss
+++ b/src/assets/scss/material-kit/_navbars.scss
@@ -5,12 +5,6 @@
   border-radius: 3px;
   margin-bottom: 20px;
 
-  .md-toolbar-section-start {
-    .md-list {
-      display: none;
-    }
-  }
-
   &.md-transparent{
     background-color: transparent !important;
     box-shadow: none;
@@ -26,6 +20,13 @@
     }
   }
 
+  .md-toolbar-section-end .md-list {
+    justify-content: flex-end;
+  }
+  .md-toolbar-section-start .md-list {
+    justify-content: flex-start;
+  }
+
   &.md-absolute {
     position: fixed;
     z-index: 1030;
@@ -225,6 +226,7 @@
 
   .md-title {
     height: 50px;
+    min-width: 50px;
     display: flex;
     align-items: center;
     font-size: 18px;
diff --git a/src/assets/scss/material-kit/_responsive.scss b/src/assets/scss/material-kit/_responsive.scss
index a17dda4..fe4a3e1 100644
--- a/src/assets/scss/material-kit/_responsive.scss
+++ b/src/assets/scss/material-kit/_responsive.scss
@@ -20,6 +20,12 @@
         background-color: rgba(0, 0, 0, 0.45);
     }
 
+    .md-toolbar-section-start {
+      .md-list {
+        display: none;
+      }
+    }
+
     .footer .container {
       flex-direction: column;
       text-align: center;
@@ -61,6 +67,10 @@
           flex-flow: column;
         }
 
+        .md-collapse-wrapper {
+          height: calc(100vh - 61px);
+        }
+
         .dropdown-toggle:not(.md-button):after,
         .dropdown-toggle .md-ripple:after,
         .md-list-item .md-button.md-button-link:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple .md-button-content i,
@@ -134,15 +144,16 @@
             display: none;
           }
 
-          &:after {
-            width: calc(100% - 30px);
-            content: "";
-            display: block;
-            height: 1px;
-            margin-left: 15px;
-            background-color: #e5e5e5;
-          }
+        }
 
+        .nav-mobile-section-start .md-list-item:last-child:after,
+        .md-list-item:after {
+          width: calc(100% - 30px);
+          content: "";
+          display: block;
+          height: 1px;
+          margin-left: 15px;
+          background-color: #e5e5e5;
         }
 
         .md-list-item-container {
@@ -161,7 +172,6 @@
             position: relative;
             z-index: 4;
             overflow-y:scroll;
-            height: calc(100vh - 61px);
             width: 100%;
         }
         &::before{
@@ -380,6 +390,11 @@
 
   .md-tabs-navigation {
     flex-direction: column;
+
+    .md-button {
+      max-width: none;
+      margin: 0 !important;
+    }
   }
 
   .modal-wrapper .modal-container {
@@ -411,6 +426,10 @@
       max-width: 960px;
   }
 
+  .md-list.nav-mobile-menu {
+    display: none;
+  }
+
   .hidden-lg {
     display: none !important;
   }
diff --git a/src/layout/MainNavbar.vue b/src/layout/MainNavbar.vue
index d2e646f..dfe1c84 100644
--- a/src/layout/MainNavbar.vue
+++ b/src/layout/MainNavbar.vue
@@ -12,93 +12,98 @@
         </md-button>
 
         <div class="md-collapse">
-          <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">
-                <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">
-                      <i class="material-icons">apps</i>
-                      <p>Components</p>
-                    </md-button>
-                    <ul class="dropdown-menu dropdown-with-icons">
-                      <li>
-                        <a href="/">
-                          <i class="material-icons">layers</i>
-                          <p>All Components</p>
-                        </a>
-                      </li>
-                      <li>
-                        <a href="https://demos.creative-tim.com/vue-material-kit/documentation/" >
-                          <i class="material-icons">content_paste</i>
-                          <p>Documentation</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </drop-down>
-                </div>
-              </a>
-            </li>
+          <div class="md-collapse-wrapper">
+            <mobile-menu nav-mobile-section-start="false">
+              <!-- Here you can add your items from the section-start of your toolbar -->
+            </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">
+                  <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">
+                        <i class="material-icons">apps</i>
+                        <p>Components</p>
+                      </md-button>
+                      <ul class="dropdown-menu dropdown-with-icons">
+                        <li>
+                          <a href="#/">
+                            <i class="material-icons">layers</i>
+                            <p>All Components</p>
+                          </a>
+                        </li>
+                        <li>
+                          <a href="https://demos.creative-tim.com/vue-material-kit/documentation/" >
+                            <i class="material-icons">content_paste</i>
+                            <p>Documentation</p>
+                          </a>
+                        </li>
+                      </ul>
+                    </drop-down>
+                  </div>
+                </a>
+              </li>
 
-            <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="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">
-              <i class="material-icons">cloud_download</i>
-              <p>Download</p>
-            </md-list-item>
+              <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">
-                <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">
-                      <i class="material-icons">view_carousel</i>
-                      <p>Examples</p>
-                    </md-button>
-                    <ul class="dropdown-menu dropdown-with-icons">
-                      <li>
-                        <a href="#/landing">
-                          <i class="material-icons">view_day</i>
-                          <p>Landing Page</p>
-                        </a>
-                      </li>
-                      <li>
-                        <a href="#/login">
-                          <i class="material-icons">fingerprint</i>
-                          <p>Login Page</p>
-                        </a>
-                      </li>
-                      <li>
-                        <a href="#/profile">
-                          <i class="material-icons">account_circle</i>
-                          <p>Profile Page</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </drop-down>
-                </div>
-              </a>
-            </li>
+              <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">
+                  <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">
+                        <i class="material-icons">view_carousel</i>
+                        <p>Examples</p>
+                      </md-button>
+                      <ul class="dropdown-menu dropdown-with-icons">
+                        <li>
+                          <a href="#/landing">
+                            <i class="material-icons">view_day</i>
+                            <p>Landing Page</p>
+                          </a>
+                        </li>
+                        <li>
+                          <a href="#/login">
+                            <i class="material-icons">fingerprint</i>
+                            <p>Login Page</p>
+                          </a>
+                        </li>
+                        <li>
+                          <a href="#/profile">
+                            <i class="material-icons">account_circle</i>
+                            <p>Profile Page</p>
+                          </a>
+                        </li>
+                      </ul>
+                    </drop-down>
+                  </div>
+                </a>
+              </li>
 
-            <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-list-item>
-            <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-list-item>
-            <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-list-item>
-          </md-list>
+              <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-list-item>
+              <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-list-item>
+              <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-list-item>
+            </md-list>
+          </div>
         </div>
       </div>
     </div>
@@ -119,7 +124,11 @@ function resizeThrottler(actualResizeHandler) {
   }
 }
 
+import MobileMenu from "@/layout/MobileMenu";
 export default {
+  components: {
+    MobileMenu
+  },
   props: {
     type: {
       type: String,
diff --git a/src/layout/MobileMenu.vue b/src/layout/MobileMenu.vue
new file mode 100644
index 0000000..c9859a1
--- /dev/null
+++ b/src/layout/MobileMenu.vue
@@ -0,0 +1,17 @@
+<template>
+  <md-list class="nav-mobile-menu nav-mobile-section-start" v-if="navMobileSectionStart === 'true'">
+    <slot></slot>
+  </md-list>
+</template>
+
+<script>
+export default {
+  name: "mobile-menu",
+  props: {
+    navMobileSectionStart: {
+      type: String,
+      default: "false"
+    }
+  }
+};
+</script>
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 93b444a..bb3ea2f 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -5,7 +5,7 @@
         <div class="md-layout-item">
           <div class="brand">
             <h1>Vue Material Kit.</h1>
-            <h3>A Badass VueMaterial.io Kit based on Material Design.</h3>
+            <h3>Badass VueJs Kit based on Material Design.</h3>
           </div>
         </div>
       </div>
@@ -128,11 +128,11 @@
       <div class="section section-download" id="downloadSection">
         <div class="container">
           <div class="md-layout text-center">
-            <div class="md-layout-item md-size-66 mx-auto">
+            <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>
             </div>
-            <div class="md-layout-item md-size-50 md-small-size-66 mx-auto">
+            <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-primary 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-primary md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
             </div>
@@ -140,12 +140,15 @@
     	    <br><br>
 
         	<div class="md-layout text-center">
-        		<div class="md-layout-item md-size-66 mx-auto">
+        		<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://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" target="_blank">Material Kit 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>. 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>
             </div>
-        		<div class="md-layout-item md-size-40 md-small-size-66 mx-auto">
-              <md-button href="https://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon> Upgrade to PRO</md-button>
+        		<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-rose md-lg md-upgrade disabled" 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-vmk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
+              </div>
         		</div>
           </div>
 
@@ -239,4 +242,10 @@ export default {
     margin-left: 5px;
   }
 }
+
+@media all and (min-width: 991px) {
+  .btn-container {
+    display: flex;
+  }
+}
 </style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 00951ea..291a1b7 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -3,7 +3,7 @@
     <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-80 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" to="#facebook" class="md-just-icon md-simple md-white">