diff --git a/docs/app/pages/Home/Home.vue b/docs/app/pages/Home/Home.vue
index e2cb42233..290f8ee1f 100644
--- a/docs/app/pages/Home/Home.vue
+++ b/docs/app/pages/Home/Home.vue
@@ -6,7 +6,7 @@
       <md-icon class="home-icon-indicator" @click.native="scrollDown">keyboard_arrow_down</md-icon>
     </div>
 
-    <!-- <home-ecosystem /> -->
+    <home-ecosystem />
     <home-sponsors />
   </splash-container>
 </template>
@@ -86,3 +86,32 @@
     animation: home-icon-indicator 2s infinite $md-transition-stand-timing;
   }
 </style>
+
+<style lang="scss">
+  @import "~vue-material/components/MdAnimation/variables";
+  @import "~vue-material/components/MdIcon/mixins";
+  @import "~vue-material/components/MdLayout/mixins";
+
+  .page-wrapper {
+    max-width: 1344px;
+    margin: 0 auto;
+    padding: 0 16px;
+  }
+
+  .home-title {
+    max-width: 1312px;
+    margin: 0 auto;
+    color: rgba(#000, .87);
+    position: relative;
+    padding: 16px 0;
+    @include md-layout-medium {
+      padding: 16px;
+    }
+    .md-icon {
+      position: absolute;
+      top: 2px;
+      bottom: 0;
+      left: -48px;
+    }
+  }
+</style>
diff --git a/docs/app/pages/Home/HomeEcosystem.vue b/docs/app/pages/Home/HomeEcosystem.vue
index 05f9a7d15..cd9a43014 100644
--- a/docs/app/pages/Home/HomeEcosystem.vue
+++ b/docs/app/pages/Home/HomeEcosystem.vue
@@ -1,20 +1,65 @@
 <template>
   <md-content md-tag="section" md-theme="default" class="home-ecosystem">
-    <h2 class="home-ecosystem-title md-display-1">{{ $t('pages.home.ecosystem') }}</h2>
-
-    <div class="home-repo-list md-layout-column">
-      <div
-        class="home-repo md-layout-row md-layout-column-xsmall"
-        v-for="(item, index) in 2"
-        :key="index"
-        :class="{ reverse: (index + 1) % 2 === 0 }">
-        <div class="home-repo-content md-layout-column md-flex-55 md-flex-xsmall-100 md-align-start-start">
-          <h3 class="home-repo-title md-headline">Official Boilerplate</h3>
-          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam qui enim harum excepturi nemo itaque quidem dolore unde asperiores, recusandae reiciendis perferendis laboriosam cum obcaecati quos assumenda libero labore! Expedita.</p>
-          <md-button class="md-primary md-raised md-button-spaced">{{ $t('pages.home.viewProject') }}</md-button>
+    <h2 class="home-title md-headline">
+      <md-icon>settings</md-icon>
+      {{ $t('pages.home.ecosystem') }}
+    </h2>
+    <div class="page-wrapper">
+      <div class="md-layout md-gutter">
+        <div class="md-layout-item md-small-size-100">
+          <md-card md-with-hover class="md-elevation-2 md-primary full-height" md-theme="blue-card" @click.native="openLink('https://github.com/vuematerial/webpack')">
+            <md-ripple>
+              <md-card-content>
+                <div class="content">
+                  <div class="md-title">Advanced Webpack SPA</div>
+                  <p>A full-featured Webpack + Vue Material setup with hot-reload, lint-on-save, unit testing, scss preprocessing & css extraction.</p>
+                </div>
+                <div class="image">
+                  <img src="/assets/boilerplates/webpack-advanced.png" alt="webpack">
+                </div>
+              </md-card-content>
+            </md-ripple>
+          </md-card>
+        </div>
+        <div class="md-layout-item md-small-size-100">
+          <md-card md-with-hover class="md-elevation-2 md-primary full-height" md-theme="green-card" @click.native="openLink('https://github.com/vuematerial/nuxtjs')">
+            <md-ripple>
+              <md-card-content>
+                <div class="content">
+                  <div class="md-title">Nuxt.js Universal</div>
+                  <p>Nuxt.js is a framework for creating Universal Vue.js Applications. All the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.</p>
+                </div>
+                <div class="image">
+                  <img src="/assets/boilerplates/nuxt.png" alt="nuxtjs">
+                </div>
+              </md-card-content>
+            </md-ripple>
+          </md-card>
+        </div>
+        <div class="md-layout-item md-small-size-100 md-size-30">
+          <md-card md-with-hover class="md-elevation-2 flying" @click.native="$router.push('/getting-started')">
+            <md-ripple>
+              <md-card-content>
+                <div class="content">
+                  <div class="md-title">Single HTML file</div>
+                  <p>The simplest possible Vue Material setup in a single HTML file. But without SCSS or ES7.</p>
+                </div>
+                <img src="/assets/boilerplates/html.png" alt="html">
+              </md-card-content>
+            </md-ripple>
+          </md-card>
+          <md-card md-with-hover class="md-elevation-2 flying" @click.native="openLink('https://codepen.io/vue-material/pen/RxGmyb')">
+            <md-ripple>
+              <md-card-content>
+                <div class="content">
+                  <div class="md-title">Codepen for prototyping</div>
+                  <p>For fast prototyping, examples or issues reports is best to use codepen.</p>
+                </div>
+                <img src="/assets/boilerplates/codepen.svg" alt="codepen">
+              </md-card-content>
+            </md-ripple>
+          </md-card>
         </div>
-
-        <img src="https://placeimg.com/656/300/tech/grayscale" class="md-flex-45">
       </div>
     </div>
   </md-content>
@@ -22,7 +67,12 @@
 
 <script>
   export default {
-    name: 'HomeEcosystem'
+    name: 'HomeEcosystem',
+    methods: {
+      openLink (link) {
+        window.open(link, '_blank')
+      }
+    }
   }
 </script>
 
@@ -30,61 +80,69 @@
   @import "~vue-material/components/MdAnimation/variables";
   @import "~vue-material/components/MdLayout/mixins";
 
-  .home-ecosystem {
-    width: calc(100% + 32px);
-    padding: 56px 16px;
-    margin: 0 -16px -16px;
-  }
-
-  .home-repo,
-  .home-ecosystem-title {
-    max-width: 1312px;
-    margin: 0 auto;
-  }
+  @import "~vue-material/theme/engine";
 
-  .home-ecosystem-title {
-    margin-bottom: 24px;
-    color: rgba(#000, .87);
-  }
+  @include md-register-theme("blue-card", (
+    primary: md-get-palette-color(blue, A200)
+  ));
+  @include md-register-theme("green-card", (
+    primary: md-get-palette-color(teal, 500)
+  ));
 
-  .home-repo {
-    margin-top: 48px;
+  @import "~vue-material/base/theme";
+  @import "~vue-material/components/MdCard/theme";
 
-    @include md-layout-xsmall {
-      flex-direction: column-reverse;
+  .home-ecosystem {
+    width: calc(100% + 32px);
+    padding-bottom: 28px;
+    margin: 0 -16px;
+    background: #f5f5f5;
+    .md-layout-item {
+      @include md-layout-small {
+        margin-top: 16px;
+      }
     }
-
-    &.reverse {
-      flex-direction: row-reverse;
-
-      @include md-layout-xsmall {
-        flex-direction: column-reverse;
+    .md-card {
+      position: relative;
+      overflow: hidden;
+      background: #fff;
+      margin-bottom: 16px;
+      .md-card-content {
+        display: flex;
+        padding: 16px;
+        height: 100%;
       }
-
-      .home-repo-content {
-        padding-right: 0;
-        padding-left: 48px;
-
-        @include md-layout-xsmall {
-          padding: 0;
+      &.full-height {
+        height: 100%;
+      }
+      .content {
+        z-index: 1;
+        flex-grow: 1;
+      }
+      .image {
+        width: 100%;
+        overflow: hidden;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          max-height: 160px;
+        }
+      }
+      &.flying {
+        p {
+          margin-right: 80px;
+        }
+        img {
+          position: absolute;
+          bottom: -40px;
+          right: -40px;
+          max-height: 160px;
+          z-index: 0;
+          opacity: .7;
         }
       }
     }
   }
-
-  .home-repo-content {
-    padding-right: 48px;
-
-    @include md-layout-xsmall {
-      padding: 0;
-    }
-  }
-
-  .home-repo-title {
-    margin-top: 16px;
-  }
-
-  .md-button {
-    margin: 24px 0 0;
-  }
 </style>
diff --git a/docs/app/pages/Home/HomeSponsors.vue b/docs/app/pages/Home/HomeSponsors.vue
index 93301ce85..61f00a605 100644
--- a/docs/app/pages/Home/HomeSponsors.vue
+++ b/docs/app/pages/Home/HomeSponsors.vue
@@ -1,8 +1,10 @@
 <template>
   <md-content md-tag="section" md-theme="default" class="home-sponsors">
+    <h2 class="home-title md-headline">
+      <md-icon>monetization_on</md-icon>
+      {{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}
+    </h2>
     <div class="page-wrapper">
-      <h2 class="home-sponsors-title md-display-1">{{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}</h2>
-
       <div class="home-sponsors-description">
         <i18n path="pages.home.sponsorsDescription" tag="p">
           <a href="https://www.github.com/marcosmoura" target="_blank">Marcos Moura</a>
@@ -63,17 +65,7 @@
   .home-sponsors {
     width: calc(100% + 32px);
     margin: 0 -16px -16px;
-  }
-
-  .page-wrapper {
-    max-width: 1344px;
-    margin: 0 auto;
-    padding: 56px 16px;
-  }
-
-  .home-sponsors-title {
-    margin-bottom: 56px;
-    color: rgba(#000, .87);
+    padding-bottom: 28px;
   }
 
   .home-sponsors-patreon {
diff --git a/docs/assets/boilerplates/codepen.svg b/docs/assets/boilerplates/codepen.svg
new file mode 100644
index 000000000..84e81d2a5
--- /dev/null
+++ b/docs/assets/boilerplates/codepen.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 666.66669 666.66669" xml:space="preserve" id="svg2" version="1.1"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath42" clipPathUnits="userSpaceOnUse"><path id="path40" d="M 0,500 H 500 V 0 H 0 Z"/></clipPath></defs><g transform="matrix(1.3333333,0,0,-1.3333333,0,666.66667)" id="g10"><g transform="translate(129.9512,273.332)" id="g12"><path id="path14" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 v -42.071 l 31.45,21.035 z"/></g><g transform="translate(238.5024,303.8696)" id="g16"><path id="path18" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 v 58.628 l -98.487,-65.653 43.994,-29.43 z"/></g><g transform="translate(362.1309,296.8447)" id="g20"><path id="path22" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 -98.488,65.653 V 7.025 l 54.497,-36.455 z"/></g><g transform="translate(140.0151,207.748)" id="g24"><path id="path26" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 98.487,-65.653 V -7.024 L 43.995,29.422 Z"/></g><g transform="translate(263.6426,200.7236)" id="g28"><path id="path30" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 V -58.629 L 98.488,7.024 54.497,36.446 Z"/></g><g transform="translate(251.0713,282.0337)" id="g32"><path id="path34" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 -44.457,-29.737 0,-59.475 44.46,-29.737 Z"/></g><g id="g36"><g clip-path="url(#clipPath42)" id="g38"><g transform="translate(397.3311,207.7324)" id="g44"><path id="path46" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-0.554 -0.039,-1.1 -0.112,-1.646 -0.027,-0.177 -0.07,-0.362 -0.1,-0.539 -0.065,-0.354 -0.127,-0.708 -0.22,-1.054 -0.053,-0.208 -0.13,-0.407 -0.196,-0.608 -0.1,-0.307 -0.199,-0.616 -0.322,-0.924 -0.085,-0.207 -0.19,-0.407 -0.281,-0.607 -0.135,-0.285 -0.274,-0.561 -0.427,-0.839 -0.113,-0.192 -0.239,-0.385 -0.359,-0.577 -0.169,-0.262 -0.341,-0.516 -0.53,-0.762 -0.139,-0.192 -0.281,-0.369 -0.434,-0.546 -0.197,-0.23 -0.405,-0.461 -0.624,-0.676 -0.166,-0.17 -0.328,-0.339 -0.5,-0.493 -0.227,-0.208 -0.469,-0.408 -0.715,-0.6 -0.186,-0.147 -0.37,-0.293 -0.567,-0.431 -0.072,-0.047 -0.137,-0.108 -0.211,-0.154 l -133.687,-89.128 c -2.112,-1.408 -4.54,-2.115 -6.975,-2.115 -2.427,0 -4.859,0.707 -6.971,2.115 l -133.691,89.128 c -0.07,0.046 -0.135,0.107 -0.204,0.154 -0.197,0.138 -0.385,0.284 -0.57,0.431 -0.246,0.192 -0.485,0.392 -0.712,0.6 -0.173,0.154 -0.338,0.323 -0.504,0.493 -0.219,0.215 -0.422,0.446 -0.627,0.676 -0.146,0.177 -0.292,0.354 -0.43,0.546 -0.185,0.246 -0.362,0.5 -0.528,0.762 -0.127,0.192 -0.246,0.385 -0.361,0.577 -0.154,0.278 -0.292,0.554 -0.427,0.839 -0.096,0.2 -0.193,0.4 -0.281,0.607 -0.123,0.308 -0.227,0.617 -0.323,0.924 -0.069,0.201 -0.138,0.4 -0.196,0.608 -0.093,0.346 -0.154,0.7 -0.22,1.054 -0.03,0.177 -0.076,0.362 -0.1,0.539 -0.073,0.546 -0.115,1.092 -0.115,1.646 v 89.128 c 0,0.554 0.042,1.1 0.115,1.639 0.024,0.184 0.07,0.361 0.1,0.546 0.066,0.354 0.127,0.708 0.22,1.054 0.058,0.208 0.127,0.408 0.196,0.608 0.096,0.308 0.2,0.615 0.323,0.916 0.088,0.207 0.185,0.415 0.281,0.615 0.135,0.285 0.273,0.562 0.427,0.831 0.115,0.2 0.234,0.392 0.361,0.585 0.166,0.261 0.343,0.515 0.528,0.762 0.138,0.184 0.284,0.369 0.43,0.545 0.205,0.231 0.408,0.462 0.627,0.678 0.166,0.169 0.331,0.338 0.504,0.492 0.227,0.208 0.466,0.408 0.712,0.601 0.185,0.146 0.373,0.292 0.57,0.43 0.069,0.047 0.134,0.108 0.204,0.154 l 133.691,89.128 c 4.224,2.816 9.721,2.816 13.946,0 L -5.598,99.584 c 0.074,-0.046 0.139,-0.107 0.211,-0.154 0.197,-0.138 0.381,-0.284 0.567,-0.43 0.246,-0.193 0.488,-0.393 0.715,-0.601 0.172,-0.154 0.334,-0.323 0.5,-0.492 0.219,-0.216 0.427,-0.447 0.624,-0.678 0.153,-0.176 0.295,-0.361 0.434,-0.545 0.189,-0.247 0.361,-0.501 0.53,-0.762 0.12,-0.193 0.246,-0.385 0.359,-0.585 0.153,-0.269 0.292,-0.546 0.427,-0.831 0.091,-0.2 0.196,-0.408 0.281,-0.615 0.123,-0.301 0.222,-0.608 0.322,-0.916 0.066,-0.2 0.143,-0.4 0.196,-0.608 0.093,-0.346 0.155,-0.7 0.22,-1.054 0.03,-0.185 0.073,-0.362 0.1,-0.546 C -0.039,90.228 0,89.682 0,89.128 Z m -146.26,281.113 c -130.637,0 -236.546,-105.905 -236.546,-236.549 0,-130.645 105.909,-236.545 236.546,-236.545 130.645,0 236.549,105.9 236.549,236.545 0,130.644 -105.904,236.549 -236.549,236.549"/></g><g transform="translate(372.1943,231.2607)" id="g48"><path id="path50" style="fill:#B8B6B7;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 V 42.071 L -31.445,21.036 Z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/assets/boilerplates/html.png b/docs/assets/boilerplates/html.png
new file mode 100644
index 000000000..a11c19544
Binary files /dev/null and b/docs/assets/boilerplates/html.png differ
diff --git a/docs/assets/boilerplates/nuxt.png b/docs/assets/boilerplates/nuxt.png
new file mode 100644
index 000000000..1596f82b3
Binary files /dev/null and b/docs/assets/boilerplates/nuxt.png differ
diff --git a/docs/assets/boilerplates/webpack-advanced.png b/docs/assets/boilerplates/webpack-advanced.png
new file mode 100644
index 000000000..1ab223acc
Binary files /dev/null and b/docs/assets/boilerplates/webpack-advanced.png differ