diff --git a/src/docs/App.vue b/src/docs/App.vue
index 4818110..65513ff 100644
--- a/src/docs/App.vue
+++ b/src/docs/App.vue
@@ -141,18 +141,6 @@
       </div>
     </md-sidenav>
 
-    <md-toolbar class="main-header" v-if="toolbar">
-      <md-button class="md-icon-button" @click="toggleSidenav">
-        <md-icon>menu</md-icon>
-      </md-button>
-
-      <div class="md-title">
-        <span class="logo-vue-material">Vue Material</span>
-        <span> – </span>
-        <span class="page-title">{{ pageTitle }}</span>
-      </div>
-    </md-toolbar>
-
     <router-view></router-view>
   </div>
 </template>
@@ -198,10 +186,6 @@
     }
 
     .md-title {
-      .logo-vue-material {
-        display: inline-block;
-      }
-
       .page-title {
         margin-left: 0;
 
diff --git a/src/docs/components/demo-page.vue b/src/docs/components/demo-page.vue
index 4df87a7..cd01a8e 100644
--- a/src/docs/components/demo-page.vue
+++ b/src/docs/components/demo-page.vue
@@ -1,26 +1,43 @@
 <template>
-  <div class="page-content">
-    <md-tabs md-elevation="2" class="page-tabs">
-      <md-tab md-label="Examples">
-        <slot name="examples"></slot>
-      </md-tab>
+  <div class="demo-page">
+    <md-toolbar class="main-header">
+      <md-button class="md-icon-button" @click="toggleSidenav">
+        <md-icon>menu</md-icon>
+      </md-button>
 
-      <md-tab md-label="Code">
-        <slot name="code"></slot>
-      </md-tab>
+      <div class="md-title">
+        <span class="page-title">{{ label }}</span>
+      </div>
+    </md-toolbar>
 
-      <md-tab md-label="API">
-        <slot name="api"></slot>
-      </md-tab>
-    </md-tabs>
+    <div class="page-content">
+      <md-tabs md-elevation="2" class="page-tabs">
+        <md-tab md-label="Examples">
+          <slot name="examples"></slot>
+        </md-tab>
 
-    <slot></slot>
+        <md-tab md-label="Code">
+          <slot name="code"></slot>
+        </md-tab>
+
+        <md-tab md-label="API">
+          <slot name="api"></slot>
+        </md-tab>
+      </md-tabs>
+
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <style lang="scss">
   @import '../../core/stylesheets/variables.scss';
 
+  .demo-page {
+    display: flex;
+    flex-flow: column;
+  }
+
   .page-tabs {
     flex: 1;
 
@@ -70,6 +87,11 @@
 
 <script>
   export default {
-
+    props: ['label'],
+    methods: {
+      toggleSidenav() {
+        this.$root.toggleSidenav();
+      }
+    }
   };
 </script>
diff --git a/src/docs/components/single-page-banner.vue b/src/docs/components/single-page-banner.vue
new file mode 100644
index 0000000..8a7a5ab
--- /dev/null
+++ b/src/docs/components/single-page-banner.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="single-page-banner">
+    <md-toolbar class="single-page-banner">
+      <h1 class="md-title">{{ label }}</h1>
+    </md-toolbar>
+
+    <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github-button">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></svg>
+    </md-button>
+
+    <md-button class="md-icon-button single-page-menu-trigger" @click="toggleSidenav">
+      <md-icon>menu</md-icon>
+    </md-button>
+  </div>
+</template>
+
+<style lang="scss">
+  .single-page-banner {
+    min-height: 256px;
+    padding-top: 98px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 3;
+    color: #fff !important;
+
+    .md-title:first-child {
+      margin-left: 48px;
+      font-size: 45px;
+      font-weight: 400;
+      line-height: 1.3em;
+    }
+  }
+
+  .md-button.single-page-menu-trigger {
+    margin: 0;
+    position: fixed;
+    top: 12px;
+    left: 2px;
+    z-index: 3;
+    color: #fff;
+  }
+
+  .md-button.github-button {
+    margin: 0;
+    position: fixed;
+    top: 12px;
+    right: 12px;
+    z-index: 3;
+  }
+</style>
+
+<script>
+  export default {
+    props: ['label'],
+    methods: {
+      toggleSidenav() {
+        this.$root.toggleSidenav();
+      }
+    },
+  };
+</script>
diff --git a/src/docs/components/single-page.vue b/src/docs/components/single-page.vue
index 84247b0..8cdfd0f 100644
--- a/src/docs/components/single-page.vue
+++ b/src/docs/components/single-page.vue
@@ -7,21 +7,11 @@
         </md-button>
 
         <div class="md-title">
-          <span class="logo-vue-material">Vue Material</span>
-          <span> – </span>
           <span class="page-title">{{ label }}</span>
         </div>
       </md-toolbar>
     </md-whiteframe>
 
-    <md-toolbar class="single-page-banner">
-      <h1 class="md-title">{{ pageTitle }}</h1>
-    </md-toolbar>
-
-    <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github-button">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></svg>
-    </md-button>
-
     <div class="single-page-content">
       <slot></slot>
     </div>
@@ -75,6 +65,15 @@
     }
   }
 
+  .single-page-menu-trigger {
+    margin: 0;
+    position: fixed;
+    top: 12px;
+    left: 2px;
+    z-index: 3;
+    color: #fff;
+  }
+
   .md-button.github-button {
     margin: 0;
     position: fixed;
@@ -86,17 +85,11 @@
 
 <script>
   export default {
-    props: ['label', 'pageTitle'],
+    props: ['label'],
     methods: {
       toggleSidenav() {
         this.$root.toggleSidenav();
       }
-    },
-    mounted() {
-      this.$root.toolbar = false;
-    },
-    destroyed() {
-      this.$root.toolbar = true;
     }
   };
 </script>
diff --git a/src/docs/index.js b/src/docs/index.js
index f7d2319..03c3ee1 100644
--- a/src/docs/index.js
+++ b/src/docs/index.js
@@ -7,6 +7,7 @@ import './config.js';
 import routes from './routes.js';
 import App from './App';
 import SinglePage from './components/single-page';
+import SinglePageBanner from './components/single-page-banner';
 import DemoPage from './components/demo-page';
 import DemoExample from './components/demo-example';
 
@@ -32,6 +33,7 @@ let handleSectionTheme = (route) => {
 };
 
 Vue.component('single-page', SinglePage);
+Vue.component('single-page-banner', SinglePageBanner);
 Vue.component('demo-page', DemoPage);
 Vue.component('demo-example', DemoExample);
 
diff --git a/src/docs/pages/About.vue b/src/docs/pages/About.vue
index bcb8de3..4a4e771 100644
--- a/src/docs/pages/About.vue
+++ b/src/docs/pages/About.vue
@@ -1,13 +1,5 @@
 <template>
-  <single-page class="single-page-home" label="About" page-title="About">
-
+  <single-page class="single-page-home" label="About">
+    <single-page-banner label="About"></single-page-banner>
   </single-page>
 </template>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'About';
-    }
-  };
-</script>
diff --git a/src/docs/pages/Changelog.vue b/src/docs/pages/Changelog.vue
index b98c02f..0967d74 100644
--- a/src/docs/pages/Changelog.vue
+++ b/src/docs/pages/Changelog.vue
@@ -1,13 +1,5 @@
 <template>
-  <single-page class="single-page-home" label="Changelog" page-title="Changelog">
-
+  <single-page class="single-page-home" label="Changelog">
+    <single-page-banner label="Changelog"></single-page-banner>
   </single-page>
 </template>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Changelog';
-    }
-  };
-</script>
diff --git a/src/docs/pages/Error.vue b/src/docs/pages/Error.vue
index 235266f..a90108d 100644
--- a/src/docs/pages/Error.vue
+++ b/src/docs/pages/Error.vue
@@ -1,13 +1,5 @@
 <template>
-  <single-page class="single-page-home" label="Error 404" page-title="Error 404">
-
+  <single-page class="single-page-home" label="Error">
+    <single-page-banner label="Error 404"></single-page-banner>
   </single-page>
 </template>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Error';
-    }
-  };
-</script>
diff --git a/src/docs/pages/GettingStarted.vue b/src/docs/pages/GettingStarted.vue
index 4897990..e8984be 100644
--- a/src/docs/pages/GettingStarted.vue
+++ b/src/docs/pages/GettingStarted.vue
@@ -1,13 +1,5 @@
 <template>
-  <single-page class="single-page-home" label="Getting Started" page-title="Getting Started">
-
+  <single-page class="single-page-home" label="Getting Started">
+    <single-page-banner label="Getting Started"></single-page-banner>
   </single-page>
 </template>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Getting Started';
-    }
-  };
-</script>
diff --git a/src/docs/pages/Introduction.vue b/src/docs/pages/Introduction.vue
index 87b6d55..9671100 100644
--- a/src/docs/pages/Introduction.vue
+++ b/src/docs/pages/Introduction.vue
@@ -1,5 +1,5 @@
 <template>
