diff --git a/README.md b/README.md
index f93bb1d..c30936d 100644
--- a/README.md
+++ b/README.md
@@ -74,37 +74,6 @@ Vue.use(VueMaterial.mdSidenav)
 Vue.use(VueMaterial.mdToolbar)
 ```
 
-To get Vue Material working properly, you'll need to configure and apply a default theme.
-
-``` javascript
-Vue.material.theme.register('default', {
-  primary: 'cyan',
-  accent: 'pink'
-})
-```
-
-Or you can register multiple themes at once.
-
-``` javascript
-Vue.material.theme.registerAll({
-  default: {
-    primary: 'cyan',
-    accent: 'pink'
-  },
-  phone: {
-    primary: 'indigo',
-    accent: 'pink'
-  }
-})
-```
-
-Apply your theme using <code>v-md-theme</code> directive:
-
-``` html
-<div v-md-theme="'default'"></div>
-<div v-md-theme="'phone'"></div>
-```
-
 ## Browser Support
 Vue Material supports the latest version of all Browsers. This means:
 * Google Chrome 50+
@@ -113,6 +82,7 @@ Vue Material supports the latest version of all Browsers. This means:
 * Opera 40+
 * IE 11
 * Edge
+
 <small>May work in other browsers but it's untested.</small>
 
 ## Changelog
diff --git a/docs/src/App.vue b/docs/src/App.vue
index 8a1b9d4..daae611 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="container" v-md-theme="theme">
+  <div class="container">
     <md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
-      <md-toolbar class="vue-material-logo" v-md-theme="'white'">
+      <md-toolbar class="vue-material-logo" md-theme="white">
         <router-link exact to="/">
           <img :src="logo" alt="Vue">
           <span>Vue Material</span>
@@ -19,9 +19,7 @@
           </md-list-item>
 
           <md-list-item>
-            <router-link exact to="/themes/configuration">Themes</router-link>
-
-            <!-- <span>Themes</span>
+            <span>Themes</span>
 
             <md-list-expand>
               <md-list>
@@ -33,7 +31,7 @@
                   <router-link exact to="/themes/dynamic-themes">Dynamic Theme</router-link>
                 </md-list-item>
               </md-list>
-            </md-list-expand> -->
+            </md-list-expand>
           </md-list-item>
 
           <md-list-item>
@@ -101,6 +99,10 @@
                   <router-link exact to="/components/sidenav">Sidenav</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/spinner">Spinner</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/subheader">Subheader</router-link>
                 </md-list-item>
@@ -133,19 +135,18 @@
           </md-list-item>
 
           <md-list-item>
-            <router-link exact to="/ui-elements/typography">Typography</router-link>
-
-            <!-- <span>UI Elements</span>
+            <span>UI Elements</span>
             <md-list-expand>
               <md-list>
                 <md-list-item class="md-inset">
+                  <router-link exact to="/ui-elements/layout">Layout</router-link>
                 </md-list-item>
 
                 <md-list-item class="md-inset">
-                  <router-link exact to="/ui-elements/grid-system">Grid System</router-link>
+                  <router-link exact to="/ui-elements/typography">Typography</router-link>
                 </md-list-item>
               </md-list>
-            </md-list-expand> -->
+            </md-list-expand>
           </md-list-item>
 
           <md-list-item>
@@ -159,7 +160,7 @@
       </div>
     </md-sidenav>
 
-    <transition name="md-router">
+    <transition name="md-router" appear>
       <router-view></router-view>
     </transition>
   </div>
@@ -170,9 +171,14 @@
 
   $sizebar-size: 280px;
 
+  [v-cloak] {
+    display: none;
+  }
+
   html,
   body {
     height: 100%;
+    overflow: hidden;
   }
 
   body {
@@ -254,7 +260,10 @@
     padding: 16px;
     flex: 1;
     overflow: auto;
+    background-color: #fff;
     transform: translate3D(0, 0, 0);
+    transition: $swift-ease-out;
+    transition-delay: .2s;
   }
 
   .md-router-enter-active,
@@ -263,16 +272,30 @@
     top: 0;
     right: 0;
     left: 0;
-    transition: $swift-ease-out;
 
     @media (min-width: 1281px) {
-      left: 280px;
+      left: $sizebar-size;
+    }
+
+    .main-content {
+      opacity: 0;
+      overflow: hidden;
     }
   }
 
-  .md-router-enter,
   .md-router-leave-active {
-    opacity: 0;
+    z-index: 1;
+    transition: $swift-ease-in;
+    transition-duration: .25s;
+  }
+
+  .md-router-enter-active {
+    z-index: 2;
+    transition: $swift-ease-out;
+
+    .main-content {
+      transform: translate3D(0, 7%, 0);
+    }
   }
 
   code {
@@ -292,6 +315,8 @@
 </style>
 
 <script>
+  import Vue from 'vue';
+
   export default {
     data() {
       return {
@@ -302,7 +327,7 @@
     },
     computed: {
       logo() {
-        return 'assets/logo-vue-material-' + this.theme + '.png';
+        return 'assets/logo-vue-material-' + Vue.material.currentTheme + '.png';
       }
     },
     methods: {
diff --git a/docs/src/assets/logo-vue-material-purple.png b/docs/src/assets/logo-vue-material-purple.png
new file mode 100644
index 0000000..15c520e
Binary files /dev/null and b/docs/src/assets/logo-vue-material-purple.png differ
diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue
index 203dd85..f3b55ea 100644
--- a/docs/src/components/ExampleBox.vue
+++ b/docs/src/components/ExampleBox.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="example-box">
     <md-card class="example-box-card">
-      <md-toolbar class="md-dense" v-md-theme="'white'">
+      <md-toolbar md-theme="white" class="md-dense">
         <h3 class="md-title">{{ cardTitle }}</h3>
       </md-toolbar>
 
@@ -41,7 +41,7 @@ var App = new Vue({
     </pre>
 
     <pre ref="initialHtml">
-&lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
+&lt;div id=&quot;app&quot;&gt;
   ### TEMPLATE ###
 &lt;/div&gt;
     </pre>
diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue
index 5ed14cd..4970860 100644
--- a/docs/src/components/PageContent.vue
+++ b/docs/src/components/PageContent.vue
@@ -8,10 +8,10 @@
 
         <div class="md-title">{{ pageTitle }}</div>
 
-        <div class="release-version">
+        <div class="release-version" v-if="availableDocs.length">
           <span>Version:</span>
-          <md-select id="docs-select" v-model="currentDocs" @change="changeDocs" v-if="availableDocs.length" v-once>
-            <md-option v-for="doc in availableDocs" :value="doc">{{ doc }}</md-option>
+          <md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
+            <md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
           </md-select>
         </div>
 
diff --git a/docs/src/config.js b/docs/src/config.js
index 3f5a58f..6720d74 100644
--- a/docs/src/config.js
+++ b/docs/src/config.js
@@ -3,11 +3,15 @@ import VueMaterial from '../../src';
 
 Vue.use(VueMaterial);
 
-Vue.material.theme.registerAll({
+Vue.material.registerTheme({
   default: {
     primary: 'blue',
     accent: 'pink'
   },
+  blue: {
+    primary: 'blue',
+    accent: 'pink'
+  },
   indigo: {
     primary: 'indigo',
     accent: 'pink'
@@ -22,11 +26,7 @@ Vue.material.theme.registerAll({
   },
   orange: {
     primary: 'orange',
-    accent: 'green'
-  },
-  blue: {
-    primary: 'blue',
-    accent: 'pink'
+    accent: 'purple'
   },
   green: {
     primary: 'green',
diff --git a/docs/src/index.js b/docs/src/index.js
index ecddf11..293dfb2 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -27,21 +27,23 @@ let router = new VueRouter({
 
 let Docs = Vue.component('app', App);
 let handleSectionTheme = (currentRoute) => {
+  let theme = 'default';
+
   if (currentRoute.name === 'getting-started') {
-    Docs.theme = 'indigo';
+    theme = 'indigo';
   } else if (currentRoute.name.indexOf('themes') >= 0) {
-    Docs.theme = 'cyan';
+    theme = 'cyan';
   } else if (currentRoute.name.indexOf('ui-elements') >= 0) {
-    Docs.theme = 'blue-grey';
+    theme = 'purple';
   } else if (currentRoute.name === 'changelog') {
-    Docs.theme = 'orange';
+    theme = 'orange';
   } else if (currentRoute.name === 'about') {
-    Docs.theme = 'green';
+    theme = 'green';
   } else if (currentRoute.name === 'error') {
-    Docs.theme = 'red';
-  } else {
-    Docs.theme = 'default';
+    theme = 'red';
   }
+
+  Vue.material.setCurrentTheme(theme);
 };
 
 Docs = new Docs({
@@ -51,7 +53,7 @@ Docs = new Docs({
 
 handleSectionTheme(router.currentRoute);
 
-router.afterEach((to) => {
+router.beforeEach((to, from, next) => {
   Vue.nextTick(() => {
     let mainContent = document.querySelector('.main-content');
 
@@ -62,5 +64,7 @@ router.afterEach((to) => {
     Docs.closeSidenav();
 
     handleSectionTheme(to);
+
+    next();
   });
 });
diff --git a/docs/src/pages/GettingStarted.vue b/docs/src/pages/GettingStarted.vue
index be8dae3..2a2e8ea 100644
--- a/docs/src/pages/GettingStarted.vue
+++ b/docs/src/pages/GettingStarted.vue
@@ -88,60 +88,6 @@
         </section>
       </article>
 
-      <article>
-        <section>
-          <h2 class="md-headline">Themes</h2>
-
-          <p>To get Vue Material working properly, you'll need to configure a default theme. You can also register multiple themes at once. Apply your theme on each code part that you want using <code>v-md-theme</code> directive:</p>
-
-          <md-tabs :md-dynamic-height="false" class="md-transparent">
-            <md-tab md-label="Single Theme">
-              <code-block lang="javascript">
-                Vue.material.theme.register('default', {
-                  primary: 'cyan',
-                  accent: 'pink'
-                })
-              </code-block>
-
-              <code-block lang="xml">
-                &lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
-                  &lt;md-toolbar&gt;
-                    &lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
-                  &lt;/md-toolbar&gt;
-
-                  &lt;md-button&gt;My Button&lt;/md-button&gt;
-                &lt;/div&gt;
-              </code-block>
-            </md-tab>
-
-            <md-tab md-label="Multiple Themes">
-              <code-block lang="javascript">
-                Vue.material.theme.registerAll({
-                  default: {
-                    primary: 'cyan',
-                    accent: 'pink'
-                  },
-                  indigo: {
-                    primary: 'indigo',
-                    accent: 'pink'
-                  }
-                })
-              </code-block>
-
-              <code-block lang="xml">
-                &lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
-                  &lt;md-toolbar&gt;
-                    &lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
-                  &lt;/md-toolbar&gt;
-
-                  &lt;md-button v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;My Button&lt;/md-button&gt;
-                &lt;/div&gt;
-              </code-block>
-            </md-tab>
-          </md-tabs>
-        </section>
-      </article>
-
       <article>
         <h2 class="md-headline">Codepen Examples</h2>
 
diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
index 40cc246..ea7a748 100644
--- a/docs/src/pages/components/BottomBar.vue
+++ b/docs/src/pages/components/BottomBar.vue
@@ -204,24 +204,24 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <div class="phone-viewport" v-md-theme="'orange'">
-              <md-bottom-bar>
+            <div class="phone-viewport">
+              <md-bottom-bar md-theme="orange">
                 <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
               </md-bottom-bar>
             </div>
 
-            <div class="phone-viewport" v-md-theme="'teal'">
-              <md-bottom-bar>
+            <div class="phone-viewport">
+              <md-bottom-bar md-theme="teal">
                 <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
               </md-bottom-bar>
             </div>
 
-            <div class="phone-viewport" v-md-theme="'green'">
-              <md-bottom-bar md-shift>
+            <div class="phone-viewport">
+              <md-bottom-bar md-shift md-theme="green">
                 <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
@@ -229,8 +229,8 @@
               </md-bottom-bar>
             </div>
 
-            <div class="phone-viewport" v-md-theme="'indigo'">
-              <md-bottom-bar md-shift>
+            <div class="phone-viewport">
+              <md-bottom-bar md-shift md-theme="indigo">
                 <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
                 <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
@@ -241,31 +241,39 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-bottom-bar&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar md-theme=&quot;orange&quot;&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-              &lt;md-bottom-bar&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar md-theme=&quot;teal&quot;&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-              &lt;md-bottom-bar md-shift&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar md-shift md-theme=&quot;green&quot;&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-              &lt;md-bottom-bar md-shift&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar md-shift md-theme=&quot;indigo&quot;&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
             </code-block>
           </div>
         </example-box>
@@ -273,7 +281,7 @@
         <example-box card-title="Dynamic Theme Example">
           <div slot="demo">
             <div class="phone-viewport">
-              <md-bottom-bar md-shift v-md-theme="playground.theme">
+              <md-bottom-bar md-shift :md-theme="playground.theme">
                 <md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
                 <md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
                 <md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
@@ -284,12 +292,14 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-bottom-bar md-shift v-md-theme=&quot;playground.theme&quot;&gt;
-                &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-              &lt;/md-bottom-bar&gt;
+              &lt;md-theme :md-name=&quot;playground.theme&quot;&gt;
+                &lt;md-bottom-bar md-shift&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
             </code-block>
 
             <code-block lang="javascript">
diff --git a/docs/src/pages/components/Buttons.vue b/docs/src/pages/components/Buttons.vue
index 801104d..eceb20a 100644
--- a/docs/src/pages/components/Buttons.vue
+++ b/docs/src/pages/components/Buttons.vue
@@ -406,30 +406,38 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <md-button class="md-primary" v-md-theme="'indigo'">Indigo</md-button>
-            <md-button class="md-raised md-primary" v-md-theme="'teal'">Teal</md-button>
-            <md-button class="md-icon-button md-primary" v-md-theme="'orange'">
+            <md-button md-theme="indigo" class="md-primary">Indigo</md-button>
+
+            <md-button md-theme="teal" class="md-raised md-primary">Teal</md-button>
+
+            <md-button md-theme="orange" class="md-icon-button md-primary">
               <md-icon>add</md-icon>
             </md-button>
-            <md-button class="md-icon-button md-raised md-primary" v-md-theme="'green'">
+
+            <md-button md-theme="green" class="md-icon-button md-raised md-primary">
               <md-icon>message</md-icon>
             </md-button>
-            <md-button class="md-fab md-primary" v-md-theme="'brown'">
+
+            <md-button md-theme="brown" class="md-fab md-primary">
               <md-icon>dialpad</md-icon>
             </md-button>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-button class=&quot;md-primary&quot; v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;Indigo&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;teal&#039;&quot;&gt;Teal&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-icon-button md-primary&quot; v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
+              &lt;md-button md-theme=&quot;indigo&quot; class=&quot;md-primary&quot;&gt;Indigo&lt;/md-button&gt;
+
+              &lt;md-button md-theme=&quot;teal&quot; class=&quot;md-raised md-primary&quot;&gt;Teal&lt;/md-button&gt;
+
+              &lt;md-button md-theme=&quot;orange&quot; class=&quot;md-icon-button md-primary&quot;&gt;
                 &lt;md-icon&gt;add&lt;/md-icon&gt;
               &lt;/md-button&gt;
-              &lt;md-button class=&quot;md-icon-button md-raised md-primary&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+
+              &lt;md-button md-theme=&quot;green&quot; class=&quot;md-icon-button md-raised md-primary&quot;&gt;
                 &lt;md-icon&gt;message&lt;/md-icon&gt;
               &lt;/md-button&gt;
-              &lt;md-button class=&quot;md-fab md-primary&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
+
+              &lt;md-button md-theme=&quot;brown&quot; class=&quot;md-fab md-primary&quot;&gt;
                 &lt;md-icon&gt;dialpad&lt;/md-icon&gt;
               &lt;/md-button&gt;
             </code-block>
diff --git a/docs/src/pages/components/Card.vue b/docs/src/pages/components/Card.vue
index 6a6a305..ea34a73 100644
--- a/docs/src/pages/components/Card.vue
+++ b/docs/src/pages/components/Card.vue
@@ -6,6 +6,11 @@
         <p>The card components are very granular. Every single part of a card is a component. You can combine them in any order that you want, following the same logic of the examples.</p>
         <p>You can also use other Material components inside the card, like the "Complete Example".</p>
         <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-primary</code></li>
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+        </ul>
       </div>
 
       <div slot="api">
@@ -818,9 +823,159 @@
           </div>
         </example-box>
 
+        <example-box card-title="Themes">
+          <div class="card-holder" slot="demo">
+            <md-card class="md-primary">
+              <md-card-media>
+                <img src="assets/card-image-1.jpg" alt="People">
+              </md-card-media>
+
+              <md-card-header>
+                <div class="md-title">Title goes here</div>
+                <div class="md-subhead">Subtitle here</div>
+              </md-card-header>
+
+              <md-card-actions>
+                <md-button>Action</md-button>
+                <md-button>Action</md-button>
+              </md-card-actions>
+
+              <md-card-content>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+              </md-card-content>
+            </md-card>
+
+            <md-card class="md-accent">
+              <md-card-header>
+                <md-card-header-text>
+                  <div class="md-title">Title goes here</div>
+                  <div class="md-subhead">Subtitle here</div>
+                </md-card-header-text>
+
+                <md-menu md-size="4" md-direction="bottom left">
+                  <md-button class="md-icon-button" md-menu-trigger>
+                    <md-icon>more_vert</md-icon>
+                  </md-button>
+
+                  <md-menu-content>
+                    <md-menu-item>
+                      <span>Call</span>
+                      <md-icon>phone</md-icon>
+                    </md-menu-item>
+
+                    <md-menu-item>
+                      <span>Send a message</span>
+                      <md-icon>message</md-icon>
+                    </md-menu-item>
+                  </md-menu-content>
+                </md-menu>
+              </md-card-header>
+
+              <md-card-media>
+                <img src="assets/card-image-1.jpg" alt="People">
+              </md-card-media>
+
+              <md-card-content>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+              </md-card-content>
+            </md-card>
+
+            <md-card class="md-warn">
+              <md-card-media>
+                <img src="assets/card-image-2.jpg" alt="People">
+              </md-card-media>
+
+              <md-card-header>
+                <div class="md-title">Title goes here</div>
+                <div class="md-subhead">Subtitle here</div>
+              </md-card-header>
+
+              <md-card-actions>
+                <md-button>Action</md-button>
+                <md-button>Action</md-button>
+              </md-card-actions>
+            </md-card>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-card class="md-primary"&gt;
+                &lt;md-card-media&gt;
+                  &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+                &lt;/md-card-media&gt;
+
+                &lt;md-card-header&gt;
+                  &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+                  &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+                &lt;/md-card-header&gt;
+
+                &lt;md-card-actions&gt;
+                  &lt;md-button&gt;Action&lt;/md-button&gt;
+                  &lt;md-button&gt;Action&lt;/md-button&gt;
+                &lt;/md-card-actions&gt;
+
+                &lt;md-card-content&gt;
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+                &lt;/md-card-content&gt;
+              &lt;/md-card&gt;
+
+              &lt;md-card class="md-accent"&gt;
+                &lt;md-card-header&gt;
+                  &lt;md-card-header-text&gt;
+                    &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+                    &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+                  &lt;/md-card-header-text&gt;
+
+                  &lt;md-menu md-size=&quot;4&quot; md-direction=&quot;bottom left&quot;&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
+                      &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+
+                    &lt;md-menu-content&gt;
+                      &lt;md-menu-item&gt;
+                        &lt;span&gt;Call&lt;/span&gt;
+                        &lt;md-icon&gt;phone&lt;/md-icon&gt;
+                      &lt;/md-menu-item&gt;
+
+                      &lt;md-menu-item&gt;
+                        &lt;span&gt;Send a message&lt;/span&gt;
+                        &lt;md-icon&gt;message&lt;/md-icon&gt;
+                      &lt;/md-menu-item&gt;
+                    &lt;/md-menu-content&gt;
+                  &lt;/md-menu&gt;
+                &lt;/md-card-header&gt;
+
+                &lt;md-card-media&gt;
+                  &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+                &lt;/md-card-media&gt;
+
+                &lt;md-card-content&gt;
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+                &lt;/md-card-content&gt;
+              &lt;/md-card&gt;
+
+              &lt;md-card class="md-warn"&gt;
+                &lt;md-card-media&gt;
+                  &lt;img src=&quot;assets/card-image-2.jpg&quot; alt=&quot;People&quot;&gt;
+                &lt;/md-card-media&gt;
+
+                &lt;md-card-header&gt;
+                  &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+                  &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+                &lt;/md-card-header&gt;
+
+                &lt;md-card-actions &gt;
+                  &lt;md-button&gt;Action&lt;/md-button&gt;
+                  &lt;md-button&gt;Action&lt;/md-button&gt;
+                &lt;/md-card-actions&gt;
+              &lt;/md-card&gt;
+            </code-block>
+          </div>
+        </example-box>
+
         <example-box card-title="Complete Example">
           <div class="card-holder" slot="demo">
-            <md-card class="card-example" v-md-theme="'blue'">
+            <md-card class="card-example">
               <md-card-area md-inset>
                 <md-card-media md-ratio="16:9">
                   <img src="assets/card-example.jpg" alt="Coffee House">
@@ -859,7 +1014,7 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-card class=&quot;card-example&quot; v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+              &lt;md-card class=&quot;card-example&quot;&gt;
                 &lt;md-card-area md-inset&gt;
                   &lt;md-card-media md-ratio=&quot;16:9&quot;&gt;
                     &lt;img src=&quot;assets/card-example.jpg&quot; alt=&quot;Coffee House&quot;&gt;
diff --git a/docs/src/pages/components/Checkbox.vue b/docs/src/pages/components/Checkbox.vue
index 13dc3fc..2ff7c5d 100644
--- a/docs/src/pages/components/Checkbox.vue
+++ b/docs/src/pages/components/Checkbox.vue
@@ -89,48 +89,20 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <div class="themed" v-md-theme="'orange'">
-              <md-checkbox id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
-            </div>
-
-            <div class="themed" v-md-theme="'green'">
-              <md-checkbox id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
-            </div>
-
-            <div class="themed" v-md-theme="'light-blue'">
-              <md-checkbox id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
-            </div>
-
-            <div class="themed" v-md-theme="'indigo'">
-              <md-checkbox id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
-            </div>
-
-            <div class="themed" v-md-theme="'brown'">
-              <md-checkbox id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
-            </div>
+            <md-checkbox md-name="orange"  id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
+            <md-checkbox md-name="green"  id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
+            <md-checkbox md-name="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
+            <md-checkbox md-name="indigo"  id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
+            <md-checkbox md-name="brown"  id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;div v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
-                &lt;md-checkbox id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
-              &lt;/div&gt;
-
-              &lt;div v-md-theme=&quot;&#039;green&#039;&quot;&gt;
-                &lt;md-checkbox id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
-              &lt;/div&gt;
-
-              &lt;div v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
-                &lt;md-checkbox id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
-              &lt;/div&gt;
-
-              &lt;div v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;
-                &lt;md-checkbox id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
-              &lt;/div&gt;
-
-              &lt;div v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
-                &lt;md-checkbox id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
-              &lt;/div&gt;
+              &lt;md-checkbox md-name=&quot;orange&quot;  id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-name=&quot;green&quot;  id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-name=&quot;light-blue&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-name=&quot;indigo&quot;  id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-name=&quot;brown&quot;  id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
             </code-block>
           </div>
         </example-box>
@@ -139,12 +111,6 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
-  .themed {
-    display: inline-block;
-  }
-</style>
-
 <script>
   export default {
     data() {
diff --git a/docs/src/pages/components/Icon.vue b/docs/src/pages/components/Icon.vue
index b01b127..ac38f4a 100644
--- a/docs/src/pages/components/Icon.vue
+++ b/docs/src/pages/components/Icon.vue
@@ -40,18 +40,18 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <md-icon v-md-theme="'light-blue'" class="md-primary">home</md-icon>
-            <md-icon v-md-theme="'green'" class="md-primary">home</md-icon>
-            <md-icon v-md-theme="'brown'" class="md-primary">home</md-icon>
-            <md-icon v-md-theme="'orange'" class="md-primary">home</md-icon>
+            <md-icon md-theme="light-blue" class="md-primary">home</md-icon>
+            <md-icon md-theme="green" class="md-primary">home</md-icon>
+            <md-icon md-theme="brown" class="md-primary">home</md-icon>
+            <md-icon md-theme="orange" class="md-primary">home</md-icon>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-icon v-md-theme=&quot;&apos;light-blue&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
-              &lt;md-icon v-md-theme=&quot;&apos;green&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
-              &lt;md-icon v-md-theme=&quot;&apos;brown&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
-              &lt;md-icon v-md-theme=&quot;&apos;orange&apos;&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
+              &lt;md-icon md-theme=&quot;light-blue&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
+              &lt;md-icon md-theme=&quot;green&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
+              &lt;md-icon md-theme=&quot;brown&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
+              &lt;md-icon md-theme=&quot;orange&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
             </code-block>
           </div>
         </example-box>
@@ -59,30 +59,3 @@
     </docs-component>
   </page-content>
 </template>
-
-<style lang="scss" scoped>
-
-</style>
-
-
-
-
-<!-- <template>
-  <demo-page label="Components - Icon">
-    <div slot="examples">
-      <demo-example label="Default" size="2">
-        <md-icon>home</md-icon>
-        <md-icon class="md-primary">home</md-icon>
-        <md-icon class="md-accent">home</md-icon>
-        <md-icon class="md-warn">home</md-icon>
-      </demo-example>
-
-      <demo-example label="Themed" size="2">
-        <md-icon v-md-theme="'light-blue'" class="md-primary">home</md-icon>
-        <md-icon v-md-theme="'green'" class="md-primary">home</md-icon>
-        <md-icon v-md-theme="'brown'" class="md-primary">home</md-icon>
-        <md-icon v-md-theme="'orange'" class="md-primary">home</md-icon>
-      </demo-example>
-    </div>
-  </demo-page>
-</template> -->
diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index f78dd68..9c061dd 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -353,38 +353,30 @@
         <example-box card-title="Themes">
           <div slot="demo">
             <form novalidate @submit.stop.prevent="submit">
-              <div v-md-theme="'green'">
-                <md-input-container>
-                  <label>Green - Input</label>
-                  <md-input></md-input>
-                </md-input-container>
-              </div>
+              <md-input-container md-theme="green">
+                <label>Green - Input</label>
+                <md-input></md-input>
+              </md-input-container>
 
-              <div v-md-theme="'cyan'">
-                <md-input-container>
-                  <label>Cyan - Textarea</label>
-                  <md-textarea></md-textarea>
-                </md-input-container>
-              </div>
+              <md-input-container md-theme="red">
+                <label>Red - Textarea</label>
+                <md-textarea></md-textarea>
+              </md-input-container>
             </form>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
               &lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
-                &lt;div v-md-theme=&quot;&apos;green&apos;&quot;&gt;
-                  &lt;md-input-container&gt;
-                    &lt;label&gt;Green - Input&lt;/label&gt;
-                    &lt;md-input&gt;&lt;/md-input&gt;
-                  &lt;/md-input-container&gt;
-                &lt;/div&gt;
+                &lt;md-input-container md-theme=&quot;green&quot;&gt;
+                  &lt;label&gt;Green - Input&lt;/label&gt;
+                  &lt;md-input&gt;&lt;/md-input&gt;
+                &lt;/md-input-container&gt;
 
-                &lt;div v-md-theme=&quot;&apos;cyan&apos;&quot;&gt;
-                  &lt;md-input-container&gt;
-                    &lt;label&gt;Cyan - Textarea&lt;/label&gt;
-                    &lt;md-textarea&gt;&lt;/md-textarea&gt;
-                  &lt;/md-input-container&gt;
-                &lt;/div&gt;
+                &lt;md-input-container md-theme=&quot;red&quot;&gt;
+                  &lt;label&gt;Red - Textarea&lt;/label&gt;
+                  &lt;md-textarea&gt;&lt;/md-textarea&gt;
+                &lt;/md-input-container&gt;
               &lt;/form&gt;
             </code-block>
           </div>
diff --git a/docs/src/pages/components/Radio.vue b/docs/src/pages/components/Radio.vue
index 119a263..9b086b7 100644
--- a/docs/src/pages/components/Radio.vue
+++ b/docs/src/pages/components/Radio.vue
@@ -133,56 +133,56 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <div v-md-theme="'orange'">
+            <md-theme md-name="orange">
               <md-radio v-model="radio5" id="my-test13" name="my-test-group4" md-value="1" class="md-primary">Orange radio</md-radio>
               <md-radio v-model="radio5" id="my-test14" name="my-test-group4" md-value="2" class="md-primary">Another Orange radio</md-radio>
               <md-radio v-model="radio5" id="my-test15" name="my-test-group4" md-value="3" class="md-primary">Another another Orange radio</md-radio>
-            </div>
+            </md-theme>
 
-            <div v-md-theme="'brown'">
+            <md-theme md-name="brown">
               <md-radio v-model="radio6" id="my-test16" name="my-test-group4" md-value="1" class="md-primary">Brown radio</md-radio>
               <md-radio v-model="radio6" id="my-test17" name="my-test-group4" md-value="2" class="md-primary">Another Brown radio</md-radio>
               <md-radio v-model="radio6" id="my-test18" name="my-test-group4" md-value="3" class="md-primary">Another another Brown radio</md-radio>
-            </div>
+            </md-theme>
 
-            <div v-md-theme="'green'">
+            <md-theme md-name="green">
               <md-radio v-model="radio7" id="my-test19" name="my-test-group6" md-value="1" class="md-primary">Green radio</md-radio>
               <md-radio v-model="radio7" id="my-test20" name="my-test-group6" md-value="2" class="md-primary">Another Green radio</md-radio>
               <md-radio v-model="radio7" id="my-test21" name="my-test-group6" md-value="3" class="md-primary">Another another Green radio</md-radio>
-            </div>
+            </md-theme>
 
-            <div v-md-theme="'teal'">
+            <md-theme md-name="teal">
               <md-radio v-model="radio8" id="my-test22" name="my-test-group3" md-value="1" class="md-primary">Teal radio</md-radio>
               <md-radio v-model="radio8" id="my-test23" name="my-test-group3" md-value="2" class="md-primary" disabled>Teal disabled radio</md-radio>
               <md-radio v-model="radio8" id="my-test24" name="my-test-group3" md-value="3" class="md-primary">Another another Teal radio</md-radio>
-            </div>
+            </md-theme>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;div v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
+              &lt;md-theme md-name=&quot;orange&quot;&gt;
                 &lt;md-radio v-model=&quot;radio5&quot; id=&quot;my-test13&quot; name=&quot;my-test-group4&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Orange radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio5&quot; id=&quot;my-test14&quot; name=&quot;my-test-group4&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot;&gt;Another Orange radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio5&quot; id=&quot;my-test15&quot; name=&quot;my-test-group4&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Orange radio&lt;/md-radio&gt;
-              &lt;/div&gt;
+              &lt;/md-theme&gt;
 
-              &lt;div v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
+              &lt;md-theme md-name=&quot;brown&quot;&gt;
                 &lt;md-radio v-model=&quot;radio6&quot; id=&quot;my-test16&quot; name=&quot;my-test-group4&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Brown radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio6&quot; id=&quot;my-test17&quot; name=&quot;my-test-group4&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot;&gt;Another Brown radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio6&quot; id=&quot;my-test18&quot; name=&quot;my-test-group4&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Brown radio&lt;/md-radio&gt;
-              &lt;/div&gt;
+              &lt;/md-theme&gt;
 
-              &lt;div v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+              &lt;md-theme md-name=&quot;green&quot;&gt;
                 &lt;md-radio v-model=&quot;radio7&quot; id=&quot;my-test19&quot; name=&quot;my-test-group6&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Green radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio7&quot; id=&quot;my-test20&quot; name=&quot;my-test-group6&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot;&gt;Another Green radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio7&quot; id=&quot;my-test21&quot; name=&quot;my-test-group6&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Green radio&lt;/md-radio&gt;
-              &lt;/div&gt;
+              &lt;/md-theme&gt;
 
-              &lt;div v-md-theme=&quot;&#039;teal&#039;&quot;&gt;
+              &lt;md-theme md-name=&quot;teal&quot;&gt;
                 &lt;md-radio v-model=&quot;radio8&quot; id=&quot;my-test22&quot; name=&quot;my-test-group3&quot; md-value=&quot;1&quot; class=&quot;md-primary&quot;&gt;Teal radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio8&quot; id=&quot;my-test23&quot; name=&quot;my-test-group3&quot; md-value=&quot;2&quot; class=&quot;md-primary&quot; disabled&gt;Teal disabled radio&lt;/md-radio&gt;
                 &lt;md-radio v-model=&quot;radio8&quot; id=&quot;my-test24&quot; name=&quot;my-test-group3&quot; md-value=&quot;3&quot; class=&quot;md-primary&quot;&gt;Another another Teal radio&lt;/md-radio&gt;
-              &lt;/div&gt;
+              &lt;/md-theme&gt;
             </code-block>
           </div>
         </example-box>
diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue
index c88dbbe..c23f5e1 100644
--- a/docs/src/pages/components/Select.vue
+++ b/docs/src/pages/components/Select.vue
@@ -176,6 +176,25 @@
                   <md-option value="verdana">Verdana</md-option>
                 </md-select>
               </md-input-container>
+
+              <md-input-container>
+                <label for="food">Food</label>
+                <md-select name="food" id="food" v-model="food">
+                  <md-subheader>Fruits</md-subheader>
+                  <md-option value="apples">Apples</md-option>
+                  <md-option value="bananas">Bananas</md-option>
+                  <md-option value="peaches">Peaches</md-option>
+                  <md-option value="oranges">Oranges</md-option>
+
+                  <md-subheader>Vegetables</md-subheader>
+                  <md-option value="carrots">Carrots</md-option>
+                  <md-option value="cucumbers">Cucumbers</md-option>
+
+                  <md-subheader>Baked Goods</md-subheader>
+                  <md-option value="apple_pie">Apple Pie</md-option>
+                  <md-option value="chocolate_cake">Chocolate Cake</md-option>
+                </md-select>
+              </md-input-container>
             </div>
 
             <md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
@@ -227,6 +246,25 @@
                     &lt;md-option value=&quot;verdana&quot;&gt;Verdana&lt;/md-option&gt;
                   &lt;/md-select&gt;
                 &lt;/md-input-container&gt;
+
+                &lt;md-input-container&gt;
+                  &lt;label for=&quot;food&quot;&gt;Food&lt;/label&gt;
+                  &lt;md-select name=&quot;food&quot; id=&quot;food&quot; v-model=&quot;food&quot;&gt;
+                    &lt;md-subheader&gt;Fruits&lt;/md-subheader&gt;
+                    &lt;md-option value=&quot;apples&quot;&gt;Apples&lt;/md-option&gt;
+                    &lt;md-option value=&quot;bananas&quot;&gt;Bananas&lt;/md-option&gt;
+                    &lt;md-option value=&quot;peaches&quot;&gt;Peaches&lt;/md-option&gt;
+                    &lt;md-option value=&quot;oranges&quot;&gt;Oranges&lt;/md-option&gt;
+
+                    &lt;md-subheader&gt;Vegetables&lt;/md-subheader&gt;
+                    &lt;md-option value=&quot;carrots&quot;&gt;Carrots&lt;/md-option&gt;
+                    &lt;md-option value=&quot;cucumbers&quot;&gt;Cucumbers&lt;/md-option&gt;
+
+                    &lt;md-subheader&gt;Baked Goods&lt;/md-subheader&gt;
+                    &lt;md-option value=&quot;apple_pie&quot;&gt;Apple Pie&lt;/md-option&gt;
+                    &lt;md-option value=&quot;chocolate_cake&quot;&gt;Chocolate Cake&lt;/md-option&gt;
+                  &lt;/md-select&gt;
+                &lt;/md-input-container&gt;
               &lt;/div&gt;
 
               &lt;md-button class=&quot;md-raised md-primary&quot; @click=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
@@ -252,25 +290,6 @@
         <example-box card-title="Multiple">
           <div class="multiple" slot="demo">
             <div class="field-group">
-              <md-input-container>
-                <label for="food">Food</label>
-                <md-select name="food" id="food" v-model="food">
-                  <md-subheader>Fruits</md-subheader>
-                  <md-option value="apples">Apples</md-option>
-                  <md-option value="bananas">Bananas</md-option>
-                  <md-option value="peaches">Peaches</md-option>
-                  <md-option value="oranges">Oranges</md-option>
-
-                  <md-subheader>Vegetables</md-subheader>
-                  <md-option value="carrots">Carrots</md-option>
-                  <md-option value="cucumbers">Cucumbers</md-option>
-
-                  <md-subheader>Baked Goods</md-subheader>
-                  <md-option value="apple_pie">Apple Pie</md-option>
-                  <md-option value="chocolate_cake">Chocolate Cake</md-option>
-                </md-select>
-              </md-input-container>
-
               <md-input-container>
                 <label for="users">Users</label>
                 <md-select name="users" id="users" multiple v-model="users">
@@ -300,25 +319,6 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-input-container&gt;
-                &lt;label for=&quot;food&quot;&gt;Food&lt;/label&gt;
-                &lt;md-select name=&quot;food&quot; id=&quot;food&quot; v-model=&quot;food&quot;&gt;
-                  &lt;md-subheader&gt;Fruits&lt;/md-subheader&gt;
-                  &lt;md-option value=&quot;apples&quot;&gt;Apples&lt;/md-option&gt;
-                  &lt;md-option value=&quot;bananas&quot;&gt;Bananas&lt;/md-option&gt;
-                  &lt;md-option value=&quot;peaches&quot;&gt;Peaches&lt;/md-option&gt;
-                  &lt;md-option value=&quot;oranges&quot;&gt;Oranges&lt;/md-option&gt;
-
-                  &lt;md-subheader&gt;Vegetables&lt;/md-subheader&gt;
-                  &lt;md-option value=&quot;carrots&quot;&gt;Carrots&lt;/md-option&gt;
-                  &lt;md-option value=&quot;cucumbers&quot;&gt;Cucumbers&lt;/md-option&gt;
-
-                  &lt;md-subheader&gt;Baked Goods&lt;/md-subheader&gt;
-                  &lt;md-option value=&quot;apple_pie&quot;&gt;Apple Pie&lt;/md-option&gt;
-                  &lt;md-option value=&quot;chocolate_cake&quot;&gt;Chocolate Cake&lt;/md-option&gt;
-                &lt;/md-select&gt;
-              &lt;/md-input-container&gt;
-
               &lt;md-input-container&gt;
                 &lt;label for=&quot;users&quot;&gt;Users&lt;/label&gt;
                 &lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;
diff --git a/docs/src/pages/components/Spinner.vue b/docs/src/pages/components/Spinner.vue
new file mode 100644
index 0000000..b37ba63
--- /dev/null
+++ b/docs/src/pages/components/Spinner.vue
@@ -0,0 +1,258 @@
+<template>
+  <page-content page-title="Components - Spinner">
+    <docs-component>
+      <div slot="description">
+        <p>Progress and activity indicators are visual indications of an app loading content.</p>
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+        </ul>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-spinner">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-size</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>The spinner size. Default <code>50</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-stroke</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>The line width. Default <code>3.5</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-indeterminate</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable the indeterminate state. Default <code>false</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-progress</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Define the current progress of the spinner. Default <code>0</code></md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Determinate">
+          <div class="spinner-demo" slot="demo">
+            <md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
+            <md-spinner :md-progress="progress" v-if="transition"></md-spinner>
+            <md-spinner :md-progress="progress" v-if="transition" class="md-accent"></md-spinner>
+            <md-spinner :md-progress="progress" v-if="transition" class="md-warn"></md-spinner>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-spinner :md-progress=&quot;progress&quot;&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner :md-progress=&quot;progress&quot; class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner :md-progress=&quot;progress&quot; class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Indeterminate">
+          <div class="spinner-demo" slot="demo">
+            <md-spinner md-indeterminate></md-spinner>
+            <md-spinner md-indeterminate class="md-accent"></md-spinner>
+            <md-spinner md-indeterminate class="md-warn"></md-spinner>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-spinner md-indeterminate&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Sizes">
+          <div class="spinner-demo" slot="demo">
+            <md-spinner :md-size="20" md-indeterminate class="md-accent"></md-spinner>
+            <md-spinner :md-size="60" md-indeterminate class="md-warn"></md-spinner>
+            <md-spinner :md-size="150" md-indeterminate></md-spinner>
+
+            <md-spinner :md-size="20" :md-stroke="2.5" md-indeterminate class="md-accent"></md-spinner>
+            <md-spinner :md-size="60" :md-stroke="1.5" md-indeterminate class="md-warn"></md-spinner>
+            <md-spinner :md-size="150" :md-stroke="1" md-indeterminate></md-spinner>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-spinner :md-size=&quot;20&quot; md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner :md-size=&quot;60&quot; md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner :md-size=&quot;150&quot; md-indeterminate&gt;&lt;/md-spinner&gt;
+
+              &lt;md-spinner :md-size=&quot;20&quot; :md-stroke=&quot;2&quot; md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner :md-size=&quot;60&quot; :md-stroke=&quot;1.5&quot; md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
+              &lt;md-spinner :md-size=&quot;150&quot; :md-stroke=&quot;1&quot; md-indeterminate&gt;&lt;/md-spinner&gt;
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Complete Example">
+          <div slot="demo">
+            <md-theme class="complete-example" md-name="orange">
+              <md-button class="md-fab" @click.native="restartProgress" :class="{ 'md-primary': done }">
+                <md-icon v-if="!done">cloud_upload</md-icon>
+                <md-icon v-if="done">done</md-icon>
+              </md-button>
+
+              <md-spinner :md-size="74" :md-stroke="2.2" :md-progress="progress" v-if="transition && progress < 115"></md-spinner>
+            </md-theme>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-theme class=&quot;complete-example&quot; md-name=&quot;orange&quot;&gt;
+                &lt;md-button class=&quot;md-fab&quot; @click.native=&quot;restartProgress&quot; :class=&quot;{ &#039;md-primary&#039;: done }&quot;&gt;
+                  &lt;md-icon v-if=&quot;!done&quot;&gt;cloud_upload&lt;/md-icon&gt;
+                  &lt;md-icon v-if=&quot;done&quot;&gt;done&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-spinner :md-size=&quot;74&quot; :md-stroke=&quot;2.2&quot; :md-progress=&quot;progress&quot; v-if=&quot;transition &amp;&amp; progress &lt; 115&quot;&gt;&lt;/md-spinner&gt;
+              &lt;/md-theme&gt;
+            </code-block>
+
+            <code-block lang="scss">
+              .complete-example {
+                width: 56px;
+                height: 56px;
+                position: relative;
+
+                .md-fab {
+                  margin: 0;
+                }
+
+                .md-spinner {
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                }
+              }
+            </code-block>
+
+            <code-block lang="javascript">
+              export default {
+                data: () => ({
+                  progress: 0,
+                  progressInterval: null,
+                  done: false,
+                  transition: true
+                }),
+                methods: {
+                  startProgress() {
+                    this.progressInterval = window.setInterval(() => {
+                      this.progress += 3;
+
+                      if (this.progress > 115) {
+                        this.done = true;
+                        window.clearInterval(this.progressInterval);
+                        window.setTimeout(() => {
+                          this.done = false;
+                        }, 3000);
+                      }
+                    }, 100);
+                  },
+                  restartProgress() {
+                    this.progress = 0;
+                    this.transition = false;
+                    this.done = false;
+
+                    window.clearInterval(this.progressInterval);
+                    window.setTimeout(() => {
+                      this.transition = true;
+                      this.startProgress();
+                    }, 600);
+                  }
+                }
+              };
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="scss" scoped>
+  .spinner-demo {
+    min-height: 55px;
+  }
+
+  .complete-example {
+    width: 56px;
+    height: 56px;
+    position: relative;
+
+    .md-fab {
+      margin: 0;
+    }
+
+    .md-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data: () => ({
+      progress: 0,
+      progressInterval: null,
+      done: false,
+      transition: true
+    }),
+    methods: {
+      startProgress() {
+        this.progressInterval = window.setInterval(() => {
+          this.progress += 3;
+
+          if (this.progress > 115) {
+            this.done = true;
+            window.clearInterval(this.progressInterval);
+            window.setTimeout(() => {
+              this.done = false;
+            }, 3000);
+          }
+        }, 100);
+      },
+      restartProgress() {
+        this.progress = 0;
+        this.transition = false;
+        this.done = false;
+
+        window.clearInterval(this.progressInterval);
+        window.setTimeout(() => {
+          this.transition = true;
+          this.startProgress();
+        }, 600);
+      }
+    },
+    mounted() {
+      this.startProgress();
+    }
+  };
+</script>
diff --git a/docs/src/pages/components/Subheader.vue b/docs/src/pages/components/Subheader.vue
index 1423851..8cba5d3 100644
--- a/docs/src/pages/components/Subheader.vue
+++ b/docs/src/pages/components/Subheader.vue
@@ -3,6 +3,12 @@
     <docs-component>
       <div slot="description">
         <p>Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria.</p>
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-primary</code></li>
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+        </ul>
       </div>
 
       <div slot="api">
diff --git a/docs/src/pages/components/Switch.vue b/docs/src/pages/components/Switch.vue
index efaddf8..b82fd07 100644
--- a/docs/src/pages/components/Switch.vue
+++ b/docs/src/pages/components/Switch.vue
@@ -96,21 +96,10 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;div&gt;
-                &lt;md-switch v-model=&quot;checked0&quot; id=&quot;my-test0&quot; name=&quot;my-test0&quot;&gt;&lt;/md-switch&gt;
-              &lt;/div&gt;
-
-              &lt;div&gt;
-                &lt;md-switch v-model=&quot;checked1&quot; id=&quot;my-test1&quot; name=&quot;my-test1&quot; class=&quot;md-primary&quot;&gt;Primary Color&lt;/md-switch&gt;
-              &lt;/div&gt;
-
-              &lt;div&gt;
-                &lt;md-switch v-model=&quot;checked2&quot; id=&quot;my-test2&quot; name=&quot;my-test2&quot; class=&quot;md-warn&quot;&gt;Warn Color&lt;/md-switch&gt;
-              &lt;/div&gt;
-
-              &lt;div&gt;
-                &lt;md-switch v-model=&quot;checked3&quot; id=&quot;my-test3&quot; name=&quot;my-test3&quot; disabled&gt;Disabled&lt;/md-switch&gt;
-              &lt;/div&gt;
+              &lt;md-switch v-model=&quot;checked0&quot; id=&quot;my-test0&quot; name=&quot;my-test0&quot;&gt;&lt;/md-switch&gt;
+              &lt;md-switch v-model=&quot;checked1&quot; id=&quot;my-test1&quot; name=&quot;my-test1&quot; class=&quot;md-primary&quot;&gt;Primary Color&lt;/md-switch&gt;
+              &lt;md-switch v-model=&quot;checked2&quot; id=&quot;my-test2&quot; name=&quot;my-test2&quot; class=&quot;md-warn&quot;&gt;Warn Color&lt;/md-switch&gt;
+              &lt;md-switch v-model=&quot;checked3&quot; id=&quot;my-test3&quot; name=&quot;my-test3&quot; disabled&gt;Disabled&lt;/md-switch&gt;
             </code-block>
           </div>
         </example-box>
@@ -137,41 +126,29 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <div v-md-theme="'orange'">
-              <md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
+            <div>
+              <md-switch md-theme="orange" v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
             </div>
 
-            <div v-md-theme="'green'">
-              <md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
+            <div>
+              <md-switch md-theme="green" v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
             </div>
 
-            <div v-md-theme="'brown'">
-              <md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
+            <div>
+              <md-switch md-theme="brown" v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
             </div>
 
-            <div v-md-theme="'light-blue'">
-              <md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
+            <div>
+              <md-switch md-theme="light-blue" v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
             </div>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;div v-md-theme=&quot;'orange'&quot;&gt;
-                &lt;md-switch v-model=&quot;checked4&quot; id=&quot;my-test4&quot; name=&quot;my-test4&quot; class=&quot;md-primary&quot;&gt;&lt;/md-switch&gt;
-              &lt;/div&gt;
-
-              &lt;div v-md-theme=&quot;'green'&quot;&gt;
-                &lt;md-switch v-model=&quot;checked5&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; class=&quot;md-primary&quot;&gt;Green Primary Color&lt;/md-switch&gt;
-              &lt;/div&gt;
-
-              &lt;div v-md-theme=&quot;'brown'&quot;&gt;
-                &lt;md-switch v-model=&quot;checked6&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; class=&quot;md-primary&quot;&gt;Brown Primary Color&lt;/md-switch&gt;
-              &lt;/div&gt;
-
-              &lt;div v-md-theme=&quot;'light-blue'&quot;&gt;
-                &lt;md-switch v-model=&quot;checked7&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; class=&quot;md-primary&quot; disabled&gt;Light Blue Primary Color Disabled&lt;/md-switch&gt;
-              &lt;/div&gt;
-            &lt;/div&gt;
+              &lt;md-switch md-theme=&quot;orange&quot; v-model=&quot;checked4&quot; id=&quot;my-test4&quot; name=&quot;my-test4&quot; class=&quot;md-primary&quot;&gt;&lt;/md-switch&gt;
+              &lt;md-switch md-theme=&quot;green&quot; v-model=&quot;checked5&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; class=&quot;md-primary&quot;&gt;Green Primary Color&lt;/md-switch&gt;
+              &lt;md-switch md-theme=&quot;brown&quot; v-model=&quot;checked6&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; class=&quot;md-primary&quot;&gt;Brown Primary Color&lt;/md-switch&gt;
+              &lt;md-switch md-theme=&quot;light-blue&quot; v-model=&quot;checked7&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; class=&quot;md-primary&quot; disabled&gt;Light Blue Primary Color Disabled&lt;/md-switch&gt;
             </code-block>
           </div>
         </example-box>
diff --git a/docs/src/pages/components/Tabs.vue b/docs/src/pages/components/Tabs.vue
index 3f00e97..b1580fb 100644
--- a/docs/src/pages/components/Tabs.vue
+++ b/docs/src/pages/components/Tabs.vue
@@ -115,6 +115,18 @@
                 <md-table-cell><code>Boolean</code></md-table-cell>
                 <md-table-cell>Disable the tab and prevent his actions. Default <code>false</code></md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-tooltip</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Add a tooltip on the tab header. Default: No tooltip.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-tooltip-direction</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Direction of the tab header tooltip. Default: <code>bottom</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -137,7 +149,7 @@
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
               </md-tab>
 
-              <md-tab id="pictures" md-label="Pictures">
+              <md-tab id="pictures" md-label="Pictures" md-tooltip="This is the pictures tab!">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
               </md-tab>
             </md-tabs>
@@ -159,7 +171,7 @@
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
                 &lt;/md-tab&gt;
 
-                &lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot;&gt;
+                &lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot; md-tooltip=&quot;This is the pictures tab!&quot;&gt;
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
                 &lt;/md-tab&gt;
               &lt;/md-tabs&gt;
@@ -169,7 +181,7 @@
 
         <example-box card-title="Fixed">
           <div slot="demo">
-            <md-tabs :md-dynamic-height="false" md-fixed>
+            <md-tabs :md-dynamic-height="false" md-fixed class="md-accent">
               <md-tab id="movies" md-label="Movies">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-tab>
@@ -215,7 +227,7 @@
 
         <example-box card-title="Centered with Text and Icon">
           <div slot="demo">
-            <md-tabs :md-dynamic-height="false" md-centered>
+            <md-tabs :md-dynamic-height="false" md-centered class="md-warn">
               <md-tab md-label="Movies" md-icon="ondemand_video">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-tab>
@@ -261,7 +273,7 @@
 
         <example-box card-title="Aligned to the right with only icons">
           <div slot="demo">
-            <md-tabs :md-dynamic-height="false" md-right>
+            <md-tabs :md-dynamic-height="false" md-right class="md-transparent">
               <md-tab md-icon="phone">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-tab>
diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
index d03c139..9a89a5f 100644
--- a/docs/src/pages/components/Toolbar.vue
+++ b/docs/src/pages/components/Toolbar.vue
@@ -297,7 +297,7 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <md-toolbar v-md-theme="'green'">
+            <md-toolbar md-theme="green">
               <md-button class="md-icon-button">
                 <md-icon>menu</md-icon>
               </md-button>
@@ -309,7 +309,7 @@
               </md-button>
             </md-toolbar>
 
-            <md-toolbar class="md-large" v-md-theme="'brown'">
+            <md-toolbar class="md-large" md-theme="brown">
               <div class="md-toolbar-container">
                 <md-button class="md-icon-button">
                   <md-icon>menu</md-icon>
@@ -331,7 +331,7 @@
               </div>
             </md-toolbar>
 
-            <md-toolbar v-md-theme="'orange'">
+            <md-toolbar md-theme="orange">
               <md-button class="md-icon-button">
                 <md-icon>menu</md-icon>
               </md-button>
@@ -342,7 +342,7 @@
               <md-button>Remove</md-button>
             </md-toolbar>
 
-            <md-toolbar v-md-theme="'blue'">
+            <md-toolbar md-theme="blue">
               <md-button class="md-icon-button">
                 <md-icon>menu</md-icon>
               </md-button>
@@ -356,7 +356,7 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-toolbar v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+              &lt;md-toolbar md-theme=&quot;green&quot;&gt;
                 &lt;md-button class=&quot;md-icon-button&quot;&gt;
                   &lt;md-icon&gt;menu&lt;/md-icon&gt;
                 &lt;/md-button&gt;
@@ -368,7 +368,7 @@
                 &lt;/md-button&gt;
               &lt;/md-toolbar&gt;
 
-              &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
+              &lt;md-toolbar class=&quot;md-large&quot; md-theme=&quot;brown&quot;&gt;
                 &lt;div class=&quot;md-toolbar-container&quot;&gt;
                   &lt;md-button class=&quot;md-icon-button&quot;&gt;
                     &lt;md-icon&gt;menu&lt;/md-icon&gt;
@@ -390,7 +390,7 @@
                 &lt;/div&gt;
               &lt;/md-toolbar&gt;
 
-              &lt;md-toolbar v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
+              &lt;md-toolbar md-theme=&quot;orange&quot;&gt;
                 &lt;md-button class=&quot;md-icon-button&quot;&gt;
                   &lt;md-icon&gt;menu&lt;/md-icon&gt;
                 &lt;/md-button&gt;
@@ -401,7 +401,7 @@
                 &lt;md-button&gt;Remove&lt;/md-button&gt;
               &lt;/md-toolbar&gt;
 
-              &lt;md-toolbar v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+              &lt;md-toolbar md-theme=&quot;blue&quot;&gt;
                 &lt;md-button class=&quot;md-icon-button&quot;&gt;
                   &lt;md-icon&gt;menu&lt;/md-icon&gt;
                 &lt;/md-button&gt;
@@ -418,32 +418,30 @@
         <example-box card-title="Complete example">
           <div slot="demo">
             <div class="phone-viewport complete-example">
-              <md-whiteframe md-elevation="2">
-                <md-toolbar class="md-large" v-md-theme="'light-blue'">
-                  <div class="md-toolbar-container">
-                    <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
-                      <md-icon>menu</md-icon>
-                    </md-button>
+              <md-whiteframe md-tag="md-toolbar" md-elevation="2" md-theme="light-blue" class="md-large">
+                <div class="md-toolbar-container">
+                  <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
+                    <md-icon>menu</md-icon>
+                  </md-button>
 
-                    <span style="flex: 1"></span>
+                  <span style="flex: 1"></span>
 
-                    <md-button class="md-icon-button">
-                      <md-icon>search</md-icon>
-                    </md-button>
+                  <md-button class="md-icon-button">
+                    <md-icon>search</md-icon>
+                  </md-button>
 
-                    <md-button class="md-icon-button">
-                      <md-icon>view_module</md-icon>
-                    </md-button>
-                  </div>
+                  <md-button class="md-icon-button">
+                    <md-icon>view_module</md-icon>
+                  </md-button>
+                </div>
 
-                  <div class="md-toolbar-container">
-                    <h2 class="md-title">My Files</h2>
+                <div class="md-toolbar-container">
+                  <h2 class="md-title">My Files</h2>
 
-                    <md-button class="md-fab md-mini">
-                      <md-icon>add</md-icon>
-                    </md-button>
-                  </div>
-                </md-toolbar>
+                  <md-button class="md-fab md-mini">
+                    <md-icon>add</md-icon>
+                  </md-button>
+                </div>
               </md-whiteframe>
 
               <md-list class="md-double-line">
@@ -499,7 +497,7 @@
                 <md-subheader class="md-inset">Files</md-subheader>
 
                 <md-list-item>
-                  <md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
+                  <md-avatar md-theme="blue" class="md-avatar-icon md-primary">
                     <md-icon>insert_drive_file</md-icon>
                   </md-avatar>
 
@@ -514,7 +512,7 @@
                 </md-list-item>
 
                 <md-list-item>
-                  <md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
+                  <md-avatar md-theme="orange" class="md-avatar-icon md-primary">
                     <md-icon>collections</md-icon>
                   </md-avatar>
 
@@ -529,7 +527,7 @@
                 </md-list-item>
 
                 <md-list-item>
-                  <md-avatar v-md-theme="'green'" class="md-avatar-icon md-primary">
+                  <md-avatar md-theme="green" class="md-avatar-icon md-primary">
                     <md-icon>view_list</md-icon>
                   </md-avatar>
 
@@ -544,7 +542,7 @@
                 </md-list-item>
 
                 <md-list-item>
-                  <md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
+                  <md-avatar md-theme="orange" class="md-avatar-icon md-primary">
                     <md-icon>collections</md-icon>
                   </md-avatar>
 
@@ -559,8 +557,8 @@
                 </md-list-item>
               </md-list>
 
-              <md-sidenav class="md-left" ref="sidenav">
-                <md-toolbar class="md-account-header" v-md-theme="'blue'">
+              <md-sidenav md-theme="blue" class="md-left" ref="sidenav">
+                <md-toolbar class="md-account-header">
                   <md-list class="md-transparent">
                     <md-list-item class="md-avatar-list">
                       <md-avatar class="md-large">
@@ -591,7 +589,7 @@
                   </md-list>
                 </md-toolbar>
 
-                <md-list v-md-theme="'blue'">
+                <md-list>
                   <md-list-item @click="$refs.sidenav.toggle()" class="md-primary">
                     <md-icon>insert_drive_file</md-icon> <span>My files</span>
                   </md-list-item>
@@ -619,32 +617,30 @@
           <div slot="code">
             <code-block lang="xml">
               &lt;div class=&quot;phone-viewport complete-example&quot;&gt;
-                &lt;md-whiteframe md-elevation=&quot;2&quot;&gt;
-                  &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
-                    &lt;div class=&quot;md-toolbar-container&quot;&gt;
-                      &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
-                        &lt;md-icon&gt;menu&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
+                &lt;md-whiteframe md-tag=&quot;md-toolbar&quot; md-elevation=&quot;2&quot; md-theme=&quot;light-blue&quot; class=&quot;md-large&quot;&gt;
+                  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                      &lt;md-icon&gt;menu&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
 
-                      &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
+                    &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
 
-                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
-                        &lt;md-icon&gt;search&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                      &lt;md-icon&gt;search&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
 
-                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
-                        &lt;md-icon&gt;view_module&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
-                    &lt;/div&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                      &lt;md-icon&gt;view_module&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/div&gt;
 
-                    &lt;div class=&quot;md-toolbar-container&quot;&gt;
-                      &lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
+                  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+                    &lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
 
-                      &lt;md-button class=&quot;md-fab md-mini&quot;&gt;
-                        &lt;md-icon&gt;add&lt;/md-icon&gt;
-                      &lt;/md-button&gt;
-                    &lt;/div&gt;
-                  &lt;/md-toolbar&gt;
+                    &lt;md-button class=&quot;md-fab md-mini&quot;&gt;
+                      &lt;md-icon&gt;add&lt;/md-icon&gt;
+                    &lt;/md-button&gt;
+                  &lt;/div&gt;
                 &lt;/md-whiteframe&gt;
 
                 &lt;md-list class=&quot;md-double-line&quot;&gt;
@@ -700,7 +696,7 @@
                   &lt;md-subheader class=&quot;md-inset&quot;&gt;Files&lt;/md-subheader&gt;
 
                   &lt;md-list-item&gt;
-                    &lt;md-avatar v-md-theme=&quot;&#039;blue&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                    &lt;md-avatar md-theme=&quot;blue&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
                       &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt;
                     &lt;/md-avatar&gt;
 
@@ -715,7 +711,7 @@
                   &lt;/md-list-item&gt;
 
                   &lt;md-list-item&gt;
-                    &lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                    &lt;md-avatar md-theme=&quot;orange&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
                       &lt;md-icon&gt;collections&lt;/md-icon&gt;
                     &lt;/md-avatar&gt;
 
@@ -730,7 +726,7 @@
                   &lt;/md-list-item&gt;
 
                   &lt;md-list-item&gt;
-                    &lt;md-avatar v-md-theme=&quot;&#039;green&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                    &lt;md-avatar md-theme=&quot;green&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
                       &lt;md-icon&gt;view_list&lt;/md-icon&gt;
                     &lt;/md-avatar&gt;
 
@@ -745,7 +741,7 @@
                   &lt;/md-list-item&gt;
 
                   &lt;md-list-item&gt;
-                    &lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+                    &lt;md-avatar md-theme=&quot;orange&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
                       &lt;md-icon&gt;collections&lt;/md-icon&gt;
                     &lt;/md-avatar&gt;
 
@@ -760,8 +756,8 @@
                   &lt;/md-list-item&gt;
                 &lt;/md-list&gt;
 
-                &lt;md-sidenav class=&quot;md-left&quot; ref=&quot;sidenav&quot;&gt;
-                  &lt;md-toolbar class=&quot;md-account-header&quot; v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+                &lt;md-sidenav md-theme=&quot;blue&quot; class=&quot;md-left&quot; ref=&quot;sidenav&quot;&gt;
+                  &lt;md-toolbar class=&quot;md-account-header&quot;&gt;
                     &lt;md-list class=&quot;md-transparent&quot;&gt;
                       &lt;md-list-item class=&quot;md-avatar-list&quot;&gt;
                         &lt;md-avatar class=&quot;md-large&quot;&gt;
@@ -792,7 +788,7 @@
                     &lt;/md-list&gt;
                   &lt;/md-toolbar&gt;
 
-                  &lt;md-list v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+                  &lt;md-list&gt;
                     &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
                       &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt; &lt;span&gt;My files&lt;/span&gt;
                     &lt;/md-list-item&gt;
@@ -833,12 +829,6 @@
                   left: 16px;
                 }
 
-                .md-toolbar {
-                  .md-icon {
-                    color: #014e70;
-                  }
-                }
-
                 .md-title {
                   color: #fff;
                 }
@@ -897,12 +887,6 @@
       left: 16px;
     }
 
-    .md-toolbar {
-      .md-icon {
-        color: #014e70;
-      }
-    }
-
     .md-title {
       color: #fff;
     }
diff --git a/docs/src/pages/themes/Configuration.vue b/docs/src/pages/themes/Configuration.vue
index 728a880..f0c95ab 100644
--- a/docs/src/pages/themes/Configuration.vue
+++ b/docs/src/pages/themes/Configuration.vue
@@ -1,5 +1,5 @@
 <template>
-  <page-content page-title="Themes">
+  <page-content page-title="Themes - Configuration">
     <article class="main-content">
       <section>
         <h2 class="md-headline">Theme Engine</h2>
@@ -47,20 +47,24 @@
 
       <section>
         <h3 class="md-headline">Registering themes</h3>
-        <p>To configure the colors of your application you can use the API.</p>
+        <p>The default colors will be applied without any change in your code base. But you can change the colors of the <code>default</code> theme calling the Vue Material API.</p>
         <code-block lang="javascript">
-          Vue.material.theme.register('default', {
-            primary: 'cyan',
-            accent: 'pink',
+          Vue.material.registerTheme('default', {
+            primary: 'blue',
+            accent: 'red',
             warn: 'red',
             background: 'grey'
           })
         </code-block>
+      </section>
+
+      <section>
+        <h3 class="md-headline">Multiple themes</h3>
         <p>
-          You can call the <code>register</code> function how many times you want. However Vue Material have a <code>registerAll</code> function to create multiple themes:
+          You can call the <code>registerTheme</code> function how many times you want. However you can pass an object containing all the themes that you need to create:
         </p>
         <code-block lang="javascript">
-          Vue.material.theme.registerAll({
+          Vue.material.registerTheme({
             app: {
               primary: 'cyan'
             },
@@ -79,7 +83,7 @@
         <h3 class="md-headline">Custom Shades</h3>
         <p>To have a full use of the Material Design palette you can specify different shades for each color:</p>
         <code-block lang="javascript">
-          Vue.material.theme.register('app', {
+          Vue.material.registerTheme('about', {
             primary: {
               color: 'indigo',
               hue: 'A200'
@@ -94,22 +98,15 @@
 
       <section>
         <h3 class="md-headline">Applying a theme</h3>
-        <p>You can apply a single theme for your entire application and another for a single piece of your code. This makes easy to theme single components or to change colors between pages.</p>
-        <p>Vue Material exposes an directive called <code>v-md-theme</code> which will set the theme on an element:</p>
-        <code-block lang="html">
-          &lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt; &lt;!-- Closest element in a Vue Instance --&gt;
-            &lt;md-toolbar&gt;
-              &lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
-            &lt;/md-toolbar&gt;
-
-            &lt;md-button v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;My Button&lt;/md-button&gt;
-          &lt;/div&gt;
+        <p>To change the current theme in your application just call the <code>setCurrentTheme</code> method from anywhere in your application:</p>
+        <code-block lang="javascript">
+          Vue.material.setCurrentTheme('about')
         </code-block>
       </section>
 
       <section>
         <h3 class="md-headline">Codepen example</h3>
-        <iframe height="550" scrolling="no" title="Theme Example" src="//codepen.io/vue-material/embed/WGavBE/?height=550&theme-id=dark&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/vue-material/pen/WGavBE/">Theme Example</a> by Vue Material (<a href="http://codepen.io/vue-material">@vue-material</a>) on <a href="http://codepen.io">CodePen</a>.</iframe>
+        <iframe height="550" scrolling="no" title="Theme Example" src="//codepen.io/vue-material/embed/WGavBE/?height=550&amp;theme-id=dark&amp;default-tab=html,result&amp;embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/vue-material/pen/WGavBE/">Theme Example</a> by Vue Material (<a href="http://codepen.io/vue-material">@vue-material</a>) on <a href="http://codepen.io">CodePen</a>.</iframe>
       </section>
     </article>
   </page-content>
diff --git a/docs/src/pages/themes/DynamicThemes.vue b/docs/src/pages/themes/DynamicThemes.vue
index 4e28ffd..975b293 100644
--- a/docs/src/pages/themes/DynamicThemes.vue
+++ b/docs/src/pages/themes/DynamicThemes.vue
@@ -1,9 +1,524 @@
 <template>
   <page-content page-title="Themes - Dynamic Themes">
+    <docs-component>
+      <div slot="description">
+        <p>Vue Material have a complete theme suite. You can create several themes and apply them on-demand. Like on this documentation website you can set a different theme per-page using the API. But you can have a advanced way to change themes using dynamic themes.</p>
+        <p>You can apply a theme only in a single area of your application using the <code>&lt;md-theme&gt;</code>. If the theme component have only one child element then the theme definition will be attached to this particular element. In other case the component will wrap all of it's children in a <code>&lt;div&gt;</code> tag (or you can customize the output tag).</p>
+        <p>Also every single component in Vue Material suite have a <code>md-theme</code> attribute to set his theme.</p>
+        <p>All the components will inherit all theme properties from it's parents. If the direct parent doesn't have a theme definition the theme will be resolved by its closest parent or the current theme of the entire application.</p>
+      </div>
 
+      <div slot="api">
+        <api-table name="md-theme">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-name</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>The name of the theme to be applied.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-tag</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>The tag to be applied to wrap all it's children elements.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Component">
+          <div slot="demo">
+            <div class="app-example">
+              <md-whiteframe md-tag="md-toolbar" md-elevation="1">
+                <span class="md-title">Life Organizer 2.0</span>
+              </md-whiteframe>
+
+              <div class="page-layout">
+                <md-theme md-name="indigo">
+                  <div class="column">
+                    <strong class="md-subheading">Shopping list</strong>
+                    <md-list>
+                      <md-list-item>
+                        <md-checkbox class="md-primary md-list-action"></md-checkbox>
+                        <span class="item-text">French bread</span>
+                      </md-list-item>
+
+                      <md-list-item>
+                        <md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>
+                        <span class="item-text">Brazilian Cheese Bread</span>
+                      </md-list-item>
+
+                      <md-list-item>
+                        <md-checkbox class="md-primary md-list-action"></md-checkbox>
+                        <span class="item-text">Italian Bread</span>
+                      </md-list-item>
+                    </md-list>
+                  </div>
+                </md-theme>
+
+                <md-theme md-name="green">
+                  <div class="column">
+                    <strong class="md-subheading">Todo List</strong>
+                    <md-list>
+                      <md-list-item>
+                        <md-checkbox class="md-primary md-list-action"></md-checkbox>
+                        <span class="item-text">Create new components</span>
+                      </md-list-item>
+
+                      <md-list-item>
+                        <md-checkbox :value="true" class="md-primary md-list-action"></md-checkbox>
+                        <span class="item-text">Answer Github issues</span>
+                      </md-list-item>
+                    </md-list>
+                  </div>
+                </md-theme>
+
+                <md-theme md-name="orange">
+                  <div class="column">
+                    <strong class="md-subheading">Notes</strong>
+                    <md-list>
+                      <md-list-item>
+                        <span class="item-text">Wake up early</span>
+                        <md-button class="md-icon-button md-list-action">
+                          <md-icon>star</md-icon>
+                        </md-button>
+                      </md-list-item>
+
+                      <md-list-item>
+                        <span class="item-text">Have breakfast everyday</span>
+                        <md-button class="md-icon-button md-list-action">
+                          <md-icon class="md-primary">star</md-icon>
+                        </md-button>
+                      </md-list-item>
+
+                      <md-list-item>
+                        <span class="item-text">Contribution</span>
+                        <md-button class="md-icon-button md-list-action">
+                          <md-icon class="md-primary">star</md-icon>
+                        </md-button>
+                      </md-list-item>
+
+                      <md-list-item>
+                        <span class="item-text">Travels</span>
+                        <md-button class="md-icon-button md-list-action">
+                          <md-icon class="md-primary">star</md-icon>
+                        </md-button>
+                      </md-list-item>
+                    </md-list>
+                  </div>
+                </md-theme>
+              </div>
+            </div>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div class=&quot;app-example&quot;&gt;
+                &lt;md-theme md-name=&quot;blue&quot;&gt;
+                  &lt;md-whiteframe md-tag=&quot;md-toolbar&quot; md-elevation=&quot;1&quot;&gt;
+                    &lt;span class=&quot;md-title&quot;&gt;Life Organizer 2.0&lt;/span&gt;
+                  &lt;/md-whiteframe&gt;
+                &lt;/md-theme&gt;
+
+                &lt;div class=&quot;page-layout&quot;&gt;
+                  &lt;md-theme md-name=&quot;indigo&quot;&gt;
+                    &lt;div class=&quot;column&quot;&gt;
+                      &lt;strong class=&quot;md-subheading&quot;&gt;Shopping list&lt;/strong&gt;
+                      &lt;md-list&gt;
+                        &lt;md-list-item&gt;
+                          &lt;md-checkbox class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;French bread&lt;/span&gt;
+                        &lt;/md-list-item&gt;
+
+                        &lt;md-list-item&gt;
+                          &lt;md-checkbox :value=&quot;true&quot; class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Brazilian Cheese Bread&lt;/span&gt;
+                        &lt;/md-list-item&gt;
+
+                        &lt;md-list-item&gt;
+                          &lt;md-checkbox class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Italian Bread&lt;/span&gt;
+                        &lt;/md-list-item&gt;
+                      &lt;/md-list&gt;
+                    &lt;/div&gt;
+                  &lt;/md-theme&gt;
+
+                  &lt;md-theme md-name=&quot;green&quot;&gt;
+                    &lt;div class=&quot;column&quot;&gt;
+                      &lt;strong class=&quot;md-subheading&quot;&gt;Todo List&lt;/strong&gt;
+                      &lt;md-list&gt;
+                        &lt;md-list-item&gt;
+                          &lt;md-checkbox class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Create new components&lt;/span&gt;
+                        &lt;/md-list-item&gt;
+
+                        &lt;md-list-item&gt;
+                          &lt;md-checkbox :value=&quot;true&quot; class=&quot;md-primary md-list-action&quot;&gt;&lt;/md-checkbox&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Answer Github issues&lt;/span&gt;
+                        &lt;/md-list-item&gt;
+                      &lt;/md-list&gt;
+                    &lt;/div&gt;
+                  &lt;/md-theme&gt;
+
+                  &lt;md-theme md-name=&quot;orange&quot;&gt;
+                    &lt;div class=&quot;column&quot;&gt;
+                      &lt;strong class=&quot;md-subheading&quot;&gt;Notes&lt;/strong&gt;
+                      &lt;md-list&gt;
+                        &lt;md-list-item&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Wake up early&lt;/span&gt;
+                          &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                            &lt;md-icon&gt;star&lt;/md-icon&gt;
+                          &lt;/md-button&gt;
+                        &lt;/md-list-item&gt;
+
+                        &lt;md-list-item&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Have breakfast everyday&lt;/span&gt;
+                          &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                            &lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
+                          &lt;/md-button&gt;
+                        &lt;/md-list-item&gt;
+
+                        &lt;md-list-item&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Contribution&lt;/span&gt;
+                          &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                            &lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
+                          &lt;/md-button&gt;
+                        &lt;/md-list-item&gt;
+
+                        &lt;md-list-item&gt;
+                          &lt;span class=&quot;item-text&quot;&gt;Travels&lt;/span&gt;
+                          &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+                            &lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
+                          &lt;/md-button&gt;
+                        &lt;/md-list-item&gt;
+                      &lt;/md-list&gt;
+                    &lt;/div&gt;
+                  &lt;/md-theme&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+            </code-block>
+
+            <code-block lang="scss">
+              .app-example {
+                .page-layout {
+                  display: flex;
+                }
+
+                .column {
+                  flex: 1;
+                  background-color: rgba(#000, .06);
+
+                  + .column {
+                    margin-left: 16px;
+                  }
+                }
+
+                .md-list {
+                  background: none;
+                }
+
+                .md-subheading {
+                  padding: 16px;
+                  display: block;
+                }
+
+                .item-text {
+                  flex: 1;
+                }
+
+                .md-checkbox {
+                  margin-right: 16px;
+                }
+
+                .md-button {
+                  margin-left: 16px;
+                }
+              }
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Attribute">
+          <div slot="demo">
+            <md-whiteframe>
+              <md-toolbar md-theme="blue">
+                <span class="md-title">My app dashboard</span>
+              </md-toolbar>
+            </md-whiteframe>
+
+            <div class="card-layout">
+              <div class="column">
+                <md-card class="md-primary" md-theme="blue" md-with-hover>
+                  <md-card-media>
+                    <img src="assets/card-image-1.jpg" alt="People">
+                  </md-card-media>
+
+                  <md-ink-ripple></md-ink-ripple>
+
+                  <md-card-actions>
+                    <md-button class="md-icon-button">
+                      <md-icon>favorite</md-icon>
+                    </md-button>
+
+                    <md-button class="md-icon-button">
+                      <md-icon>bookmark</md-icon>
+                    </md-button>
+
+                    <md-button class="md-icon-button">
+                      <md-icon>share</md-icon>
+                    </md-button>
+                  </md-card-actions>
+                </md-card>
+
+                <md-card class="md-primary" md-theme="green" md-with-hover>
+                  <md-card-header>
+                    <div class="md-title">Title goes here</div>
+                    <div class="md-subhead">Subtitle here</div>
+                  </md-card-header>
+
+                  <md-card-content>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</md-card-content>
+
+                  <md-ink-ripple></md-ink-ripple>
+
+                  <md-card-actions>
+                    <md-button>Action</md-button>
+                    <md-button>Action</md-button>
+                  </md-card-actions>
+                </md-card>
+              </div>
+
+              <div class="column">
+                <md-card class="md-primary" md-theme="orange" md-with-hover>
+                  <md-card-header>
+                    <md-card-header-text>
+                      <div class="md-title">Title here</div>
+                      <div class="md-subhead">Subtitle here</div>
+                    </md-card-header-text>
+
+                    <md-card-media>
+                      <img src="assets/avatar-2.jpg" alt="People">
+                    </md-card-media>
+                  </md-card-header>
+
+                  <md-card-actions>
+                    <md-button>Action</md-button>
+                    <md-button>Action</md-button>
+                  </md-card-actions>
+                </md-card>
+
+                <md-card class="md-primary" md-theme="blue" md-with-hover>
+                  <md-card-media md-ratio="16:9">
+                    <img src="assets/card-sky.jpg" alt="People">
+                  </md-card-media>
+
+                  <md-ink-ripple></md-ink-ripple>
+
+                  <md-card-actions>
+                    <md-button class="md-icon-button">
+                      <md-icon>favorite</md-icon>
+                    </md-button>
+
+                    <md-button class="md-icon-button">
+                      <md-icon>bookmark</md-icon>
+                    </md-button>
+
+                    <md-button class="md-icon-button">
+                      <md-icon>share</md-icon>
+                    </md-button>
+                  </md-card-actions>
+                </md-card>
+              </div>
+            </div>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-whiteframe&gt;
+                &lt;md-toolbar md-theme=&quot;blue&quot;&gt;
+                  &lt;span class=&quot;md-title&quot;&gt;My app dashboard&lt;/span&gt;
+                &lt;/md-toolbar&gt;
+              &lt;/md-whiteframe&gt;
+
+              &lt;div class=&quot;card-layout&quot;&gt;
+                &lt;div class=&quot;column&quot;&gt;
+                  &lt;md-card class=&quot;md-primary&quot; md-theme=&quot;blue&quot; md-with-hover&gt;
+                    &lt;md-card-media&gt;
+                      &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+                    &lt;/md-card-media&gt;
+
+                    &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+
+                    &lt;md-card-actions&gt;
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;bookmark&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;share&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+                    &lt;/md-card-actions&gt;
+                  &lt;/md-card&gt;
+
+                  &lt;md-card class=&quot;md-primary&quot; md-theme=&quot;green&quot; md-with-hover&gt;
+                    &lt;md-card-header&gt;
+                      &lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
+                      &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+                    &lt;/md-card-header&gt;
+
+                    &lt;md-card-content&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/md-card-content&gt;
+
+                    &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+
+                    &lt;md-card-actions&gt;
+                      &lt;md-button&gt;Action&lt;/md-button&gt;
+                      &lt;md-button&gt;Action&lt;/md-button&gt;
+                    &lt;/md-card-actions&gt;
+                  &lt;/md-card&gt;
+                &lt;/div&gt;
+
+                &lt;div class=&quot;column&quot;&gt;
+                  &lt;md-card class=&quot;md-primary&quot; md-theme=&quot;orange&quot; md-with-hover&gt;
+                    &lt;md-card-header&gt;
+                      &lt;md-card-header-text&gt;
+                        &lt;div class=&quot;md-title&quot;&gt;Title here&lt;/div&gt;
+                        &lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
+                      &lt;/md-card-header-text&gt;
+
+                      &lt;md-card-media&gt;
+                        &lt;img src=&quot;assets/avatar-2.jpg&quot; alt=&quot;People&quot;&gt;
+                      &lt;/md-card-media&gt;
+                    &lt;/md-card-header&gt;
+
+                    &lt;md-card-actions&gt;
+                      &lt;md-button&gt;Action&lt;/md-button&gt;
+                      &lt;md-button&gt;Action&lt;/md-button&gt;
+                    &lt;/md-card-actions&gt;
+                  &lt;/md-card&gt;
+
+                  &lt;md-card class=&quot;md-primary&quot; md-theme=&quot;blue&quot; md-with-hover&gt;
+                    &lt;md-card-media md-ratio=&quot;16:9&quot;&gt;
+                      &lt;img src=&quot;assets/card-sky.jpg&quot; alt=&quot;People&quot;&gt;
+                    &lt;/md-card-media&gt;
+
+                    &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
+
+                    &lt;md-card-actions&gt;
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;bookmark&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+
+                      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                        &lt;md-icon&gt;share&lt;/md-icon&gt;
+                      &lt;/md-button&gt;
+                    &lt;/md-card-actions&gt;
+                  &lt;/md-card&gt;
+                &lt;/div&gt;
+              &lt;/div&gt;
+            </code-block>
+
+            <code-block lang="scss">
+              .card-layout {
+                margin: 16px 15%;
+                display: flex;
+
+                .column {
+                  flex: 1;
+
+                  + .column {
+                    margin-left: 8px;
+                  }
+                }
+
+                .md-card + .md-card {
+                  margin-top: 8px;
+                }
+              }
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
   </page-content>
 </template>
 
 <style lang="scss" scoped>
+  section {
+    max-width: 960px;
 
+    + section {
+      margin-top: 56px;
+    }
+  }
+
+  .app-example {
+    .page-layout {
+      display: flex;
+    }
+
+    .column {
+      flex: 1;
+      background-color: rgba(#000, .06);
+
+      + .column {
+        margin-left: 16px;
+      }
+    }
+
+    .md-list {
+      background: none;
+    }
+
+    .md-subheading {
+      padding: 16px;
+      display: block;
+    }
+
+    .item-text {
+      flex: 1;
+    }
+
+    .md-checkbox {
+      margin-right: 16px;
+    }
+
+    .md-button {
+      margin-left: 16px;
+    }
+  }
+
+  .card-layout {
+    margin: 16px 15%;
+    display: flex;
+
+    .column {
+      flex: 1;
+
+      + .column {
+        margin-left: 8px;
+      }
+    }
+
+    .md-card + .md-card {
+      margin-top: 8px;
+    }
+  }
 </style>
diff --git a/docs/src/pages/ui-elements/GridSystem.vue b/docs/src/pages/ui-elements/GridSystem.vue
deleted file mode 100644
index b2dce1c..0000000
--- a/docs/src/pages/ui-elements/GridSystem.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <page-content page-title="UI Elements - Grid System">
-
-  </page-content>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
new file mode 100644
index 0000000..e9d3173
--- /dev/null
+++ b/docs/src/pages/ui-elements/Layout.vue
@@ -0,0 +1,466 @@
+<template>
+  <page-content page-title="UI Elements - Layout">
+    <docs-component>
+      <div slot="description">
+        <p>Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.</p>
+        <p>By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the <code>md-gutter</code> property. If you want the automatic calculation the engine will set <code>16px</code> for small screens and then apply <code>24px</code> for medium to large.</p>
+        <p>You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.</p>
+        <p>The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:</p>
+        <md-table slot="properties" class="properties">
+          <md-table-header>
+            <md-table-row>
+              <md-table-head>Name</md-table-head>
+              <md-table-head>Size</md-table-head>
+              <md-table-head>Description</md-table-head>
+            </md-table-row>
+          </md-table-header>
+
+          <md-table-body>
+            <md-table-row>
+              <md-table-cell><code>xsmall</code></md-table-cell>
+              <md-table-cell>600px</md-table-cell>
+              <md-table-cell>For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.</md-table-cell>
+            </md-table-row>
+
+            <md-table-row>
+              <md-table-cell><code>small</code></md-table-cell>
+              <md-table-cell>960px</md-table-cell>
+              <md-table-cell>For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.</md-table-cell>
+            </md-table-row>
+
+            <md-table-row>
+              <md-table-cell><code>medium</code></md-table-cell>
+              <md-table-cell>1280px</md-table-cell>
+              <md-table-cell>For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.</md-table-cell>
+            </md-table-row>
+
+            <md-table-row>
+              <md-table-cell><code>large</code></md-table-cell>
+              <md-table-cell>1920px</md-table-cell>
+              <md-table-cell>For screens who have between of 1280px and 1920px wide. For large desktop monitors.</md-table-cell>
+            </md-table-row>
+
+            <md-table-row>
+              <md-table-cell><code>xlarge</code></md-table-cell>
+              <md-table-cell>>1920px</md-table-cell>
+              <md-table-cell>For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.</md-table-cell>
+            </md-table-row>
+          </md-table-body>
+        </md-table>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-layout">
+          <md-table slot="properties" class="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-tag</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>The output tag. Default <code>div</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-gutter</md-table-cell>
+                <md-table-cell><code>Boolean|Number</code></md-table-cell>
+                <md-table-cell>Apply a gutter space to direct childs of the element that have this property. If <code>true</code> the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts <code>8</code>|<code>16</code>|<code>24</code>|<code>40</code>. Default <code>false</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-row</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Create a row container. All child will be side by side.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-row-{type}</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Create a row container on screen sizes less than or equal to given breakpoint. Example: <code>md-row-large</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-column</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Create a column container. All child will be one underneath the other.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-column-{type}</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Create a column container on screen sizes less than or equal to given breakpoint. Example: <code>md-column-small</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-hide-{type}</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: <code>md-hide-medium</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-flex</md-table-cell>
+                <md-table-cell><code>Boolean|Number</code></md-table-cell>
+                <md-table-cell>Create a flexible child. If <code>true</code> the child element will grow to fill the empty space available on the parent element. If <code>Number</code> the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: <code>true</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-flex-{type}</md-table-cell>
+                <md-table-cell><code>Boolean|Number</code></md-table-cell>
+                <md-table-cell>Create a flexible child on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-small="33"</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-flex-offset</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Create a empty space before the actual child. Accepts the same value of <code>md-flex</code> Example: <code>md-flex-offset="50"</code></md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Responsive">
+          <div class="layout-demo grid" slot="demo">
+            <md-layout class="color" md-gutter>
+              <md-layout class="color-red" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-blue" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-pink" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-teal" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                <div class="grid-content">
+                  md-flex-xsmall <br>
+                  md-flex-small="50" <br>
+                  md-flex-medium="33"
+                </div>
+              </md-layout>
+
+              <md-layout class="color-green" md-flex-small="100" md-flex-medium="33" md-hide-xsmall>
+                <div class="grid-content">
+                  md-flex-medium="33" <br>
+                  md-hide-xsmall
+                </div>
+              </md-layout>
+
+              <md-layout class="color-yellow" md-flex md-flex-medium="33" md-hide-small>
+                <div class="grid-content">
+                  md-flex-medium="33" <br>
+                  md-hide-small
+                </div>
+              </md-layout>
+            </md-layout>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Sizes and Offset">
+          <div class="layout-demo grid" slot="demo">
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="50"></md-layout>
+              <md-layout></md-layout>
+              <md-layout></md-layout>
+              <md-layout></md-layout>
+            </md-layout>
+
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="33"></md-layout>
+              <md-layout></md-layout>
+            </md-layout>
+
+            <md-layout md-gutter class="color">
+              <md-layout></md-layout>
+              <md-layout md-flex="33" md-flex-offset="33"></md-layout>
+            </md-layout>
+
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="75"></md-layout>
+              <md-layout></md-layout>
+            </md-layout>
+
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="50"></md-layout>
+              <md-layout></md-layout>
+              <md-layout></md-layout>
+            </md-layout>
+
+            <md-layout md-gutter class="color">
+              <md-layout md-flex="25" md-flex-offset="25"></md-layout>
+              <md-layout md-flex="25"></md-layout>
+            </md-layout>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Direction">
+          <div class="layout-demo grid" slot="demo">
+            <md-layout class="column-size" md-gutter>
+              <md-layout md-column md-gutter class="color">
+                <md-layout md-flex="20"></md-layout>
+                <md-layout></md-layout>
+              </md-layout>
+
+              <md-layout md-column md-gutter class="color">
+                <md-layout md-flex="50"></md-layout>
+                <md-layout></md-layout>
+                <md-layout></md-layout>
+              </md-layout>
+            </md-layout>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Gutters">
+          <div class="layout-demo grid gutter" slot="demo">
+            <md-layout class="no-gutter color">
+              <md-layout></md-layout>
+              <md-layout></md-layout>
+            </md-layout>
+
+            <md-layout :md-gutter="8" class="color">
+              <md-layout>
+                <span>8px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>8px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>8px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>8px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>8px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>8px</span>
+              </md-layout>
+            </md-layout>
+
+            <md-layout md-gutter="16" class="color">
+              <md-layout>
+                <span>16px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>16px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>16px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>16px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>16px</span>
+              </md-layout>
+            </md-layout>
+
+            <md-layout :md-gutter="24" class="color">
+              <md-layout>
+                <span>24px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>24px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>24px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>24px</span>
+              </md-layout>
+            </md-layout>
+
+            <md-layout :md-gutter="40" class="color">
+              <md-layout>
+                <span>40px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>40px</span>
+              </md-layout>
+
+              <md-layout>
+                <span>40px</span>
+              </md-layout>
+            </md-layout>
+
+            <md-layout md-gutter class="color">
+              <md-layout>
+                <span>Automatic</span>
+              </md-layout>
+
+              <md-layout>
+                <span>Automatic</span>
+              </md-layout>
+            </md-layout>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="scss" scoped>
+  .layout-demo {
+    min-height: 100px;
+  }
+
+  .no-gutter > .md-layout:last-child:before {
+    background-color: rgba(#000, .2) !important;
+  }
+
+  .grid > .md-layout {
+    > .md-layout:not(.md-column) {
+      min-height: 40px;
+      margin-bottom: 16px;
+    }
+  }
+
+  .grid-content {
+    padding: 16px;
+  }
+
+  .gutter .color .md-layout {
+    color: rgba(#000, .54);
+    font-size: 13px;
+    font-weight: 500;
+    text-indent: 8px;
+  }
+
+  .color {
+    $sizes: (8, 16, 24, 40);
+
+    @each $item in $sizes {
+      $size: $item / 2 + px;
+
+      &:not(.md-column).md-gutter-#{$item} > .md-layout:before {
+        right: $size;
+        left: $size;
+      }
+
+      &.md-column.md-gutter-#{$item} > .md-layout:before {
+        top: $size;
+        bottom: $size;
+      }
+    }
+
+    > .md-layout {
+      position: relative;
+
+      &:before {
+        width: 100%;
+        height: 100%;
+        margin-bottom: -200%;
+        display: block;
+        pointer-events: none;
+        background-color: rgba(#000, .12);
+        content: " ";
+      }
+    }
+  }
+
+  .column-size {
+    height: 250px !important;
+
+    + .column-size {
+      margin-top: 48px !important;
+    }
+  }
+
+  .color-red:before {
+    background-color: #F44336 !important;
+  }
+
+  .color-blue:before {
+    background-color: #2196F3 !important;
+  }
+
+  .color-yellow:before {
+    background-color: #FFEB3B !important;
+  }
+
+  .color-green:before {
+    background-color: #4CAF50 !important;
+  }
+
+  .color-purple:before {
+    background-color: #9C27B0 !important;
+  }
+
+  .color-pink:before {
+    background-color: #E91E63 !important;
+  }
+
+  .color-teal:before {
+    background-color: #009688 !important;
+  }
+
+  .color-orange:before {
+    background-color: #FF9800 !important;
+  }
+
+  .properties {
+    table tr td:first-child {
+      white-space: nowrap;
+    }
+  }
+</style>
diff --git a/docs/src/pages/ui-elements/Typography.vue b/docs/src/pages/ui-elements/Typography.vue
index 023ac9a..03e0cbc 100644
--- a/docs/src/pages/ui-elements/Typography.vue
+++ b/docs/src/pages/ui-elements/Typography.vue
@@ -1,5 +1,5 @@
 <template>
-  <page-content page-title="Typography">
+  <page-content page-title="UI Elements - Typography">
     <docs-component>
       <div slot="description">
         <h2 class="md-title">Styles</h2>
diff --git a/docs/src/routes.js b/docs/src/routes.js
index 31898f5..5024f20 100644
--- a/docs/src/routes.js
+++ b/docs/src/routes.js
@@ -21,6 +21,7 @@ import Radio from './pages/components/Radio';
 import InkRipple from './pages/components/InkRipple';
 import Select from './pages/components/Select';
 import Sidenav from './pages/components/Sidenav';
+import Spinner from './pages/components/Spinner';
 import Subheader from './pages/components/Subheader';
 import Switch from './pages/components/Switch';
 import Table from './pages/components/Table';
@@ -31,7 +32,7 @@ import Whiteframe from './pages/components/Whiteframe';
 
 /* UI Elements */
 import Typography from './pages/ui-elements/Typography';
-import GridSystem from './pages/ui-elements/GridSystem';
+import Layout from './pages/ui-elements/Layout';
 
 /* Themes */
 import Configuration from './pages/themes/Configuration';
@@ -141,6 +142,11 @@ const components = [
     name: 'components:sidenav',
     component: Sidenav
   },
+  {
+    path: '/components/spinner',
+    name: 'components:spinner',
+    component: Spinner
+  },
   {
     path: '/components/switch',
     name: 'components:switch',
@@ -208,9 +214,9 @@ const uiElements = [
     component: Typography
   },
   {
-    path: '/ui-elements/grid-system',
-    name: 'ui-elements:grid-system',
-    component: GridSystem
+    path: '/ui-elements/layout',
+    name: 'ui-elements:layout',
+    component: Layout
   }
 ];
 
diff --git a/src/components/mdAvatar/mdAvatar.theme b/src/components/mdAvatar/mdAvatar.theme
index a68c820..39cfa94 100644
--- a/src/components/mdAvatar/mdAvatar.theme
+++ b/src/components/mdAvatar/mdAvatar.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-avatar,
   &.md-avatar {
     &.md-primary {
       &.md-avatar-icon {
diff --git a/src/components/mdAvatar/mdAvatar.vue b/src/components/mdAvatar/mdAvatar.vue
index 103df3d..ede126d 100644
--- a/src/components/mdAvatar/mdAvatar.vue
+++ b/src/components/mdAvatar/mdAvatar.vue
@@ -1,7 +1,15 @@
 <template>
-  <div class="md-avatar">
+  <div class="md-avatar" :class="[themeClass]">
     <slot></slot>
   </div>
 </template>
 
 <style lang="scss" src="./mdAvatar.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  export default {
+    mixins: [theme]
+  };
+</script>
diff --git a/src/components/mdBottomBar/mdBottomBar.theme b/src/components/mdBottomBar/mdBottomBar.theme
index e8c0ae8..4311b36 100644
--- a/src/components/mdBottomBar/mdBottomBar.theme
+++ b/src/components/mdBottomBar/mdBottomBar.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-bottom-bar,
   &.md-bottom-bar {
     &.md-fixed {
       background-color: #{'BACKGROUND-COLOR'};
diff --git a/src/components/mdBottomBar/mdBottomBar.vue b/src/components/mdBottomBar/mdBottomBar.vue
index 1d50e77..f98836e 100644
--- a/src/components/mdBottomBar/mdBottomBar.vue
+++ b/src/components/mdBottomBar/mdBottomBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-bottom-bar" :class="classes">
+  <div class="md-bottom-bar" :class="[themeClass, classes]">
     <slot></slot>
   </div>
 </template>
@@ -7,10 +7,13 @@
 <style lang="scss" src="./mdBottomBar.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     props: {
       mdShift: Boolean
     },
+    mixins: [theme],
     computed: {
       classes() {
         return this.mdShift ? 'md-shift' : 'md-fixed';
diff --git a/src/components/mdButton/mdButton.theme b/src/components/mdButton/mdButton.theme
index f49f455..5c22515 100644
--- a/src/components/mdButton/mdButton.theme
+++ b/src/components/mdButton/mdButton.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-button:not([disabled]),
   &.md-button:not([disabled]) {
     &.md-raised {
       &:not(.md-icon-button) {
diff --git a/src/components/mdButton/mdButton.vue b/src/components/mdButton/mdButton.vue
index 926c2e7..4e133ce 100644
--- a/src/components/mdButton/mdButton.vue
+++ b/src/components/mdButton/mdButton.vue
@@ -1,41 +1,40 @@
+<template>
+  <button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" @click="$emit('click', $event)" v-if="!href">
+    <md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
+    <slot></slot>
+  </button>
+
+  <a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" @click="$emit('click', $event)" v-else>
+    <md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
+    <slot></slot>
+  </a>
+</template>
+
 <style lang="scss" src="./mdButton.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     props: {
       href: String,
-      type: String,
+      target: String,
+      rel: String,
+      type: {
+        type: String,
+        default: 'button'
+      },
       disabled: Boolean
     },
-    render(createElement) {
-      let isDisabled = Boolean(this.disabled);
-      let hasLink = Boolean(this.href);
-      let tag = 'button';
-      let options = {
-        staticClass: 'md-button',
-        attrs: {
-          type: this.type || 'button',
-          disabled: isDisabled
-        },
-        on: {
-          click: ($event) => {
-            this.$emit('click', $event);
-          }
+    mixins: [theme],
+    computed: {
+      newRel() {
+        if (this.target === '_blank') {
+          return this.rel || 'noopener';
         }
-      };
-      let ripple = createElement('md-ink-ripple', {
-        attrs: {
-          mdDisabled: isDisabled
-        }
-      });
 
-      if (hasLink) {
-        tag = 'a';
-        options.attrs.href = this.href;
-        delete options.attrs.type;
+        return this.rel;
       }
-
-      return createElement(tag, options, [...this.$slots.default, ripple]);
     }
   };
 </script>
diff --git a/src/components/mdButtonToggle/mdButtonToggle.theme b/src/components/mdButtonToggle/mdButtonToggle.theme
index 9bed785..795b1b1 100644
--- a/src/components/mdButtonToggle/mdButtonToggle.theme
+++ b/src/components/mdButtonToggle/mdButtonToggle.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-button-toggle,
   &.md-button-toggle {
     .md-button {
       &:after {
diff --git a/src/components/mdButtonToggle/mdButtonToggle.vue b/src/components/mdButtonToggle/mdButtonToggle.vue
index 6b9bc3a..70ad2d2 100644
--- a/src/components/mdButtonToggle/mdButtonToggle.vue
+++ b/src/components/mdButtonToggle/mdButtonToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-button-group md-button-toggle">
+  <div class="md-button-toggle" :class="[themeClass]" >
     <slot></slot>
   </div>
 </template>
@@ -7,12 +7,15 @@
 <style lang="scss" src="./mdButtonToggle.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   let onClickButton;
 
   export default {
     props: {
       mdSingle: Boolean
     },
+    mixins: [theme],
     mounted() {
       this.$children.forEach((child) => {
         let element = child.$el;
diff --git a/src/components/mdCard/mdCard.theme b/src/components/mdCard/mdCard.theme
index 367a201..8deede5 100644
--- a/src/components/mdCard/mdCard.theme
+++ b/src/components/mdCard/mdCard.theme
@@ -1,8 +1,49 @@
 .THEME_NAME {
-  .md-card,
   &.md-card {
     background-color: #{'BACKGROUND-COLOR-A100'};
 
+    &.md-primary {
+      background-color: #{'PRIMARY-COLOR'};
+      color: #{'PRIMARY-CONTRAST'};
+
+      .md-card-header,
+      .md-card-actions {
+        .md-icon-button {
+          .md-icon {
+            color: #{'PRIMARY-CONTRAST-0.87'};
+          }
+        }
+      }
+    }
+
+    &.md-accent {
+      background-color: #{'ACCENT-COLOR'};
+      color: #{'ACCENT-CONTRAST'};
+
+      .md-card-header,
+      .md-card-actions {
+        .md-icon-button {
+          .md-icon {
+            color: #{'ACCENT-CONTRAST-0.87'};
+          }
+        }
+      }
+    }
+
+    &.md-warn {
+      background-color: #{'WARN-COLOR'};
+      color: #{'WARN-CONTRAST'};
+
+      .md-card-header,
+      .md-card-actions {
+        .md-icon-button {
+          .md-icon {
+            color: #{'WARN-CONTRAST-0.87'};
+          }
+        }
+      }
+    }
+
     .md-card-header,
     .md-card-actions {
       .md-icon-button {
diff --git a/src/components/mdCard/mdCard.vue b/src/components/mdCard/mdCard.vue
index 145a50a..d3b2c37 100644
--- a/src/components/mdCard/mdCard.vue
+++ b/src/components/mdCard/mdCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-card" :class="classes">
+  <div class="md-card" :class="[themeClass, classes]">
     <slot></slot>
   </div>
 </template>
@@ -7,10 +7,13 @@
 <style lang="scss" src="./mdCard.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     props: {
       mdWithHover: Boolean
     },
+    mixins: [theme],
     computed: {
       classes() {
         return {
diff --git a/src/components/mdCheckbox/mdCheckbox.theme b/src/components/mdCheckbox/mdCheckbox.theme
index 5fa4883..f7c85cc 100644
--- a/src/components/mdCheckbox/mdCheckbox.theme
+++ b/src/components/mdCheckbox/mdCheckbox.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-checkbox,
   &.md-checkbox {
     &.md-checked {
       .md-checkbox-container {
diff --git a/src/components/mdCheckbox/mdCheckbox.vue b/src/components/mdCheckbox/mdCheckbox.vue
index 93d9788..662e0d2 100644
--- a/src/components/mdCheckbox/mdCheckbox.vue
+++ b/src/components/mdCheckbox/mdCheckbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-checkbox" :class="classes">
+  <div class="md-checkbox" :class="[themeClass, classes]">
     <div class="md-checkbox-container" @click.stop="toggleCheck" v-md-ink-ripple="disabled" tabindex="0">
       <input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value" tabindex="-1">
     </div>
@@ -13,6 +13,8 @@
 <style lang="scss" src="./mdCheckbox.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     props: {
       name: String,
@@ -20,6 +22,7 @@
       id: String,
       disabled: Boolean
     },
+    mixins: [theme],
     data() {
       return {
         checked: this.value
diff --git a/src/components/mdDialog/mdDialog.theme b/src/components/mdDialog/mdDialog.theme
index a6f0547..e30a741 100644
--- a/src/components/mdDialog/mdDialog.theme
+++ b/src/components/mdDialog/mdDialog.theme
@@ -1,6 +1,5 @@
 .THEME_NAME {
-  .md-dialog,
-  &.md-dialog {
+  &.md-dialog-container .md-dialog {
     background-color: #{'BACKGROUND-COLOR-A100'};
     color: #{'BACKGROUND-CONTRAST'};
   }
diff --git a/src/components/mdDialog/mdDialog.vue b/src/components/mdDialog/mdDialog.vue
index e3067fb..52477cb 100644
--- a/src/components/mdDialog/mdDialog.vue
+++ b/src/components/mdDialog/mdDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-dialog-container" :class="classes" @keyup.esc.stop="closeOnEsc" tabindex="0">
+  <div class="md-dialog-container" :class="[themeClass, classes]" @keyup.esc.stop="closeOnEsc" tabindex="0">
     <div class="md-dialog" ref="dialog" :style="styles" :class="dialogClasses">
       <slot></slot>
     </div>
@@ -11,6 +11,7 @@
 <style lang="scss" src="./mdDialog.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
   import transitionEndEventName from '../../core/utils/transitionEndEventName';
 
   export default {
@@ -34,6 +35,7 @@
         default: false
       }
     },
+    mixins: [theme],
     data: () => ({
       active: false,
       transitionOff: false,
diff --git a/src/components/mdIcon/mdIcon.theme b/src/components/mdIcon/mdIcon.theme
index f64cfc4..df0e90b 100644
--- a/src/components/mdIcon/mdIcon.theme
+++ b/src/components/mdIcon/mdIcon.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-icon,
   &.md-icon {
     &.md-primary {
       color: #{'PRIMARY-COLOR'};
diff --git a/src/components/mdIcon/mdIcon.vue b/src/components/mdIcon/mdIcon.vue
index 565c9e0..2f87787 100644
--- a/src/components/mdIcon/mdIcon.vue
+++ b/src/components/mdIcon/mdIcon.vue
@@ -1,7 +1,15 @@
 <template>
-  <i class="md-icon material-icons">
+  <i class="md-icon material-icons" :class="[themeClass]">
     <slot></slot>
   </i>
 </template>
 
 <style lang="scss" src="./mdIcon.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  export default {
+    mixins: [theme]
+  };
+</script>
diff --git a/src/components/mdInputContainer/mdInputContainer.theme b/src/components/mdInputContainer/mdInputContainer.theme
index 3c73546..6f95fb1 100644
--- a/src/components/mdInputContainer/mdInputContainer.theme
+++ b/src/components/mdInputContainer/mdInputContainer.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-input-container,
   &.md-input-container {
     &.md-input-invalid {
       &:after {
diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue
index 6ed0b9f..6795883 100644
--- a/src/components/mdInputContainer/mdInputContainer.vue
+++ b/src/components/mdInputContainer/mdInputContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-input-container" :class="classes">
+  <div class="md-input-container" :class="[themeClass, classes]">
     <slot></slot>
 
     <span class="md-count" v-if="enableCounter">{{ inputLength }} / {{ counterLength }}</span>
@@ -13,6 +13,7 @@
 <style lang="scss" src="./mdInputContainer.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
   import isArray from '../../core/utils/isArray';
 
   export default {
@@ -20,6 +21,7 @@
       mdInline: Boolean,
       mdHasPassword: Boolean
     },
+    mixins: [theme],
     data() {
       return {
         value: '',
diff --git a/src/components/mdLayout/index.js b/src/components/mdLayout/index.js
new file mode 100644
index 0000000..5f4676b
--- /dev/null
+++ b/src/components/mdLayout/index.js
@@ -0,0 +1,5 @@
+import mdLayout from './mdLayout.vue';
+
+export default function install(Vue) {
+  Vue.component('md-layout', Vue.extend(mdLayout));
+}
diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss
new file mode 100644
index 0000000..5e48a6f
--- /dev/null
+++ b/src/components/mdLayout/mdLayout.scss
@@ -0,0 +1,170 @@
+@import '../../core/stylesheets/variables.scss';
+@import '../../core/stylesheets/mixins.scss';
+
+
+/* Rows and Columns */
+
+.md-layout {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 1;
+}
+
+@mixin layout($size: null) {
+  @if $size == null {
+    $size : '';
+  }
+
+  @if $size != '' {
+    $size : '-#{$size}';
+  }
+
+  .md-row#{$size} {
+    flex-direction: row;
+  }
+
+  .md-column#{$size} {
+    flex-direction: column;
+  }
+}
+
+@include layout();
+
+
+/* Container */
+
+.md-layout.md-container {
+  width: 100%;
+  max-width: 1200px;
+
+  &.md-centered {
+    margin: 0 auto;
+  }
+}
+
+
+/* Gutter Size */
+
+@mixin layout-gutter($margin: -12px, $padding: 12px) {
+  &:not(.md-column) {
+    margin-right: $margin;
+    margin-left: $margin;
+
+    > .md-layout {
+      padding-right: $padding;
+      padding-left: $padding;
+    }
+  }
+
+  .md-column {
+    margin-top: $margin;
+    margin-bottom: $margin;
+
+    > .md-layout {
+      padding-top: $padding;
+      padding-bottom: $padding;
+    }
+  }
+}
+
+.md-gutter {
+  @include layout-gutter();
+
+  @include layout-small {
+    @include layout-gutter(-8px, 8px);
+  }
+}
+
+$sizes: (8, 16, 24, 40);
+
+@each $item in $sizes {
+  $margin: -$item / 2 + px;
+  $padding: $item / 2 + px;
+
+  .md-gutter-#{$item} {
+    @include layout-gutter($margin, $padding);
+  }
+}
+
+
+/* Flex Size */
+
+@mixin layout-flex($size: null) {
+  @if $size == null {
+    $size : '';
+  }
+
+  @if $size != '' {
+    $size : '-#{$size}';
+  }
+
+  .md-flex#{$size} {
+    flex: 1 1;
+  }
+
+  .md-flex#{$size}-33 {
+    min-width: 33.33333%;
+    flex: 0 1 33.33333%;
+  }
+
+  .md-flex#{$size}-66 {
+    min-width: 33.33333%;
+    flex: 0 1 66.66666%;
+  }
+
+  .md-flex-offset#{$size}-33 {
+    margin-left: 33.33333%;
+  }
+
+  .md-flex-offset#{$size}-66 {
+    margin-left: 66.66666%;
+  }
+
+  @for $i from 1 through 20 {
+    $counter: $i * 5;
+
+    .md-flex#{$size}-#{$counter} {
+      min-width: #{$counter + '%'};
+      flex: 0 1 #{$counter + '%'};
+    }
+
+    .md-flex-offset#{$size}-#{$counter} {
+      margin-left: #{$counter + '%'};
+    }
+  }
+}
+
+@include layout-flex();
+
+
+/* Responsive Breakpoints */
+
+@mixin breakpoint-layout($size) {
+  @include layout($size);
+  @include layout-flex($size);
+
+  .md-hide-#{$size} {
+    display: none;
+  }
+}
+
+@include layout-xlarge {
+  @include breakpoint-layout(xlarge);
+}
+
+@include layout-large {
+  @include breakpoint-layout(large);
+}
+
+@include layout-medium {
+  @include breakpoint-layout(medium);
+}
+
+@include layout-small {
+  @include breakpoint-layout(small);
+}
+
+@include layout-xsmall {
+  @include breakpoint-layout(xsmall);
+}
diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue
new file mode 100644
index 0000000..098266c
--- /dev/null
+++ b/src/components/mdLayout/mdLayout.vue
@@ -0,0 +1,102 @@
+<style lang="scss" src="./mdLayout.scss"></style>
+
+<script>
+  export default {
+    props: {
+      mdTag: {
+        type: String,
+        default: 'div'
+      },
+      mdRow: Boolean,
+      mdRowXsmall: Boolean,
+      mdRowSmall: Boolean,
+      mdRowMedium: Boolean,
+      mdRowLarge: Boolean,
+      mdRowXlarge: Boolean,
+      mdColumn: Boolean,
+      mdColumnXsmall: Boolean,
+      mdColumnSmall: Boolean,
+      mdColumnMedium: Boolean,
+      mdColumnLarge: Boolean,
+      mdColumnXlarge: Boolean,
+      mdHideXsmall: Boolean,
+      mdHideSmall: Boolean,
+      mdHideMedium: Boolean,
+      mdHideLarge: Boolean,
+      mdHideXlarge: Boolean,
+      mdGutter: [String, Number, Boolean],
+      mdFlex: [String, Number, Boolean],
+      mdFlexXsmall: [String, Number, Boolean],
+      mdFlexSmall: [String, Number, Boolean],
+      mdFlexMedium: [String, Number, Boolean],
+      mdFlexLarge: [String, Number, Boolean],
+      mdFlexXlarge: [String, Number, Boolean],
+      mdFlexOffset: [String, Number]
+    },
+    computed: {
+      classes() {
+        let classes = {
+          'md-row': this.mdRow,
+          'md-row-xsmall': this.mdRowXsmall,
+          'md-row-small': this.mdRowSmall,
+          'md-row-medium': this.mdRowMedium,
+          'md-row-large': this.mdRowLarge,
+          'md-row-xlarge': this.mdRowXlarge,
+          'md-column': this.mdColumn,
+          'md-column-xsmall': this.mdColumnXsmall,
+          'md-column-small': this.mdColumnSmall,
+          'md-column-medium': this.mdColumnMedium,
+          'md-column-large': this.mdColumnLarge,
+          'md-column-xlarge': this.mdColumnXlarge,
+          'md-hide-xsmall': this.mdHideXsmall,
+          'md-hide-small': this.mdHideSmall,
+          'md-hide-medium': this.mdHideMedium,
+          'md-hide-large': this.mdHideLarge,
+          'md-hide-xlarge': this.mdHideXlarge
+        };
+
+        if (this.mdGutter) {
+          if (typeof this.mdGutter === 'boolean') {
+            classes['md-gutter'] = true;
+          } else if (this.mdGutter) {
+            classes['md-gutter-' + this.mdGutter] = true;
+          }
+        }
+
+        if (this.mdFlexOffset) {
+          classes['md-flex-offset-' + this.mdFlexOffset] = true;
+        }
+
+        this.generateFlexClasses('', 'mdFlex', classes);
+        this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
+        this.generateFlexClasses('small', 'mdFlexSmall', classes);
+        this.generateFlexClasses('medium', 'mdFlexMedium', classes);
+        this.generateFlexClasses('large', 'mdFlexLarge', classes);
+        this.generateFlexClasses('xlarge', 'mdFlexXlarge', classes);
+
+        return classes;
+      }
+    },
+    methods: {
+      generateFlexClasses(size, name, object) {
+        if (size) {
+          size = '-' + size;
+        }
+
+        if (this[name]) {
+          if (typeof this[name] === 'boolean') {
+            object['md-flex' + size] = true;
+          } else {
+            object['md-flex' + size + '-' + this[name]] = true;
+          }
+        }
+      }
+    },
+    render(createElement) {
+      return createElement(this.mdTag, {
+        staticClass: 'md-layout',
+        class: this.classes
+      }, this.$slots.default);
+    }
+  };
+</script>
diff --git a/src/components/mdList/mdList.theme b/src/components/mdList/mdList.theme
index 5303502..a03f35c 100644
--- a/src/components/mdList/mdList.theme
+++ b/src/components/mdList/mdList.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-list,
   &.md-list {
     background-color: #{'BACKGROUND-COLOR-A100'};
     color: #{'BACKGROUND-CONTRAST'};
diff --git a/src/components/mdList/mdList.vue b/src/components/mdList/mdList.vue
index f26c44c..fc6802e 100644
--- a/src/components/mdList/mdList.vue
+++ b/src/components/mdList/mdList.vue
@@ -1,7 +1,15 @@
 <template>
-  <ul class="md-list">
+  <ul class="md-list" :class="[themeClass]">
     <slot></slot>
   </ul>
 </template>
 
 <style lang="scss" src="./mdList.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  export default {
+    mixins: [theme]
+  };
+</script>
diff --git a/src/components/mdList/mdListItem.vue b/src/components/mdList/mdListItem.vue
index d277338..3a1b681 100644
--- a/src/components/mdList/mdListItem.vue
+++ b/src/components/mdList/mdListItem.vue
@@ -16,8 +16,8 @@
       let listItemSpec = {
         staticClass: 'md-list-item',
         on: {
-          click: () => {
-            this.$emit('click');
+          click: ($event) => {
+            this.$emit('click', $event);
           }
         }
       };
@@ -26,13 +26,14 @@
         return createElement('div', { staticClass: holderClass }, content);
       };
 
+      let createRipple = () => {
+        return createElement('md-ink-ripple');
+      };
+
       let createCompatibleRouterLink = () => {
         slot[0].data.staticClass = containerClass + ' ' + holderClass;
-        slot[0].data.directives = [{
-          name: 'md-ink-ripple'
-        }];
 
-        return createElement('li', listItemSpec, slot);
+        return createElement('li', listItemSpec, [...slot, createRipple()]);
       };
 
       let prepareExpandList = () => {
@@ -92,11 +93,8 @@
               handleExpandClick(this);
               this.$emit('click');
             }
-          },
-          directives: [{
-            name: 'md-ink-ripple'
-          }]
-        }, [createItemHolder(slot)]);
+          }
+        }, [createItemHolder(slot), createRipple()]);
       };
 
       let createExpandList = () => {
diff --git a/src/components/mdMenu/mdMenu.scss b/src/components/mdMenu/mdMenu.scss
index afb9ec7..a304087 100644
--- a/src/components/mdMenu/mdMenu.scss
+++ b/src/components/mdMenu/mdMenu.scss
@@ -17,7 +17,6 @@ $menu-base-width: 56px;
   position: absolute;
   z-index: 120;
   transform: scale(.9, .85) translateZ(0);
-  background-color: #fff;
   border-radius: 2px;
   box-shadow: $material-shadow-2dp;
   opacity: 0;
@@ -26,7 +25,6 @@ $menu-base-width: 56px;
               margin .2s $swift-ease-in-timing-function,
               transform 0s .25s $swift-ease-in-timing-function;
   will-change: transform, opacity, width;
-  color: rgba(#212121, .87);
 
   &.md-direction-bottom-right {
     margin-top: -20px;
@@ -107,17 +105,8 @@ $menu-base-width: 56px;
   font-size: 16px;
   line-height: 1.2em;
 
-  &:hover,
-  &:focus,
-  &.md-highlighted {
-    .md-button:not([disabled]) {
-      background-color: rgba(#000, .12);
-    }
-  }
-
   &[disabled] {
     cursor: default;
-    color: rgba(#000, .38);
   }
 
   .md-list-item-holder {
diff --git a/src/components/mdMenu/mdMenu.theme b/src/components/mdMenu/mdMenu.theme
index 0430122..50978c4 100644
--- a/src/components/mdMenu/mdMenu.theme
+++ b/src/components/mdMenu/mdMenu.theme
@@ -1,6 +1,20 @@
 .THEME_NAME {
-  .md-menu,
-  &.md-menu {
+  &.md-menu-content {
+    background-color: #{'BACKGROUND-COLOR-A100'};
+    color: #{'BACKGROUND-CONTRAST'};
 
+    .md-menu-item {
+      &:hover,
+      &:focus,
+      &.md-highlighted {
+        .md-button:not([disabled]) {
+          background-color: #{'BACKGROUND-CONTRAST-0.12'};
+        }
+      }
+
+      &[disabled] {
+        color: #{'BACKGROUND-CONTRAST-0.38'};
+      }
+    }
   }
 }
diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue
index 3cc4250..9ac77a0 100644
--- a/src/components/mdMenu/mdMenu.vue
+++ b/src/components/mdMenu/mdMenu.vue
@@ -123,8 +123,8 @@
 
         position = getInViewPosition(this.menuContent, position);
 
-        this.menuContent.style.top = position.top + 'px';
-        this.menuContent.style.left = position.left + 'px';
+        this.menuContent.style.top = position.top + window.pageYOffset + 'px';
+        this.menuContent.style.left = position.left + window.pageXOffset + 'px';
       },
       recalculateOnResize() {
         window.requestAnimationFrame(this.calculateMenuContentPos);
diff --git a/src/components/mdMenu/mdMenuContent.vue b/src/components/mdMenu/mdMenuContent.vue
index abd0c41..e284684 100644
--- a/src/components/mdMenu/mdMenuContent.vue
+++ b/src/components/mdMenu/mdMenuContent.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="md-menu-content"
+    :class="[themeClass]"
     @keydown.esc.prevent="close"
     @keydown.tab.prevent="close"
     @keydown.up.prevent="highlightItem('up')"
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     data() {
       return {
@@ -23,6 +26,7 @@
         itemsAmount: 0
       };
     },
+    mixins: [theme],
     methods: {
       close() {
         this.highlighted = false;
diff --git a/src/components/mdRadio/mdRadio.theme b/src/components/mdRadio/mdRadio.theme
index 2533ec4..1860180 100644
--- a/src/components/mdRadio/mdRadio.theme
+++ b/src/components/mdRadio/mdRadio.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-radio,
   &.md-radio {
     .md-radio-container:after {
       background-color: #{'ACCENT-COLOR'};
diff --git a/src/components/mdRadio/mdRadio.vue b/src/components/mdRadio/mdRadio.vue
index c2d3018..0e42c3e 100644
--- a/src/components/mdRadio/mdRadio.vue
+++ b/src/components/mdRadio/mdRadio.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-radio" :class="classes">
+  <div class="md-radio" :class="[themeClass, classes]">
     <div class="md-radio-container" @click="toggleCheck" v-md-ink-ripple="disabled">
       <input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
     </div>
@@ -13,6 +13,8 @@
 <style lang="scss" src="./mdRadio.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     props: {
       name: String,
@@ -24,6 +26,7 @@
       },
       disabled: Boolean
     },
+    mixins: [theme],
     computed: {
       classes() {
         return {
diff --git a/src/components/mdSelect/mdSelect.scss b/src/components/mdSelect/mdSelect.scss
index 821d1d6..70803ca 100644
--- a/src/components/mdSelect/mdSelect.scss
+++ b/src/components/mdSelect/mdSelect.scss
@@ -19,7 +19,6 @@ $select-height: 32px;
     right: 0;
     transform: translateY(-50%) scaleY(0.45) scaleX(0.85);
     transition: $swift-linear;
-    color: rgba(#000, .54);
     content: "\25BC";
   }
 
@@ -47,10 +46,6 @@ $select-height: 32px;
     pointer-events: none;
     user-select: none;
     user-drag: none;
-
-    &:after {
-      color: rgba(#000, .38);
-    }
   }
 
   select {
@@ -80,47 +75,6 @@ $select-height: 32px;
     white-space: nowrap;
   }
 
-  .md-select-menu {
-    min-width: 156px;
-    max-width: 100%;
-    min-height: 48px;
-    display: flex;
-    flex-flow: column;
-    justify-content: stretch;
-    align-content: stretch;
-    pointer-events: none;
-    position: absolute;
-    top: -16px;
-    left: -16px;
-    z-index: 7;
-    background-color: #fff;
-    border-radius: 2px;
-    box-shadow: $material-shadow-2dp;
-    opacity: 0;
-    transform: scale3D(.85, .7, 1);
-    transition: opacity .25s $swift-ease-in-timing-function,
-                top .25s $swift-ease-in-timing-function,
-                transform 0s .25s $swift-ease-in-timing-function;
-    color: rgba(#212121, .87);
-
-    > * {
-      opacity: 0;
-      transition: $swift-ease-out;
-      transition-duration: .25s;
-    }
-  }
-
-  .md-select-menu-container {
-    margin: 0;
-    padding: 8px 0;
-    display: flex;
-    flex-flow: column;
-    justify-content: stretch;
-    align-content: stretch;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
   .md-subheader {
     color: rgba(#757575, .87);
     text-transform: uppercase;
diff --git a/src/components/mdSelect/mdSelect.theme b/src/components/mdSelect/mdSelect.theme
index 0db7ff3..dc51f7b 100644
--- a/src/components/mdSelect/mdSelect.theme
+++ b/src/components/mdSelect/mdSelect.theme
@@ -1,5 +1,14 @@
 .THEME_NAME {
-  .md-select-content,
+  &.md-select {
+    &:after {
+      color: #{'BACKGROUND-CONTRAST-0.54'};
+    }
+
+    &:after {
+      color: #{'BACKGROUND-CONTRAST-0.38'};
+    }
+  }
+
   &.md-select-content {
     .md-menu-item {
       &.md-selected,
diff --git a/src/components/mdSelect/mdSelect.vue b/src/components/mdSelect/mdSelect.vue
index e3e5fef..d3a0f4f 100644
--- a/src/components/mdSelect/mdSelect.vue
+++ b/src/components/mdSelect/mdSelect.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="md-select" :class="classes">
+  <div class="md-select" :class="[themeClass, classes]">
     <md-menu :md-close-on-select="!multiple">
       <span class="md-select-value" md-menu-trigger ref="value">{{ selectedText || multipleText || placeholder }}</span>
 
-      <md-menu-content class="md-select-content" :class="contentClasses">
+      <md-menu-content class="md-select-content" :class="[themeClass, contentClasses]">
         <slot></slot>
       </md-menu-content>
     </md-menu>
@@ -17,6 +17,7 @@
 <style lang="scss" src="./mdSelect.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
   import isArray from '../../core/utils/isArray';
 
@@ -31,6 +32,7 @@
       placeholder: String,
       mdMenuClass: String
     },
+    mixins: [theme],
     data() {
       return {
         selectedValue: null,
diff --git a/src/components/mdSidenav/mdSidenav.theme b/src/components/mdSidenav/mdSidenav.theme
index d1c8479..9c75afd 100644
--- a/src/components/mdSidenav/mdSidenav.theme
+++ b/src/components/mdSidenav/mdSidenav.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-sidenav,
   &.md-sidenav {
     .md-sidenav-content {
       background-color: #{'BACKGROUND-COLOR-A100'};
diff --git a/src/components/mdSidenav/mdSidenav.vue b/src/components/mdSidenav/mdSidenav.vue
index ab54b08..d5b27e8 100644
--- a/src/components/mdSidenav/mdSidenav.vue
+++ b/src/components/mdSidenav/mdSidenav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-sidenav" :class="classes" @keyup.esc="close" tabindex="0">
+  <div class="md-sidenav" :class="[themeClass, classes]" @keyup.esc="close" tabindex="0">
     <div class="md-sidenav-content">
       <slot></slot>
     </div>
@@ -11,12 +11,15 @@
 <style lang="scss" src="./mdSidenav.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     data() {
       return {
         mdVisible: false
       };
     },
+    mixins: [theme],
     computed: {
       classes() {
         return this.mdVisible && 'md-active';
diff --git a/src/components/mdSpinner/index.js b/src/components/mdSpinner/index.js
new file mode 100644
index 0000000..a18138b
--- /dev/null
+++ b/src/components/mdSpinner/index.js
@@ -0,0 +1,8 @@
+import mdSpinner from './mdSpinner.vue';
+import mdSpinnerTheme from './mdSpinner.theme';
+
+export default function install(Vue) {
+  Vue.component('md-spinner', Vue.extend(mdSpinner));
+
+  Vue.material.styles.push(mdSpinnerTheme);
+}
diff --git a/src/components/mdSpinner/mdSpinner.scss b/src/components/mdSpinner/mdSpinner.scss
new file mode 100644
index 0000000..dce8578
--- /dev/null
+++ b/src/components/mdSpinner/mdSpinner.scss
@@ -0,0 +1,95 @@
+@import '../../core/stylesheets/variables.scss';
+
+.md-spinner {
+  display: inline-block;
+  position: relative;
+  pointer-events: none;
+  will-change: transform, opacity;
+
+  &.md-indeterminate {
+    .md-spinner-draw {
+      animation: spinner-rotate 1.9s linear infinite;
+      transform: rotate(0deg) translateZ(0);
+    }
+
+    .md-spinner-path {
+      stroke-dasharray: 2, 200;
+      animation: spinner-dash 1.425s ease-in-out infinite;
+    }
+  }
+
+  &.md-spinner-leave-active {
+    opacity: 0;
+    transform: scale(.8) translateZ(0);
+    transition: $swift-ease-out;
+  }
+
+  &:not(.md-indeterminate) {
+    &.md-spinner-enter-active {
+      transition-duration: 2s;
+
+      .md-spinner-draw {
+        animation: spinner-initial-rotate 1.98s $swift-ease-out-timing-function forwards;
+      }
+    }
+  }
+}
+
+.md-spinner-draw {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: rotate(270deg) translateZ(0);
+  transform-origin: center center;
+  will-change: transform, opacity;
+}
+
+.md-spinner-path {
+  fill: none;
+  stroke-dashoffset: 0;
+  stroke-miterlimit: 10;
+  transition: $swift-ease-out;
+}
+
+@keyframes spinner-rotate {
+  to {
+    transform: rotate(360deg) translateZ(0);
+  }
+}
+
+@keyframes spinner-initial-rotate {
+  0% {
+    opacity: 0;
+    transform: rotate(-90deg) translateZ(0);
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotate(270deg) translateZ(0);
+  }
+}
+
+@keyframes spinner-dash {
+  0% {
+    stroke-dasharray: 2, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
diff --git a/src/components/mdSpinner/mdSpinner.theme b/src/components/mdSpinner/mdSpinner.theme
new file mode 100644
index 0000000..ad8abf4
--- /dev/null
+++ b/src/components/mdSpinner/mdSpinner.theme
@@ -0,0 +1,19 @@
+.THEME_NAME {
+  &.md-spinner {
+    .md-spinner-path {
+      stroke: #{'PRIMARY-COLOR'}
+    }
+
+    &.md-accent {
+      .md-spinner-path {
+        stroke: #{'ACCENT-COLOR'}
+      }
+    }
+
+    &.md-warn {
+      .md-spinner-path {
+        stroke: #{'WARN-COLOR'}
+      }
+    }
+  }
+}
diff --git a/src/components/mdSpinner/mdSpinner.vue b/src/components/mdSpinner/mdSpinner.vue
new file mode 100644
index 0000000..8ef1c6d
--- /dev/null
+++ b/src/components/mdSpinner/mdSpinner.vue
@@ -0,0 +1,68 @@
+<template>
+  <transition name="md-spinner" appear>
+    <div class="md-spinner" :class="[themeClass, classes]":style="styles">
+      <svg class="md-spinner-draw" viewBox="25 25 50 50">
+        <circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress">
+      </svg>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" src="./mdSpinner.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  export default {
+    props: {
+      mdSize: {
+        type: Number,
+        default: 50
+      },
+      mdStroke: {
+        type: Number,
+        default: 3.5
+      },
+      mdIndeterminate: Boolean,
+      mdProgress: {
+        type: Number,
+        default: 0
+      }
+    },
+    mixins: [theme],
+    computed: {
+      classes() {
+        return {
+          'md-indeterminate': this.mdIndeterminate
+        };
+      },
+      styles() {
+        const newSize = this.mdSize + 'px';
+
+        return {
+          width: newSize,
+          height: newSize
+        };
+      },
+      dashProgress() {
+        let progress = this.mdProgress * 125 / 100;
+
+        if (this.mdIndeterminate) {
+          return false;
+        }
+
+        if (progress >= 125) {
+          progress = 130;
+        }
+
+        return `${progress}, 200`;
+      }
+    },
+    data: () => ({
+
+    }),
+    methods: {
+
+    }
+  };
+</script>
diff --git a/src/components/mdSubheader/mdSubheader.theme b/src/components/mdSubheader/mdSubheader.theme
index 31ed097..f84c0d0 100644
--- a/src/components/mdSubheader/mdSubheader.theme
+++ b/src/components/mdSubheader/mdSubheader.theme
@@ -1,7 +1,5 @@
 .THEME_NAME {
-  .md-subheader,
   &.md-subheader {
-
     &.md-primary {
       color: #{'PRIMARY-COLOR'};
     }
diff --git a/src/components/mdSubheader/mdSubheader.vue b/src/components/mdSubheader/mdSubheader.vue
index 54f582d..9bd2bf9 100644
--- a/src/components/mdSubheader/mdSubheader.vue
+++ b/src/components/mdSubheader/mdSubheader.vue
@@ -1,18 +1,19 @@
+<template>
+  <li class="md-subheader" :class="[themeClass]" v-if="$parent.$options._componentTag === 'md-list'">
+    <slot></slot>
+  </li>
+
+  <div class="md-subheader" :class="[themeClass]" v-else>
+    <slot></slot>
+  </div>
+</template>
+
 <style lang="scss" src="./mdSubheader.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
-    render(createElement) {
-      let tag = 'div';
-      let options = {
-        staticClass: 'md-subheader'
-      };
-
-      if (this.$parent.$options._componentTag === 'md-list') {
-        tag = 'li';
-      }
-
-      return createElement(tag, options, this.$slots.default);
-    }
+    mixins: [theme]
   };
 </script>
diff --git a/src/components/mdSwitch/mdSwitch.theme b/src/components/mdSwitch/mdSwitch.theme
index 97162d2..a3f979d 100644
--- a/src/components/mdSwitch/mdSwitch.theme
+++ b/src/components/mdSwitch/mdSwitch.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-switch,
   &.md-switch {
     &.md-checked {
       .md-switch-container {
diff --git a/src/components/mdSwitch/mdSwitch.vue b/src/components/mdSwitch/mdSwitch.vue
index 1836eaa..6cd44e9 100644
--- a/src/components/mdSwitch/mdSwitch.vue
+++ b/src/components/mdSwitch/mdSwitch.vue
@@ -1,5 +1,4 @@
-<template>
-  <div class="md-switch" :class="classes">
+  <div class="md-switch" :class="[themeClass, classes]">
     <div class="md-switch-container" @click="toggle($event)">
       <div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
         <input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
@@ -16,6 +15,8 @@
 <style lang="scss" src="./mdSwitch.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   const checkedPosition = 75;
   const initialPosition = '-1px';
 
@@ -30,6 +31,7 @@
         default: 'button'
       }
     },
+    mixins: [theme],
     data() {
       return {
         leftPos: initialPosition,
diff --git a/src/components/mdTable/mdTable.theme b/src/components/mdTable/mdTable.theme
index 04e7ef4..2f6ec71 100644
--- a/src/components/mdTable/mdTable.theme
+++ b/src/components/mdTable/mdTable.theme
@@ -1,10 +1,8 @@
 .THEME_NAME {
-  .md-table,
   &.md-table {
 
   }
 
-  .md-table-card,
   &.md-table-card {
     .md-toolbar {
       background-color: #{'BACKGROUND-COLOR-A100'};
@@ -12,7 +10,6 @@
     }
   }
 
-  .md-table-alternate-header,
   &.md-table-alternate-header {
     background-color: #{'BACKGROUND-COLOR-A100'};
 
diff --git a/src/components/mdTable/mdTable.vue b/src/components/mdTable/mdTable.vue
index ef6e154..3994e8a 100644
--- a/src/components/mdTable/mdTable.vue
+++ b/src/components/mdTable/mdTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-table">
+  <div class="md-table" :class="[themeClass]">
     <table>
       <slot></slot>
     </table>
@@ -9,6 +9,7 @@
 <style lang="scss" src="./mdTable.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
   export default {
@@ -16,6 +17,7 @@
       mdSortType: String,
       mdSort: String
     },
+    mixins: [theme],
     data() {
       return {
         sortType: this.mdSortType,
diff --git a/src/components/mdTable/mdTableAlternateHeader.vue b/src/components/mdTable/mdTableAlternateHeader.vue
index 775dea9..26410ea 100644
--- a/src/components/mdTable/mdTableAlternateHeader.vue
+++ b/src/components/mdTable/mdTableAlternateHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-table-alternate-header" :class="classes">
+  <div class="md-table-alternate-header" :class="[themeClass, classes]">
     <md-toolbar>
       <div class="md-counter">
         <span ref="counter">{{ tableInstance.numberOfSelected }}</span>
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
   export default {
@@ -21,6 +22,7 @@
         default: 'selected'
       }
     },
+    mixins: [theme],
     data() {
       return {
         classes: {},
diff --git a/src/components/mdTable/mdTableCard.vue b/src/components/mdTable/mdTableCard.vue
index 25e275b..70545ab 100644
--- a/src/components/mdTable/mdTableCard.vue
+++ b/src/components/mdTable/mdTableCard.vue
@@ -1,5 +1,13 @@
 <template>
-  <md-card class="md-table-card">
+  <md-card class="md-table-card" :class="[themeClass]">
     <slot></slot>
   </md-card>
 </template>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  export default {
+    mixins: [theme]
+  };
+</script>
diff --git a/src/components/mdTable/mdTablePagination.vue b/src/components/mdTable/mdTablePagination.vue
index 205ba4f..ffe8433 100644
--- a/src/components/mdTable/mdTablePagination.vue
+++ b/src/components/mdTable/mdTablePagination.vue
@@ -6,7 +6,7 @@
       <md-option v-for="amount in mdPageOptions" :value="amount">{{ amount }}</md-option>
     </md-select>
 
-    <span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ totalItems }}</span>
+    <span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ mdTotal }}</span>
 
     <md-button class="md-icon-button md-table-pagination-previous" @click="previousPage" :disabled="currentPage === 1">
       <md-icon>keyboard_arrow_left</md-icon>
@@ -48,7 +48,7 @@
         subTotal: 0,
         currentSize: parseInt(this.mdSize, 10),
         currentPage: parseInt(this.mdPage, 10),
-        totalItems: !isNaN(this.mdTotal) && Number.MAX_SAFE_INTEGER
+        totalItems: isNaN(this.mdTotal) ? Number.MAX_SAFE_INTEGER : parseInt(this.mdTotal, 10)
       };
     },
     computed: {
diff --git a/src/components/mdTabs/mdTab.vue b/src/components/mdTabs/mdTab.vue
index d1f4f5a..cf99bc1 100644
--- a/src/components/mdTabs/mdTab.vue
+++ b/src/components/mdTabs/mdTab.vue
@@ -14,7 +14,12 @@
       mdLabel: [String, Number],
       mdIcon: String,
       mdActive: Boolean,
-      mdDisabled: Boolean
+      mdDisabled: Boolean,
+      mdTooltip: String,
+      mdTooltipDirection: {
+        type: String,
+        default: 'bottom'
+      }
     },
     data() {
       return {
@@ -36,6 +41,12 @@
       },
       mdLabel() {
         this.updateTabData();
+      },
+      mdTooltip() {
+        this.updateTabData();
+      },
+      mdTooltipDirection() {
+        this.updateTabData();
       }
     },
     computed: {
@@ -54,6 +65,8 @@
           icon: this.mdIcon,
           active: this.mdActive,
           disabled: this.mdDisabled,
+          tooltip: this.mdTooltip,
+          tooltipDirection: this.mdTooltipDirection,
           ref: this
         };
       },
diff --git a/src/components/mdTabs/mdTabs.theme b/src/components/mdTabs/mdTabs.theme
index f62cbed..e698e05 100644
--- a/src/components/mdTabs/mdTabs.theme
+++ b/src/components/mdTabs/mdTabs.theme
@@ -1,95 +1,94 @@
 .THEME_NAME {
-  .md-tabs,
   &.md-tabs {
-    .md-tabs-navigation {
+    > .md-tabs-navigation {
       background-color: #{'PRIMARY-COLOR'};
-    }
-
-    .md-tab-header {
-      color: #{'PRIMARY-CONTRAST-0.54'};
-
-      &.md-active,
-      &:focus {
-        color: #{'PRIMARY-CONTRAST'};
-      }
-
-      &.md-disabled {
-        color: #{'PRIMARY-CONTRAST-0.26'}
-      }
-    }
-
-    .md-tab-indicator {
-      background-color: #{'ACCENT-COLOR'};
-    }
-
-    &.md-transparent {
-      .md-tabs-navigation {
-        background-color: transparent;
-        border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
-      }
 
       .md-tab-header {
-        color: #{'BACKGROUND-CONTRAST-0.54'};
+        color: #{'PRIMARY-CONTRAST-0.54'};
 
         &.md-active,
         &:focus {
-          color: #{'PRIMARY-COLOR'};
+          color: #{'PRIMARY-CONTRAST'};
         }
 
         &.md-disabled {
-          color: #{'BACKGROUND-CONTRAST-0.26'}
+          color: #{'PRIMARY-CONTRAST-0.26'}
         }
       }
 
       .md-tab-indicator {
-        background-color: #{'PRIMARY-COLOR'};
+        background-color: #{'ACCENT-COLOR'};
+      }
+    }
+
+    &.md-transparent {
+      > .md-tabs-navigation {
+        background-color: transparent;
+        border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
+
+        .md-tab-header {
+          color: #{'BACKGROUND-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'PRIMARY-COLOR'};
+          }
+
+          &.md-disabled {
+            color: #{'BACKGROUND-CONTRAST-0.26'}
+          }
+        }
+
+        .md-tab-indicator {
+          background-color: #{'PRIMARY-COLOR'};
+        }
       }
     }
 
     &.md-accent {
-      .md-tabs-navigation {
+      > .md-tabs-navigation {
         background-color: #{'ACCENT-COLOR'};
-      }
 
-      .md-tab-header {
-        color: #{'ACCENT-CONTRAST-0.54'};
+        .md-tab-header {
+          color: #{'ACCENT-CONTRAST-0.54'};
 
-        &.md-active,
-        &:focus {
-          color: #{'ACCENT-CONTRAST'};
+          &.md-active,
+          &:focus {
+            color: #{'ACCENT-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'ACCENT-CONTRAST-0.26'}
+          }
         }
 
-        &.md-disabled {
-          color: #{'ACCENT-CONTRAST-0.26'}
+        .md-tab-indicator {
+          background-color: #{'BACKGROUND-COLOR'};
         }
       }
-
-      .md-tab-indicator {
-        background-color: #{'BACKGROUND-COLOR'};
-      }
     }
 
     &.md-warn {
-      .md-tabs-navigation {
+      > .md-tabs-navigation {
         background-color: #{'WARN-COLOR'};
-      }
 
-      .md-tab-header {
-        color: #{'WARN-CONTRAST-0.54'};
+        .md-tab-header {
+          color: #{'WARN-CONTRAST-0.54'};
 
-        &.md-active,
-        &:focus {
-          color: #{'WARN-CONTRAST'};
+          &.md-active,
+          &:focus {
+            color: #{'WARN-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'WARN-CONTRAST-0.26'}
+          }
         }
 
-        &.md-disabled {
-          color: #{'WARN-CONTRAST-0.26'}
+        .md-tab-indicator {
+          background-color: #{'BACKGROUND-COLOR'};
         }
       }
-
-      .md-tab-indicator {
-        background-color: #{'BACKGROUND-COLOR'};
-      }
     }
   }
 }
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index b22818b..989a7d4 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-tabs" :class="tabClasses">
+  <div class="md-tabs" :class="[themeClass, tabClasses]">
     <md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
       <button
         v-for="header in tabList"
@@ -31,6 +31,8 @@
 <style lang="scss" src="./mdTabs.scss"></style>
 
 <script>
+  import theme from '../../core/components/mdTheme/mixin';
+
   export default {
     props: {
       mdFixed: Boolean,
@@ -45,6 +47,7 @@
         default: 0
       }
     },
+    mixins: [theme],
     data: () => ({
       tabList: {},
       activeTab: null,
diff --git a/src/components/mdToolbar/mdToolbar.theme b/src/components/mdToolbar/mdToolbar.theme
index f72c78a..d092471 100644
--- a/src/components/mdToolbar/mdToolbar.theme
+++ b/src/components/mdToolbar/mdToolbar.theme
@@ -1,5 +1,4 @@
 .THEME_NAME {
-  .md-toolbar,
   &.md-toolbar {
     background-color: #{'PRIMARY-COLOR'};
     color: #{'PRIMARY-CONTRAST'};
diff --git a/src/components/mdToolbar/mdToolbar.vue b/src/components/mdToolbar/mdToolbar.vue
index 97ca670..3bd5f37 100644
--- a/src/components/mdToolbar/mdToolbar.vue
+++ b/src/components/mdToolbar/mdToolbar.vue
@@ -1,7 +1,15 @@
 <template>
-  <div class="md-toolbar">
+  <div class="md-toolbar" :class="[themeClass]">
     <slot></slot>
   </div>
 </template>
 
 <style lang="scss" src="./mdToolbar.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  export default {
+    mixins: [theme]
+  };
+</script>
diff --git a/src/core/components/mdTheme/index.js b/src/core/components/mdTheme/index.js
index f0f2f6e..1c4c68d 100644
--- a/src/core/components/mdTheme/index.js
+++ b/src/core/components/mdTheme/index.js
@@ -1,5 +1,6 @@
 import palette from './palette';
 import rgba from './rgba';
+import MdTheme from './MdTheme';
 
 const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn', 'hue-1', 'hue-2', 'hue-3'];
 const DEFAULT_THEME_COLORS = {
@@ -24,8 +25,9 @@ const DEFAULT_THEME_COLORS = {
 const createNewStyleElement = (style, name) => {
   let head = document.head;
   let styleId = 'md-theme-' + name;
+  let styleElement = head.querySelector('#' + styleId);
 
-  if (!head.querySelector('#' + styleId)) {
+  if (!styleElement) {
     let newTag = document.createElement('style');
 
     style = style.replace(/THEME_NAME/g, styleId);
@@ -35,6 +37,8 @@ const createNewStyleElement = (style, name) => {
     newTag.textContent = style;
 
     head.appendChild(newTag);
+  } else {
+    styleElement.textContent = style;
   }
 };
 
@@ -107,47 +111,50 @@ const registerTheme = (theme, name, themeStyles) => {
 const registerAllThemes = (themes, themeStyles) => {
   let themeNames = themes ? Object.keys(themes) : [];
 
-  if (themeNames.indexOf('default') === -1) {
-    registerTheme(DEFAULT_THEME_COLORS, 'default', themeStyles);
-    registeredThemes.push('default');
-  }
-
   themeNames.forEach((name) => {
     registerTheme(themes[name], name, themeStyles);
     registeredThemes.push(name);
   });
 };
 
-const registerDirective = (element, { value, oldValue }) => {
-  let theme = value;
-  let newClass = 'md-theme-' + theme;
-  let oldClass = 'md-theme-' + oldValue;
-
-  if (!element.classList.contains(newClass)) {
-    element.classList.remove(oldClass);
-
-    if (theme && registeredThemes.indexOf(theme) >= 0) {
-      element.classList.add(newClass);
-    } else {
-      element.classList.add(oldClass);
-      console.warn('Attempted to use unregistered theme "' + theme + '\".');
-    }
-  }
-};
-
 export default function install(Vue) {
-  Vue.directive('mdTheme', registerDirective);
+  Vue.material = new Vue({
+    data: () => ({
+      styles: [],
+      currentTheme: null
+    }),
+    methods: {
+      registerTheme(name, spec) {
+        let theme = {};
 
-  Vue.material.theme = {
-    register(name, spec) {
-      let theme = {};
+        if (typeof name === 'string') {
+          theme[name] = spec;
+        } else {
+          theme = name;
+        }
 
-      theme[name] = spec;
+        registerAllThemes(theme, this.styles);
+      },
+      applyCurrentTheme(themeName) {
+        document.body.classList.remove('md-theme-' + this.currentTheme);
+        document.body.classList.add('md-theme-' + themeName);
+        this.currentTheme = themeName;
+      },
+      setCurrentTheme(themeName) {
+        if (registeredThemes.indexOf(themeName) >= 0) {
+          this.applyCurrentTheme(themeName);
+        } else {
+          if (registeredThemes.indexOf('default') === -1) {
+            this.registerTheme('default', DEFAULT_THEME_COLORS);
+          } else {
+            console.warn(`The theme '${themeName}' doesn't exists. You need to register it first in order to use.`);
+          }
 
