diff --git a/views/acl-bulk-add.ejs b/views/acl-bulk-add.ejs
index 0b7b816..42b519c 100644
--- a/views/acl-bulk-add.ejs
+++ b/views/acl-bulk-add.ejs
@@ -4,139 +4,136 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Add ACL Entry</title>
+	<title>Event Log Viewer</title>
 	<style>
-		form#acl-edit-form {
-			max-width: 500px;
-			margin: 2em auto;
-			padding: 2em;
-			border: 1px solid #ccc;
+		body {
+			font-family: Arial, sans-serif;
+			background: #f7f7f7;
+			margin: 0;
+			padding: 0;
+		}
+
+		.container {
+			/* max-width: 900px; */
+			margin: 40px auto;
+			background: #fff;
+			padding: 32px;
 			border-radius: 8px;
-			background: #fafafa;
-			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 		}
 
-		form#acl-edit-form div {
-			margin-bottom: 1em;
+		h1 {
+			text-align: center;
+			margin-bottom: 32px;
+			color: #333;
 		}
 
-		form#acl-edit-form label {
-			display: block;
-			font-weight: 500;
-			margin-bottom: 0.3em;
-		}
-
-		form#acl-edit-form input[type="text"],
-		form#acl-edit-form input[type="date"] {
+		table {
 			width: 100%;
-			padding: 0.5em;
-			border: 1px solid #bbb;
-			border-radius: 4px;
-			box-sizing: border-box;
+			border-collapse: collapse;
+			margin-bottom: 16px;
 		}
 
-		form#acl-edit-form fieldset {
-			border: 1px solid #ddd;
-			border-radius: 4px;
-			padding: 1em;
-			margin-bottom: 1em;
-			background: #f5f5f5;
+		th,
+		td {
+			padding: 12px 8px;
+			border-bottom: 1px solid #e0e0e0;
+			text-align: left;
 		}
 
-		form#acl-edit-form legend {
-			font-weight: 600;
+		th {
+			background: #f0f0f0;
+			color: #444;
 		}
 
-		form#acl-edit-form button[type="submit"] {
-			background: #1976d2;
-			color: #fff;
-			border: none;
-			padding: 0.7em 1.5em;
-			border-radius: 4px;
-			font-size: 1em;
-			cursor: pointer;
-			transition: background 0.2s;
-		}
-
-		form#acl-edit-form button[type="submit"]:hover {
-			background: #1565c0;
-		}
-
-		form#acl-edit-form input[type="checkbox"] {
-			margin-right: 0.5em;
+		tr:hover {
+			background: #f9f9f9;
 		}
 	</style>
+	<script>
+		const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+		const wsUrl = `${wsProtocol}//${location.host}${location.pathname}`;
+		const ws = new WebSocket(wsUrl);
 
+		ws.onmessage = function (event) {
+			// 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);
+			if (!log || log.EventType != 2 || log.Granted != 0) return; // Only allow denied swipes
+			const tr = document.createElement('tr');
+			tr.innerHTML = `
+				<td><input type="checkbox" /></td>
+				<td>${log.CardNumber}</td>
+				<td>${log.Controller}</td>
+				<td>${log.Door}</td>
+				<td>${new Date(log.Timestamp).toLocaleString()}</td>
+				<td>${log.Name || ''}</td>
+				<td><input type="date" value="${new Date().toISOString().slice(0, 10)}" /></td>
+				<td><input type="date" value="${new Date(Date.now() + 99 * 365.25 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)}" /></td>
+				<td>
+					<% for (const doorName of Object.keys(doorList)) { %>
+						<label>
+							<input type="checkbox" name="<%= doorName %>" checked />
+							<%= doorName %>
+						</label>
+					<% } %>
+				</td>
+			`;
+			tbody.insertBefore(tr, tbody.firstChild);
+			tr.style.background = 'orange';
+			setTimeout(() => {
+				let opacity = 1;
+				const fade = setInterval(() => {
+					opacity -= 0.05;
+					tr.style.background = `rgba(255,165,0,${opacity})`;
+					if (opacity <= 0.1) {
+						tr.style.background = '';
+						clearInterval(fade);
+					}
+				}, 40);
+			}, 0);
+		};
+
+		ws.onopen = function () {
+			console.log('WebSocket connection established');
+		};
+
+		ws.onclose = function () {
+			console.log('WebSocket connection closed');
+		};
+
+		ws.onerror = function (error) {
+			console.error('WebSocket error:', error);
+		};
+	</script>
 </head>
 
 <body>
-	<form id="acl-edit-form" method="patch" action="/acl">
-		<div>
-			<label for="Name">Name:</label>
-			<input type="text" id="Name" name="Name" value="" required>
-		</div>
-		<div>
-			<label for="CardNumber">Card Number:</label>
-			<input type="number" id="CardNumber" name="CardNumber" value="" required>
-		</div>
-		<div>
-			<label for="PIN">PIN:</label>
-			<input type="text" id="PIN" name="PIN" value="">
-		</div>
-		<div>
-			<label for="StartDate">Start Date:</label>
-			<input type="date" id="StartDate" name="StartDate"
-				value="<%= new Date().toISOString().slice(0,10) %>" required>
-		</div>
-		<div>
-			<label for="EndDate">End Date:</label>
-			<input type="date" id="EndDate" name="EndDate"
-				value="<%= new Date(Date.now() + 99*365.25*24*60*60*1000).toISOString().slice(0,10) %>" required>
-		</div>
-		<fieldset>
-			<legend>Doors</legend>
-			<% Object.keys(doorList).forEach(function(door) { %>
-				<div>
-					<label>
-						<input type="checkbox" name="doors[<%= door %>]" value="1" <% if (doorList[door] &&
-							doorList[door]==1) { %> checked <% } %> >
-							<%= door %>
-								<% doorList[door] %>
-					</label>
-				</div>
-				<% }) %>
-		</fieldset>
-		<button type="submit">Save</button>
-	</form>
-
-	<script>
-		document.getElementById('acl-edit-form').addEventListener('submit', function (e) {
-			e.preventDefault();
-			const form = e.target;
-			const formData = new FormData(form);
-			const data = {
-				Name: formData.get('Name'),
-				CardNumber: formData.get('CardNumber'),
-				PIN: formData.get('PIN'),
-				StartDate: formData.get('StartDate'),
-				EndDate: formData.get('EndDate'),
-				doors: {}
-			};
-	<% Object.keys(doorList).forEach(function (door) { %>
-				data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0;
-	<% }) %>
-				fetch(form.action, {
-					method: 'PUT',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify(data)
-				}).then(res => {
-					if (res.ok) window.location.href = '/acl';
-					else alert('Failed to update ACL entry');
-				}).catch(err => {
-					alert('Error: ' + err.message);
-				});
-		});
-	</script>
+	<div class="container">
+		<h1>Bulk Credential Adder</h1>
+		<a href="/dashboard">Dashboard</a>
+		<form action="/acl/bulk-add" method="post">
+			<table>
+				<thead>
+					<tr>
+						<th>Select</th>
+						<th>Credential</th>
+						<th>Controller</th>
+						<th>Door</th>
+						<th>Data</th>
+						<th>Name</th>
+						<th>Start Date</th>
+						<th>End Date</th>
+						<th>Allowed Doors</th>
+					</tr>
+				</thead>
+				<tbody></tbody>
+			</table>
+			<button type="submit">Add Selected</button>
+		</form>
+	</div>
 </body>
 
 </html>
\ No newline at end of file
