diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index d61b25885..6a4248a58 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -74,7 +74,7 @@ export default {
 
 #camera, #main-layout {
   background-color: #272e35;
-  padding: 100px 30px 30px 30px;
+  /* padding: 100px 30px 30px 30px; */
 }
 
 .layout{
diff --git a/chameleon-client/src/components/InputTab.vue b/chameleon-client/src/components/InputTab.vue
index 2dbb50418..0ae84c5b3 100644
--- a/chameleon-client/src/components/InputTab.vue
+++ b/chameleon-client/src/components/InputTab.vue
@@ -1,23 +1,31 @@
+
 <template>
     <div id="InputTab">
-        <Slider v-for="slider in sliders" v-bind:key="slider.id" v-model="slider.value"></Slider>
-    </div>
+        <chslider title="exposure"></chslider>
+        <chslider title="fuck off"></chslider>
+        <chselect title="tet" placeholdert="fuck of this took time"  :list="[1,2,23]" ></chselect>
+        </div>
+
 </template>
     
 <script> 
+import chslider from './ch-slider.vue'
+import chselect from './ch-select.vue'
     export default {
         name: 'InputTab',
         data () {
             return {
                  sliders: [
                     { id: 'lightning', value: 25 },
-                    { id: 'saturation', value: 30 }
                 ]
             }
+        },
+        components: {
+            chslider,
+            chselect
         }
     }
 </script>
 
 <style scoped>
- 
 </style>
diff --git a/chameleon-client/src/components/ch-select.vue b/chameleon-client/src/components/ch-select.vue
new file mode 100644
index 000000000..27c4ab053
--- /dev/null
+++ b/chameleon-client/src/components/ch-select.vue
@@ -0,0 +1,34 @@
+<template>
+            <row type="flex" justify="start" align="middle" :gutter="10" >
+                <Col span="3">
+                    <h4>{{title}}</h4>
+             
+                </Col>
+                <col span="12">
+                    <i-select v-model="value" size="small" style="width:400px" v-bind:placeholder="placeholdert">
+                        <i-option v-for="item in list" :value="item" :key="item">{{item}}</i-option>
+                    </i-select>
+                </col>
+        </row>
+</template>
+
+<script>
+    export default {
+        name: 'ch-select',
+        props:{
+            title:"",
+            placeholdert:"",
+            list:[]
+        },
+        data() {
+            return {
+            }
+        }
+    }
+</script>
+
+<style scoped>
+h4 {
+     color: #e6ebf1;
+ }
+</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
new file mode 100644
index 000000000..554566c29
--- /dev/null
+++ b/chameleon-client/src/components/ch-slider.vue
@@ -0,0 +1,32 @@
+
+<template>
+            <row type="flex" justify="start" align="middle" :gutter="10" >
+                <Col span="3">
+                    <h4>{{title}}</h4>
+                </Col>
+                <col span="2">
+                    <InputNumber v-model="value" size="small"></InputNumber>
+                </col>
+                <Col span="14">
+                    <Slider v-model="value"></Slider>
+                </col>
+        </row>
+</template>
+
+<script>
+    export default {
+        name: 'ch-slider',
+        props:['title'],
+        data() {
+            return {
+                value :0
+            }
+        }
+    }
+</script>
+
+<style scoped>
+h4 {
+     color: #e6ebf1;
+ }
+</style>
\ No newline at end of file
diff --git a/chameleon-client/theme/index.less b/chameleon-client/theme/index.less
index 6f6f81770..3273c53c2 100644
--- a/chameleon-client/theme/index.less
+++ b/chameleon-client/theme/index.less
@@ -1,5 +1,4 @@
 @import '../node_modules/iview/src/styles/index.less';
 
 
-@primary-color: #ff0000;
-@link-color : #ff0000;
\ No newline at end of file
+@primary-color: #0ec4ab;