diff --git a/backend/app/classes/ChameleonCamera.py b/backend/app/classes/ChameleonCamera.py
index dc4f4812c..3c98a18bd 100644
--- a/backend/app/classes/ChameleonCamera.py
+++ b/backend/app/classes/ChameleonCamera.py
@@ -4,8 +4,10 @@ from .ChameleonPipeLine import ChameleonPipeline
 class ChameleonCamera:
 
     def __init__(self, dic):
-        self.pipelines = []
+        self.pipelines = {}
 
-        for pipeline in dic["pipelines"]:
-            self.pipelines.append(ChameleonPipeline(pipeline))
+        for pipeline_id in dic["pipelines"]:
+            self.pipelines[pipeline_id] = ChameleonPipeline(dic[pipeline_id])
 
+    def change_value(self, pipline_id, key, value):
+        self.pipelines[pipline_id][key] = value
\ No newline at end of file
diff --git a/backend/app/classes/ChameleonPipeLine.py b/backend/app/classes/ChameleonPipeLine.py
index 1412cdfd6..e91fd882c 100644
--- a/backend/app/classes/ChameleonPipeLine.py
+++ b/backend/app/classes/ChameleonPipeLine.py
@@ -5,4 +5,4 @@ class ChameleonPipeline:
     def __init__(self, dic):
         self.id = dic["id"]
         self.exposure = dic["exposure"]
-        self.brightness = dic["brightness"]
\ No newline at end of file
+        self.brightness = dic["brightness"]
diff --git a/backend/app/handlers/SocketHandler.py b/backend/app/handlers/SocketHandler.py
index 55194c10a..e0d512d55 100644
--- a/backend/app/handlers/SocketHandler.py
+++ b/backend/app/handlers/SocketHandler.py
@@ -9,35 +9,36 @@ class ChameleonWebSocket(tornado.websocket.WebSocketHandler):
         return True
 
     def open(self):
-        self.write_message(json.dumps(
-            {
-                'cam1': {
-                    'pipelines': [
-                        {"id": 1, "Exposure": 45}
-                    ]
-                }
-            }
-        ))
+
+        # TODO: read setting from default file store them
+        setting = json.load("file.json")
+        self.cam_name = setting["curr_cam"]
+        self.pipe_line = setting["curr_pipeline"]
+
+        # TODO: get current camera pipeline file
+        curr_setting = json.load(self.cam_name + "/" + self.pipe_line)
+
+        #  TODO: wrtie current pipeline setting to client
+        self.write_message(curr_setting)
+
         print("WebSocket opened")
 
     def on_message(self, message):
-        # print(json.loads(message))
-
         cams = []
 
         dic = {
                 'cam1': {
-                    'pipelines': [
-                        {"id": 1, "exposure": 45, "brightness": 123123},
-                        {"id": 2, "exposure": 12, "brightness": 123},
-                        {"id": 3, "exposure": 23, "brightness": 12}
-                    ]
+                    'pipelines': {
+                        "1": {"exposure": 45, "brightness": 123123},
+                        "2": {"exposure": 12, "brightness": 123},
+                        "3": {"exposure": 23, "brightness": 12}
+                    }
                 },
                 'cam2': {
-                    'pipelines': [
-                        {"id": 1, "exposure": 15, "brightness": 1233},
-                        {"id": 2, "exposure": 68, "brightness": 453}
-                    ]
+                    'pipelines': {
+                        "1": {"exposure": 15, "brightness": 1233},
+                        "2": {"exposure": 68, "brightness": 453}
+                    }
                 }
             }
 
diff --git a/chameleon-client/src/components/Vision.vue b/chameleon-client/src/components/Vision.vue
index fee9f3c9a..f3561237b 100644
--- a/chameleon-client/src/components/Vision.vue
+++ b/chameleon-client/src/components/Vision.vue
@@ -3,10 +3,10 @@
         <Header id="main-header">
             <Row type="flex" justify="start" align="middle" :gutter="10">
                 <Col span="12">
-                    <chselect title="camera" :list="[1,2,3]" Xkey="camera"></chselect>
+                    <chselect title="camera" :list="['1','2','3']" Xkey="camera"></chselect>
                 </Col>
                 <Col span="12">
-                    <chselect title="pipline" :list="[0,1,2,3,4,5,6,7,8,9]" Xkey="pipeline"></chselect>
+                    <chselect title="pipline" :list="['0','1','2','3','4','5','6','7','8','9']" Xkey="pipeline"></chselect>
                 </Col>
             </Row>
         </Header>
diff --git a/chameleon-client/src/components/ch-range.vue b/chameleon-client/src/components/ch-range.vue
index 99030dfa5..72564c42c 100644
--- a/chameleon-client/src/components/ch-range.vue
+++ b/chameleon-client/src/components/ch-range.vue
@@ -19,12 +19,12 @@
 <script>
     export default {
         name: 'ch-range',
-        props:{title:'',
-        Xkey:''
+        props:{
+            title:String,
+            Xkey:String
         },
         data() {
             return {
-                value
             }
         },
         methods: {
diff --git a/chameleon-client/src/components/ch-select.vue b/chameleon-client/src/components/ch-select.vue
index d88d25261..5a2a4ab78 100644
--- a/chameleon-client/src/components/ch-select.vue
+++ b/chameleon-client/src/components/ch-select.vue
@@ -15,13 +15,13 @@
     export default {
         name: 'ch-select',
         props:{
-            title:'',
-            list:[],
-            Xkey:''
+            title: String,
+            list: Array,
+            Xkey: String
         },
         data() {
             return {
-                value
+            
             }
         },
         methods: {
diff --git a/chameleon-client/src/components/ch-slider.vue b/chameleon-client/src/components/ch-slider.vue
index 0cc76d470..1e516bf56 100644
--- a/chameleon-client/src/components/ch-slider.vue
+++ b/chameleon-client/src/components/ch-slider.vue
@@ -17,12 +17,11 @@
     export default {
         name: 'ch-slider',
         props:{
-            title:'',
-            Xkey:''
+            title:String,
+            Xkey:String
         },
         data() {
             return {
-                value
             }
         },
         methods: {