diff --git a/src/components/mdAvatar/mdAvatar.scss b/src/components/mdAvatar/mdAvatar.scss
index 558ba72..2901ca7 100644
--- a/src/components/mdAvatar/mdAvatar.scss
+++ b/src/components/mdAvatar/mdAvatar.scss
@@ -53,6 +53,14 @@ $avatar-large-icon: 40px;
     display: block;
   }
 
+  .md-ink-ripple {
+    border-radius: 50%;
+
+    .md-ripple.md-active {
+      animation-duration: .9s;
+    }
+  }
+
   .md-tooltip {
     &.md-tooltip-top {
       margin-top: -8px;
diff --git a/src/components/mdBottomBar/mdBottomBar.scss b/src/components/mdBottomBar/mdBottomBar.scss
index 28485b4..d25f276 100644
--- a/src/components/mdBottomBar/mdBottomBar.scss
+++ b/src/components/mdBottomBar/mdBottomBar.scss
@@ -87,6 +87,7 @@
   }
 
   .md-icon {
-    transition: $swift-ease-out;
+    transition: $swift-ease-out,
+                color $swift-linear-duration $swift-linear-timing-function;
   }
 }
diff --git a/src/components/mdBottomBar/mdBottomBar.theme b/src/components/mdBottomBar/mdBottomBar.theme
index c3f096c..10b6bcc 100644
--- a/src/components/mdBottomBar/mdBottomBar.theme
+++ b/src/components/mdBottomBar/mdBottomBar.theme
@@ -1,9 +1,15 @@
 .THEME_NAME {
   .md-bottom-bar,
   &.md-bottom-bar {
-    &:not(.md-shift) {
-      .md-active {
-        color: #{'PRIMARY-COLOR'};
+    &.md-fixed {
+      background-color: #{'BACKGROUND-COLOR'};
+
+      .md-bottom-bar-item {
+        color: #{'BACKGROUND-CONTRAST-0.54'};
+
+        &.md-active {
+          color: #{'PRIMARY-COLOR'};
+        }
       }
     }
 
@@ -11,14 +17,48 @@
       background-color: #{'PRIMARY-COLOR'};
       color: #{'PRIMARY-CONTRAST'};
 
+      .md-bottom-bar-item {
+        color: #{'PRIMARY-CONTRAST-0.54'};
+
+        &.md-active {
+          color: #{'PRIMARY-CONTRAST'};
+        }
+      }
+
       &.md-accent {
         background-color: #{'ACCENT-COLOR'};
-        color: #{'ACCENT-CONTRAST'};
+
+        .md-bottom-bar-item {
+          color: #{'ACCENT-CONTRAST-0.54'};
+
+          &.md-active {
+            color: #{'ACCENT-CONTRAST'};
+          }
+        }
       }
 
       &.md-warn {
         background-color: #{'WARN-COLOR'};
-        color: #{'WARN-CONTRAST'};
+
+        .md-bottom-bar-item {
+          color: #{'WARN-CONTRAST-0.54'};
+
+          &.md-active {
+            color: #{'WARN-CONTRAST'};
+          }
+        }
+      }
+
+      &.md-transparent {
+        background-color: transparent;
+
+        .md-bottom-bar-item {
+          color: #{'BACKGROUND-CONTRAST-0.54'};
+
+          &.md-active {
+            color: #{'BACKGROUND-CONTRAST'};
+          }
+        }
       }
     }
   }
diff --git a/src/components/mdBottomBar/mdBottomBar.vue b/src/components/mdBottomBar/mdBottomBar.vue
index 9567906..1d50e77 100644
--- a/src/components/mdBottomBar/mdBottomBar.vue
+++ b/src/components/mdBottomBar/mdBottomBar.vue
@@ -13,7 +13,7 @@
     },
     computed: {
       classes() {
-        return this.mdShift && 'md-shift';
+        return this.mdShift ? 'md-shift' : 'md-fixed';
       }
     }
   };
diff --git a/src/components/mdButton/mdButton.scss b/src/components/mdButton/mdButton.scss
index 1103c86..2ab3b18 100644
--- a/src/components/mdButton/mdButton.scss
+++ b/src/components/mdButton/mdButton.scss
@@ -15,7 +15,7 @@ $button-icon-size: 40px;
   min-width: $button-width;
   min-height: $button-height;
   margin: 6px 8px;
-  padding: 0 16px;
+  padding: 0 8px;
   display: inline-block;
   position: relative;
   align-items: center;
@@ -61,19 +61,6 @@ $button-icon-size: 40px;
     background-color: rgba(#999, .4);
   }
 
-  &[disabled] {
-    color: rgba(#000, .26);
-    cursor: default;
-
-    &.md-raised {
-      background-color: rgba(#000, .12);
-    }
-  }
-
-  &:after {
-    transition: $swift-ease-out;
-  }
-
   &.md-raised:not([disabled]) {
     box-shadow: $material-shadow-2dp;
   }
@@ -93,11 +80,11 @@ $button-icon-size: 40px;
     }
 
     &.md-dense {
+      min-width: $button-dense-height;
       height: $button-dense-height;
       min-height: $button-dense-height;
       padding: 0;
       line-height: $button-dense-height;
-      font-size: 13px;
     }
 
     .md-tooltip {
@@ -196,6 +183,24 @@ $button-icon-size: 40px;
     }
   }
 
