diff --git a/chameleon-client/src/components/SystemTab.vue b/chameleon-client/src/components/SystemTab.vue
index 7701155d6..84de13a87 100644
--- a/chameleon-client/src/components/SystemTab.vue
+++ b/chameleon-client/src/components/SystemTab.vue
@@ -1,14 +1,20 @@
 <template>
-    <h4>system</h4>
+    <div id="SystemTab">
+        <chInputNumber title="Enter Team Number"></chInputNumber>
+    </div>
 </template>
 
 <script>
+    import chInputNumber from './ch-inputNumber.vue'
     export default {
-        name: '',
+        name: 'SystemTab',
         data() {
             return {
-                
+                value
             }
+        },
+        components:{
+            chInputNumber
         }
     }
 </script>
diff --git a/chameleon-client/src/components/3DTab.vue b/chameleon-client/src/components/ThresholdTab.vue
similarity index 100%
rename from chameleon-client/src/components/3DTab.vue
rename to chameleon-client/src/components/ThresholdTab.vue
diff --git a/chameleon-client/src/components/ch-inputNumber.vue b/chameleon-client/src/components/ch-inputNumber.vue
new file mode 100644
index 000000000..d84f12b9d
--- /dev/null
+++ b/chameleon-client/src/components/ch-inputNumber.vue
@@ -0,0 +1,28 @@
+<template>
+    <div id="InputNumber">
+    <row type="flex" justify="start" align="middle" :gutter="10" >
+        <Col span="6">
+            <h4>{{title}}</h4>
+        </Col>
+        <col span="4">
+        <InputNumber :min="0" v-model="value" size="small"></InputNumber>
+        </col>
+    </row>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ch-InputNumber',
+        props:['title'],
+        data() {
+            return {
+                value
+            }
+        }
+    }
+</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 52de28692..243d2b002 100644
--- a/chameleon-client/src/routes.js
+++ b/chameleon-client/src/routes.js
@@ -1,13 +1,13 @@
 import VueRouter from "vue-router";
 import Input from "./components/InputTab.vue";
-import ThreeD from "./components/3DTab.vue";
+import Threshold from "./components/ThresholdTab.vue";
 import System from "./components/SystemTab.vue";
 import Camera from "./components/CameraTab.vue";
 
 const routes = [
   { path: '/', redirect: '/vision/input'},
   { path: '/vision/input', component: Input, name:'input' },
-  { path: '/vision/3d', component: ThreeD ,name:'threshold'},
+  { path: '/vision/3d', component: Threshold ,name:'threshold'},
   {path:'/settings/system', component: System },
   {path:'/settings/camera', component: Camera}
 ]