diff --git a/src/assets/img/leaf1.png b/src/assets/img/leaf1.png
new file mode 100644
index 0000000..4ca5e87
Binary files /dev/null and b/src/assets/img/leaf1.png differ
diff --git a/src/assets/img/leaf2.png b/src/assets/img/leaf2.png
new file mode 100644
index 0000000..5343d2a
Binary files /dev/null and b/src/assets/img/leaf2.png differ
diff --git a/src/assets/img/leaf3.png b/src/assets/img/leaf3.png
new file mode 100644
index 0000000..125d4e9
Binary files /dev/null and b/src/assets/img/leaf3.png differ
diff --git a/src/assets/img/leaf5.png b/src/assets/img/leaf5.png
new file mode 100644
index 0000000..6959978
Binary files /dev/null and b/src/assets/img/leaf5.png differ
diff --git a/src/assets/img/vue-mk-header.jpg b/src/assets/img/vue-mk-header.jpg
new file mode 100644
index 0000000..9e3646c
Binary files /dev/null and b/src/assets/img/vue-mk-header.jpg differ
diff --git a/src/assets/scss/material-kit/_example-pages.scss b/src/assets/scss/material-kit/_example-pages.scss
index b7aad24..4af5798 100644
--- a/src/assets/scss/material-kit/_example-pages.scss
+++ b/src/assets/scss/material-kit/_example-pages.scss
@@ -13,20 +13,25 @@
         text-align: center;
 
         h1{
-            font-size: 4.2rem;
+            font-size: 6rem;
             font-weight: 600;
             display: inline-block;
             position: relative;
             line-height: 1.15em;
+            text-shadow: 0px 15px 102.86px rgba(0, 0, 0, 0.7), 0px 15px 40.02px rgba(0, 0, 0, 0.21);
         }
         h3{
-            font-size: 1.313rem;
-            max-width: 500px;
-            margin: 10px auto 0;
-            line-height: 1.4em;
+          font-size: 2.23rem;
+          margin: 10px auto 0;
+          line-height: 0;
+          font-weight: 400;
+          text-shadow: 0px 15px 102.86px rgba(0, 0, 0, 0.7), 0px 15px 40.02px rgba(0, 0, 0, 0.21);
         }
     }
 
+    // 0px 15px 102.86px 36.14px rgba(0, 0, 0, 0.46);
+    // box-shadow: 0px 15px 40px 5.98px rgba(0, 0, 0, 0.21);
+
     h4.description{
         font-size: 1.5em;
     }
@@ -179,4 +184,14 @@
     }
   }
 
+  .page-header {
+    height: 100%;
+    min-height: -webkit-fill-available;
+
+    > .container {
+      padding-top: 100px;
+      padding-bottom: 150px;
+    }
+  }
+
 }
diff --git a/src/assets/scss/material-kit/_headers.scss b/src/assets/scss/material-kit/_headers.scss
index 735a1d0..ab8ab4d 100644
--- a/src/assets/scss/material-kit/_headers.scss
+++ b/src/assets/scss/material-kit/_headers.scss
@@ -52,7 +52,7 @@
     }
 
     &::before{
-    background: rgba(0,0,0,.5);
+    background: rgba(0,0,0,.2);
     }
 
     .md-layout{
diff --git a/src/assets/scss/material-kit/_inputs.scss b/src/assets/scss/material-kit/_inputs.scss
index f6e2476..02f181b 100644
--- a/src/assets/scss/material-kit/_inputs.scss
+++ b/src/assets/scss/material-kit/_inputs.scss
@@ -280,3 +280,7 @@
     border-radius: 4px;
   }
 }
+
+textarea {
+  resize: none;
+}
diff --git a/src/assets/scss/material-kit/_responsive.scss b/src/assets/scss/material-kit/_responsive.scss
index fe4a3e1..ca8d70f 100644
--- a/src/assets/scss/material-kit/_responsive.scss
+++ b/src/assets/scss/material-kit/_responsive.scss
@@ -324,7 +324,7 @@
         opacity: 0;
         top: 0;
         left: auto;
-        right: 260px;
+        right: 230px;
         content: "";
         z-index: 9999;
         overflow-x: hidden;
