diff --git a/passmate.css b/passmate.css
index 087b155..2f72b3c 100644
--- a/passmate.css
+++ b/passmate.css
@@ -78,7 +78,7 @@ overview,product {
 
 	a {
 		margin-bottom: 1em;
-		padding: 0.2em;
+		padding: 0.1em;
 		max-width: 40em;
 		text-decoration: none;
 		color: black;
@@ -93,7 +93,7 @@ overview,product {
 		margin-top: 0.2em;
 		margin-bottom: 0.2em;
 
-		padding: 0.2em;
+		padding: 0.1em;
 	}
 
 	input:focus {
@@ -118,11 +118,15 @@ overview,product {
 		text-align: center;
 	}
 
+	label.recovery {
+		text-align: center;
+	}
+
 	button {
 		/* ugly hack to give the focus box breathing room without moving the text */
 		position: relative;
-		left: -0.2em;
-		padding: 0.2em;
+		left: -0.1em;
+		padding: 0.1em;
 
 		border: none;
 		background: none;
@@ -132,6 +136,14 @@ overview,product {
 		font-weight: bold;
 	}
 
+	button.selectable {
+		font-weight: normal;
+	}
+
+	button.selected {
+		font-weight: bold;
+	}
+
 	ol {
 		box-sizing: border-box;
 		max-width: 40em;
diff --git a/passmate.js b/passmate.js
index 173cf59..7dda78d 100644
--- a/passmate.js
+++ b/passmate.js
@@ -52,13 +52,16 @@ class PassMate {
 
 		let formatStep = this.addElement('li', instr, 'Choose your preferred password format (both provide approximately the same security):');
 		let formats = this.addElement('ul', formatStep);
-		this.format = new Select();
-		this.format.add('short', this.addElement('li', formats, 'Short: 5EQaDfNS'));
-		this.format.add('readable', this.addElement('li', formats, 'Readable: LeasedBarneyPlays565'));
-		formats.addEventListener('click', () => {
+		this.format = new Select(() => {
 			this.derivePasswords();
 		});
 
+		let shortItem = this.addElement('li', formats);
+		this.format.add('short', this.addElement('button', shortItem, 'Short: 5EQaDfNS'));
+
+		let readableItem = this.addElement('li', formats);
+		this.format.add('readable', this.addElement('button', readableItem, 'Readable: LeasedBarneyPlays565'));
+
 		let printReqStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing. You\'ll need to print with the following settings:');
 		let printreqs = this.addElement('ul', printReqStep);
 		this.addElement('li', printreqs, 'Paper size: Letter');
@@ -81,6 +84,7 @@ class PassMate {
 		this.addElement('blurb', overview, 'A unique code has been generated for you below. It changes every time you refresh this website. If you\'d like to reprint an existing book, change the code below to the one printed on page 3 of your old book. The new book will contain all the same passwords as the old book. This is all done without the code or passwords ever leaving your computer.');
 
 		let recoveryLabel = this.addElement('label', overview, 'Recovery Code');
+		recoveryLabel.classList.add('recovery');
 		this.recoveryIn = this.addElement('input', recoveryLabel);
 		this.recoveryIn.type = 'text';
 		this.recoveryIn.classList.add('recovery');
@@ -390,9 +394,10 @@ class PassMate {
 }
 
 class Select {
-	constructor() {
+	constructor(changeCallback) {
 		this.options = [];
 		this.selected = null;
+		this.changeCallback = changeCallback;
 	}
 
 	add(key, elem) {
@@ -406,6 +411,9 @@ class Select {
 			}
 			elem.classList.add('selected');
 			this.selected = key;
+			if (this.changeCallback) {
+				this.changeCallback();
+			}
 		});
 
 		if (this.options.length == 1) {