-      registerAllThemes(theme, Vue.material.styles);
-    },
-    registerAll(themes) {
-      registerAllThemes(themes, Vue.material.styles);
+          this.applyCurrentTheme('default');
+        }
+      }
     }
-  };
+  });
+
+  Vue.component('md-theme', MdTheme);
 }
diff --git a/src/core/components/mdTheme/mdTheme.vue b/src/core/components/mdTheme/mdTheme.vue
new file mode 100644
index 0000000..ae138a0
--- /dev/null
+++ b/src/core/components/mdTheme/mdTheme.vue
@@ -0,0 +1,23 @@
+<script>
+  export default {
+    props: {
+      mdTag: String,
+      mdName: {
+        type: String,
+        default: 'default'
+      }
+    },
+    data: () => ({
+      name: 'md-theme'
+    }),
+    render(render) {
+      if (this.mdTag || this.$slots.default.length > 1) {
+        return render(this.mdTag || 'div', {
+          staticClass: 'md-theme'
+        }, this.$slots.default);
+      }
+
+      return this.$slots.default[0];
+    }
+  };
+</script>
diff --git a/src/core/components/mdTheme/mixin.js b/src/core/components/mdTheme/mixin.js
new file mode 100644
index 0000000..d8e5ba7
--- /dev/null
+++ b/src/core/components/mdTheme/mixin.js
@@ -0,0 +1,45 @@
+import Vue from 'vue';
+
+export default {
+  props: {
+    mdTheme: String
+  },
+  data: () => ({
+    closestThemedParent: false
+  }),
+  methods: {
+    getClosestThemedParent($parent) {
+      if (!$parent || !$parent.$el || $parent._uid === 0) {
+        return false;
+      }
+
+      if ($parent.mdTheme || $parent.mdName) {
+        return $parent;
+      }
+
+      return this.getClosestThemedParent($parent.$parent);
+    }
+  },
+  computed: {
+    themeClass() {
+      if (this.mdTheme) {
+        return 'md-theme-' + this.mdTheme;
+      }
+
+      let theme = this.closestThemedParent.mdTheme;
+
+      if (!theme) {
+        theme = this.closestThemedParent.mdName;
+      }
+
+      return 'md-theme-' + (theme || Vue.material.currentTheme);
+    }
+  },
+  mounted() {
+    this.closestThemedParent = this.getClosestThemedParent(this.$parent);
+
+    if (!Vue.material.currentTheme) {
+      Vue.material.setCurrentTheme('default');
+    }
+  }
+};
diff --git a/src/core/index.js b/src/core/index.js
index 231088c..6caa436 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -15,10 +15,7 @@ export default function install(Vue) {
 
   install.installed = true;
 
-  Vue.material = {
-    styles: [CoreTheme]
-  };
-
   Vue.use(MdTheme);
   Vue.use(MdInkRipple);
+  Vue.material.styles.push(CoreTheme);
 }
