diff --git a/demos/index.html b/demos/index.html
index 5c93cdd..70bad40 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.min.css">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.grey-amber.min.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   <body>
@@ -21,8 +22,10 @@
         </div>
       </div>
     </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
+    <script src="https://rawgit.com/posva/vue-mdl/master/dist/vue-mdl.min.js"></script>
     <script src="/lib/weblas.js"></script>
     <script src="/dist/keras.js"></script>
     <script src="dist/bundle.js"></script>
diff --git a/demos/src/index.js b/demos/src/index.js
index fca2edd..31c38e8 100644
--- a/demos/src/index.js
+++ b/demos/src/index.js
@@ -1,4 +1,4 @@
-/* global Vue */
+/* global Vue, VueMdl */
 
 import './index.css'
 
@@ -10,6 +10,8 @@ Vue.component('menu', Menu)
 Vue.component('home', Home)
 Vue.component('mnist-cnn', MnistCnn)
 
+Vue.use(VueMdl.default)
+
 const app = new Vue({
   el: '#app',
   data: {
