diff --git a/src/ui/Domo/index.html b/src/ui/Domo/index.html
index e9a8e4fa..1df4e7ef 100644
--- a/src/ui/Domo/index.html
+++ b/src/ui/Domo/index.html
@@ -1,21 +1,52 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
-	<meta charset='utf-8' />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" 
-              content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
-	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-		translucent">
-	<meta name="description" content="Domo controller">
-	<meta name="author" content="NADAL Jean-Baptiste">
+    <meta charset='utf-8' />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <meta name="description" content="Domo controller" />
+    <meta name="author" content="NADAL Jean-Baptiste" />
+
+    <meta name="viewport" 
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <link rel="icon" sizes="192x192" href="/static/android-desktop.png" />
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="Domo" />
+    <link rel="apple-touch-icon-precomposed" href="/static/ios-desktop.png" />
+
+    <link rel="shortcut icon" href="/static/favicon.png" />
+
+    <link rel="stylesheet" 
+          href="node_modules/roboto-fontface/css/roboto-fontface.css" />
+   <link  rel="stylesheet" media="all" type="text/css"
+          href="node_modules/material-design-icons/iconfont/material-icons.css" />
+    <link rel="stylesheet" 
+          href="node_modules/material-design-lite/dist/material.min.css" />
+<!--
 	<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" 
      href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css">
 	<link rel="icon" href="/static/favicon.ico">
 	<link rel="apple-touch-icon" href="/static/favicon.png">
+  -->
+      <style>
+    #view-source {
+      position: fixed;
+      display: block;
+      right: 0;
+      bottom: 0;
+      margin-right: 40px;
+      margin-bottom: 40px;
+      z-index: 900;
+    }
+    </style>
     <title>Domo</title>
   </head>
   <body>
diff --git a/src/ui/Domo/package.json b/src/ui/Domo/package.json
index 91b1dfe2..5a92ff4a 100644
--- a/src/ui/Domo/package.json
+++ b/src/ui/Domo/package.json
@@ -9,9 +9,12 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^1.0.17",
-    "vue-router": "^0.7.11",
-    "vue-mdl": "^0.5.0"
+    "vue": "^1.0.21",
+    "vue-router": "^0.7.13",
+    "vue-mdl": "^0.7.4",
+    "material-design-lite": "^1.1.3",
+    "roboto-fontface": "^0.4.5",
+    "material-design-icons": "^2.2.3"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/ui/Domo/src/app.vue b/src/ui/Domo/src/app.vue
index bccd2aff..6b34bcc2 100644
--- a/src/ui/Domo/src/app.vue
+++ b/src/ui/Domo/src/app.vue
@@ -1,10 +1,47 @@
 <template>
