diff --git a/debugging_tool/server.py b/debugging_tool/server.py
index 9c4398a..ba6ce35 100644
--- a/debugging_tool/server.py
+++ b/debugging_tool/server.py
@@ -4,6 +4,7 @@ from time import sleep
 from dataclasses import dataclass
 from datetime import datetime
 import serial
+import random
 
 app = Flask(__name__)
 shared_message_log = []
@@ -41,30 +42,31 @@ class Message:
     def parse_message(self):
         sender_type = self.sender_type()
         message_type = self.payload[0]
-        if sender_type == 0b00:  # controller
-            if message_type == 0:
-                return "ACK"
-            elif message_type == 1:
-                return "HELLO"
-            elif message_type == 2:
-                return "START " + self._parse_state_update()
-            elif message_type == 3:
-                return "STATE " + self._parse_state_update()
-            elif message_type == 4:
-                return "SOLVED " + self._parse_state_update()
-            elif message_type == 5:
-                return "TIMEOUT " + self._parse_state_update()
-            elif message_type == 6:
-                return "STRIKEOUT " + self._parse_state_update()
-        elif sender_type == 0b01:  # puzzle
-            if message_type == 0:
-                return "REGISTER"
-            elif message_type == 1:
-                return f"STRIKE {self.payload[1]}"
-            elif message_type == 2:
-                return f"SOLVED"
-        else:
-            return f"PARSE ERROR {self.received_from:011b} {self.payload.hex(' ')}"
+        try:
+            if sender_type == 0b00:  # controller
+                if message_type == 0:
+                    return "ACK"
+                elif message_type == 1:
+                    return "HELLO"
+                elif message_type == 2:
+                    return "START " + self._parse_state_update()
+                elif message_type == 3:
+                    return "STATE " + self._parse_state_update()
+                elif message_type == 4:
+                    return "SOLVED " + self._parse_state_update()
+                elif message_type == 5:
+                    return "TIMEOUT " + self._parse_state_update()
+                elif message_type == 6:
+                    return "STRIKEOUT " + self._parse_state_update()
+            elif sender_type == 0b01:  # puzzle
+                if message_type == 0:
+                    return "REGISTER"
+                elif message_type == 1:
+                    return f"STRIKE {self.payload[1]}"
+                elif message_type == 2:
+                    return f"SOLVED"
+        finally:
+            return "PARSE ERROR"
 
     def serialize(self):
         return {
@@ -79,19 +81,25 @@ class Message:
 
 
 def serial_reader(messagelog):
-    with serial.Serial('/dev/ttyACM0', 115200, timeout=10) as ser:
-        while True:
-            line = ser.readline()
-            print(line.decode('ascii'))
-            if line.startswith(b"message"):
-                line = line.decode('ascii')
-                line = line.strip()
-                parts = line.split(' ')
-                sender = int(parts[1])
-                message = bytes(int(p) for p in parts[2:])
-                received = Message(message, sender, datetime.now(), len(messagelog))
-                messagelog.append(received.serialize())
-                print(len(messagelog))
+    # with serial.Serial('/dev/ttyACM0', 115200, timeout=10) as ser:
+    #     while True:
+    #         line = ser.readline()
+    #         print(line.decode('ascii'))
+    #         if line.startswith(b"message"):
+    #             line = line.decode('ascii')
+    #             line = line.strip()
+    #             parts = line.split(' ')
+    #             sender = int(parts[1])
+    #             message = bytes(int(p) for p in parts[2:])
+    #             received = Message(message, sender, datetime.now(), len(messagelog))
+    #             messagelog.append(received.serialize())
+    #             print(len(messagelog))
+    for i in range(500):
+        sender = random.randrange(0, 0x800)
+        message = bytes(random.randrange(256) for i in range(random.randint(1, 8)))
+        received = Message(message, sender, datetime.now(), len(messagelog))
+        messagelog.append(received.serialize())
+        # sleep(5)
 
 @app.route('/')
 def index():
@@ -105,4 +113,4 @@ def api():
 if __name__ == '__main__':
     thread = Thread(target=serial_reader, args=(shared_message_log, ))
     thread.start()
-    app.run(debug=True, host='0.0.0.0')
+    app.run(debug=True, host='0.0.0.0')
\ No newline at end of file
diff --git a/debugging_tool/static/index.html b/debugging_tool/static/index.html
index b886bff..8ad435b 100644
--- a/debugging_tool/static/index.html
+++ b/debugging_tool/static/index.html
@@ -5,70 +5,71 @@
 	<meta charset="utf-8">
 	<title>CAN debugger</title>
 	<style>
-
-		@keyframes fadein {
-			from { opacity: 0; }
-			to   { opacity: 1; }
+		body {
+			font-family: sans-serif;
 		}
-		.message {
-			display: flex;
-			animation: fadein 1s;
-		}
-		.message > * {
-			margin-top: 0;
-			margin-bottom: 0;
-			padding: 0 1.5ch 0 1.5ch;
-		}
-		.hide_details .message .pretty_raw_sender_id {
+		
+		.hide {
 			display: none;
 		}
 
-		.hide_details .message .raw_message {
-			display: none;
-		}
-
-		.human_readable_type {
-			order: -5;
-		}
-		.time {
-			order: 5;
-		}
-		.sender_id {
-			order: 1;
-		}
-
 		.parsed {
-			order: 2;
-			flex: 1;
 			background: lightgreen;
 		}
 
-		.pretty_raw_sender_id, .raw_message {
+		td.raw {
 			font-family: monospace, monospace;
 		}
 
-		.pretty_raw_sender_id {
-			order: 9998;
+		table {
+			border-collapse: collapse;
+			width: 100%;
 		}
 
-		.raw_message {
-			order: 9999;
+		th, td {
+			border-left: 1px solid black;
+			border-right: 1px solid black;
+			padding: 5px;
 		}
 
+		th {
+			background-color: gold;
+			border-bottom: 2px solid black;
+			border-top: 2px solid black;
+			height: 20px;
+			text-align: left;
+		}
 
+		tr:hover {
+			background-color: #aaa;
+		}
+
+		td[error] {
+			background-color: rgb(255, 71, 71);
+		}
+
+		.time, .raw_id, .sender_id {
+			text-align: right;
+		}
 	</style>
 </head>
 
 <body>
-	<div>
-		<input type="checkbox" id="show_raw" name="show_raw" checked onchange="updateShow()">
+	<button onclick="toggle_logging()" id="toggle_button">Start</button>
+	
+		<input type="checkbox" id="show_raw" name="show_raw" checked autocomplete="off" onchange="updateShow()">
 		<label for="show_raw">Show raw address and payload</label>
-		<input type="checkbox" id="pause" name="pause">
-		<label for="pause">Pause</label>
-	</div>
-	<div id="messages">
-
-	</div>
+		
+	<table id="message_table">
+		<tr>
+			<th>Human-readable type</th>
+			<th>Sender ID</th>
+			<th>Parsed payload</th>
+			<th>Time</th>
+			<th class="raw">Raw Message</th>
+			<th class="raw">Raw ID</th>
+		</tr>
+	</table>
 	<script src="static/script.js"></script>
 </body>
 </html>
diff --git a/debugging_tool/static/script.js b/debugging_tool/static/script.js
index 3cd6635..d8e8d06 100644
--- a/debugging_tool/static/script.js
+++ b/debugging_tool/static/script.js
@@ -1,10 +1,15 @@
-maxseen = 0;
+
+let maxseen = 0;
+let paused = true;
+let updaterID = null;
 
 function updateShow() {
-	if (document.getElementById('show_raw').checked) {
-		document.getElementById('messages').classList = '';
-	} else {
-		document.getElementById('messages').classList = 'hide_details';
+	for (let item of document.getElementsByClassName("raw")) {
+		if (document.getElementById('show_raw').checked) {
+			item.classList.remove("hide");
+		} else {
+			item.classList.add("hide");
+		}
 	}
 }
 
@@ -17,59 +22,58 @@ function updateMessages() {
 				return;
 			}
 			response.json().then(function(data) {
-				console.log(data);
 				if (data.length > maxseen) {
-						var messageContainer = document.getElementById('messages');
-						for (let i = maxseen; i < data.length; i++) {
-							var current = data[i];
-							var time = document.createElement("p");
-							time.innerHTML = current['time'];
-							time.className = 'time';
+					let messageTable = document.getElementById('message_table');
+					
+					for (let i = maxseen; i < data.length; i++) {
+						let row = messageTable.insertRow(1);
+						let current = data[i];
 
-							var parsed = document.createElement("p");
-							parsed.innerHTML = current['parsed'];
-							parsed.className = 'parsed';
+						let human_readable_type = row.insertCell(0)
+						human_readable_type.innerHTML = current['human_readable_type'];
+						human_readable_type.className = 'human_readable_type';
 
-							var sender_id = document.createElement("p");
-							sender_id.innerHTML = current['sender_id'];
-							sender_id.className = 'sender_id';
+						let sender_id = row.insertCell(-1)
+						sender_id.innerHTML = current['sender_id'];
+						sender_id.className = 'sender_id';
 
-							var pretty_raw_sender_id = document.createElement("p");
-							pretty_raw_sender_id.innerHTML = current['pretty_raw_sender_id'];
-							pretty_raw_sender_id.className = 'pretty_raw_sender_id';
-
-							var raw_message = document.createElement("p");
-							raw_message.innerHTML = current['raw_message'];
-							raw_message.className = 'raw_message';
-
-							var human_readable_type = document.createElement("p");
-							human_readable_type.innerHTML = current['human_readable_type'];
-							human_readable_type.className = 'human_readable_type';
-
-							var newNode = document.createElement("div");
-							newNode.className = "message";
-							newNode.append(time, parsed, sender_id, pretty_raw_sender_id, raw_message, human_readable_type);
-							messageContainer.prepend(newNode)
+						let parsed = row.insertCell(-1)
+						if (current['parsed'].startsWith("PARSE ERROR")) {
+							parsed.setAttribute("error", true);
 						}
-						maxseen = data.length;
+						parsed.innerHTML = current['parsed'];
+						parsed.className += 'parsed';
+
+						let time = row.insertCell(-1)
+						time.innerHTML = current['time'];
+						time.className = 'time';
+
+						let raw_message = row.insertCell(-1);
+						raw_message.innerHTML = current['raw_message'];
+						raw_message.classList.add("raw");
+						raw_message.classList.add("raw_message");
+
+						let raw_id = row.insertCell(-1);
+						raw_id.innerHTML = current['pretty_raw_sender_id'];
+						raw_id.classList.add("raw");
+						raw_id.classList.add("raw_id");
+					}
+					maxseen = data.length;
 				}
 			});
 		}
 	)
 }
 
+function toggle_logging() {
+	if (paused) {
+		paused = false;
+		document.getElementById("toggle_button").innerHTML = "Pause";
+		updaterID = setInterval(updateMessages, 1000);
+	} else {
+		paused = true;
+		document.getElementById("toggle_button").innerHTML = "Start";
+		clearInterval(updaterID);
+	}
+}
 
-window.onload = function() {
-	updateShow()
-	console.log("loaded");
-	updateMessages();
-
-
-	setInterval(function() {
-		if (document.getElementById('pause').checked) {
-			return;
-		}
-		updateMessages()
-
-	}, 1000);
-};