diff --git a/app/src/routes/Config.svelte b/app/src/routes/Config.svelte
index 871c676..6fb7997 100644
--- a/app/src/routes/Config.svelte
+++ b/app/src/routes/Config.svelte
@@ -1,24 +1,48 @@
 <script lang="ts">
+    import { Card, CardHeader } from "../components/index";
+	import { socket, isConnected } from "../lib/socket";
+    import { throttler } from "../lib/throttle";
+
+    let throttle = new throttler();
+    let throttle_timing = 25;
+    let pwm = 300
+    let servo = 0
+    
+    let min = 0;
+    let halfWay = 0;
+    let max = 0;
+    let overallRange = 0;
+        
+    $: buffer = (overallRange - 180) / 2
+    $: conversionRate = (max - min) / overallRange;
+    $: zeroMark = (conversionRate * buffer) + min;
+    $: oneEightyMark = (conversionRate * buffer) + halfWay;
+
+    $: pwm, throttle.throttle(() => $isConnected ? $socket.send(JSON.stringify({servo, pwm, action:0})) : console.log("Is not connected yet"), throttle_timing);
+
 </script>
 
 <div class="w-full h-full absolute top-0 p-4 flex justify-center items-center">
-    <div class="bg-gray-800 rounded-md p-4 w-full h-1/2">
-        <h1 class="text-lg border-b border-gray-600">Servo calibration</h1>
-        <div class="grid grid-cols-2">
-            <label for="enable">Enable</label>
-            <input bind:value={isEnable} type="checkbox" id="enable" />
-        </div>
-        <div class="grid grid-cols-2">
-            <label for="inverted">Inverted</label>
-            <input bind:value={isInverted} type="checkbox" id="Inverted" />
-        </div>
-        <div class="grid grid-cols-2">
+    <Card class="w-full h-1/2">
+        <CardHeader>Servo calibration</CardHeader>
+        <div class="flex w-full">
             <label for="pwm">Pwm ({pwm})</label>
-            <div class="flex">
+            <div class="flex w-full">
                 <button class="p-2" on:click={() => pwm--}>-</button>
-                <input bind:value={pwm} type="range" id="pwm" min={0} max={700}>
+                <input class="flex-1" bind:value={pwm} type="range" id="pwm" min={0} max={700}>
                 <button class="p-2" on:click={() => pwm++}>+</button>
             </div>
         </div>
-    </div>
+        <div class="grid grid-cols-2 w-1/2">
+            <div>Min pwm</div>
+            <input type="number" class="bg-background" bind:value={min}>
+            <div>Pwm at Halfway from min</div> <input type="number" class="bg-background" bind:value={halfWay}>
+            <div>Max pwm</div> <input type="number" class="bg-background" bind:value={max}>
+            <div>Overall angle</div> <input type="number" class="bg-background" bind:value={overallRange}>
+            <div>Buffer</div><div>{buffer}</div>
+            <div>Conversion rate</div><div>{conversionRate}</div>
+            <div>pwm for 0° mark</div><div>{zeroMark}</div>
+            <div>pwm for 180° Mark</div><div>{oneEightyMark}</div>
+        </div>
+    </Card>
 </div>