+  &[disabled] {
+    color: rgba(#000, .26);
+    cursor: default;
+
+    &.md-raised,
+    &.md-fab {
+      background-color: rgba(#000, .12);
+    }
+
+    &.md-fab {
+      box-shadow: none;
+    }
+  }
+
+  &:after {
+    transition: $swift-ease-out;
+  }
+
   .md-ink-ripple {
     border-radius: $button-radius;
     background-clip: padding-box;
diff --git a/src/components/mdCheckbox/mdCheckbox.theme b/src/components/mdCheckbox/mdCheckbox.theme
index 2b52207..5fa4883 100644
--- a/src/components/mdCheckbox/mdCheckbox.theme
+++ b/src/components/mdCheckbox/mdCheckbox.theme
@@ -5,6 +5,10 @@
       .md-checkbox-container {
         background-color: #{'ACCENT-COLOR'};
         border-color: #{'ACCENT-COLOR'};
+
+        &:after {
+          border-color: #{'ACCENT-CONTRAST'};
+        }
       }
 
       .md-ink-ripple {
@@ -16,6 +20,36 @@
       }
     }
 
+    &.md-primary.md-checked {
+      .md-checkbox-container {
+        background-color: #{'PRIMARY-COLOR'};
+        border-color: #{'PRIMARY-COLOR'};
+
+        &:after {
+          border-color: #{'PRIMARY-CONTRAST'};
+        }
+      }
+
+      .md-ink-ripple {
+        color: #{'PRIMARY-COLOR'};
+      }
+    }
+
+    &.md-warn.md-checked {
+      .md-checkbox-container {
+        background-color: #{'WARN-COLOR'};
+        border-color: #{'WARN-COLOR'};
+
+        &:after {
+          border-color: #{'WARN-CONTRAST'};
+        }
+      }
+
+      .md-ink-ripple {
+        color: #{'WARN-COLOR'};
+      }
+    }
+
     &.md-disabled {
       &.md-checked {
         .md-checkbox-container {
diff --git a/src/components/mdInputContainer/mdInput.vue b/src/components/mdInputContainer/mdInput.vue
index 4cb3f33..b2ea78c 100644
--- a/src/components/mdInputContainer/mdInput.vue
+++ b/src/components/mdInputContainer/mdInput.vue
@@ -6,6 +6,7 @@
     :disabled="disabled"
     :required="required"
     :placeholder="placeholder"
+    :maxlength="maxlength"
     @invalid="onInvalid"
     @valid="onValid"
     @focus="onFocus"
diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss
index 0c53140..f3b09d0 100644
--- a/src/components/mdInputContainer/mdInputContainer.scss
+++ b/src/components/mdInputContainer/mdInputContainer.scss
@@ -4,7 +4,7 @@ $input-size: 32px;
 
 .md-input-container {
   min-height: 48px;
-  margin: 4px 0 20px;
+  margin: 4px 0 24px;
   padding-top: 16px;
   position: relative;
 
diff --git a/src/components/mdRadio/mdRadio.theme b/src/components/mdRadio/mdRadio.theme
index 3ad355f..2533ec4 100644
--- a/src/components/mdRadio/mdRadio.theme
+++ b/src/components/mdRadio/mdRadio.theme
@@ -19,16 +19,6 @@
       }
     }
 
-    &.md-disabled {
-      .md-radio-container {
-        border-color: rgba(#000, .26);
-
-        &:after {
-          background-color: rgba(#000, .26);
-        }
-      }
-    }
-
     &.md-primary {
       .md-radio-container:after {
         background-color: #{'PRIMARY-COLOR'};
@@ -60,5 +50,21 @@
         }
       }
     }
+
+    &.md-disabled {
+      .md-radio-container {
+        border-color: rgba(#000, .26);
+
+        &:after {
+          background-color: rgba(#000, .26);
+        }
+      }
+
+      &.md-checked {
+        .md-radio-container {
+          border-color: rgba(#000, .26);
+        }
+      }
+    }
   }
 }
diff --git a/src/docs/App.vue b/src/docs/App.vue
index c48b8e9..9156946 100644
--- a/src/docs/App.vue
+++ b/src/docs/App.vue
@@ -26,10 +26,6 @@
           <router-link to="/checkbox">Checkbox</router-link>
         </md-list-item>
 
-        <md-list-item>
-          <router-link to="/divider">Divider</router-link>
-        </md-list-item>
-
         <md-list-item>
           <router-link to="/icon">Icon</router-link>
         </md-list-item>
diff --git a/src/docs/components/demo-example.vue b/src/docs/components/demo-example.vue
index 2ce836e..4a97dce 100644
--- a/src/docs/components/demo-example.vue
+++ b/src/docs/components/demo-example.vue
@@ -1,10 +1,10 @@
 <template>
   <md-whiteframe class="demo-example" :class="classes" :style="{ height: height + 'px' }">
-    <md-toolbar v-md-theme="titleTheme">
+    <md-toolbar v-md-theme="titleTheme" class="demo-example-toolbar">
       <h2 class="md-title">{{ label }}</h2>
     </md-toolbar>
 
-    <section v-md-theme="bodyTheme">
+    <section v-md-theme="bodyTheme" class="demo-example-body">
       <slot></slot>
     </section>
   </md-whiteframe>
@@ -41,6 +41,10 @@
     + .demo-example {
       margin-top: 16px;
     }
+
+    .demo-example-body {
+      padding: 16px;
+    }
   }
 </style>
 
diff --git a/src/docs/config.js b/src/docs/config.js
index 3cd0225..8d2c8ac 100644
--- a/src/docs/config.js
+++ b/src/docs/config.js
@@ -19,6 +19,10 @@ Vue.use(VueMaterial.MdTheme, {
     },
     accent: 'indigo'
   },
+  brown: {
+    primary: 'brown',
+    accent: 'green'
+  },
   indigo: {
     primary: 'indigo',
     accent: 'blue'
diff --git a/src/docs/pages/Avatar.vue b/src/docs/pages/Avatar.vue
index e2bf1ae..aab3efd 100644
--- a/src/docs/pages/Avatar.vue
+++ b/src/docs/pages/Avatar.vue
@@ -1,83 +1,61 @@
 <template>
-  <div class="page-content">
-    <md-whiteframe md-elevation="2">
-      <md-toolbar class="md-dense">
-        <md-button>Examples</md-button>
-        <md-button>Code</md-button>
-        <md-button>API</md-button>
-      </md-toolbar>
-    </md-whiteframe>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default" size="2">
+        <md-avatar>
+          <img src="//placeimg.com/40/40/people/1" alt="People">
+        </md-avatar>
 
-    <div class="main-content">
-      <md-whiteframe>
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Default</h2>
-        </md-toolbar>
+        <md-avatar class="md-avatar-icon">
+          <md-icon>home</md-icon>
+        </md-avatar>
 
-        <section>
-          <md-avatar>
-            <img src="//placeimg.com/40/40/people/1" alt="People">
-          </md-avatar>
+        <md-avatar class="md-avatar-icon md-primary">
+          <md-icon>folder</md-icon>
+        </md-avatar>
 
-          <md-avatar class="md-avatar-icon">
-            <md-icon>home</md-icon>
-          </md-avatar>
+        <md-avatar class="md-avatar-icon md-accent">
+          <md-icon>favorite</md-icon>
+        </md-avatar>
 
-          <md-avatar class="md-avatar-icon md-primary">
-            <md-icon>folder</md-icon>
-          </md-avatar>
+        <md-avatar class="md-avatar-icon md-warn">
+          <md-icon>notes</md-icon>
+        </md-avatar>
+      </demo-example>
 
-          <md-avatar class="md-avatar-icon md-accent">
-            <md-icon>favorite</md-icon>
-          </md-avatar>
+      <demo-example label="Large" size="2">
+        <md-avatar class="md-large">
+          <img src="//placeimg.com/64/64/people/2" alt="People">
+        </md-avatar>
 
-          <md-avatar class="md-avatar-icon md-warn">
-            <md-icon>notes</md-icon>
-          </md-avatar>
-        </section>
-      </md-whiteframe>
+        <md-avatar class="md-avatar-icon md-large">
+          <md-icon>home</md-icon>
+        </md-avatar>
 
-      <md-whiteframe>
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Large</h2>
-        </md-toolbar>
+        <md-avatar class="md-avatar-icon md-large md-primary">
+          <md-icon>folder</md-icon>
+        </md-avatar>
 
-        <section>
-          <md-avatar class="md-large">
-            <img src="//placeimg.com/64/64/people/2" alt="People">
-          </md-avatar>
+        <md-avatar class="md-avatar-icon md-large md-accent">
+          <md-icon>favorite</md-icon>
+        </md-avatar>
 
-          <md-avatar class="md-avatar-icon md-large">
-            <md-icon>home</md-icon>
-          </md-avatar>
-
-          <md-avatar class="md-avatar-icon md-large md-primary">
-            <md-icon>folder</md-icon>
-          </md-avatar>
-
-          <md-avatar class="md-avatar-icon md-large md-accent">
-            <md-icon>favorite</md-icon>
-          </md-avatar>
-
-          <md-avatar class="md-avatar-icon md-large md-warn">
-            <md-icon>notes</md-icon>
-          </md-avatar>
-        </section>
-      </md-whiteframe>
+        <md-avatar class="md-avatar-icon md-large md-warn">
+          <md-icon>notes</md-icon>
+        </md-avatar>
+      </demo-example>
     </div>
-  </div>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
 
-<style lang="scss" scoped>
-  .md-whiteframe-1dp {
-    margin-bottom: 16px;
-  }
-
-  section {
-    padding: 16px;
-  }
-</style>
-
 <script>
   export default {
     mounted() {
diff --git a/src/docs/pages/BottomBar.vue b/src/docs/pages/BottomBar.vue
index f992d57..104eeb9 100644
--- a/src/docs/pages/BottomBar.vue
+++ b/src/docs/pages/BottomBar.vue
@@ -1,60 +1,118 @@
 <template>
-  <div class="page-content">
-    <md-whiteframe md-elevation="2">
-      <md-toolbar class="md-dense">
-        <md-button>Examples</md-button>
-        <md-button>Code</md-button>
-        <md-button>API</md-button>
-      </md-toolbar>
-    </md-whiteframe>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default">
+        <div class="phone-viewport">
+          <md-bottom-bar>
+            <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>
+      </demo-example>
 
-    <div class="main-content">
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Default</h2>
-        </md-toolbar>
+      <demo-example label="Shifting">
+        <div class="phone-viewport">
+          <md-bottom-bar md-shift>
+            <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>
+            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
 
-        <md-bottom-bar>
-          <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>
-      </md-whiteframe>
+        <div class="phone-viewport">
+          <md-bottom-bar class="md-accent" md-shift>
+            <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>
+            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
 
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Shifting</h2>
-        </md-toolbar>
+        <div class="phone-viewport">
+          <md-bottom-bar class="md-warn" md-shift>
+            <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>
+            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
 
-        <md-bottom-bar md-shift v-md-theme="'teal'">
-          <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>
-          <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-        </md-bottom-bar>
-      </md-whiteframe>
+        <div class="phone-viewport">
+          <md-bottom-bar class="md-transparent" md-shift>
+            <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>
+            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
+      </demo-example>
+
+      <demo-example label="Themed">
+        <div class="phone-viewport" v-md-theme="'indigo'">
+          <md-bottom-bar>
+            <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="'orange'">
+          <md-bottom-bar>
+            <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>
+            <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>
+            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
+
+        <div class="phone-viewport" v-md-theme="'brown'">
+          <md-bottom-bar md-shift>
+            <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>
+            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
+      </demo-example>
     </div>
-  </div>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
 
 <style lang="scss" scoped>
-  .cell-phone {
-    width: 360px;
-    height: 480px;
-    margin-right: 16px;
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-    border: none;
-    background-color: #fafafa;
-  }
-
   .md-bottom-bar {
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
   }
+
+  .phone-viewport {
+    width: 320px;
+    height: 480px;
+    margin-right: 16px;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background-color: darken(#fafafa, 5%);
+  }
 </style>
 
 <script>
diff --git a/src/docs/pages/ButtonToggle.vue b/src/docs/pages/ButtonToggle.vue
index 7f2270b..6445624 100644
--- a/src/docs/pages/ButtonToggle.vue
+++ b/src/docs/pages/ButtonToggle.vue
@@ -1,77 +1,225 @@
 <template>
-  <section>
-    <h2 class="title">Button Toggle</h2>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Multiple" size="2">
+        <md-button-toggle class="md-button-group">
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_bold</md-icon>
+          </md-button>
 
-    <md-button-toggle class="md-button-group">
-      <md-button class="md-icon-button md-toggle">
-        <md-icon>format_bold</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>format_italic</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button" disabled>
-        <md-icon>format_italic</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>strikethrough_s</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button">
-        <md-icon>strikethrough_s</md-icon>
-      </md-button>
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>title</md-icon>
+          </md-button>
+        </md-button-toggle>
 
-      <md-button class="md-icon-button md-toggle">
-        <md-icon>title</md-icon>
-      </md-button>
-    </md-button-toggle>
+        <md-button-toggle class="md-button-group md-primary">
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_bold</md-icon>
+          </md-button>
 
-    <md-button-toggle type="radio" class="md-button-group md-primary" style="margin-top: 24px">
-      <md-button class="md-icon-button">
-        <md-icon>format_align_left</md-icon>
-      </md-button>
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_italic</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button md-toggle">
-        <md-icon>format_align_center</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>format_underline</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button">
-        <md-icon>format_align_right</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>title</md-icon>
+          </md-button>
+        </md-button-toggle>
 
-      <md-button class="md-icon-button">
-        <md-icon>format_align_justify</md-icon>
-      </md-button>
-    </md-button-toggle>
+        <md-button-toggle class="md-button-group md-accent">
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_bold</md-icon>
+          </md-button>
 
-    <md-button-toggle class="md-button-group md-warn" style="margin-top: 24px">
-      <md-button class="md-icon-button md-toggle">
-        <md-icon>format_bold</md-icon>
-      </md-button>
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_italic</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button md-toggle">
-        <md-icon>format_italic</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>format_underline</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button">
-        <md-icon>format_underline</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>title</md-icon>
+          </md-button>
+        </md-button-toggle>
 
-      <md-button class="md-icon-button">
-        <md-icon>title</md-icon>
-      </md-button>
-    </md-button-toggle>
+        <md-button-toggle class="md-button-group md-warn">
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_bold</md-icon>
+          </md-button>
 
-    <md-button-toggle class="md-button-group md-accent" style="margin-top: 24px">
-      <md-button class="md-icon-button md-toggle">
-        <md-icon>format_bold</md-icon>
-      </md-button>
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_italic</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button md-toggle">
-        <md-icon>format_italic</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>strikethrough_s</md-icon>
+          </md-button>
 
-      <md-button class="md-icon-button">
-        <md-icon>strikethrough_s</md-icon>
-      </md-button>
+          <md-button class="md-icon-button">
+            <md-icon>title</md-icon>
+          </md-button>
+        </md-button-toggle>
 
-      <md-button class="md-icon-button">
-        <md-icon>title</md-icon>
-      </md-button>
-    </md-button-toggle>
-  </section>
+        <md-button-toggle class="md-button-group md-primary">
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_bold</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button md-toggle" disabled>
+            <md-icon>format_italic</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button" disabled>
+            <md-icon>strikethrough_s</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>title</md-icon>
+          </md-button>
+        </md-button-toggle>
+
+        <md-button-toggle class="md-button-group md-primary">
+          <md-button class="md-toggle">Works</md-button>
+          <md-button class="md-toggle">With</md-button>
+          <md-button>Text</md-button>
+          <md-button>Too</md-button>
+        </md-button-toggle>
+      </demo-example>
+
+      <demo-example label="Single Selection" size="2">
+        <md-button-toggle type="radio" class="md-button-group">
+          <md-button class="md-icon-button">
+            <md-icon>format_align_left</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_align_center</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_right</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_justify</md-icon>
+          </md-button>
+        </md-button-toggle>
+
+        <md-button-toggle type="radio" class="md-button-group md-primary">
+          <md-button class="md-icon-button">
+            <md-icon>format_align_left</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_align_center</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_right</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_justify</md-icon>
+          </md-button>
+        </md-button-toggle>
+
+        <md-button-toggle type="radio" class="md-button-group md-accent">
+          <md-button class="md-icon-button">
+            <md-icon>format_align_left</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_align_center</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_right</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_justify</md-icon>
+          </md-button>
+        </md-button-toggle>
+
+        <md-button-toggle type="radio" class="md-button-group md-warn">
+          <md-button class="md-icon-button">
+            <md-icon>format_align_left</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_align_center</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_right</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_justify</md-icon>
+          </md-button>
+        </md-button-toggle>
+
+        <md-button-toggle type="radio" class="md-button-group md-primary">
+          <md-button class="md-icon-button md-toggle">
+            <md-icon>format_align_left</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_center</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button">
+            <md-icon>format_align_right</md-icon>
+          </md-button>
+
+          <md-button class="md-icon-button" disabled>
+            <md-icon>format_align_justify</md-icon>
+          </md-button>
+        </md-button-toggle>
+
+        <md-button-toggle type="radio" class="md-button-group md-primary">
+          <md-button>Works</md-button>
+          <md-button class="md-toggle">With</md-button>
+          <md-button>Text</md-button>
+          <md-button>Too</md-button>
+        </md-button-toggle>
+      </demo-example>
+    </div>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
+
+<style lang="scss" scoped>
+  .md-button-group + .md-button-group {
+    margin-top: 16px;
+  }
+</style>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Buttom Toggle';
+    }
+  };
+</script>
diff --git a/src/docs/pages/Buttons.vue b/src/docs/pages/Buttons.vue
index c2b8236..614d443 100644
--- a/src/docs/pages/Buttons.vue
+++ b/src/docs/pages/Buttons.vue
@@ -1,76 +1,146 @@
 <template>
-  <div class="page-content">
-    <md-whiteframe md-elevation="2">
-      <md-toolbar class="md-dense">
-        <md-button>Examples</md-button>
-        <md-button>Code</md-button>
-        <md-button>API</md-button>
-      </md-toolbar>
-    </md-whiteframe>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Flat">
+        <md-button @click="disablePrimaryButton">Default</md-button>
+        <md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
+        <md-button class="md-accent">Accent</md-button>
+        <md-button class="md-warn">Warn</md-button>
+        <md-button class="md-primary" :disabled="!buttonDisabled">Disabled</md-button>
+        <md-button class="md-dense">Dense</md-button>
+      </demo-example>
 
-    <div class="main-content">
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Buttons</h2>
-        </md-toolbar>
+      <demo-example label="Raised">
+        <md-button class="md-raised" @click="disablePrimaryButton">Default</md-button>
+        <md-button class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
+        <md-button class="md-raised md-accent">Accent</md-button>
+        <md-button class="md-raised md-warn">Warn</md-button>
+        <md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
+        <md-button class="md-raised md-dense">Dense</md-button>
+      </demo-example>
 
-        <section v-md-theme="'indigo'">
-          <md-button @click="disablePrimaryButton">Button</md-button>
-          <md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
-          <md-button class="md-primary md-raised">Raised</md-button>
-          <md-button class="md-accent md-raised">Accent</md-button>
-          <md-button class="md-warn">Warn</md-button>
-          <md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
-          <md-button class="md-raised md-dense md-accent">Dense</md-button>
-        </section>
-      </md-whiteframe>
+      <demo-example label="Themed">
+        <md-button class="md-raised md-primary" @click="disablePrimaryButton" v-md-theme="'indigo'">Default</md-button>
+        <md-button class="md-raised md-primary" :disabled="buttonDisabled" v-md-theme="'teal'">Primary</md-button>
+        <md-button class="md-raised md-primary" v-md-theme="'green'">Accent</md-button>
+        <md-button class="md-raised md-primary" v-md-theme="'white'">Warn</md-button>
+        <md-button class="md-raised md-primary" :disabled="!buttonDisabled" v-md-theme="'grey'">Disabled</md-button>
+        <md-button class="md-raised md-primary" v-md-theme="'orange'">Dense</md-button>
+      </demo-example>
 
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Links</h2>
-        </md-toolbar>
+      <demo-example label="Links">
+        <md-button href="#/button" class="md-raised" @click="disablePrimaryButton">Default</md-button>
+        <md-button href="#/button" class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
+        <md-button href="#/button" class="md-raised md-accent">Accent</md-button>
+        <md-button href="#/button" class="md-raised md-warn">Warn</md-button>
+        <md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
+        <md-button href="#/button" class="md-raised md-dense">Dense</md-button>
+      </demo-example>
 
-        <section v-md-theme="'indigo'">
-          <md-button href="#/button" @click="disablePrimaryButton">Button</md-button>
-          <md-button href="#/button" class="md-primary" :disabled="buttonDisabled">Primary</md-button>
-          <md-button href="#/button" class="md-primary md-raised">Raised</md-button>
-          <md-button href="#/button" class="md-accent md-raised">Accent</md-button>
-          <md-button href="#/button" class="md-warn">Warn</md-button>
-          <md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
-          <md-button href="#/button" class="md-raised md-dense md-accent">Dense</md-button>
-        </section>
-      </md-whiteframe>
+      <demo-example label="Icons - Flat">
+        <md-button class="md-icon-button" @click="disablePrimaryButton">
+          <md-icon>add</md-icon>
+        </md-button>
 
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">FAB</h2>
-        </md-toolbar>
+        <md-button class="md-icon-button md-primary" :disabled="buttonDisabled">
+          <md-icon>add</md-icon>
+        </md-button>
 
-        <section v-md-theme="'indigo'">
-          <md-button class="md-fab md-fab-bottom-right">
-            <md-icon>add</md-icon>
-          </md-button>
+        <md-button class="md-icon-button md-accent">
+          <md-icon>add</md-icon>
+        </md-button>
 
-          <md-button class="md-fab md-primary">
-            <md-icon>edit</md-icon>
-          </md-button>
+        <md-button class="md-icon-button md-warn">
+          <md-icon>add</md-icon>
+        </md-button>
 
-          <md-button class="md-fab md-warn md-mini">
-            <md-icon>save</md-icon>
-          </md-button>
-        </section>
-      </md-whiteframe>
+        <md-button class="md-icon-button" :disabled="!buttonDisabled">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button md-dense">
+          <md-icon>add</md-icon>
+        </md-button>
+      </demo-example>
+
+      <demo-example label="Icons - Raised">
+        <md-button class="md-icon-button md-raised" @click="disablePrimaryButton">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button md-raised md-primary" :disabled="buttonDisabled">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button md-raised md-accent">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button md-raised md-warn">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button md-raised" :disabled="!buttonDisabled">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button md-raised md-dense">
+          <md-icon>add</md-icon>
+        </md-button>
+      </demo-example>
+
+      <demo-example label="Floating Action Button" height="360">
+        <md-button class="md-fab md-fab-bottom-right">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-fab-bottom-left md-mini">
+          <md-icon>add</md-icon>
+        </md-button>
+
+        <md-button class="md-fab">
+          <md-icon>edit</md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-mini">
+          <md-icon>edit</md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-primary">
+          <md-icon>email</md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-primary md-mini">
+          <md-icon>email</md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-warn">
+          <md-icon>save</md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-warn md-mini">
+          <md-icon>save</md-icon>
+        </md-button>
+
+        <md-button class="md-fab" disabled>
+          <md-icon>message</md-icon>
+        </md-button>
+
+        <md-button class="md-fab md-mini" disabled>
+          <md-icon>message</md-icon>
+        </md-button>
+      </demo-example>
     </div>
-  </div>
-</template>
 
-<style lang="scss" scoped>
-  .cell-phone {
-    margin-right: 16px;
-    display: inline-block;
-    border: none;
-  }
-</style>
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
+</template>
 
 <script>
   export default {
diff --git a/src/docs/pages/Checkbox.vue b/src/docs/pages/Checkbox.vue
index 2b5b50d..d6a2965 100644
--- a/src/docs/pages/Checkbox.vue
+++ b/src/docs/pages/Checkbox.vue
@@ -1,36 +1,49 @@
 <template>
-  <section>
-    <h2 class="title">Checkbox</h2>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default">
+        <md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Regular Checkbox</md-checkbox>
+        <md-checkbox id="my-test2" name="my-test2" v-model="checkbox" class="md-primary">Primary Color</md-checkbox>
+        <md-checkbox id="my-test3" name="my-test3" v-model="checkbox" class="md-warn">Warn Color</md-checkbox>
+        <md-checkbox id="my-test4" name="my-test4" v-model="checkbox" disabled>Disabled</md-checkbox>
+      </demo-example>
 
-    <div>
-      <md-checkbox id="my-test0" name="my-test0" v-model="checkbox">My beautiful checkbox</md-checkbox>
+      <demo-example label="Themed">
+        <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>
+      </demo-example>
     </div>
 
-    <div v-md-theme="'indigo'">
-      <md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Themed</md-checkbox>
+    <div slot="code">
+      <h2>Code</h2>
     </div>
 
-    <div v-md-theme="'blue'">
-      <md-checkbox id="my-test2" name="my-test2" v-model="checkbox">Accent Color</md-checkbox>
-    </div>
+    <div slot="api">
 
-    <div v-md-theme="'orange'">
-      <md-checkbox id="my-test3" name="my-test3" v-model="checkbox">Fancy colors</md-checkbox>
     </div>
-
-    <div v-md-theme="'teal'">
-      <md-checkbox id="my-test4" name="my-test4" v-model="checkbox2">Really simple</md-checkbox>
-    </div>
-
-    <div v-md-theme="'teal'">
-      <md-checkbox id="my-test5" name="my-test5" v-model="checkbox" disabled>Disabled</md-checkbox>
-    </div>
-  </section>
+  </demo-page>
 </template>
 
 <style lang="scss" scoped>
-  section {
-    padding: 0 24px;
+  .themed {
+    display: inline-block;
   }
 </style>
 
@@ -41,6 +54,9 @@
         checkbox: true,
         checkbox2: false
       };
+    },
+    mounted() {
+      this.$root.pageTitle = 'Checkbox';
     }
   };
 </script>
diff --git a/src/docs/pages/Divider.vue b/src/docs/pages/Divider.vue
deleted file mode 100644
index 1744479..0000000
--- a/src/docs/pages/Divider.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <section>
-    <md-divider></md-divider>
-
-    <md-divider class="md-inset"></md-divider>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-  section {
-    margin: 24px;
-  }
-
-  .md-divider {
-    margin-top: 24px;
-  }
-</style>
diff --git a/src/docs/pages/Error.vue b/src/docs/pages/Error.vue
index 4997122..b10df85 100644
--- a/src/docs/pages/Error.vue
+++ b/src/docs/pages/Error.vue
@@ -3,3 +3,11 @@
     <h1>Error 404</h1>
   </section>
 </template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Error';
+    }
+  };
+</script>
diff --git a/src/docs/pages/Icon.vue b/src/docs/pages/Icon.vue
index b5d1df9..507a4b6 100644
--- a/src/docs/pages/Icon.vue
+++ b/src/docs/pages/Icon.vue
@@ -1,8 +1,35 @@
 <template>
-  <section>
-    <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>
-  </section>
+  <demo-page>
+    <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>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Icon';
+    }
+  };
+</script>
diff --git a/src/docs/pages/Input.vue b/src/docs/pages/Input.vue
index b239ee7..31eb668 100644
--- a/src/docs/pages/Input.vue
+++ b/src/docs/pages/Input.vue
@@ -1,83 +1,130 @@
 <template>
-  <section>
-    <form novalidate @submit.stop.prevent="submit">
-      <md-input-container>
-        <label>Initial value</label>
-        <md-input v-model="initialValue"></md-input>
-      </md-input-container>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Regular fields" size="4">
+        <form novalidate @submit.stop.prevent="submit">
+          <md-input-container>
+            <label>Initial value</label>
+            <md-input v-model="initialValue"></md-input>
+          </md-input-container>
 
-      <md-input-container>
-        <label>With label</label>
-        <md-input placeholder="My nice placeholder"></md-input>
-      </md-input-container>
+          <md-input-container>
+            <label>With label</label>
+            <md-input placeholder="My nice placeholder"></md-input>
+          </md-input-container>
 
-      <md-input-container md-inline>
-        <label>Inline field</label>
-        <md-input></md-input>
-      </md-input-container>
+          <md-input-container md-inline>
+            <label>Inline field</label>
+            <md-input></md-input>
+          </md-input-container>
 
-      <md-input-container>
-        <label>Required</label>
-        <md-input required></md-input>
-      </md-input-container>
+          <md-input-container>
+            <label>Number</label>
+            <md-input type="number"></md-input>
+          </md-input-container>
 
-      <md-input-container class="md-input-invalid">
-        <label>Error</label>
-        <md-input required></md-input>
+          <md-input-container>
+            <label>Textarea</label>
+            <md-textarea></md-textarea>
+          </md-input-container>
 
-        <span class="md-error">Validation message</span>
-      </md-input-container>
+          <md-input-container>
+            <label>Disabled</label>
+            <md-input disabled></md-input>
+          </md-input-container>
+        </form>
+      </demo-example>
 
-      <md-input-container>
-        <label>Disabled</label>
-        <md-input disabled></md-input>
-      </md-input-container>
+      <demo-example label="Password" size="4">
+        <form novalidate @submit.stop.prevent="submit">
+          <md-input-container>
+            <label>Regular Password</label>
+            <md-input type="password"></md-input>
+          </md-input-container>
 
-      <md-input-container md-has-password>
-        <label>Passwords</label>
-        <md-input type="password"></md-input>
-      </md-input-container>
+          <md-input-container md-has-password>
+            <label>Password Reveal</label>
+            <md-input type="password"></md-input>
+          </md-input-container>
+        </form>
+      </demo-example>
 
-      <md-input-container>
-        <label>Textarea</label>
-        <md-textarea></md-textarea>
-      </md-input-container>
+      <demo-example label="Required and Errors" size="4">
+        <form novalidate @submit.stop.prevent="submit">
+          <md-input-container>
+            <label>Required</label>
+            <md-input required></md-input>
+          </md-input-container>
 
-      <md-input-container>
-        <label>Character counter - Textarea</label>
-        <md-textarea maxlength="70"></md-textarea>
-      </md-input-container>
+          <md-input-container class="md-input-invalid">
+            <label>Error</label>
+            <md-input required></md-input>
+          </md-input-container>
 
-      <md-input-container>
-        <label>Character counter - Input</label>
-        <md-input maxlength="20"></md-input>
-      </md-input-container>
+          <md-input-container class="md-input-invalid">
+            <label>Error with message</label>
+            <md-input required></md-input>
 
-      <md-input-container v-md-theme="'green'">
-        <label>Themable - Input</label>
-        <md-input></md-input>
-      </md-input-container>
+            <span class="md-error">Validation message</span>
+          </md-input-container>
 
-      <md-input-container v-md-theme="'orange'">
-        <label>Themable - Textarea</label>
-        <md-textarea></md-textarea>
-      </md-input-container>
-    </form>
-  </section>
+          <md-input-container class="md-input-invalid">
+            <label>Textarea with error</label>
+            <md-textarea></md-textarea>
+
+            <span class="md-error">Textarea validation message</span>
+          </md-input-container>
+        </form>
+      </demo-example>
+
+      <demo-example label="Character counter" size="4">
+        <form novalidate @submit.stop.prevent="submit">
+          <md-input-container>
+            <label>Textarea</label>
+            <md-textarea maxlength="70"></md-textarea>
+          </md-input-container>
+
+          <md-input-container>
+            <label>Input</label>
+            <md-input maxlength="20"></md-input>
+          </md-input-container>
+        </form>
+      </demo-example>
+
+      <demo-example label="Themed" size="4">
+        <form novalidate @submit.stop.prevent="submit">
+          <md-input-container v-md-theme="'green'">
+            <label>Themable - Input</label>
+            <md-input></md-input>
+          </md-input-container>
+
+          <md-input-container v-md-theme="'brown'">
+            <label>Themable - Textarea</label>
+            <md-textarea></md-textarea>
+          </md-input-container>
+        </form>
+      </demo-example>
+    </div>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
 
-<style lang="scss" scoped>
-  section {
-    margin: 24px;
-  }
-</style>
-
 <script>
   export default {
     data() {
       return {
         initialValue: 'My initial value'
       };
+    },
+    mounted() {
+      this.$root.pageTitle = 'Input';
     }
   };
 </script>
diff --git a/src/docs/pages/List.vue b/src/docs/pages/List.vue
index 514c4b5..a671dea 100644
--- a/src/docs/pages/List.vue
+++ b/src/docs/pages/List.vue
@@ -1,20 +1,8 @@
 <template>
-  <div class="page-content">
-    <md-whiteframe md-elevation="2">
-      <md-toolbar class="md-dense">
-        <md-button>Examples</md-button>
-        <md-button>Code</md-button>
-        <md-button>API</md-button>
-      </md-toolbar>
-    </md-whiteframe>
-
-    <div class="main-content">
-      <section>
-        <div class="cell-phone scrollable">
-          <md-toolbar>
-            <h2 class="md-title">Normal - Single Line</h2>
-          </md-toolbar>
-
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Single Line">
+        <div class="phone-viewport">
           <md-list>
             <md-list-item>
               <md-icon>move_to_inbox</md-icon> <span>Inbox</span>
@@ -72,11 +60,7 @@
           </md-list>
         </div>
 
-        <div class="cell-phone scrollable">
-          <md-toolbar>
-            <h2 class="md-title">Dense - Single Line</h2>
-          </md-toolbar>
-
+        <div class="phone-viewport">
           <md-list class="md-dense">
             <md-list-item>
               <md-icon>move_to_inbox</md-icon> <span>Inbox</span>
@@ -133,14 +117,10 @@
             </md-list-item>
           </md-list>
         </div>
-      </section>
-
-      <section v-md-theme="'indigo'">
-        <div class="cell-phone scrollable">
-          <md-toolbar>
-            <h2 class="md-title">Normal - Double Line</h2>
-          </md-toolbar>
+      </demo-example>
 
+      <demo-example label="Double Line">
+        <div class="phone-viewport">
           <md-list class="md-double-line">
             <md-list-item>
               <md-icon class="md-primary">phone</md-icon>
@@ -186,11 +166,7 @@
           </md-list>
         </div>
 
-        <div class="cell-phone scrollable">
-          <md-toolbar>
-            <h2 class="md-title">Dense - Double Line</h2>
-          </md-toolbar>
-
+        <div class="phone-viewport">
           <md-list class="md-double-line md-dense">
             <md-list-item>
               <md-icon class="md-primary">phone</md-icon>
@@ -235,14 +211,10 @@
             </md-list-item>
           </md-list>
         </div>
-      </section>
-
-      <section v-md-theme="'orange'">
-        <div class="cell-phone scrollable">
-          <md-toolbar>
-            <h2 class="md-title">Normal - Triple Line</h2>
-          </md-toolbar>
+      </demo-example>
 
+      <demo-example label="Triple Line">
+        <div class="phone-viewport">
           <md-list class="custom-list md-triple-line">
             <md-list-item>
               <md-avatar>
@@ -318,11 +290,7 @@
           </md-list>
         </div>
 
-        <div class="cell-phone scrollable">
-          <md-toolbar>
-            <h2 class="md-title">Dense - Triple Line</h2>
-          </md-toolbar>
-
+        <div class="phone-viewport">
           <md-list class="custom-list md-triple-line md-dense">
             <md-list-item>
               <md-avatar>
@@ -397,10 +365,10 @@
             </md-list-item>
           </md-list>
         </div>
-      </section>
+      </demo-example>
 
-      <section>
-        <div class="cell-phone complete-example">
+      <demo-example label="Complete Example">
+        <div class="phone-viewport complete-example">
           <md-whiteframe md-elevation="3">
             <md-toolbar class="md-extended" v-md-theme="'light-blue'">
               <div class="md-toolbar-container">
@@ -542,8 +510,8 @@
             </md-list-item>
           </md-list>
 
-          <md-sidenav v-md-theme="'blue'" class="md-left" ref="sidebar">
-            <md-toolbar class="md-account-header">
+          <md-sidenav class="md-left" ref="sidebar">
+            <md-toolbar class="md-account-header" v-md-theme="'blue'">
               <md-list class="md-transparent">
                 <md-list-item class="md-avatar-list">
                   <md-avatar class="md-large">
@@ -574,7 +542,7 @@
               </md-list>
             </md-toolbar>
 
-            <md-list>
+            <md-list v-md-theme="'blue'">
               <md-list-item @click="toggleSidenav" class="md-primary">
                 <md-icon>insert_drive_file</md-icon> <span>My files</span>
               </md-list-item>
@@ -597,20 +565,31 @@
             </md-list>
           </md-sidenav>
         </div>
-      </section>
+      </demo-example>
     </div>
-  </div>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
 
 <style lang="scss">
   @import '../../core/stylesheets/variables.scss';
 
-  .cell-phone {
+  .phone-viewport {
     width: 360px;
-    max-height: 540px;
-    min-height: 540px;
-    margin-bottom: 24px;
-    border: 1px solid #ccc;
+    height: 540px;
+    margin-right: 16px;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid rgba(#000, .12);
   }
 
   .custom-list {
@@ -628,7 +607,7 @@
   }
 
   .complete-example {
-    height: auto;
+    height: 480px;
     display: flex;
     flex-flow: column;
     position: relative;
@@ -669,8 +648,14 @@
       color: rgba(#fff, .54);
     }
 
-    .md-account-header .md-list-item:hover .md-button:hover {
-      background-color: inherit;
+    .md-account-header {
+      .md-list-item:hover .md-button:hover {
+        background-color: inherit;
+      }
+
+      .md-avatar-list .md-list-item-container:hover {
+        background: none !important;
+      }
     }
   }
 </style>
diff --git a/src/docs/pages/Radio.vue b/src/docs/pages/Radio.vue
index 6074dc6..72350e8 100644
--- a/src/docs/pages/Radio.vue
+++ b/src/docs/pages/Radio.vue
@@ -1,4 +1,99 @@
 <template>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default">
+        <div>
+          <md-radio v-model="radio1" id="my-test1" name="my-test-group1" md-value="1">My beautiful radio</md-radio>
+          <md-radio v-model="radio1" id="my-test2" name="my-test-group1" md-value="2">Another radio</md-radio>
+          <md-radio v-model="radio1" id="my-test3" name="my-test-group1" md-value="3">Another another radio</md-radio>
+        </div>
+
+        <div>
+          <md-radio v-model="radio2" id="my-test4" name="my-test-group2" md-value="1" class="md-primary">Primary radio</md-radio>
+          <md-radio v-model="radio2" id="my-test5" name="my-test-group2" md-value="2" class="md-primary">Another primary radio</md-radio>
+          <md-radio v-model="radio2" id="my-test6" name="my-test-group2" md-value="3" class="md-primary">Another another primary radio</md-radio>
+        </div>
+
+        <div>
+          <md-radio v-model="radio3" id="my-test7" name="my-test-group3" md-value="1" class="md-warn">Warn radio</md-radio>
+          <md-radio v-model="radio3" id="my-test8" name="my-test-group3" md-value="2" class="md-warn">Another warn radio</md-radio>
+          <md-radio v-model="radio3" id="my-test9" name="my-test-group3" md-value="3" class="md-warn">Another another warn radio</md-radio>
+        </div>
+
+        <div>
+          <md-radio v-model="radio4" id="my-test10" name="my-test-group3" md-value="1">My beautiful radio</md-radio>
+          <md-radio v-model="radio4" id="my-test11" name="my-test-group3" md-value="2" disabled>Disabled</md-radio>
+          <md-radio v-model="radio4" id="my-test12" name="my-test-group3" md-value="3">Another radio</md-radio>
+        </div>
+      </demo-example>
+
+      <demo-example label="Themed">
+        <div v-md-theme="'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>
+
+        <div v-md-theme="'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>
+
+        <div v-md-theme="'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>
+
+        <div v-md-theme="'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>
+      </demo-example>
+    </div>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
+</template>
+
+<style lang="scss" scoped>
+  .themed {
+    display: inline-block;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        radio1: 2,
+        radio2: 1,
+        radio3: 1,
+        radio4: 1,
+        radio5: 2,
+        radio6: 3,
+        radio7: 1,
+        radio8: 2
+      };
+    },
+    mounted() {
+      this.$root.pageTitle = 'Radio';
+    }
+  };
+</script>
+
+
+
+
+<!-- <template>
   <section>
     <h2 class="title">Radio</h2>
 
@@ -34,25 +129,4 @@
       <md-radio v-model="radio6" id="my-test14" name="my-test-group6" md-value="3">Another another radio</md-radio>
     </div>
   </section>
-</template>
-
-<style lang="scss" scoped>
-  section {
-    padding: 0 24px;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        radio1: 2,
-        radio2: 1,
-        radio3: 1,
-        radio4: 1,
-        radio5: 2,
-        radio6: 3
-      };
-    }
-  };
-</script>
+</template> -->
diff --git a/src/docs/pages/Ripple.vue b/src/docs/pages/Ripple.vue
index 7c8360c..f676286 100644
--- a/src/docs/pages/Ripple.vue
+++ b/src/docs/pages/Ripple.vue
@@ -1,21 +1,57 @@
 <template>
-  <section>
-    <h2 class="title">Ripple</h2>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default">
+        <span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
+        <span class="has-ripple green" v-md-ink-ripple>This span has ripple effect</span>
+        <span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
 
-    <div class="has-ripple" v-md-ink-ripple>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <div>
+          <md-avatar v-md-ink-ripple>
+            <img src="//placeimg.com/40/40/people/1" alt="People">
+          </md-avatar>
+
+          <md-avatar v-md-ink-ripple class="md-avatar-icon">
+            <md-icon>home</md-icon>
+          </md-avatar>
+        </div>
+      </demo-example>
     </div>
-  </section>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
 
 <style lang="scss" scoped>
   .has-ripple {
+    margin-bottom: 16px;
     padding: 16px;
     position: relative;
   }
+
+  span {
+    display: inline-block;
+  }
+
+  .blue {
+    color: #2196F3;
+  }
+
+  .green {
+    color: #4CAF50;
+  }
 </style>
+
+<script>
+  export default {
+    mounted() {
+      this.$root.pageTitle = 'Ripple';
+    }
+  };
+</script>
diff --git a/src/docs/pages/Select.vue b/src/docs/pages/Select.vue
index a694fd0..7165935 100644
--- a/src/docs/pages/Select.vue
+++ b/src/docs/pages/Select.vue
@@ -1,79 +1,89 @@
 <template>
-  <section>
-    <h2 class="title">Select</h2>
+  <demo-page>
+    <div slot="examples">
+      <demo-example label="Default">
+        <div class="field-group">
+          <md-input-container>
+            <label for="movie">Movie</label>
+            <md-select name="movie" id="movie" v-model="movie">
+              <md-option value="Fight Club">Fight Club</md-option>
+              <md-option value="Godfather II">Godfather II</md-option>
+              <md-option value="Godfather III">Godfather III</md-option>
+              <md-option value="Godfather">Godfather</md-option>
+              <md-option value="Godfellas">Godfellas</md-option>
+              <md-option value="Pulp Fiction">Pulp Fiction</md-option>
+              <md-option value="Scarface">Scarface</md-option>
+            </md-select>
+          </md-input-container>
 
-    <div class="field-group">
-      <md-input-container>
-        <label for="movie">Movie</label>
-        <md-select name="movie" id="movie" v-model="movie">
-          <md-option value="Fight Club">Fight Club</md-option>
-          <md-option value="Godfather II">Godfather II</md-option>
-          <md-option value="Godfather III">Godfather III</md-option>
-          <md-option value="Godfather">Godfather</md-option>
-          <md-option value="Godfellas">Godfellas</md-option>
-          <md-option value="Pulp Fiction">Pulp Fiction</md-option>
-          <md-option value="Scarface">Scarface</md-option>
-        </md-select>
-      </md-input-container>
+          <md-input-container>
+            <label for="country">Country</label>
+            <md-select name="country" id="country" v-model="country">
+              <md-option value="Australia">Australia</md-option>
+              <md-option value="Brazil">Brazil</md-option>
+              <md-option value="Japan">Japan</md-option>
+              <md-option value="United States">United States</md-option>
+            </md-select>
+          </md-input-container>
 
-      <md-input-container>
-        <label for="country">Country</label>
-        <md-select name="country" id="country" v-model="country">
-          <md-option value="Australia">Australia</md-option>
-          <md-option value="Brazil">Brazil</md-option>
-          <md-option value="Japan">Japan</md-option>
-          <md-option value="United States">United States</md-option>
-        </md-select>
-      </md-input-container>
+          <md-input-container>
+            <label for="font">Font</label>
+            <md-select name="font" id="font" v-model="font">
+              <md-option value="Arial">Arial</md-option>
+              <md-option value="Calibri">Calibri</md-option>
+              <md-option value="Cambria">Cambria</md-option>
+              <md-option value="Comic Sans">Comic Sans</md-option>
+              <md-option value="Consolas">Consolas</md-option>
+              <md-option value="Courier">Courier</md-option>
+              <md-option value="Droid Sans">Droid Sans</md-option>
+              <md-option value="Georgia">Georgia</md-option>
+              <md-option value="Helvetica">Helvetica</md-option>
+              <md-option value="Impact">Impact</md-option>
+              <md-option value="Roboto">Roboto</md-option>
+              <md-option value="Segoe UI">Segoe UI</md-option>
+              <md-option value="Times New Roman">Times New Roman</md-option>
+              <md-option value="Ubuntu">Ubuntu</md-option>
+              <md-option value="Verdana">Verdana</md-option>
+            </md-select>
+          </md-input-container>
+        </div>
+      </demo-example>
 
-      <md-input-container>
-        <label for="font">Font</label>
-        <md-select name="font" id="font" v-model="font">
-          <md-option value="Arial">Arial</md-option>
-          <md-option value="Calibri">Calibri</md-option>
-          <md-option value="Cambria">Cambria</md-option>
-          <md-option value="Comic Sans">Comic Sans</md-option>
-          <md-option value="Consolas">Consolas</md-option>
-          <md-option value="Courier">Courier</md-option>
-          <md-option value="Droid Sans">Droid Sans</md-option>
-          <md-option value="Georgia">Georgia</md-option>
-          <md-option value="Helvetica">Helvetica</md-option>
-          <md-option value="Impact">Impact</md-option>
-          <md-option value="Roboto">Roboto</md-option>
-          <md-option value="Segoe UI">Segoe UI</md-option>
-          <md-option value="Times New Roman">Times New Roman</md-option>
-          <md-option value="Ubuntu">Ubuntu</md-option>
-          <md-option value="Verdana">Verdana</md-option>
-        </md-select>
-      </md-input-container>
+      <demo-example label="Groups">
+        <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-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>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-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>
+      </demo-example>
     </div>
-  </section>
+
+    <div slot="code">
+      <h2>Code</h2>
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
 </template>
 
 <style lang="scss" scoped>
-  section {
-    margin: 24px;
-  }
-
   .field-group {
     display: flex;
   }
@@ -92,6 +102,9 @@
         font: '',
         food: ''
       };
