diff --git a/html/index.html b/html/index.html
index be6a376..75df17b 100644
--- a/html/index.html
+++ b/html/index.html
@@ -4,7 +4,7 @@
         <title>Pixel Battle</title>
         <meta charset="UTF-8">
     </head>
-    <body>
+    <body style="background-color: grey;">
         <p>
             <input type="color" id="color" />
             <input type="button" id="submitColor" value="change color"  onclick="changeColor()"/>
@@ -26,7 +26,6 @@
         canvasHidden.width = 1920;
         canvasHidden.height = 1080;
         var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
-        // imgData.data.fill(255);
         
         function drawPixel(x, y, color) {
                 let pixelNumber;
@@ -34,27 +33,16 @@
                     pixelNumber = (y) * canvas.width + x
                 if (y == 0)
                     pixelNumber = x 
-                if (color == undefined) {
-                    let rgbColor = hexToRgb(currentColor);
-                    for (let l = 0; l < 4; l ++)
-                        for (let l = 0; l < 5; l ++){
-                            imgData.data[pixelNumber + 0] = rgbColor.r;
-                            imgData.data[pixelNumber + 1] = rgbColor.g;
-                            imgData.data[pixelNumber + 2] = rgbColor.b;
-                            imgData.data[pixelNumber + 3] = 255;
-                        }
+                if (color == undefined) rgbColor = hexToRgb(currentColor);
+                for (let l = 0; l < 4; l ++)
+                    for (let l = 0; l < 5; l ++){
+                        imgData.data[pixelNumber + 0] = color == undefined? rgbColor.r : color.r;
+                        imgData.data[pixelNumber + 1] = color == undefined? rgbColor.g : color.g;
+                        imgData.data[pixelNumber + 2] = color == undefined? rgbColor.b : color.b;
+                        imgData.data[pixelNumber + 3] = 255;
+                    }
 
-                    redraw();
-                } else {
-                    for (let l = 0; l < 4; l ++)
-                        for (let l = 0; l < 5; l ++){
-                            imgData.data[pixelNumber + 0] = color.r;
-                            imgData.data[pixelNumber + 1] = color.g;
-                            imgData.data[pixelNumber + 2] = color.b;
-                            imgData.data[pixelNumber + 3] = 255;
-                        }
-          
-                }
+                redraw();
             }
 
         function redraw() {
@@ -82,8 +70,10 @@
                     case 0:
                         //Ineffective way to do that, fix that later ;)
                         let converted = Uint8ClampedArray.from(content)
-                        for (let i = 0; i < imgData.data.length; i ++)
+
+                        for (let i = 0; i < converted.length; i ++)
                             imgData.data[i] = converted[i]
+                        console.log(imgData.data)
                         redraw();
                     break;
                     case 1:
@@ -105,11 +95,6 @@
         window.onload = function() {
             var ctx = canvas.getContext("2d");
             trackTransforms(ctx);
-            
-
-            
-
-            redraw();
 
             var lastX=canvas.width/2, lastY=canvas.height/2;
             var dragStart,dragged;
diff --git a/index.js b/index.js
index 0362800..d49274e 100644
--- a/index.js
+++ b/index.js
@@ -6,7 +6,7 @@ const httpPort = config.httpPort
 const appPort = config.appPort
 
 var board = new Array(config.boardHeight * config.boardWidth * 4);
-board.fill(127);
+board.fill(255);
 
 const server = new WebSocket.Server({
   port: appPort
@@ -28,18 +28,18 @@ server.on('connection', function(client) {
 
   // When you receive a message, send that message to every socket.
   client.on('message', function(msg) {
-    let packet;
+    let packet, content, code;
     try {
         packet = JSON.parse(msg.toString());
         content = packet.content
         code = packet.code
     } catch (e) {console.log(e)}
+    console.log(packet)
     let response = {};
     switch(code) {
         case 0:
             response.code = 0;
             response.content = board;
-            console.log(Buffer.from(JSON.stringify(response)))
             client.send(Buffer.from(JSON.stringify(response)));
         break;
         case 1:
@@ -47,14 +47,14 @@ server.on('connection', function(client) {
             response.content = content;
             console.log(`response content ${response.content}`)
             contentJson = JSON.parse(content);
-            let pixelNumber = evaulatePixelNumber(contentJson.x, contentJson.y)
+            let pixelNumber = evaulatePixelNumber(contentJson.x * 4, contentJson.y * 4);
             if (contentJson.x < 0 || contentJson.y < 0) {
                 break;
             }
-            board[pixelNumber + 0] = contentJson.r
-            board[pixelNumber + 1] = contentJson.g
-            board[pixelNumber + 2] = contentJson.b
-            board[pixelNumber + 3] = 255
+            board[pixelNumber + 0] = contentJson.r;
+            board[pixelNumber + 1] = contentJson.g;
+            board[pixelNumber + 2] = contentJson.b;
+            board[pixelNumber + 3] = 255;
             clients.forEach(c => c.send(Buffer.from(JSON.stringify(response))));
         break;
         default:
