diff --git a/chameleon-client/package-lock.json b/chameleon-client/package-lock.json
index 7dd2e5185..054ba08bc 100644
--- a/chameleon-client/package-lock.json
+++ b/chameleon-client/package-lock.json
@@ -5663,8 +5663,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6016,8 +6015,7 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6064,7 +6062,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6103,13 +6100,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index 6a4248a58..071934848 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -1,43 +1,45 @@
-<template>
-  <div id="app">
-      <div class="layout">
-        <Layout :style="{minHeight: '100vh'}">
-            <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
+  <template>
+  <div class="layout">
+      <Layout>
+        <Header>Header</Header>
+        <Layout>
+          <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                 <Menu @on-open-change="onOpenChange" active-name="vision-input" :open-names="['vision']" theme="dark"  width="auto" :class="menuitemClasses">
                     <Submenu name="vision">
                       <template slot="title">
                         <Icon type="ios-videocam"/>
                         <span v-if="!isCollapsed">Vision</span>
                       </template>
-                      <MenuItem name="vision-input" to="/input">Input</MenuItem>
-                      <MenuItem name="vision-3D" to="3d">3D</MenuItem>
+                      <MenuItem name="vision-input" to="/vision/input">Input</MenuItem>
+                      <MenuItem name="vision-3D" to="/vision/3d">3D</MenuItem>
                     </Submenu>
                     <Submenu name="settings">
                       <template slot="title">
                         <Icon type="ios-settings"/>
                         <span v-if="!isCollapsed">Settings</span>
                       </template>
-                      <MenuItem name="settings-color">Color</MenuItem>
-                      <MenuItem name="settings-brightness">Brightness</MenuItem>
+                      <MenuItem name="settings-color">System</MenuItem>
+                      <MenuItem name="settings-brightness">Cameras</MenuItem>
                     </Submenu>
                 </Menu>
             </Sider>
             <Layout id="main-layout">
-                <Content id="main-content">
-                  <router-view></router-view>
-                </Content>
-            </Layout>
-            <Layout id="camera">
-                <Content>
-                  Camera 1
+            <Content id="main-content">
+               <row type="flex" justify="start" align="middle" :gutter="5" >
+                <i-col span="12">
+                <router-view></router-view>
+                </i-col span="12">
+                <i-col>
                   <img src="./assets/logo.png">
+              </i-col>
+              </row>
                 </Content>
             </Layout>
         </Layout>
-    </div>
-  </div>
+        <!-- <Footer>Footer</Footer> -->
+    </Layout>
+</div>
 </template>
-
 <script>
 
 export default {
@@ -62,7 +64,6 @@ export default {
   }
 }
 </script>
-
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -106,4 +107,4 @@ export default {
     vertical-align: middle;
     font-size: 22px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/chameleon-client/src/components/InputTab.vue b/chameleon-client/src/components/InputTab.vue
index 0ae84c5b3..b6d760a35 100644
--- a/chameleon-client/src/components/InputTab.vue
+++ b/chameleon-client/src/components/InputTab.vue
@@ -1,9 +1,10 @@
 
 <template>
     <div id="InputTab">
-        <chslider title="exposure"></chslider>
-        <chslider title="fuck off"></chslider>
-        <chselect title="tet" placeholdert="fuck of this took time"  :list="[1,2,23]" ></chselect>
+        <chslider class="spacing" title="exposure"></chslider>
+        <chslider class="spacing" title="Brightness"></chslider>
+        <chselect class="spacing" title="Orientation" placeholdert=""  :list="['Normal','Inverted']" ></chselect>
+        <chselect class="spacing" title="Resolution" placeholdert="" :list="['idk']"></chselect>
         </div>
 
 </template>
@@ -28,4 +29,8 @@ import chselect from './ch-select.vue'
 </script>
 
 <style scoped>
+.spacing{
+    margin-top: 20px;
+}
+
 </style>
diff --git a/chameleon-client/src/components/ch-select.vue b/chameleon-client/src/components/ch-select.vue
index 27c4ab053..9a858e1e3 100644
--- a/chameleon-client/src/components/ch-select.vue
+++ b/chameleon-client/src/components/ch-select.vue
@@ -27,8 +27,15 @@
     }
 </script>
 