diff --git a/src/layout/MainNavbar.vue b/src/layout/MainNavbar.vue
index dfe1c84..f425246 100644
--- a/src/layout/MainNavbar.vue
+++ b/src/layout/MainNavbar.vue
@@ -163,9 +163,25 @@ export default {
     }
   },
   methods: {
+    bodyClick() {
+      let bodyClick = document.getElementById("bodyClick");
+
+      if (bodyClick === null) {
+        let body = document.querySelector("body");
+        let elem = document.createElement("div");
+        elem.setAttribute("id", "bodyClick");
+        body.appendChild(elem);
+
+        let bodyClick = document.getElementById("bodyClick");
+        bodyClick.addEventListener("click", this.toggleNavbarMobile);
+      } else {
+        bodyClick.remove();
+      }
+    },
     toggleNavbarMobile() {
       this.NavbarStore.showNavbar = !this.NavbarStore.showNavbar;
-      this.toggledClass = this.NavbarStore.showNavbar;
+      this.toggledClass = !this.toggledClass;
+      this.bodyClick();
     },
     handleScroll() {
       let scrollValue =
diff --git a/src/views/Index.vue b/src/views/Index.vue
index bb3ea2f..28a12a8 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,12 +1,18 @@
 <template>
   <div class="wrapper">
-    <parallax class="page-header header-filter clear-filter purple-filter" :style="headerStyle">
+    <parallax class="page-header header-filter" :style="headerStyle">
       <div class="md-layout">
         <div class="md-layout-item">
-          <div class="brand">
-            <h1>Vue Material Kit.</h1>
-            <h3>Badass VueJs Kit based on Material Design.</h3>
+          <div class="image-wrapper">
+            <!-- <img :src="leaf5" alt="" class="leaf5"> -->
+            <img :src="leaf2" alt="" class="leaf2">
+            <img :src="leaf1" alt="" class="leaf1">
+            <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>
@@ -56,7 +62,7 @@
       <div class="section">
         <div class="container text-center">
           <div class="md-layout">
-              <div class="md-layout-item md-size-66 ml-auto mr-auto text-center">
+              <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>
@@ -200,7 +206,19 @@ export default {
   props: {
     image: {
       type: String,
-      default: require("@/assets/img/bg2.jpg")
+      default: require("@/assets/img/vue-mk-header.jpg")
+    },
+    leaf5: {
+      type: String,
+      default: require("@/assets/img/leaf5.png")
+    },
+    leaf2: {
+      type: String,
+      default: require("@/assets/img/leaf2.png")
+    },
+    leaf1: {
+      type: String,
+      default: require("@/assets/img/leaf1.png")
     },
     signup: {
       type: String,
@@ -248,4 +266,33 @@ export default {
     display: flex;
   }
 }
+
+.leaf1,
+.leaf5,
+.leaf2 {
+  position: absolute;
+  z-index: 9;
+}
+
+.leaf5 {
+  top: -136px;
+  left: 71px;
+  width: 36%;
+  transform: rotate(-49deg);
+}
+
+.leaf2 {
+  width: 25%;
+  left: 170px;
+  top: -28px;
+  transform: rotate(90deg);
+}
+
+.leaf1 {
+  transform: rotate(0deg);
+  right: auto;
+  top: 25px;
+  width: 15%;
+  left: -11px;
+}
 </style>
diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 7adaf11..ad1e473 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -16,7 +16,7 @@
       <div class="section">
         <div class="container">
           <div class="md-layout">
-            <div class="md-layout-item md-size-66 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>
             </div>
@@ -150,7 +150,7 @@
       <div class="section section-contacts">
         <div class="container">
           <div class="md-layout">
-            <div class="md-layout-item md-size-66 mx-auto">
+            <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>
               <form class="contact-form">
diff --git a/src/views/components/SmallNavigationSection.vue b/src/views/components/SmallNavigationSection.vue
index 6bb3e6f..719c593 100644
--- a/src/views/components/SmallNavigationSection.vue
+++ b/src/views/components/SmallNavigationSection.vue
@@ -63,7 +63,7 @@
           <md-toolbar class="md-info">
           <div class="md-toolbar-row">
             <div class="md-toolbar-section-start">
-              <h3 class="md-title">icons</h3>
+              <h3 class="md-title">Icons</h3>
 
             </div>
             <div class="md-toolbar-section-end">