diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index 3604a5e64..535c7abab 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -19,32 +19,12 @@
                             <Icon type="ios-settings"/>
                             <span v-if="!isCollapsed">Settings</span>
                           </template>
-                          <MenuItem name="/settings/color" to="/settings/system">System</MenuItem>
-                          <MenuItem name="/settings/brightness" to="/settings/camera">Cameras</MenuItem>
+                          <MenuItem name="/settings/system" to="/settings/system">System</MenuItem>
+                          <MenuItem name="/settings/camera" to="/settings/camera">Cameras</MenuItem>
                         </Submenu>
                     </Menu>
                 </Sider>
-                <Layout id="main-layout">
-                  <Header id="main-header" v-if="$route.path.includes('vision')">
-                    <Row type="flex" justify="start" align="middle" :gutter="10">
-                      <Col span="12">
-                        <chselect title="select a camera" :list="[1,2,3]"></chselect>
-                      </Col>
-                      <Col span="12">
-                        <chselect title="select pipline" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
-                      </Col>
-                    </Row>
-                  </Header>
-                  <Content id="main-content">
-                    <row type="flex" justify="start" align="middle" :gutter="5" >
-                        <Col span="12">
-                        <router-view></router-view>
-                        </Col>
-                          <img src="./assets/logo.png">
-                      </Col>
-                      </row>
-                    </Content>
-                </Layout>
+                <router-view></router-view>
             </Layout>
         </Layout>
     </div>
@@ -114,7 +94,6 @@
 
   #camera, #main-layout {
     background-color: #272e35;
-    /* padding: 100px 30px 30px 30px; */
   }
 
   #main-nav {
diff --git a/chameleon-client/src/components/CameraTab.vue b/chameleon-client/src/components/CameraTab.vue
index 30dc3f82c..c265dacb9 100644
--- a/chameleon-client/src/components/CameraTab.vue
+++ b/chameleon-client/src/components/CameraTab.vue
@@ -1,5 +1,5 @@
 <template>
-    <h4>camera</h4>
+    <h4>Camera</h4>
 </template>
 
 <script>
diff --git a/chameleon-client/src/components/Settings.vue b/chameleon-client/src/components/Settings.vue
new file mode 100644
index 000000000..b3b506054
--- /dev/null
+++ b/chameleon-client/src/components/Settings.vue
@@ -0,0 +1,27 @@
+<template>
+    <Layout id="main-layout">
+        <Content id="main-content">
+            <row type="flex" justify="start" align="middle" :gutter="5" >
+                <Col span="12">
+                    <router-view></router-view>
+                </Col>
+            </row>
+        </Content>
+    </Layout>
+</template>
+
+<script>
+export default {
+    name: 'Settings',
+    data() {
+        return {
+
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/chameleon-client/src/components/Vision.vue b/chameleon-client/src/components/Vision.vue
new file mode 100644
index 000000000..6c2d25216
--- /dev/null
+++ b/chameleon-client/src/components/Vision.vue
@@ -0,0 +1,45 @@
+<template>
+    <Layout id="main-layout">
+        <Header id="main-header">
+            <Row type="flex" justify="start" align="middle" :gutter="10">
+                <Col span="12">
+                    <chselect title="select a camera" :list="[1,2,3]"></chselect>
+                </Col>
+                <Col span="12">
+                    <chselect title="select pipline" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
+                </Col>
+            </Row>
+        </Header>
+        <Content id="main-content">
+            <row type="flex" justify="start" align="middle" :gutter="5" >
+                <Col span="12">
+                    <router-view></router-view>
+                </Col>
+                    <img src="../assets/logo.png">
+                </Col>
+            </row>
+        </Content>
+    </Layout>
+</template>
+
+<script>
+    import Vue from "vue"
+    import chselect from './ch-select.vue'
+
+    export default {
+        name: 'Vision',
+        components: {
+            chselect
+        },
+        data() {
+            return {
+
+            }
+        },
+        methods: {}
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/chameleon-client/src/routes.js b/chameleon-client/src/routes.js
index 6ec209569..3682015fc 100644
--- a/chameleon-client/src/routes.js
+++ b/chameleon-client/src/routes.js
@@ -1,4 +1,6 @@
 import VueRouter from "vue-router";
+import Vision from "./components/Vision.vue"
+import Setting from "./components/Settings.vue"
 import Input from "./components/InputTab.vue";
 import Threshold from "./components/ThresholdTab.vue";
 import System from "./components/SystemTab.vue";
@@ -7,15 +9,19 @@ import Contours from "./components/contourTab.vue";
 
 const routes = [
   { path: '/', redirect: '/vision/input'},
-  { path: '/vision/input', component: Input, name:'input' },
-  { path: '/vision/threshold', component: Threshold ,name:'threshold'},
-  {path:'/settings/system', component: System },
-  {path:'/settings/camera', component: Camera},
-  {path:'/settings/contours', component: Contours}
+  { path: '/vision', component: Vision, children: [
+    { path: 'input', component: Input },
+    { path: 'threshold', component: Threshold },
+    { path: 'contours', component: Contours }
+  ]},
+  { path: '/settings', component: Setting, children: [
+    { path: 'system', component: System },
+    { path: 'camera', component: Camera }
+  ]}
 ]
 
 const router = new VueRouter({
-  routes // short for `routes: routes`
+  routes
 })
 
 export default router;
\ No newline at end of file