frontend/app/trees/[id]/persons/[personId]/page.tsx

@@ -686,7 +686,19 @@ export default function PersonDetailPage() {
       ) : (
         <div className="flex flex-wrap items-center justify-between gap-2">
           <h1 className="flex flex-wrap items-center gap-3 text-3xl font-semibold">
-            {person.primary_name ?? "Unnamed person"}
+            <span className="inline-flex items-center gap-2">
+              {person.primary_name ?? "Unnamed person"}
+              {person.gender === "male" && (
+                <span title="Male" aria-label="Male" style={{ color: "rgb(120, 159, 172)" }}>
+                  ♂
+                </span>
+              )}
+              {person.gender === "female" && (
+                <span title="Female" aria-label="Female" style={{ color: "rgb(196, 138, 146)" }}>
+                  ♀
+                </span>
+              )}
+            </span>
             {isSelf && (
               <span className="rounded-full bg-bronze/15 px-2.5 py-1 text-xs font-medium text-bronze">
                 This is you