diff --git a/frontend/src/lib/components/TextField.svelte b/frontend/src/lib/components/TextField.svelte
index c181b1e..65dc55a 100644
--- a/frontend/src/lib/components/TextField.svelte
+++ b/frontend/src/lib/components/TextField.svelte
@@ -102,5 +102,11 @@
 		class:w-60={width === 'medium'}
 		class:w-95={width === 'large'}
 		class:w-full={width === 'full'}
+		class:readonly
+		class:cursor-not-allowed={readonly}
+		class:bg-gray-200={readonly}
+		class:dark:bg-gray-800={readonly}
+		class:text-gray-500={readonly}
+		class:dark:text-gray-500={readonly}
 	/>
 </label>
diff --git a/frontend/src/routes/recipient/+page.svelte b/frontend/src/routes/recipient/+page.svelte
index 6d14c71..7d71d0c 100644
--- a/frontend/src/routes/recipient/+page.svelte
+++ b/frontend/src/routes/recipient/+page.svelte
@@ -493,7 +493,8 @@
 						maxLength={255}
 						type="email"
 						bind:value={formValues.email}
-						placeholder="bob@example.test">Email</TextField
+						placeholder="bob@example.test"
+						readonly={modalMode === 'update'}>Email</TextField
 					>
 					<TextField
 						minLength={1}