diff --git a/app/package.json b/app/package.json
index c959fe8..5c7198e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,15 +13,19 @@
     "vuetify": "^2.1.0"
   },
   "devDependencies": {
+    "@material-icons/svg": "^0.0.1",
     "@vue/cli-plugin-babel": "~4.2.0",
     "@vue/cli-plugin-eslint": "~4.2.0",
     "@vue/cli-service": "~4.2.0",
+    "axios": "^0.19.2",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.1.2",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.4",
+    "vue-router": "^3.1.5",
+    "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"
   },
diff --git a/app/src/App.vue b/app/src/App.vue
index 96f052d..ae6eec1 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,60 +1,80 @@
 <template>
-  <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <v-content>
-      <HelloWorld/>
-    </v-content>
-  </v-app>
+    <v-app style="background: #e2e2e2">
+        <v-navigation-drawer
+            v-model="drawer"
+			app
+        >
+			<v-img :aspect-ratio="16/9" src="https://cdn.vuetifyjs.com/images/parallax/material.jpg">
+				<v-row align="end" class="lightbox white--text pa-2 fill-height">
+				<v-col>
+					<div class="subheading">update in 2min</div>
+					<!--<div class="body-1">heyfromjonathan@gmail.com</div>-->
+				</v-col>
+				</v-row>
+			</v-img>
+
+			<v-list-item>
+				<v-list-item-content>
+					<v-list-item-title class="title">
+						paperdash.io
+					</v-list-item-title>
+					<v-list-item-subtitle>
+						display
+					</v-list-item-subtitle>
+				</v-list-item-content>
+			</v-list-item>
+
+			<v-divider></v-divider>
+
+            <v-list>
+                <v-list-item
+                    v-for="(link, i) in items"
+                    :key="i"
+                    :to="link.to"
+                    active-class="primary white--text"
+                    >
+                    <v-list-item-action>
+                        <component :is=link.icon class="icon icon-white"></component>
+                    </v-list-item-action>
+
+                    <v-list-item-title v-text="link.title" />
+                </v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+
+        <v-content>
+            <v-container fluid fill-height class="align-start">
+                <router-view></router-view>
+            </v-container>
+        </v-content>
+    </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld';
+	//complete: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check/baseline.svg')}
 
-export default {
-  name: 'App',
+	import iconDashboard from '!vue-svg-loader!@material-icons/svg/svg/check/baseline.svg'
 
-  components: {
-    HelloWorld,
-  },
 
-  data: () => ({
-    //
-  }),
-};
+    export default {
+        name: 'App',
+        components: {
+			iconDashboard
+        },
+        data: () => ({
+            drawer: true,
+            items: [
+                {title: 'Dashboard', icon: 'iconDashboard', to: '/'},
+                {title: 'Settings', icon: '', to: '/settings'},
+                {title: 'Sandbox', icon: '', to: '/sandbox'},
+            ],
+        })
+    };
 </script>
+
+<style scoped>
+  .lightbox {
+    box-shadow: 0 0 20px inset rgba(0, 0, 0, 0.2);
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
+  }
+</style>
\ No newline at end of file
diff --git a/app/src/api/core.js b/app/src/api/core.js
new file mode 100644
index 0000000..bbe0aa6
--- /dev/null
+++ b/app/src/api/core.js
@@ -0,0 +1,30 @@
+/**
+ * Mocking client-server processing
+ */
+
+const _settings = {
+	"wifi_ssid": "",
+
+	"device_mode": "active",
+
+	// deep sleep
+	"cloud_refresh": 97
+}
+
+import axios from 'axios'
+
+export default {
+
+    /**
+     * @param cb
+     * @returns {PromiseLike<any> | Promise<any>}
+     */
+	getSettings(cb) {
+
+		return _settings
+
+		return axios
+			.get('/api/settings')
+			.then(response => cb(response.data))
+	}
+}
diff --git a/app/src/main.js b/app/src/main.js
index a21e528..87edff9 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
-import vuetify from './plugins/vuetify';
+import router from './router'
+import vuetify from './plugins/vuetify'
 
 Vue.config.productionTip = false
 
 new Vue({
-  vuetify,
+	vuetify,
+	router,
   render: h => h(App)
 }).$mount('#app')
