diff --git a/package-lock.json b/package-lock.json
index e83c543..81a8c3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@types/d3": "^7.4.3",
+        "csv-parse": "^5.5.5",
         "d3": "^7.9.0"
       },
       "devDependencies": {
@@ -1313,6 +1314,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csv-parse": {
+      "version": "5.5.5",
+      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.5.tgz",
+      "integrity": "sha512-erCk7tyU3yLWAhk6wvKxnyPtftuy/6Ak622gOO7BCJ05+TYffnPCJF905wmOQm+BpkX54OdAl8pveJwUdpnCXQ=="
+    },
     "node_modules/d3": {
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
diff --git a/package.json b/package.json
index 1702e33..2fcbff4 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@types/d3": "^7.4.3",
+    "csv-parse": "^5.5.5",
     "d3": "^7.9.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index de500ad..ef5ed5b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,6 +28,8 @@ <h2>SimpleScope</h2>
       <p id="robotX"></p>
       <p id="robotY"></p>
       <p id="robotRotation"></p>
+      <p id="frontPose"></p>
+      <p id="visionRotation"></p>
 
       <table id="cycleTime">
       </table>
diff --git a/ts/funcs.ts b/ts/funcs.ts
index ed6911b..21b54c4 100644
--- a/ts/funcs.ts
+++ b/ts/funcs.ts
@@ -3,24 +3,3 @@
 export const degreesToRadians = (x: number): number => (x * Math.PI) / 180;
 
 export const clamp = (num: number, min: number, max: number): number => Math.min(Math.max(num, min), max);
-
-export const csvJSON = (csv: string) => {
-    const lines = csv.split("\n");
-
-    let result = [];
-
-    const headers = lines[0].split(",");
-
-    for (let i = 1; i < lines.length; i++) {
-        let obj = {};
-        let currentLine = lines[i].split(",");
-
-        for (let j = 0; j < headers.length; j++) {
-            obj[headers[j]] = currentLine[j];
-        }
-
-        result.push(obj);
-    }
-
-    return result;
-}
diff --git a/ts/main.ts b/ts/main.ts
index b3b0892..9a387f6 100644
--- a/ts/main.ts
+++ b/ts/main.ts
@@ -1,5 +1,6 @@
 import * as d3 from "d3";
-import { degreesToRadians, clamp, csvJSON } from './funcs';
+import { degreesToRadians, clamp } from './funcs';
+import { parse } from 'csv-parse/browser/esm/sync';
 
 let playing: boolean = false;
 let i: number = 0;
@@ -78,12 +79,29 @@ function initialize(data: object[]) {
       matchState += ` (running: ${data[i]["Currently selected autonomous"]})`;
     }
 
+    const visionPose = JSON.parse(item["Front Pose"]);
+    const visionX = visionPose[0];
+    const visionY = visionPose[1];
+    const visionRot = degreesToRadians(visionPose[2]);
+
+    const visionFieldX = fieldWidthScale(visionX);
+    const visionFieldY = fieldHeightScale(visionY);
+
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.translate(visionFieldX, visionFieldY);
+    ctx.rotate(visionRot);
+    ctx.translate(-visionFieldX, -visionFieldY);
+    ctx.strokeStyle = "green";
+    ctx.strokeRect(visionFieldX - (FIELD_ROBOT_SIDE / 2), visionFieldY - (FIELD_ROBOT_SIDE / 2), FIELD_ROBOT_SIDE, FIELD_ROBOT_SIDE);
+
     document.getElementById("matchState").innerHTML = `Match State: ${matchState}`;
     document.getElementById("matchTime").innerHTML = `Match Time: ${String((Number(data[i]["time"]) - startTime).toFixed(2))} sec`;
     document.getElementById("managerState").innerHTML = `Manager State ${data[i]["Manager State"]}`;
     document.getElementById("robotX").innerHTML = `Robot X: ${data[i]["Robot X"]}`;
     document.getElementById("robotY").innerHTML = `Robot Y: ${data[i]["Robot Y"]}`;
     document.getElementById("robotRotation").innerHTML = `Robot Rotation: ${degreesToRadians(Number(item["Robot Theta (deg)"]))}`;
+    document.getElementById("frontPose").innerHTML = `Front Pose: ${visionX}, ${visionY}`
+    document.getElementById("visionRotation").innerHTML = `Vision Rotation: ${visionRot}`
   };
 
   // Match slider
@@ -137,6 +155,8 @@ function initialize(data: object[]) {
 
   // Add cycle analysis to table
   let table = "";
+  
+  document.getElementById("cycleTime").innerHTML = ``;
 
   let lastTime = Number(data[teleopStart]["time"]);
   const teleopTimeOffset = lastTime;
@@ -188,8 +208,9 @@ const stepLogging = (backwards) => {
 async function changedFile(event) {
     const file = event.target.files.item(0);
     const text = await file.text();
+    const jsonFromCSV = parse(text, {columns: true, skip_empty_lines: true});
 
-    initialize(csvJSON(text));
+    initialize(jsonFromCSV);
 }
 
 document.getElementById("playPause").addEventListener("click", () => { playing = !playing; });