diff --git a/src/ui/Domo/package.json b/src/ui/Domo/package.json
index 32648508..62c701c1 100644
--- a/src/ui/Domo/package.json
+++ b/src/ui/Domo/package.json
@@ -9,7 +9,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^1.0.17"
+    "vue": "^1.0.17",
+    "vue-router": "^0.7.7"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/ui/Domo/src/App.vue b/src/ui/Domo/src/App.vue
deleted file mode 100644
index 4145b6a4..00000000
--- a/src/ui/Domo/src/App.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div id="app">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      // note: changing this line won't causes changes
-      // with hot-reload because the reloaded component
-      // preserves its current state and we are modifying
-      // its initial state.
-      msg: 'Hello Vue!'
-    }
-  }
-}
-</script>
-
-<style>
-body {
-  font-family: Helvetica, sans-serif;
-}
-</style>
diff --git a/src/ui/Domo/src/app.vue b/src/ui/Domo/src/app.vue
new file mode 100644
index 00000000..4f887a3f
--- /dev/null
+++ b/src/ui/Domo/src/app.vue
@@ -0,0 +1,9 @@
+<template>
+   <router-view></router-view>
+</template>
+
+<!--
+<style src="./assets/css/mui.css"></style>
+<style src="./assets/css/app-base.css"></style>
+<style src="./assets/css/app-index.css"></style>
+-->
\ No newline at end of file
diff --git a/src/ui/Domo/src/components/index.vue b/src/ui/Domo/src/components/index.vue
new file mode 100644
index 00000000..1932f526
--- /dev/null
+++ b/src/ui/Domo/src/components/index.vue
@@ -0,0 +1,5 @@
+<template>
+
+<h1> Index </h1>
+
+</template>
\ No newline at end of file
diff --git a/src/ui/Domo/src/components/lights.vue b/src/ui/Domo/src/components/lights.vue
new file mode 100644
index 00000000..96038692
--- /dev/null
+++ b/src/ui/Domo/src/components/lights.vue
@@ -0,0 +1,5 @@
+<template>
+
+<h1> Lights </h1>
+
+</template>
\ No newline at end of file
diff --git a/src/ui/Domo/src/components/shutters.vue b/src/ui/Domo/src/components/shutters.vue
new file mode 100644
index 00000000..db0c416b
--- /dev/null
+++ b/src/ui/Domo/src/components/shutters.vue
@@ -0,0 +1,5 @@
+<template>
+
+<h1> Shutters </h1>
+
+</template>
\ No newline at end of file
diff --git a/src/ui/Domo/src/components/sprinklers.vue b/src/ui/Domo/src/components/sprinklers.vue
new file mode 100644
index 00000000..1f1f8d39
--- /dev/null
+++ b/src/ui/Domo/src/components/sprinklers.vue
@@ -0,0 +1,5 @@
+<template>
+
+<h1> Sprinklers </h1>
+
+</template>
\ No newline at end of file
diff --git a/src/ui/Domo/src/main.js b/src/ui/Domo/src/main.js
index 6c68dc4b..f5f522fc 100644
--- a/src/ui/Domo/src/main.js
+++ b/src/ui/Domo/src/main.js
@@ -1,7 +1,13 @@
-import Vue from 'vue'
-import App from './App.vue'
+var Vue = require('vue')
+var VueRouter = require('vue-router')
 
-new Vue({
-  el: 'body',
-  components: { App }
-})
+var App = require('./app.vue')
+var routerMap = require('./router')
+
+Vue.use(VueRouter);
+
+var router = new VueRouter()
+
+routerMap(router)
+
+router.start(App, 'app')
diff --git a/src/ui/Domo/src/router.js b/src/ui/Domo/src/router.js
new file mode 100644
index 00000000..f4dcd1f1
--- /dev/null
+++ b/src/ui/Domo/src/router.js
@@ -0,0 +1,20 @@
+module.exports = function(router){
+	router.map({
+		'*': {
+            component: require('./components/index.vue')
+        },
+        '/': {
+            component: require('./components/index.vue')
+        },
+        '/lights': {
+            component: require('./components/lights.vue')
+        },
+        '/shutters': {
+            component: require('./components/shutters.vue')
+        },
+        '/sprinklers': {
+            component: require('./components/sprinklers.vue')
+        }
+    })
+	
+}
\ No newline at end of file