diff --git a/views/acl-add.ejs b/views/acl-add.ejs
new file mode 100644
index 0000000..a962989
--- /dev/null
+++ b/views/acl-add.ejs
@@ -0,0 +1,68 @@
+<form id="acl-add-form" method="post" action="/acl" style="max-width: 500px; margin: 2em auto; padding: 2em; border: 1px solid #ccc; border-radius: 8px; background: #fafafa; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+	<h2 style="text-align:center; margin-bottom:1em;">Add ACL Entry</h2>
+	<div style="margin-bottom:1em;">
+		<label for="Name" style="display:block; margin-bottom:0.5em;">Name:</label>
+		<input type="text" id="Name" name="Name" required style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
+	</div>
+	<div style="margin-bottom:1em;">
+		<label for="CardNumber" style="display:block; margin-bottom:0.5em;">Card Number:</label>
+		<input type="text" id="CardNumber" name="CardNumber" required style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
+	</div>
+	<div style="margin-bottom:1em;">
+		<label for="PIN" style="display:block; margin-bottom:0.5em;">PIN:</label>
+		<input type="text" id="PIN" name="PIN" style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
+	</div>
+	<div style="margin-bottom:1em;">
+		<label for="StartDate" style="display:block; margin-bottom:0.5em;">Start Date:</label>
+		<input type="date" id="StartDate" name="StartDate" style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
+	</div>
+	<div style="margin-bottom:1em;">
+		<label for="EndDate" style="display:block; margin-bottom:0.5em;">End Date:</label>
+		<input type="date" id="EndDate" name="EndDate" style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
+	</div>
+	<fieldset style="margin-bottom:1em; border-radius:4px; border:1px solid #bbb; padding:1em;">
+		<legend style="font-weight:bold;">Doors</legend>
+		<% if (typeof doorsList !== 'undefined') { %>
+			<% Object.keys(doorsList).forEach(function(door) { %>
+				<div style="margin-bottom:0.5em;">
+					<label style="cursor:pointer;">
+						<input type="checkbox" name="doors[<%= door %>]" value="1">
+						<%= door %>
+					</label>
+				</div>
+			<% }) %>
+		<% } else { %>
+			<div>No doors configured.</div>
+		<% } %>
+	</fieldset>
+	<button type="submit" style="width:100%; padding:0.75em; background:#1976d2; color:#fff; border:none; border-radius:4px; font-size:1em; cursor:pointer;">Add Entry</button>
+</form>
+
+<script>
+document.getElementById('acl-add-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: {}
+	};
+	<% if (typeof doorsList !== 'undefined') { Object.keys(doorsList).forEach(function(door) { %>
+		data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0;
+	<% }) } %>
+	fetch(form.action, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(data)
+	}).then(res => {
+		if (res.ok) window.location.href = '/acl';
+		else alert('Failed to add ACL entry');
+	}).catch(err => {
+		alert('Error: ' + err.message);
+	});
+});
+</script>
diff --git a/views/acl-edit.ejs b/views/acl-edit.ejs
index e52067e..c0dc63e 100644
--- a/views/acl-edit.ejs
+++ b/views/acl-edit.ejs
@@ -1,70 +1,53 @@
-<%
-// Assume aclEntry is passed to this view with all fields
-// doorsList is an object of door names to grant access, e.g. { "Door1": 1, "Door2": 0, ... }
-%>
-<form id="acl-edit-form" method="patch" action="/acl/<%= aclEntry.CardNumber %>">
-	<div>
-		<label for="Name">Name:</label>
-		<input type="text" id="Name" name="Name" value="<%= aclEntry.Name %>" required>
-	</div>
-	<div>
-		<label for="CardNumber">Card Number:</label>
-		<input type="text" id="CardNumber" name="CardNumber" value="<%= aclEntry.CardNumber %>" readonly>
-	</div>
-	<div>
-		<label for="PIN">PIN:</label>
-		<input type="text" id="PIN" name="PIN" value="<%= aclEntry.PIN %>">
-	</div>
-	<div>
-		<label for="StartDate">Start Date:</label>
-		<input type="date" id="StartDate" name="StartDate" value="<%= new Date(aclEntry.StartDate).toISOString().slice(0,10) %>">
-	</div>
-	<div>
-		<label for="EndDate">End Date:</label>
-		<input type="date" id="EndDate" name="EndDate" value="<%= new Date(aclEntry.EndDate).toISOString().slice(0,10) %>">
-	</div>
-	<fieldset>
-		<legend>Doors</legend>
-		<% Object.keys(doorsList).forEach(function(door) { %>
-			<div>
-				<label>
-					<input type="checkbox" name="doors[<%= door %>]" value="1"
-						<% if (doorsList[door] && doorsList[door] == 1) { %> checked <% } %> >
-					<%= door %>
-					<% doorsList[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(doorsList).forEach(function(door) { %>
-		data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0;
-	<% }) %>
-	fetch(form.action, {
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify(data)
-	}).then(res => {
-		console.log(res.status, res.statusText);
-		if (res.ok) window.location.href = '/acl';
-		else alert('Failed to update ACL entry');
-	}).catch(err => {
-		alert('Error: ' + err.message);
-	});
-});
-</script>
\ No newline at end of file
+<style>
+form#acl-edit-form {
+	max-width: 500px;
+	margin: 2em auto;
+	padding: 2em;
+	border: 1px solid #ccc;
+	border-radius: 8px;
+	background: #fafafa;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+form#acl-edit-form div {
+	margin-bottom: 1em;
+}
+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"] {
+	width: 100%;
+	padding: 0.5em;
+	border: 1px solid #bbb;
+	border-radius: 4px;
+	box-sizing: border-box;
+}
+form#acl-edit-form fieldset {
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	padding: 1em;
+	margin-bottom: 1em;
+	background: #f5f5f5;
+}
+form#acl-edit-form legend {
+	font-weight: 600;
+}
+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;
+}
+</style>