diff --git a/pwa/app.js b/pwa/app.js
index 5e3044c..42f22da 100644
--- a/pwa/app.js
+++ b/pwa/app.js
@@ -15,11 +15,15 @@ function base64_decode(str_b64) {
 }
 
 class Account {
-	constructor(local_part, separator, domain, key_b64) {
+	constructor(local_part, separator, domain, key) {
 		this.local_part = local_part;
 		this.domain = domain;
 		this.separator = separator;
-		this.key = base64_decode(key_b64);
+		if (Array.isArray(key)) {
+			this.key = key;
+		} else {
+			this.key = base64_decode(key);
+		}
 	}
 
 	getName() {
@@ -37,22 +41,90 @@ class Account {
 		const code = base32_nopad_encode(reduced_hash);
 		return `${this.local_part}${this.separator}${sub_addr_name}${this.separator}${code}@${this.domain}`
 	}
+
+	register() {
+		localStorage.setItem(this.getName(), JSON.stringify(this));
+	}
 }
 
-['a', 'b'].forEach((e) => {
-	const test_addr = new Account(e, '+', 'example.org', '11voiefK5PgCX5F1TTcuoQ==');
-	console.log(test_addr);
-	console.log('Account name: ' + test_addr.getName());
-	console.log('Sub-addr: ' + test_addr.genSubAddr('test'));
-});
+document.addEventListener('DOMContentLoaded', () => {
+	// Functions to open and close a modal
+	function openModal() {
+		document.querySelector('#modal-add-account').classList.add('is-active');
+	}
 
-document.querySelector('#btn-generate').addEventListener('click', (event) => {
-	event.preventDefault();
-	console.log('TODO: address generation');
-	['a', 'b'].forEach((e) => {
-		const test_addr = new Account(e, '+', 'example.org', '11voiefK5PgCX5F1TTcuoQ==');
-		console.log(test_addr);
-		console.log('Sub-addr: ' + test_addr.genSubAddr('test'));
+	function closeModal() {
+		if (localStorage.length !== 0) {
+			document.querySelector('#modal-add-account').classList.remove('is-active');
+			syncAccountList();
+		}
+	}
+
+	// Function to synchronize the account list
+	function syncAccountList() {
+		var acc_list = document.querySelector('#account-name');
+		while (acc_list.lastElementChild) {
+			acc_list.removeChild(acc_list.lastElementChild);
+		}
+		for (var i = 0, len = localStorage.length; i < len; ++i) {
+			const account_string = localStorage.getItem(localStorage.key(i));
+			const account_raw = JSON.parse(account_string);
+			const account = new Account(
+				account_raw.local_part,
+				account_raw.separator,
+				account_raw.domain,
+				account_raw.key,
+			);
+			const new_elem = new Option(account.getName(), account.getName());
+			acc_list.appendChild(new_elem);
+		}
+		if (localStorage.length === 0) {
+			openModal();
+		}
+	}
+	syncAccountList();
+
+	// Add a click event on buttons to open a specific modal
+	(document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+		$trigger.addEventListener('click', () => {
+			openModal();
+		});
+	});
+
+	// Add a click event on various child elements to close the parent modal
+	(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close') || []).forEach(($close) => {
+		$close.addEventListener('click', () => {
+			closeModal();
+		});
+	});
+
+	// Add a keyboard event to close all modals
+	document.addEventListener('keydown', (event) => {
+		if (event.code === 'Escape') {
+			closeModal();
+		}
+	});
+
+	// Add a click event on the new account button to register the new account
+	document.querySelector('#btn-new-account').addEventListener('click', (event) => {
+		console.log('Adding new account…');
+		const new_account = new Account(
+			document.querySelector('#new-addr-local-part').value,
+			document.querySelector('#new-addr-separator').value,
+			document.querySelector('#new-addr-domain').value,
+			document.querySelector('#new-addr-key').value,
+		);
+		console.log(new_account);
+		new_account.register();
+		console.log(`Account ${new_account.getName()} added.`);
+		closeModal();
+	});
+
+	// Add a click event on the new address button to generate it
+	document.querySelector('#btn-generate').addEventListener('click', (event) => {
+		console.log('Generating a new address…');
+		event.preventDefault();
+		// TODO
 	});
 });
 
diff --git a/pwa/index.html b/pwa/index.html
index 1c6bb00..118d8ea 100644
--- a/pwa/index.html
+++ b/pwa/index.html
@@ -17,19 +17,16 @@
 				<div class="columns is-centered">
 					<div class="column is-three-fifths">
 						<h1 class="title is-1">New email address</h1>
-						<form action="" method="get">
+						<form action="" method="get" id="form-generate-addr">
 							<label class="label" for="account-name">Account</label>
 							<div class="field has-addons">
 								<div class="control is-expanded">
 									<div class="select is-fullwidth">
-										<select id="account-name">
-											<option>a@example.org</option>
-											<option>b@example.com</option>
-										</select>
+										<select id="account-name"></select>
 									</div>
 								</div>
 								<p class="control">
-								<a class="button is-primary" id="btn-add-account">New</a>
+								<a class="button is-primary js-modal-trigger" data-target="modal-add-account" id="btn-add-account">New</a>
 								</p>
 							</div>
 							<div class="field">
@@ -52,5 +49,46 @@
 				</div>
 			</div>
 		</section>
+		<div id="modal-add-account" class="modal">
+			<div class="modal-background"></div>
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Add a new account</p>
+					<button class="delete" aria-label="close"></button>
+				</header>
+				<section class="modal-card-body">
+					<form action="" method="get" id="form-new-account">
+						<div class="field">
+							<label class="label" for="new-addr-local-part">Local part</label>
+							<div class="control">
+								<input class="input" type="text" id="new-addr-local-part" minlength="1">
+							</div>
+						</div>
+						<div class="field">
+							<label class="label" for="new-addr-separator">Separator</label>
+							<div class="control">
+								<input class="input" type="text" id="new-addr-separator" value="+" minlength="1" maxlength="1">
+							</div>
+						</div>
+						<div class="field">
+							<label class="label" for="new-addr-domain">Domain name</label>
+							<div class="control">
+								<input class="input" type="text" id="new-addr-domain" placeholder="example.org" minlength="1">
+							</div>
+						</div>
+						<div class="field">
+							<label class="label" for="new-addr-key">Private key</label>
+							<div class="control">
+								<input class="input" type="text" id="new-addr-key" minlength="1">
+							</div>
+						</div>
+					</form>
+				</section>
+				<footer class="modal-card-foot buttons is-centered">
+					<button class="button is-success" id="btn-new-account">Add</button>
+					<button class="button button-close">Cancel</button>
+				</footer>
+			</div>
+		</div>
 	</body>
 </html>