diff --git a/messages/en.json b/messages/en.json
index 179a93d..5a5a1e0 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -28,6 +28,7 @@
 	"residents_modal_title_new": "Create a Resident",
 	"residents_modal_title_edit": "Edit Resident",
 	"residents_modal_submit": "Submit",
+	"residents_modal_delete": "Delete",
 	"residents_modal_label_name": "Name",
 	"residents_modal_label_phone": "Phone Number",
 	"settings_title": "Settings",
diff --git a/src/routes/app/residents/+page.server.ts b/src/routes/app/residents/+page.server.ts
index df893b8..7389933 100644
--- a/src/routes/app/residents/+page.server.ts
+++ b/src/routes/app/residents/+page.server.ts
@@ -22,7 +22,7 @@ export const load = async ({ locals }) => {
 };
 
 export const actions = {
-	default: async (event) => {
+	upsert: async (event) => {
 		const form = await event.request.formData();
 
 		if (!form.has('name')) {
@@ -67,4 +67,24 @@ export const actions = {
 			},
 		});
 	},
+	delete: async (event) => {
+		const form = await event.request.formData();
+
+		logger.info('Deleting Resident');
+
+		if (!form.has('id')) {
+			return fail(400, { error: 'id_missing' });
+		}
+
+		const id = form.get('id');
+		if (typeof id !== 'string') {
+			return fail(400, { error: 'invalid_id' });
+		}
+
+		await prisma.resident.delete({
+			where: {
+				id: id,
+			},
+		});
+	},
 };
diff --git a/src/routes/app/residents/+page.svelte b/src/routes/app/residents/+page.svelte
index 363ac24..d33b897 100644
--- a/src/routes/app/residents/+page.svelte
+++ b/src/routes/app/residents/+page.svelte
@@ -4,8 +4,7 @@
 	import { TextInput } from '$lib/components/DataInput';
 	import { ResidentTable, type ResidentItem } from '$lib/components/Residents';
 	import { messages } from '$lib/i18n';
-	import { Phone, UserRound, UserRoundPlus } from 'lucide-svelte';
-	import { fade } from 'svelte/transition';
+	import { Phone, UserRound, UserRoundPlus, X } from 'lucide-svelte';
 	import type { ActionData, PageData } from './$types';
 
 	type Props = {
@@ -39,10 +38,12 @@
 					: messages.residents_modal_title_new()}
 			</h2>
 			<form method="dialog">
-				<button class="btn btn-square btn-ghost btn-sm">✕</button>
+				<Button color="ghost" shape="square" size="sm">
+					<X />
+				</Button>
 			</form>
 		</div>
-		<form method="POST" bind:this={form} use:enhance>
+		<form method="POST" action="?/upsert" bind:this={form} use:enhance>
 			{#if resident}
 				<input type="hidden" name="id" value={resident.id} />
 			{/if}
@@ -58,16 +59,25 @@
 					{messages.residents_modal_label_phone()}
 				{/snippet}
 			</TextInput>
-			<ModalActions>
-				<Button type="submit" block onclick={() => dialog?.close()}
-					>{messages.residents_modal_submit()}</Button
+			<ModalActions class="flex">
+				<Button
+					class="grow"
+					type="submit"
+					formaction="?/delete"
+					color="error"
+					onclick={() => dialog?.close()}
 				>
+					{messages.residents_modal_delete()}
+				</Button>
+				<Button class="grow" type="submit" color="primary" onclick={() => dialog?.close()}>
+					{messages.residents_modal_submit()}
+				</Button>
 			</ModalActions>
 		</form>
 	</ModalBody>
 </Modal>
 
-<div class="mx-auto flex max-w-5xl flex-col items-stretch gap-2" transition:fade>
+<div class="mx-auto flex max-w-5xl flex-col items-stretch gap-2">
 	<div class="flex items-center justify-between">
 		<h1 class="text-4xl">{messages.residents_title()}</h1>
 		<Button