-  <single-page class="single-page-home" label="Introduction" page-title="Vue Material">
-
+  <single-page class="single-page-home" label="Introduction">
+    <single-page-banner label="Introduction"></single-page-banner>
   </single-page>
 </template>
diff --git a/src/docs/pages/components/Avatar.vue b/src/docs/pages/components/Avatar.vue
index cf47d76..240c01a 100644
--- a/src/docs/pages/components/Avatar.vue
+++ b/src/docs/pages/components/Avatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Avatar">
     <div slot="examples">
       <demo-example label="Default" size="2">
         <md-avatar>
@@ -55,11 +55,3 @@
     </div>
   </demo-page>
 </template>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Avatar';
-    }
-  };
-</script>
diff --git a/src/docs/pages/components/BottomBar.vue b/src/docs/pages/components/BottomBar.vue
index 4dc4364..add2a25 100644
--- a/src/docs/pages/components/BottomBar.vue
+++ b/src/docs/pages/components/BottomBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Bottom Bar">
     <div slot="examples">
       <demo-example label="Default">
         <div class="phone-viewport">
@@ -139,9 +139,6 @@
       setTheme(theme) {
         this.playground.theme = theme;
       }
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Bottom Bar';
     }
   };
 </script>
diff --git a/src/docs/pages/components/ButtonToggle.vue b/src/docs/pages/components/ButtonToggle.vue
index 0dc9612..9d3dd6b 100644
--- a/src/docs/pages/components/ButtonToggle.vue
+++ b/src/docs/pages/components/ButtonToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Button Toggle">
     <div slot="examples">
       <demo-example label="Multiple" size="2">
         <md-button-toggle class="md-button-group">
@@ -215,11 +215,3 @@
     margin-top: 16px;
   }
 </style>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Buttom Toggle';
-    }
-  };
-</script>
diff --git a/src/docs/pages/components/Buttons.vue b/src/docs/pages/components/Buttons.vue
index 608e733..fc080ae 100644
--- a/src/docs/pages/components/Buttons.vue
+++ b/src/docs/pages/components/Buttons.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Button">
     <div slot="examples">
       <demo-example label="Flat">
         <md-button @click="disablePrimaryButton">Default</md-button>
@@ -161,9 +161,6 @@
       disablePrimaryButton() {
         this.buttonDisabled = !this.buttonDisabled;
       }
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Button';
     }
   };
 </script>
diff --git a/src/docs/pages/components/Checkbox.vue b/src/docs/pages/components/Checkbox.vue
index 0405b74..50dd40c 100644
--- a/src/docs/pages/components/Checkbox.vue
+++ b/src/docs/pages/components/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Checkbox">
     <div slot="examples">
       <demo-example label="Default">
         <md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Regular Checkbox</md-checkbox>
@@ -54,9 +54,6 @@
         checkbox: true,
         checkbox2: false
       };
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Checkbox';
     }
   };
 </script>
diff --git a/src/docs/pages/components/Icon.vue b/src/docs/pages/components/Icon.vue
index 3b8a9da..f1577d2 100644
--- a/src/docs/pages/components/Icon.vue
+++ b/src/docs/pages/components/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Icon">
     <div slot="examples">
       <demo-example label="Default" size="2">
         <md-icon>home</md-icon>
@@ -25,11 +25,3 @@
     </div>
   </demo-page>
 </template>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Icon';
-    }
-  };
-</script>
diff --git a/src/docs/pages/components/Input.vue b/src/docs/pages/components/Input.vue
index 90fd874..c2f9f9d 100644
--- a/src/docs/pages/components/Input.vue
+++ b/src/docs/pages/components/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Input">
     <div slot="examples">
       <demo-example label="Regular fields" size="4">
         <form novalidate @submit.stop.prevent="submit">
@@ -122,9 +122,6 @@
       return {
         initialValue: 'My initial value'
       };
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Input';
     }
   };
 </script>
diff --git a/src/docs/pages/components/List.vue b/src/docs/pages/components/List.vue
index 2dc3bdf..a0d66d6 100644
--- a/src/docs/pages/components/List.vue
+++ b/src/docs/pages/components/List.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - List">
     <div slot="examples">
       <demo-example label="Single Line">
         <div class="phone-viewport">
@@ -722,9 +722,6 @@
       toggleSidenav() {
         this.$refs.sidebar.toggle();
       }
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - List';
     }
   };
 </script>
diff --git a/src/docs/pages/components/Radio.vue b/src/docs/pages/components/Radio.vue
index 915bc58..baa601b 100644
--- a/src/docs/pages/components/Radio.vue
+++ b/src/docs/pages/components/Radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Radio">
     <div slot="examples">
       <demo-example label="Default">
         <div>
@@ -83,50 +83,6 @@
         radio7: 1,
         radio8: 2
       };
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Radio';
     }
   };
 </script>
-
-
-
-
-<!-- <template>
-  <section>
-    <h2 class="title">Radio</h2>
-
-    <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 v-md-theme="'indigo'">
-      <md-radio class="md-primary" v-model="radio2" id="my-test4" name="my-test-group2" md-value="1">Indigo radio</md-radio>
-      <md-radio class="md-primary" v-model="radio2" id="my-test5" name="my-test-group2" md-value="2">Another indigo radio</md-radio>
-    </div>
-
-    <div v-md-theme="'green'">
-      <md-radio class="md-primary" v-model="radio3" id="my-test6" name="my-test-group3" md-value="1">Blue radio</md-radio>
-      <md-radio class="md-primary" v-model="radio3" id="my-test7" name="my-test-group3" md-value="2">Another blue radio</md-radio>
-    </div>
-
-    <div v-md-theme="'orange'">
-      <md-radio class="md-primary" v-model="radio4" id="my-test8" name="my-test-group4" md-value="1">Orange radio</md-radio>
-      <md-radio class="md-primary" v-model="radio4" id="my-test9" name="my-test-group4" md-value="2">Another orange radio</md-radio>
-    </div>
-
-    <div v-md-theme="'teal'">
-      <md-radio class="md-primary" v-model="radio5" id="my-test10" name="my-test-group5" md-value="1">Teal radio</md-radio>
-      <md-radio class="md-primary" v-model="radio5" id="my-test11" name="my-test-group5" md-value="2">Another teal radio</md-radio>
-    </div>
-
-    <div>
-      <md-radio v-model="radio6" id="my-test12" name="my-test-group6" md-value="1">My beautiful radio</md-radio>
-      <md-radio v-model="radio6" id="my-test13" name="my-test-group6" md-value="2" disabled>Disabled radio</md-radio>
-      <md-radio v-model="radio6" id="my-test14" name="my-test-group6" md-value="3">Another another radio</md-radio>
-    </div>
-  </section>
-</template> -->
diff --git a/src/docs/pages/components/Ripple.vue b/src/docs/pages/components/Ripple.vue
index df9abad..8e82ac9 100644
--- a/src/docs/pages/components/Ripple.vue
+++ b/src/docs/pages/components/Ripple.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Ripple">
     <div slot="examples">
       <demo-example label="Default">
         <span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
@@ -47,11 +47,3 @@
     color: #4CAF50;
   }
 </style>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Ripple';
-    }
-  };
-</script>
diff --git a/src/docs/pages/components/Select.vue b/src/docs/pages/components/Select.vue
index 82ad277..1615557 100644
--- a/src/docs/pages/components/Select.vue
+++ b/src/docs/pages/components/Select.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Select">
     <div slot="examples">
       <demo-example label="Default">
         <div class="field-group">
@@ -102,9 +102,6 @@
         font: '',
         food: ''
       };
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Select';
     }
   };
 </script>
diff --git a/src/docs/pages/components/Sidenav.vue b/src/docs/pages/components/Sidenav.vue
index eae4a41..6219f90 100644
--- a/src/docs/pages/components/Sidenav.vue
+++ b/src/docs/pages/components/Sidenav.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Sidenav">
     <div slot="examples">
       <demo-example label="Default" size="2">
         <div class="phone-viewport">
@@ -73,9 +73,6 @@
       close(ref) {
         console.log('Closed: ' + ref);
       }
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Sidenav';
     }
   };
 </script>
diff --git a/src/docs/pages/components/Subheader.vue b/src/docs/pages/components/Subheader.vue
index 67870d3..466179b 100644
--- a/src/docs/pages/components/Subheader.vue
+++ b/src/docs/pages/components/Subheader.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Subheader">
     <div slot="examples">
       <demo-example label="With Lists">
         <div class="phone-viewport">
@@ -153,11 +153,3 @@
     </div>
   </demo-page>
 </template>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Subheader';
-    }
-  };
-</script>
diff --git a/src/docs/pages/components/Switch.vue b/src/docs/pages/components/Switch.vue
index 7f896df..d04f801 100644
--- a/src/docs/pages/components/Switch.vue
+++ b/src/docs/pages/components/Switch.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Switch">
     <div slot="examples">
       <demo-example label="Default">
         <div>
@@ -61,9 +61,6 @@
         checked6: true,
         checked7: true
       };
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Switch';
     }
   };
 </script>