-  <a v-link="{ path: '/' }">Go to Home</a>
-  <a v-link="{ path: '/lights' }">Go to Lights</a>
-  <a v-link="{ path: '/shutters' }">Go to Shutters</a>
-  <a v-link="{ path: '/sprinklers' }">Go to Sprinklers</a>
-  <router-view  class="test" transition="test" transition-mode="out-in">
-</router-view>
+	<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
+ 		<header class="demo-drawer-header">
+			<img src="/static/user.jpg" class="demo-avatar">
+			<div class="demo-avatar-dropdown">
+            	<span>hello@example.com</span>
+            	<div class="mdl-layout-spacer"></div>
+            	<button id="accbtn" 
+            		class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
+              	<i class="material-icons" role="presentation">arrow_drop_down</i>
+              	<span class="visuallyhidden">Accounts</span>
+            	</button>
+            	<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
+              		<li class="mdl-menu__item">hello@example.com</li>
+              		<li class="mdl-menu__item">info@example.com</li>
+              		<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
+            	</ul>
+          	</div>
+        </header>
+        <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>Home</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">report</i>Spam</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">forum</i>Forums</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">flag</i>Updates</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">local_offer</i>Promos</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">shopping_cart</i>Purchases</a>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">people</i>Social</a>
+          <div class="mdl-layout-spacer"></div>
+          <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span></a>
+        </nav>
+      </div>
+      <main class="mdl-layout__content mdl-color--grey-100">
+        <div id="app" class="mdl-grid demo-content">
+  			<a v-link="{ path: '/' }">Go to Home</a>
+  			<a v-link="{ path: '/lights' }">Go to Lights</a>
+  			<a v-link="{ path: '/shutters' }">Go to Shutters</a>
+  			<a v-link="{ path: '/sprinklers' }">Go to Sprinklers</a>
+  			<router-view  class="test" transition="test" transition-mode="out-in">
+			</router-view>
+        </div>
+      </main>
+    </div>
 </template>
 <style>
 .test {
diff --git a/src/ui/Domo/src/components/index.vue b/src/ui/Domo/src/components/index.vue
index 1932f526..afdb8662 100644
--- a/src/ui/Domo/src/components/index.vue
+++ b/src/ui/Domo/src/components/index.vue
@@ -1,5 +1,20 @@
 <template>
 
-<h1> Index </h1>
+	<h1> Index </h1>
+	<mdl-checkbox :checked.sync='checked'>Checkbox</mdl-checkbox>
+<mdl-button>Button</mdl-button>
+<mdl-button v-mdl-ripple-effect>Ripple Effect</mdl-button>
+<mdl-button disabled>Disabled</mdl-button>
+<mdl-button icon>
+  <i class="material-icons">star</i>
+</mdl-button>
 
-</template>
\ No newline at end of file
+<mdl-switch :checked.sync="checked">Switch</mdl-switch>
+<mdl-switch :checked.sync="checked" class="mdl-js-ripple-effect">Ripple Effect</mdl-switch>
+<mdl-switch :checked.sync="checked" disabled>Disabled</mdl-switch>
+
+</template>
+
+<script>
+
+</script>
diff --git a/src/ui/Domo/src/main.js b/src/ui/Domo/src/main.js
index fef96a50..4aaef362 100644
--- a/src/ui/Domo/src/main.js
+++ b/src/ui/Domo/src/main.js
@@ -1,17 +1,9 @@
-//var vmdl = require('vue-mdl');
 var Vue = require('vue')
 var VueRouter = require('vue-router')
+var VueMdl = require('vue-mdl')
+var Material = require('material-design-lite')
 
-// Globally register the checkbox
-//vmdl.register(Vue, 'mdl-checkbox');
-// Shorthand
-//vmdl.register(Vue, 'checkbox');
-// Globally register all components and directives
-//vmdl.registerAll(Vue);
-
-// Access any component or directive
-//var checkbox = vmdl.components['mdl-checkbox'];
-//var badge = vmdl.directives['mdl-badge'];
+Vue.use(VueMdl.default)
 
 var App = require('./app.vue')
 var routerMap = require('./router')
diff --git a/src/ui/Domo/static/android-desktop.png b/src/ui/Domo/static/android-desktop.png
new file mode 100644
index 00000000..72a7f12e
Binary files /dev/null and b/src/ui/Domo/static/android-desktop.png differ
diff --git a/src/ui/Domo/static/dog.png b/src/ui/Domo/static/dog.png
new file mode 100644
index 00000000..1d08cca4
Binary files /dev/null and b/src/ui/Domo/static/dog.png differ
diff --git a/src/ui/Domo/static/favicon.png b/src/ui/Domo/static/favicon.png
index bde1e7d3..6ebb8094 100644
Binary files a/src/ui/Domo/static/favicon.png and b/src/ui/Domo/static/favicon.png differ
diff --git a/src/ui/Domo/static/ios-desktop.png b/src/ui/Domo/static/ios-desktop.png
new file mode 100644
index 00000000..de5d8fa1
Binary files /dev/null and b/src/ui/Domo/static/ios-desktop.png differ
diff --git a/src/ui/Domo/static/user.jpg b/src/ui/Domo/static/user.jpg
new file mode 100644
index 00000000..930ab14f
Binary files /dev/null and b/src/ui/Domo/static/user.jpg differ