diff --git a/src/core/stylesheets/base.scss b/src/core/stylesheets/base.scss
index 56afb83..433c0bc 100644
--- a/src/core/stylesheets/base.scss
+++ b/src/core/stylesheets/base.scss
@@ -27,6 +27,10 @@ body {
   @extend .md-body-1;
 }
 
+[tabindex='-1']:focus {
+  outline: none;
+}
+
 
 /*  Fluid Media
    ========================================================================== */
diff --git a/src/core/stylesheets/core.theme b/src/core/stylesheets/core.theme
index f4eb722..23c5d89 100644
--- a/src/core/stylesheets/core.theme
+++ b/src/core/stylesheets/core.theme
@@ -14,7 +14,7 @@
 }
 
 body.THEME_NAME {
-  background-color: #{'BACKGROUND-COLOR-50'};
+  background-color: #{'BACKGROUND-COLOR-A100'};
   color: #{'BACKGROUND-CONTRAST-0.87'};
 }
 
diff --git a/src/core/stylesheets/mixins.scss b/src/core/stylesheets/mixins.scss
index f4c4bf8..26698ae 100644
--- a/src/core/stylesheets/mixins.scss
+++ b/src/core/stylesheets/mixins.scss
@@ -1,3 +1,5 @@
+/* Image aspect ratio calculator */
+
 @mixin image-aspect-ratio($width, $height) {
   overflow: hidden;
 
@@ -16,3 +18,36 @@
     transform: translateY(-50%);
   }
 }
+
+
+/* Responsive breakpoints */
+
+@mixin layout-xsmall {
+  @media (max-width: #{$breakpoint-xsmall}) {
+    @content;
+  }
+}
+
+@mixin layout-small {
+  @media (max-width: #{$breakpoint-small - 16px}) {
+    @content;
+  }
+}
+
+@mixin layout-medium {
+  @media (max-width: #{$breakpoint-medium - 16px}) {
+    @content;
+  }
+}
+
+@mixin layout-large {
+  @media (max-width: #{$breakpoint-large - 17px}) {
+    @content;
+  }
+}
+
+@mixin layout-xlarge {
+  @media (min-width: #{$breakpoint-large - 16px}) {
+    @content;
+  }
+}
diff --git a/src/core/stylesheets/variables.scss b/src/core/stylesheets/variables.scss
index 481449f..ca2dc28 100644
--- a/src/core/stylesheets/variables.scss
+++ b/src/core/stylesheets/variables.scss
@@ -1,12 +1,17 @@
-/*  Common
-   ========================================================================== */
+/* Common */
 
-$font-roboto: Roboto, Lato, sans-serif;
+$font-roboto: Roboto, 'Noto Sans', Noto, sans-serif;
 
 
+/* Responsive Breakpoints */
 
-/*  Transitions - Based on Angular Material
-   ========================================================================== */
+$breakpoint-xsmall: 600px !default;
+$breakpoint-small: 960px !default;
+$breakpoint-medium: 1280px !default;
+$breakpoint-large: 1920px !default;
+
+
+/* Transitions - Based on Angular Material */
 
 $swift-ease-out-duration: .4s !default;
 $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
