diff --git a/README.md b/README.md
index 5d09962..cbc967e 100755
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 A Webxdc with a simple poll -
 one question,
-up to 5 answers.
+several answers.
 
 <img width=200 src=https://user-images.githubusercontent.com/9800740/170297694-dfa34dec-3bef-4b05-89af-cc416022e5b5.png> <img width=200 src=https://user-images.githubusercontent.com/9800740/170297702-68644a2e-fe19-427b-93c4-3083bdefa95f.png> <img width=200 src=https://user-images.githubusercontent.com/9800740/170297700-e679efa7-1696-4a94-b18a-48729c97953b.png>
 
diff --git a/index.html b/index.html
index d789f47..b48e872 100755
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
 			}
 			body {
 				font-family: sans-serif;
-				padding: 2em;
+				padding: 0.5em;
 			}
 			.page {
 				border: 4px solid #3792fc;
@@ -32,22 +32,33 @@
 				max-width: 50em;
 				background: white;
 			}
+			#answers {
+				padding: 0;
+				list-style: none;
+			}
 			input[type="text"] {
 				width: 90%;
 			}
-			a {
-				color: #3792fc;
-				text-decoration: none;
-			}
-			a.button {
+			.button {
 				color: #fff;
 				background: #3792fc;
+				cursor: pointer;
+				border: none;
+				font-size: 1rem;
 				padding: 1em;
 				border-radius: 1em;
 				margin-right: 1em;
 				margin-bottom: 20px;
 				display: inline-block;
 			}
+			.button-link-like {
+				color: #3792fc;
+				border: none;
+				background: none;
+				cursor: pointer;
+				font-size: 1rem;
+				padding: 0;
+			}
 
 			.resultsBar {
 				background-color: #3792fc;
@@ -58,36 +69,30 @@
 
 	<body>
 		<div id="configurePage" class="page" style="display: block">
-			<h2>Configure Your Poll</h2>
-			<div id="answers">
+			<form id="configurePageForm">
+				<h2>Configure Your Poll</h2>
 				<p>
-					<b>Question:</b><br />
-					<input type="text" id="configureQuestion" /><br />
+					<label for="configureQuestion"><b>Question:</b></label><br />
+					<input type="text" id="configureQuestion" required pattern=".*\S.*" /><br />
 					&nbsp;
 				</p>
+				<ul id="answers">
+				</ul>
 				<p>
-					Answer #1:<br />
-					<input type="text" id="configureAnswer0" class="answer" />
-				</p>
-				<p>
-					Answer #2:<br />
-					<input type="text" id="configureAnswer1" class="answer" />
+					<span id="configureHint">Please fill all the answers</span><br />
+					&nbsp;
 				</p>
-			</div>
-			<p>
-				<span id="configureHint">Please fill all the answers</span><br />
-				&nbsp;
-			</p>
 
-			<a class="button" href="" onclick="addAnswer(); return false;"
-				>Add an answer</a
-			>
-			<a class="button" href="" onclick="removeAnswer(); return false;"
-				>Remove an answer</a
-			>
-			<a class="button" href="" onclick="configure(); return false;"
-				>Create Poll</a
-			>
+				<button type="button" class="button" onclick="addAnswer()"
+					>Add an answer</button
+				>
+				<button type="button" class="button" onclick="removeAnswer()"
+					>Remove an answer</button
+				>
+				<button type="submit" class="button"
+					>Create Poll</button
+				>
+			</form>
 		</div>
 		<div id="votePage" class="page" style="display: none">
 			<h2 id="voteQuestion">Question</h2>
@@ -95,9 +100,9 @@ <h2 id="voteQuestion">Question</h2>
 			<p id="voteHint" style="display: none"></p>
 			<p>
 				<br />
-				<a class="button" href="" onclick="vote(); return false;">Vote</a>
-				<a href="" onclick="refresh('resultsPage'); return false;"
-					>View Results</a
+				<button type="button" class="button" onclick="vote()">Vote</button>
+				<button type="button" class="button-link-like" onclick="refresh('resultsPage')"
+					>View Results</button
 				>
 			</p>
 		</div>
@@ -107,10 +112,15 @@ <h2 id="resultsQuestion">Question</h2>
 
 			<div><span id="resultsTotalVotes">0</span> people voted</div>
 			<p>
-				<a href="" onclick="refresh('votePage'); return false;">Your Vote</a>
+				<button type="button" onclick="refresh('votePage')">Your Vote</button>
 			</p>
 		</div>
 		<script>
+			let _nextUniquieNum = 1;
+			const uniquieNum = () => {
+				return _nextUniquieNum++;
+			}
+
 			// the status is altered by the following updates:
 			//
 			// {action:"configure", question:"", answers:["", "", "", "", ""]}
@@ -118,36 +128,26 @@ <h2 id="resultsQuestion">Question</h2>
 			//
 			// configure is only executed when there are no votes yet,
 			// subsequent votes from the same addr overwrite previous votes.
-			var MAX_ANSWERS = 2;
+			var maxAnswers = 0;
 			var globalStatus = {
 				people: [],
 				question: "",
 				answers: [],
 			};
+			addAnswer();
+			addAnswer();
 
-			function configure() {
-				// validate input
-				if (document.getElementById("configureQuestion").value.trim() === "") {
-					document.getElementById("configureHint").innerText =
-						"⚠️ Please enter a question.";
-					return;
-				}
-				var answerObjects = document.getElementsByClassName("answer");
-				MAX_ANSWERS = answerObjects.length;
-				for (let i = 0; i < MAX_ANSWERS; i++) {
-					if (answerObjects[i].value.trim() === "") {
-						document.getElementById("configureHint").innerText =
-							"⚠️ Please enter all the answers.";
-						return;
-					}
-				}
+			document.getElementById("configurePageForm").addEventListener("submit", e => {
+				e.preventDefault();
 
+				var answerObjects = document.getElementsByClassName("answer");
+				maxAnswers = answerObjects.length;
 				// change status
 				globalStatus.question = document
 					.getElementById("configureQuestion")
 					.value.trim();
 				var answers = [];
-				for (let i = 0; i < MAX_ANSWERS; i++) {
+				for (let i = 0; i < maxAnswers; i++) {
 					if (answerObjects[i].value.trim() !== "") {
 						answers.push(answerObjects[i].value.trim());
 					}
@@ -167,20 +167,29 @@ <h2 id="resultsQuestion">Question</h2>
 					},
 					'Poll "' + globalStatus.question + '" created!'
 				);
-			}
+			});
 
 			function isConfigured() {
 				return globalStatus.question.trim() !== "";
 			}
 
 			function addAnswer() {
-				MAX_ANSWERS++;
+				maxAnswers++;
 				//create new dom answer
-				var newAnswer = document.createElement("p");
-				newAnswer.textContent = "Answer #" + MAX_ANSWERS + ":";
+				var newAnswer = document.createElement("li");
+				const label = document.createElement("label");
+				const inputId = "answer-" + uniquieNum();
+				label.textContent = "Answer #" + maxAnswers + ":";
+				label.setAttribute("for", inputId);
+				newAnswer.appendChild(label);
 				newAnswer.appendChild(document.createElement("br"));
 				var input = document.createElement("input");
 				input.setAttribute("type", "text");
+				input.setAttribute("required", "");
+				// At least one non-space character, so that when we trim it it's not
+				// an empty string.
+				input.setAttribute("pattern", ".*\\S.*");
+				input.setAttribute("id", inputId);
 				input.classList.add("answer");
 				newAnswer.appendChild(input);
 				// var removeBtn = document.createElement("button");
@@ -193,8 +202,8 @@ <h2 id="resultsQuestion">Question</h2>
 			}
 
 			function removeAnswer() {
-				if (MAX_ANSWERS > 2) {
-					MAX_ANSWERS--;
+				if (maxAnswers > 2) {
+					maxAnswers--;
 					var answer = document.getElementsByClassName("answer");
 					answer[answer.length - 1].parentNode.remove();
 				} else {
@@ -207,7 +216,7 @@ <h2 id="resultsQuestion">Question</h2>
 				// validate input
 				var person = window.webxdc.selfAddr;
 				var vote = [];
-				for (let i = 0; i < MAX_ANSWERS; i++) {
+				for (let i = 0; i < maxAnswers; i++) {
 					if (document.getElementById("voteRadio" + i).checked) {
 						vote.push(i);
 					}
@@ -251,7 +260,7 @@ <h2 id="resultsQuestion">Question</h2>
 
 			function hasSelfVoted() {
 				var selfAddr = window.webxdc.selfAddr;
-				for (let i = 0; i < MAX_ANSWERS; i++) {
+				for (let i = 0; i < maxAnswers; i++) {
 					for (let j = 0; j < globalStatus.answers[i].votes.length; j++) {
 						if (globalStatus.answers[i].votes[j] === selfAddr) {
 							return true;
@@ -262,14 +271,14 @@ <h2 id="resultsQuestion">Question</h2>
 			}
 
 			function removeVote(addr) {
-				for (let i = 0; i < MAX_ANSWERS; i++) {
+				for (let i = 0; i < maxAnswers; i++) {
 					globalStatus.answers[i].votes = globalStatus.answers[i].votes.filter((vote) => vote !== addr);
 				}
 			}
 
 			function getTotalVotes() {
 				var totalVotes = 0;
-				for (let i = 0; i < MAX_ANSWERS; i++) {
+				for (let i = 0; i < maxAnswers; i++) {
 					totalVotes += globalStatus.answers[i].votes.length;
 				}
 				return totalVotes;
@@ -283,7 +292,7 @@ <h2 id="resultsQuestion">Question</h2>
 					document.getElementById("voteQuestion").innerText =
 						globalStatus.question;
 					document.getElementById("voteHint").style.display = "none";
-					// for (let i = 0; i < MAX_ANSWERS; i++) {
+					// for (let i = 0; i < maxAnswers; i++) {
 					// 	document.getElementById("voteDiv" + i).style.display =
 					// 		globalStatus.answers[i].answer === "" ? "none" : "block";
 					// 	document.getElementById("voteLabel" + i).innerText =
@@ -293,7 +302,7 @@ <h2 id="resultsQuestion">Question</h2>
 					//create answer checkboxes
 					var checkBoxes = document.getElementById("voteCheckboxes");
 					checkBoxes.innerHTML = "";
-					for (let i = 0; i < MAX_ANSWERS; i++) {
+					for (let i = 0; i < maxAnswers; i++) {
 						var p = document.createElement("p");
 						var input = document.createElement("input");
 						input.setAttribute("type", "checkbox");
@@ -314,7 +323,7 @@ <h2 id="resultsQuestion">Question</h2>
 					let totalVotes = getTotalVotes();
 					var resultsContainer = document.getElementById("resultsDiv");
 					resultsContainer.innerHTML = "";
-					for (let i = 0; i < MAX_ANSWERS; i++) {
+					for (let i = 0; i < maxAnswers; i++) {
 						// let votes = globalStatus.answers[i].votes.length;
 						// let percent =
 						// 	totalVotes === 0 ? 0 : Math.round((votes * 100) / totalVotes);
@@ -374,9 +383,9 @@ <h2 id="resultsQuestion">Question</h2>
 				if (update.payload.action === "configure") {
 					if (!isConfigured()) {
 						globalStatus.question = update.payload.question;
-						MAX_ANSWERS = update.payload.answers.length;
+						maxAnswers = update.payload.answers.length;
 					}
-					for (let i = 0; i < MAX_ANSWERS; i++) {
+					for (let i = 0; i < maxAnswers; i++) {
 						globalStatus.answers.push({
 							answer: update.payload.answers[i],
 							votes: [],
@@ -389,7 +398,7 @@ <h2 id="resultsQuestion">Question</h2>
 
 					if (
 						update.payload.vote.length >= 1 &&
-						update.payload.vote.length <= MAX_ANSWERS
+						update.payload.vote.length <= maxAnswers
 					) {
 						for (let i = 0; i < update.payload.vote.length; i++) {
 							globalStatus.answers[update.payload.vote[i]].votes.push(
