diff --git a/identity-api/src/routes/auth/heirs.ts b/identity-api/src/routes/auth/heirs.ts
index 3ce24cf..ff526a0 100644
--- a/identity-api/src/routes/auth/heirs.ts
+++ b/identity-api/src/routes/auth/heirs.ts
@@ -29,6 +29,35 @@ const Body = Type.Object({
 type BodyType = Static<typeof Body>;
 
 export default function register(app: AppInterface, auth: AuthInterface, database: DatabaseInterface) {
+    app.get("/auth/heirs", {
+        async handler(request, reply) {
+            let jwt = request.headers["authorization"].replace("Bearer", "").trim();
+            let { payload } = await auth.verifyJwt(jwt);
+
+            if (payload.uid == null) {
+                reply.status(401);
+                return;
+            }
+
+            return (await database.listHeirs(payload.uid))
+                .map((v) => {
+                    v["contactMethod"] = "email";
+                    return v;
+                })
+                .map((v) => {
+                    v["value"] = v["email"];
+                    return v;
+                })
+                .map((v) => {
+                    v["email"] = undefined;
+                    return v;
+                });
+        },
+        schema: {
+            headers: { $ref: "schema://identity/authorization" },
+        },
+    });
+
     app.put<{ Body: BodyType }>("/auth/heirs", {
         async handler(request, reply) {
             let jwt = request.headers["authorization"].replace("Bearer", "").trim();
diff --git a/identity-web/src/lib/api.ts b/identity-web/src/lib/api.ts
index 3d47c8a..d784542 100644
--- a/identity-web/src/lib/api.ts
+++ b/identity-web/src/lib/api.ts
@@ -143,6 +143,10 @@ export async function removeHeir(credentials: Credentials, heirID: string): Prom
 	}));
 }
 
+export async function listHeirs(credentials: Credentials): Promise<AccountHeir[]> {
+	return await asJson(sendRequest('/auth/heirs', credentials));
+}
+
 export async function uploadAsset(session_key: string, file: File): Promise<string> {
 	let url = new URL('/asset', ASSET_API_ENDPOINT);
 	url.search = `?session_key=${session_key}`;
diff --git a/identity-web/src/routes/auth/account/+page.svelte b/identity-web/src/routes/auth/account/+page.svelte
index 2a6919c..4084742 100644
--- a/identity-web/src/routes/auth/account/+page.svelte
+++ b/identity-web/src/routes/auth/account/+page.svelte
@@ -5,27 +5,29 @@
 <script lang="ts">
 	import { createForm } from 'felte';
 	import { account, credentials, refreshAccount } from '$lib/stores';
-	import { type AccountHeir, insertHeir, removeHeir as removeDBHeir } from '$lib/api';
+	import { type AccountHeir, type InsertHeir, insertHeir, listHeirs, removeHeir as removeDBHeir } from '$lib/api';
 
 	credentials.subscribe(
 		(v) => v == null && setTimeout(() => (window.location.pathname = '/auth/login'), 200)
 	);
 
 	let heirWizard = false;
+	let heirs = listHeirs($credentials!);
+
+	function resfreshHeirs() {
+		heirs = listHeirs($credentials!);
+	}
 
 	const { form, errors } = createForm({
-		/*onSubmit: async (values) => {
-			let heir: AccountHeir = {
+		onSubmit: async (values) => {
+			let heir: InsertHeir = {
 				contactMethod: values.contactMethod,
 				name: values.name,
 				value: values.contactDetails
 			};
 
-			let currentHeirs = structuredClone($account!.heirs);
-			let updatedHeirs = [heir, ...currentHeirs];
-
-			//await updateHeirs($credentials!, updatedHeirs);
-			await refreshAccount();
+			await insertHeir($credentials!, heir);
+			await resfreshHeirs();
 
 			heirWizard = false;
 		},
@@ -45,15 +47,12 @@
 			}
 
 			return errors;
-		}*/
+		}
 	});
 
 	async function removeHeir(heir: AccountHeir) {
-		let currentHeirs = structuredClone($account!.heirs);
-		let updatedHeirs = currentHeirs.filter((v) => v.value !== heir.value);
-
-		await updateHeirs($credentials!, updatedHeirs);
-		await refreshAccount();
+		await removeDBHeir($credentials!, heir.id);
+		await resfreshHeirs();
 	}
 </script>
 
@@ -63,119 +62,123 @@
 			Welcome back, <span class="font-bold">{$account?.name}</span>
 			.
 		</h1>
-		<div>
-			<div class="mb-2 flex justify-between">
-				<h2 class="pb-2.5 text-xl">Heirs</h2>
-				{#if $account?.heirs.length > 0}
-					<button
-						on:click={() => (heirWizard = !heirWizard)}
-						class="rounded-lg bg-violet-700 px-2.5 py-1 text-center text-white hover:bg-violet-800 focus:ring-4 focus:ring-violet-300"
-					>
-						+ Add a heir
-					</button>
+		{#await heirs}
+			<span>Loading heirs...</span>
+		{:then heirs} 
+			<div>
+				<div class="mb-2 flex justify-between">
+					<h2 class="pb-2.5 text-xl">Heirs</h2>
+					{#if heirs.length > 0}
+						<button
+							on:click={() => (heirWizard = !heirWizard)}
+							class="rounded-lg bg-violet-700 px-2.5 py-1 text-center text-white hover:bg-violet-800 focus:ring-4 focus:ring-violet-300"
+						>
+							+ Add a heir
+						</button>
+					{/if}
+				</div>
+				{#if !heirWizard && heirs.length === 0}
+					<div class="flex flex-col">
+						<button
+							on:click={() => (heirWizard = true)}
+							class="flex h-60 flex-col items-center justify-center gap-3 rounded border border-gray-300 p-2 text-black"
+						>
+							<span class="text-4xl">+</span>
+							<h2 class="text-xl font-semibold">Add a heir</h2>
+						</button>
+					</div>
 				{/if}
+				{#if heirWizard}
+					<div class="mb-4 flex w-full flex-col rounded-lg border border-gray-200 p-3.5 shadow">
+						<form use:form>
+							<div class="mb-5">
+								<label
+									for="heir__contact-method"
+									class="mb-2 block text-sm font-medium text-gray-900"
+								>
+									Contact method
+								</label>
+								<select
+									id="heir__contact-method"
+									name="contactMethod"
+									class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-violet-500 focus:ring-violet-500"
+								>
+									<option value="" selected>Choose a contact method</option>
+									<option value="email">Email</option>
+								</select>
+								{#if $errors.contactMethod != null}
+									<p class="mt-2 text-sm text-red-600">
+										<span class="font-medium">{$errors.contactMethod[0]}</span>
+									</p>
+								{/if}
+							</div>
+							<div class="mb-5">
+								<label for="heir__name" class="mb-2 block text-sm font-medium text-gray-900">
+									Heir name
+								</label>
+								<input
+									id="heir__name"
+									type="text"
+									name="name"
+									placeholder="Jane Doe"
+									class="text-greay-900 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-violet-500 focus:ring-violet-500"
+								/>
+								{#if $errors.name != null}
+									<p class="mt-2 text-sm text-red-600">
+										<span class="font-medium">{$errors.name[0]}</span>
+									</p>
+								{/if}
+							</div>
+							<div class="mb-5">
+								<label
+									for="heir__contactDetails"
+									class="mb-2 block text-sm font-medium text-gray-900"
+								>
+									Contact details
+								</label>
+								<input
+									id="heir__contactDetails"
+									type="text"
+									name="contactDetails"
+									placeholder="jane@identity.net"
+									class="text-greay-900 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-violet-500 focus:ring-violet-500"
+								/>
+								{#if $errors.contactDetails != null}
+									<p class="mt-2 text-sm text-red-600">
+										<span class="font-medium">{$errors.contactDetails[0]}</span>
+									</p>
+								{/if}
+							</div>
+							<button
+								class="focust:outline-none mt-2 rounded-lg bg-violet-700 px-5 py-2.5 text-center font-medium text-white hover:bg-violet-800 focus:ring-4 focus:ring-violet-300"
+								type="submit"
+							>
+								Add new heir
+							</button>
+						</form>
+					</div>
+				{/if}
+				{#each heirs || [] as heir (heir.id)}
+					<div class="mb-2.5 flex w-full flex-col rounded-lg border border-gray-200 p-3.5 shadow">
+						<div class="flex justify-between">
+							<span class="block text-sm font-medium text-gray-900">
+								Contact method: <span class="capitalize">{heir.contactMethod}</span>
+							</span>
+							<button
+								on:click={() => removeHeir(heir)}
+								class="rounded-lg bg-red-600 px-2.5 py-1 text-center text-white hover:bg-red-700 focus:ring-4 focus:ring-violet-300"
+							>
+								Delete heir
+							</button>
+						</div>
+						<div>
+							<span>{heir.name}</span>
+							·
+							<span>{heir.value}</span>
+						</div>
+					</div>
+				{/each}
 			</div>
-			{#if !heirWizard && $account?.heirs.length === 0}
-				<div class="flex flex-col">
-					<button
-						on:click={() => (heirWizard = true)}
-						class="flex h-60 flex-col items-center justify-center gap-3 rounded border border-gray-300 p-2 text-black"
-					>
-						<span class="text-4xl">+</span>
-						<h2 class="text-xl font-semibold">Add a heir</h2>
-					</button>
-				</div>
-			{/if}
-			{#if heirWizard}
-				<div class="mb-4 flex w-full flex-col rounded-lg border border-gray-200 p-3.5 shadow">
-					<form use:form>
-						<div class="mb-5">
-							<label
-								for="heir__contact-method"
-								class="mb-2 block text-sm font-medium text-gray-900"
-							>
-								Contact method
-							</label>
-							<select
-								id="heir__contact-method"
-								name="contactMethod"
-								class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-violet-500 focus:ring-violet-500"
-							>
-								<option value="" selected>Choose a contact method</option>
-								<option value="email">Email</option>
-							</select>
-							{#if $errors.contactMethod != null}
-								<p class="mt-2 text-sm text-red-600">
-									<span class="font-medium">{$errors.contactMethod[0]}</span>
-								</p>
-							{/if}
-						</div>
-						<div class="mb-5">
-							<label for="heir__name" class="mb-2 block text-sm font-medium text-gray-900">
-								Heir name
-							</label>
-							<input
-								id="heir__name"
-								type="text"
-								name="name"
-								placeholder="Jane Doe"
-								class="text-greay-900 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-violet-500 focus:ring-violet-500"
-							/>
-							{#if $errors.name != null}
-								<p class="mt-2 text-sm text-red-600">
-									<span class="font-medium">{$errors.name[0]}</span>
-								</p>
-							{/if}
-						</div>
-						<div class="mb-5">
-							<label
-								for="heir__contactDetails"
-								class="mb-2 block text-sm font-medium text-gray-900"
-							>
-								Contact details
-							</label>
-							<input
-								id="heir__contactDetails"
-								type="text"
-								name="contactDetails"
-								placeholder="jane@identity.net"
-								class="text-greay-900 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-violet-500 focus:ring-violet-500"
-							/>
-							{#if $errors.contactDetails != null}
-								<p class="mt-2 text-sm text-red-600">
-									<span class="font-medium">{$errors.contactDetails[0]}</span>
-								</p>
-							{/if}
-						</div>
-						<button
-							class="focust:outline-none mt-2 rounded-lg bg-violet-700 px-5 py-2.5 text-center font-medium text-white hover:bg-violet-800 focus:ring-4 focus:ring-violet-300"
-							type="submit"
-						>
-							Add new heir
-						</button>
-					</form>
-				</div>
-			{/if}
-			{#each $account?.heirs || [] as heir (heir.value)}
-				<div class="mb-2.5 flex w-full flex-col rounded-lg border border-gray-200 p-3.5 shadow">
-					<div class="flex justify-between">
-						<span class="block text-sm font-medium text-gray-900">
-							Contact method: <span class="capitalize">{heir.contactMethod}</span>
-						</span>
-						<button
-							on:click={() => removeHeir(heir)}
-							class="rounded-lg bg-red-600 px-2.5 py-1 text-center text-white hover:bg-red-700 focus:ring-4 focus:ring-violet-300"
-						>
-							Delete heir
-						</button>
-					</div>
-					<div>
-						<span>{heir.name}</span>
-						·
-						<span>{heir.value}</span>
-					</div>
-				</div>
-			{/each}
-		</div>
+		{/await}
 	</div>
 </div>