diff --git a/apps/app/messages/en.json b/apps/app/messages/en.json
index 344cccd..d735ece 100644
--- a/apps/app/messages/en.json
+++ b/apps/app/messages/en.json
@@ -4,6 +4,7 @@
 	"accept": "Accept",
 	"add": "Add",
 	"add_administrator": "Add administrator",
+	"add_note": "Add Note",
 	"add_relationship": "Add Relationship",
 	"address": "Address",
 	"admin": "Admin",
diff --git a/apps/app/messages/hu.json b/apps/app/messages/hu.json
index 682c338..f167202 100644
--- a/apps/app/messages/hu.json
+++ b/apps/app/messages/hu.json
@@ -4,6 +4,7 @@
 	"accept": "Elfogadás",
 	"add": "Hozzáadás",
 	"add_administrator": "Adminisztrátor hozzáadása",
+	"add_note": "Jegyzet hozzáadása",
 	"add_relationship": "Kapcsolat hozzáadása",
 	"address": "Cím",
 	"admin": "Adminisztrátor",
diff --git a/apps/app/src/lib/profile/OtherDetails.svelte b/apps/app/src/lib/profile/OtherDetails.svelte
index 4a5cef6..abaa889 100644
--- a/apps/app/src/lib/profile/OtherDetails.svelte
+++ b/apps/app/src/lib/profile/OtherDetails.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { callMessageFunction } from '$lib/i18n';
 	import type { MessageKeys } from '$lib/i18n';
+	import { add_note, notes, theme } from '$lib/paraglide/messages';
 	import type { components } from '$lib/api/api.gen';
 
 	export let person: components['schemas']['PersonProperties'];
@@ -38,15 +39,60 @@
 	};
 </script>
 
-<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
-	{#each person.notes??[] as note}
-		<div class="card bg-base-100 shadow-sm">
-			<div class="card-body">
-				<h2 class="card-title">{note.title}</h2>
-				<p>{note.note}</p>
+<div class="mt-5 flex flex-col gap-2 justify-center items-center">
+	{#each person.notes ?? [] as note, i}
+		<div class="card bg-base-100 shadow-sm relative w-full max-w-xl">
+			<div class="card-body p-4 w-full">
+				{#if editorMode}
+					<input
+						type="text"
+						class="input input-bordered input-sm w-full mb-2"
+						placeholder={theme()}
+						bind:value={note.title}
+						oninput={() => onChange('notes', person.notes)}
+					/>
+					<textarea
+						class="textarea textarea-bordered textarea-sm w-full"
+						placeholder={notes()}
+						bind:value={note.note}
+						oninput={() => onChange('notes', person.notes)}
+					></textarea>
+					<button
+						type="button"
+						class="absolute top-2 right-2 btn btn-xs btn-ghost text-error ml-2"
+						aria-label="Remove note"
+						onclick={() => {
+							person.notes = (person.notes ?? []).filter((_, idx) => idx !== i);
+							onChange('notes', person.notes);
+						}}
+					>
+						&#10005;
+					</button>
+				{:else}
+					<h2 class="card-title">{note.title}</h2>
+					<p class="text-sm text-gray-500">{note.date}</p>
+					<p>{note.note}</p>
+				{/if}
 			</div>
 		</div>
 	{/each}
+	{#if editorMode}
+		<button
+			class="btn btn-accent btn-sm w-auto self-start"
+			onclick={() => {
+				const now = new Date();
+				const formattedDate = now.getFullYear() + '-' +
+					String(now.getMonth() + 1).padStart(2, '0') + '-' +
+					String(now.getDate()).padStart(2, '0');
+				person.notes = [...(person.notes ?? []), { title: '', note: '', date: formattedDate }];
+				onChange('notes', person.notes);
+			}}
+		>
+			{add_note()}
+		</button>
+	{/if}
+</div>
+<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
 	{#each Object.entries(person) as [key, value]}
 		{#if !skipFields.includes(key) && ((value !== undefined && value !== null) || editorMode)}
 			<div>