diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index 6b4a01e1d..aa01a853d 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -18,13 +18,22 @@
                             <Icon type="ios-settings"/>
                             <span v-if="!isCollapsed">Settings</span>
                           </template>
-                          <MenuItem name="settings-color">System</MenuItem>
-                          <MenuItem name="settings-brightness">Cameras</MenuItem>
+                          <MenuItem name="settings-color" to="/settings/system">System</MenuItem>
+                          <MenuItem name="settings-brightness" to="/settings/camera">Cameras</MenuItem>
                         </Submenu>
                     </Menu>
                 </Sider>
                 <Layout id="main-layout">
-                  <Header id="main-header">Header</Header>
+                  <Header id="main-header" v-if="['input','threshold'].indexOf($route.name)>-1">
+                    <row type="flex" justify="start" align="middle" >
+                      <i-col span="12">
+                        <chselect title="select a camera" placeholdert="1" :list="[1,2,3]"></chselect>
+                      </i-col>
+                      <i-col span="12">
+                        <chselect title="select pipline" placeholdert="0" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
+                      </i-col>
+                    </Row>
+                  </Header>
                   <Content id="main-content">
                     <row type="flex" justify="start" align="middle" :gutter="5" >
                         <i-col span="12">
@@ -43,11 +52,14 @@
 </template>
 
 <script>
-
   import Vue from "vue"
+  import chselect from './components/ch-select.vue'
 
   export default {
     name: 'app',
+    components:{
+      chselect
+    },
     data () {
       return {
           isCollapsed: false,
@@ -107,6 +119,7 @@
 
   #main-header {
     box-shadow: 0px 2px 10px black;
+    text-align: left
   }
 
   .layout{
diff --git a/chameleon-client/src/components/CameraTab.vue b/chameleon-client/src/components/CameraTab.vue
new file mode 100644
index 000000000..30dc3f82c
--- /dev/null
+++ b/chameleon-client/src/components/CameraTab.vue
@@ -0,0 +1,18 @@
+<template>
+    <h4>camera</h4>
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>
\ No newline at end of file
diff --git a/chameleon-client/src/components/SystemTab.vue b/chameleon-client/src/components/SystemTab.vue
new file mode 100644
index 000000000..7701155d6
--- /dev/null
+++ b/chameleon-client/src/components/SystemTab.vue
@@ -0,0 +1,18 @@
+<template>
+    <h4>system</h4>
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+    
+</style>
\ No newline at end of file
diff --git a/chameleon-client/src/routes.js b/chameleon-client/src/routes.js
index 48666d6ba..52de28692 100644
--- a/chameleon-client/src/routes.js
+++ b/chameleon-client/src/routes.js
@@ -1,11 +1,15 @@
 import VueRouter from "vue-router";
 import Input from "./components/InputTab.vue";
 import ThreeD from "./components/3DTab.vue";
+import System from "./components/SystemTab.vue";
+import Camera from "./components/CameraTab.vue";
 
 const routes = [
-  { path: '/', redirect: '/vision/input' },
-  { path: '/vision/input', component: Input },
-  { path: '/vision/3d', component: ThreeD }
+  { path: '/', redirect: '/vision/input'},
+  { path: '/vision/input', component: Input, name:'input' },
+  { path: '/vision/3d', component: ThreeD ,name:'threshold'},
+  {path:'/settings/system', component: System },
+  {path:'/settings/camera', component: Camera}
 ]
 
 const router = new VueRouter({