diff --git a/app/src/router/index.js b/app/src/router/index.js
new file mode 100644
index 0000000..39a10f9
--- /dev/null
+++ b/app/src/router/index.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+const Dashboard = () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard')
+const Settings = () => import(/* webpackChunkName: "settings" */ '../views/Settings')
+const Sandbox = () => import(/* webpackChunkName: "sandbox" */ '../views/Sandbox')
+
+
+Vue.use(VueRouter);
+
+export default new VueRouter({
+    routes: [
+        { path: '/', component: Dashboard },
+        { path: '/settings', component: Settings },
+        { path: '/sandbox', component: Sandbox },
+
+        { path: '*', redirect: '/' }
+    ],
+});
diff --git a/app/src/views/Dashboard.vue b/app/src/views/Dashboard.vue
new file mode 100644
index 0000000..62a68d4
--- /dev/null
+++ b/app/src/views/Dashboard.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-container
+        fluid
+        grid-list-md
+        pa-2
+    >
+        dashboard...
+    </v-container>
+</template>
+
+<script>
+    //import api from '../api/core'
+
+    export default {
+		name: "Dashboard",
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/app/src/views/Sandbox.vue b/app/src/views/Sandbox.vue
new file mode 100644
index 0000000..a38c6c1
--- /dev/null
+++ b/app/src/views/Sandbox.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-container
+        fluid
+        grid-list-md
+        pa-2
+    >
+        sandbox :D
+    </v-container>
+</template>
+
+<script>
+    //import api from '../api/core'
+
+    export default {
+		name: "Sandbox",
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/app/src/views/Settings.vue b/app/src/views/Settings.vue
new file mode 100644
index 0000000..ec7dabc
--- /dev/null
+++ b/app/src/views/Settings.vue
@@ -0,0 +1,21 @@
+<template>
+    <v-container
+        fluid
+        grid-list-md
+        pa-2
+    >
+        settings...
+    </v-container>
+</template>
+
+<script>
+    //import api from '../api/core'
+
+    export default {
+		name: "Settings",
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/app/yarn.lock b/app/yarn.lock
index 1192ddd..ed73605 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -809,6 +809,11 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@material-icons/svg@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@material-icons/svg/-/svg-0.0.1.tgz#9c2ffa0e3597301de83ca476d5b66dd0e0968b0c"
+  integrity sha512-Um38W7r+GHpuT78XjkpUhIfBp3olXB6EDz53FAQoz4CnNtZL6TIdSsoaRl0sYKvcgqkX7wlKgEcb3amUVtK3jQ==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1556,6 +1561,13 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.9.1.tgz?cache=0&sync_timestamp=1578958168482&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha1-fjPY99RJs/ZzzXLeuavcVS2+Uo4=
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 babel-eslint@^10.0.3:
   version "10.0.3"
   resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.0.3.tgz?cache=0&sync_timestamp=1575991768389&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
@@ -2695,6 +2707,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3599,6 +3618,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.10.0"
   resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"
@@ -7456,7 +7482,14 @@ svg-tags@^1.0.0:
   resolved "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-svgo@^1.0.0:
+svg-to-vue@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/svg-to-vue/-/svg-to-vue-0.7.0.tgz#ec86deb1742be38319462e36703af1dfa2f9fad9"
+  integrity sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==
+  dependencies:
+    svgo "^1.3.2"
+
+svgo@^1.0.0, svgo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.npm.taobao.org/svgo/download/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
   integrity sha1-ttxRHAYzRsnkFbgeQ0ARRbltQWc=
@@ -7981,6 +8014,11 @@ vue-loader@^15.8.3:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
+  integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -7989,6 +8027,14 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-loader@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz#adccbdc9aca90132bde9c9d96cd49f74efecd345"
+  integrity sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==
+  dependencies:
+    loader-utils "^1.2.3"
+    svg-to-vue "^0.7.0"
+
 vue-template-compiler@^2.6.11:
   version "2.6.11"
   resolved "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"