diff --git a/src/docs/pages/components/Tabs.vue b/src/docs/pages/components/Tabs.vue
index 01f6dc0..54d453f 100644
--- a/src/docs/pages/components/Tabs.vue
+++ b/src/docs/pages/components/Tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Tabs">
     <div slot="examples" class="examples">
       <demo-example label="Default - Grey Theme" size="3" body-theme="grey">
         <md-tabs>
@@ -215,9 +215,6 @@
         },
         firstTabName: 'Movies'
       };
-    },
-    mounted() {
-      this.$root.pageTitle = 'Components - Tabs';
     }
   };
 </script>
diff --git a/src/docs/pages/components/Toolbar.vue b/src/docs/pages/components/Toolbar.vue
index c83c95c..10814a3 100644
--- a/src/docs/pages/components/Toolbar.vue
+++ b/src/docs/pages/components/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Toolbar">
     <div slot="examples">
       <demo-example label="Default">
         <md-toolbar>
@@ -223,11 +223,3 @@
     }
   }
 </style>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Toolbar';
-    }
-  };
-</script>
diff --git a/src/docs/pages/components/Tooltip.vue b/src/docs/pages/components/Tooltip.vue
index d831e1a..25ccd3f 100644
--- a/src/docs/pages/components/Tooltip.vue
+++ b/src/docs/pages/components/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Tooltip">
     <div slot="examples">
       <demo-example label="Default">
         <div>
@@ -70,11 +70,3 @@
     margin: 24px;
   }
 </style>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Tooltip';
-    }
-  };
-</script>
diff --git a/src/docs/pages/components/Whiteframe.vue b/src/docs/pages/components/Whiteframe.vue
index dc69469..32c006e 100644
--- a/src/docs/pages/components/Whiteframe.vue
+++ b/src/docs/pages/components/Whiteframe.vue
@@ -1,5 +1,5 @@
 <template>
-  <demo-page>
+  <demo-page label="Components - Whiteframe">
     <div slot="examples" class="whiteframe-list">
       <demo-example label="Default">
         <md-whiteframe md-elevation="1">1dp</md-whiteframe>
@@ -53,11 +53,3 @@
     }
   }
 </style>
-
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Components - Whiteframe';
-    }
-  };
-</script>
diff --git a/src/docs/pages/themes/Configuration.vue b/src/docs/pages/themes/Configuration.vue
index de194b0..e0442e4 100644
--- a/src/docs/pages/themes/Configuration.vue
+++ b/src/docs/pages/themes/Configuration.vue
@@ -1,13 +1,5 @@
 <template>
-  <div class="page-content">
-    <h1>Configuration</h1>
-  </div>
-</template>
+  <single-page class="single-page-home" label="Themes - Configuration">
 
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Themes - Configuration';
-    }
-  };
-</script>
+  </single-page>
+</template>
diff --git a/src/docs/pages/themes/DynamicThemes.vue b/src/docs/pages/themes/DynamicThemes.vue
index f89b5d7..1b296df 100644
--- a/src/docs/pages/themes/DynamicThemes.vue
+++ b/src/docs/pages/themes/DynamicThemes.vue
@@ -1,13 +1,5 @@
 <template>
-  <div class="page-content">
-    <h1>Dynamic Themes</h1>
-  </div>
-</template>
+  <single-page class="single-page-home" label="Themes - Dynamic Themes">
 
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Themes - Dynamic Themes';
-    }
-  };
-</script>
+  </single-page>
+</template>
diff --git a/src/docs/pages/ui-elements/GridSystem.vue b/src/docs/pages/ui-elements/GridSystem.vue
index a3e9662..1ef4335 100644
--- a/src/docs/pages/ui-elements/GridSystem.vue
+++ b/src/docs/pages/ui-elements/GridSystem.vue
@@ -1,13 +1,5 @@
 <template>
-  <div class="page-content">
-    <h1>Grid System</h1>
-  </div>
-</template>
+  <single-page class="single-page-home" label="UI Elements - Grid System">
 
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Themes - Grid System';
-    }
-  };
-</script>
+  </single-page>
+</template>
diff --git a/src/docs/pages/ui-elements/Typography.vue b/src/docs/pages/ui-elements/Typography.vue
index d7d6d8c..4ac4c83 100644
--- a/src/docs/pages/ui-elements/Typography.vue
+++ b/src/docs/pages/ui-elements/Typography.vue
@@ -1,13 +1,5 @@
 <template>
-  <div class="page-content">
-    <h1>Typography</h1>
-  </div>
-</template>
+  <single-page class="single-page-home" label="UI Elements - Typography">
 
-<script>
-  export default {
-    mounted() {
-      this.$root.pageTitle = 'Themes - Typography';
-    }
-  };
-</script>
+  </single-page>
+</template>