-<style scoped>
+<style>
 h4 {
      color: #e6ebf1;
  }
+ .ivu-select-selection{
+     background-color: #2c3e50 !important;
+ }
+ .ivu-select-selected-value{
+     color: #fff !important;
+ }
+
 </style>
\ No newline at end of file
diff --git a/chameleon-client/src/components/ch-slider.vue b/chameleon-client/src/components/ch-slider.vue
index 554566c29..51c6063f5 100644
--- a/chameleon-client/src/components/ch-slider.vue
+++ b/chameleon-client/src/components/ch-slider.vue
@@ -8,7 +8,7 @@
                     <InputNumber v-model="value" size="small"></InputNumber>
                 </col>
                 <Col span="14">
-                    <Slider v-model="value"></Slider>
+                    <Slider style="margin-left:5px;" v-model="value"></Slider>
                 </col>
         </row>
 </template>
@@ -25,8 +25,14 @@
     }
 </script>
 
-<style scoped>
+<style >
 h4 {
      color: #e6ebf1;
  }
-</style>
\ No newline at end of file
+ .ivu-input-number-input{
+     background-color: #2c3e50 !important;
+     color: #fff !important;
+ }
+ 
+</style>
+
diff --git a/chameleon-client/src/routes.js b/chameleon-client/src/routes.js
index 1333ed4fc..48666d6ba 100644
--- a/chameleon-client/src/routes.js
+++ b/chameleon-client/src/routes.js
@@ -3,9 +3,9 @@ import Input from "./components/InputTab.vue";
 import ThreeD from "./components/3DTab.vue";
 
 const routes = [
-  { path: '/', redirect: '/input' },
-  { path: '/input', component: Input },
-  { path: '/3d', component: ThreeD }
+  { path: '/', redirect: '/vision/input' },
+  { path: '/vision/input', component: Input },
+  { path: '/vision/3d', component: ThreeD }
 ]
 
 const router = new VueRouter({
diff --git a/chameleon-client/theme/index.less b/chameleon-client/theme/index.less
index 3273c53c2..355b87a78 100644
--- a/chameleon-client/theme/index.less
+++ b/chameleon-client/theme/index.less
@@ -2,3 +2,4 @@
 
 
 @primary-color: #0ec4ab;
+
diff --git a/package-lock.json b/package-lock.json
index 48e341a09..8b2ab58fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,3 +1,96 @@
 {
-  "lockfileVersion": 1
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "async-validator": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.10.1.tgz",
+      "integrity": "sha512-VLiLKZuJc8VIeAMC3YobVsZov8XPNhbwyIkKjhPW5cFnhZXH+HHJpkE270YMD/6zJIOJXUN/Cq0t3fR7XPwaDQ==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+    },
+    "core-js": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+      "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
+    },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
+    "element-resize-detector": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.0.tgz",
+      "integrity": "sha512-UmhNB8sIJVZeg56gEjgmMd6p37sCg8j8trVW0LZM7Wzv+kxQ5CnRHcgRKBTB/kFUSn3e7UP59kl2V2U8Du1hmg==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
+    "iview": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/iview/-/iview-3.3.0.tgz",
+      "integrity": "sha512-PyqhfxEO9/4rcDNZ1FhMMGjcKh/y/F1p/00/UXrNxXBnih4rIb8GxgxYk0Y14bzuCL/AuMAisOBbQm51o5iOlQ==",
+      "requires": {
+        "async-validator": "^1.10.0",
+        "deepmerge": "^2.2.1",
+        "element-resize-detector": "^1.2.0",
+        "js-calendar": "^1.2.3",
+        "lodash.throttle": "^4.1.1",
+        "popper.js": "^1.14.6",
+        "tinycolor2": "^1.4.1",
+        "v-click-outside-x": "^3.5.6"
+      }
+    },
+    "js-calendar": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",
+      "integrity": "sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw=="
+    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
+    "popper.js": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
+      "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
+    },
+    "regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
+    "undefined": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/undefined/-/undefined-0.1.0.tgz",
+      "integrity": "sha1-m3BqSzKtMMIMpP5l3cu72sMr3tA="
+    },
+    "v-click-outside-x": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz",
+      "integrity": "sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg=="
+    }
+  }
 }