diff --git a/src/front/index.html b/src/front/index.html
index e30b5c5..d74890c 100644
--- a/src/front/index.html
+++ b/src/front/index.html
@@ -83,7 +83,7 @@
         </div>
     </div>
     <div class="pixel-container">
-        <table>
+        <table id="pixelTable">
             <tr>
                 <td class="pixel" id="r0c0">
                     <div class="info-pixel">
@@ -806,6 +806,7 @@
             </tr>
         </table>
     </div>
+    <script type="text/javascript" src="pixels.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/front/pixels.js b/src/front/pixels.js
new file mode 100644
index 0000000..65fb37a
--- /dev/null
+++ b/src/front/pixels.js
@@ -0,0 +1,31 @@
+debugger;
+
+function readTextFile(file)
+{
+    var rawFile = new XMLHttpRequest();
+    rawFile.open("GET", file, false);
+    rawFile.onreadystatechange = function ()
+    {
+        if(rawFile.readyState === 4)
+        {
+            if(rawFile.status === 200 || rawFile.status == 0)
+            {
+                var allText = rawFile.responseText;
+                alert(allText);
+            }
+        }
+    }
+    rawFile.send(null);
+}
+
+// fetch("https://URL/file").then((r)=>{r.text().then((d)=>{let json = d})})
+const json = readTextFile("test.json");
+const obj = JSON.parse(json);
+
+var table = document.getElementById("pixelTable");
+var num_columns = table.rows[0].cells.length;
+
+for (pixel in obj) {
+    var cell = table.rows[Math.floor(pixel.id / num_columns)].cells[pixel.id % num_columns];
+    cell.style.background = "#f00";
+}