+    },
+    mounted() {
+      this.$root.pageTitle = 'Select';
     }
   };
 </script>
diff --git a/src/docs/pages/Tabs.vue b/src/docs/pages/Tabs.vue
index ca2398a..af93ca0 100644
--- a/src/docs/pages/Tabs.vue
+++ b/src/docs/pages/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-page>
-    <div slot="examples">
+    <div slot="examples" class="examples">
       <demo-example label="Default - Grey Theme" size="3" body-theme="grey">
         <md-tabs>
           <md-tab id="movies" md-label="Movies">
@@ -162,28 +162,17 @@
 </template>
 
 <style lang="scss">
-  .page-tabs {
-    .cell-phone {
-      width: 100%;
-      max-width: 412px;
-      height: auto;
-      min-height: 0;
-      max-height: none;
-      margin-right: 16px;
-      position: relative;
-      overflow: hidden;
-      border: none;
-      background-color: #fafafa;
-    }
+  .playground {
+    padding: 0 16px 16px;
 
-    .playground {
-      padding: 0 16px 16px;
-
-      .md-subheader {
-        padding: 16px 0 0;
-      }
+    .md-subheader {
+      padding: 16px 0 0;
     }
   }
+
+  div.examples .demo-example .demo-example-body {
+    padding: 0;
+  }
 </style>
 
 <script>
@@ -192,8 +181,8 @@
       return {
         playground: {
           color: '3',
-          fixed: false,
-          centered: true,
+          fixed: true,
+          centered: false,
           shadow: 0,
           tabs: [
             {
diff --git a/src/docs/routes.js b/src/docs/routes.js
index f3d5496..03fb23c 100644
--- a/src/docs/routes.js
+++ b/src/docs/routes.js
@@ -5,7 +5,6 @@ import BottomBar from './pages/BottomBar';
 import Buttons from './pages/Buttons';
 import ButtonToggle from './pages/ButtonToggle';
 import Checkbox from './pages/Checkbox';
-import Divider from './pages/Divider';
 import Icon from './pages/Icon';
 import Input from './pages/Input';
 import List from './pages/List';
@@ -52,11 +51,6 @@ const routes = [
     name: 'checkbox',
     component: Checkbox
   },
-  {
-    path: '/divider',
-    name: 'divider',
-    component: Divider
-  },
   {
     path: '/icon',
     name: 'icon',