diff --git a/views/event-logs.ejs b/views/event-logs.ejs
index 5227f9b..76df995 100644
--- a/views/event-logs.ejs
+++ b/views/event-logs.ejs
@@ -51,6 +51,38 @@
 			// Handle incoming event log messages
 			// Example: append to a table or display in the UI
 			console.log('Event received:', event.data);
+			const tbody = document.querySelector('tbody');
+			const log = JSON.parse(event.data);
+
+			const date = new Date(log.Timestamp);
+			const pad = n => n.toString().padStart(2, '0');
+			const yyyy = date.getFullYear();
+			const mm = pad(date.getMonth() + 1);
+			const dd = pad(date.getDate());
+			const HH = pad(date.getHours());
+			const MM = pad(date.getMinutes());
+			const ss = pad(date.getSeconds());
+			const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+			const formattedDate = `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss} ${tz}`;
+
+			// Use EJS-injected dataTypes for event types, directions, and reasons
+			const eventTypes = <%- JSON.stringify(dataTypes.EventType) %>;
+			const directions = <%- JSON.stringify(dataTypes.Direction) %>;
+			const reasons = <%- JSON.stringify(dataTypes.EventReason) %>;
+
+			const tr = document.createElement('tr');
+			tr.innerHTML = `
+				<td>${log.Controller}</td>
+				<td>${log.EventIndex}</td>
+				<td>${formattedDate}</td>
+				<td>${eventTypes[log.Type] || log.Type}</td>
+				<td>${log.Granted ? "True" : "False"}</td>
+				<td>${log.Door}</td>
+				<td>${directions[log.Direction] || log.Direction}</td>
+				<td>${log.CardNumber}</td>
+				<td>${reasons[log.Reason] || log.Reason}</td>
+			`;
+			tbody.insertBefore(tr, tbody.firstChild);
 		};
 
 		ws.onopen = function() {