@@ -20,7 +25,7 @@ $swift-ease-in-out-duration: .5s !default;
 $swift-ease-in-out-timing-function: cubic-bezier(.35, 0, .25, 1) !default;
 $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
 
-$swift-linear-duration: .08s !default;
+$swift-linear-duration: .15s !default;
 $swift-linear-timing-function: linear !default;
 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
 
@@ -33,9 +38,7 @@ $material-leave-timing-function: cubic-bezier(.4, .0, 1, 1);
 $material-leave: all $material-leave-duration $material-leave-timing-function;
 
 
-
-/*  Elevation - Based on Angular Material
-   ========================================================================== */
+/* Elevation - Based on Angular Material */
 
 $shadow-key-umbra-opacity: .2 !default;
 $shadow-key-penumbra-opacity: .14 !default;
diff --git a/src/index.js b/src/index.js
index bc8fb4d..d2d377a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,11 +10,13 @@ import MdDialog from './components/mdDialog';
 import MdDivider from './components/mdDivider';
 import MdIcon from './components/mdIcon';
 import MdInputContainer from './components/mdInputContainer';
+import MdLayout from './components/mdLayout';
 import MdList from './components/mdList';
 import MdMenu from './components/mdMenu';
 import MdRadio from './components/mdRadio';
 import MdSelect from './components/mdSelect';
 import MdSidenav from './components/mdSidenav';
+import MdSpinner from './components/mdSpinner';
 import MdSubheader from './components/mdSubheader';
 import MdSwitch from './components/mdSwitch';
 import MdTable from './components/mdTable';
@@ -36,11 +38,13 @@ const options = {
   MdDivider,
   MdIcon,
   MdInputContainer,
+  MdLayout,
   MdList,
   MdMenu,
   MdRadio,
   MdSelect,
   MdSidenav,
+  MdSpinner,
   MdSubheader,
   MdSwitch,
   MdTable,