diff --git a/components/employees/NotfallkontaktSection.tsx b/components/employees/NotfallkontaktSection.tsx
index c94d992..1ff4c4a 100644
--- a/components/employees/NotfallkontaktSection.tsx
+++ b/components/employees/NotfallkontaktSection.tsx
@@ -51,63 +51,77 @@ export function NotfallkontaktSection({ employeeId, kontakt }: { employeeId: str
     <div className="border-t border-border pt-6">
       <div className="mb-3 flex items-center justify-between">
         <h3 className="text-xs font-bold uppercase tracking-wide text-brand-700">Notfallkontakt</h3>
-        <div className="flex items-center gap-4">
+        {/* Nur, solange keiner hinterlegt ist: es gibt genau einen. Ein
+            zweites „Hinzufügen" daneben verspräche eine Liste, die es hier
+            nicht gibt — geändert und entfernt wird in der Zeile selbst. */}
+        {!vorhanden && (
           <Button
             variant="ghost"
             size="sm"
             onClick={() => setModalOpen(true)}
             className="!px-1 text-brand-700 hover:!bg-transparent hover:underline"
           >
-            {vorhanden ? (
-              <>
-                <Pencil className="h-3.5 w-3.5" /> Ändern
-              </>
-            ) : (
-              <>
-                <Plus className="h-3.5 w-3.5" /> Hinzufügen
-              </>
-            )}
+            <Plus className="h-3.5 w-3.5" /> Hinzufügen
           </Button>
-          {vorhanden && (
-            <Button
-              variant="icon"
-              onClick={handleEntfernen}
-              pending={entfernt}
-              aria-label="Notfallkontakt entfernen"
-              className="hover:!text-danger-solid"
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-            </Button>
-          )}
-        </div>
+        )}
       </div>
 
+      {/* Dieselbe Tabelle wie bei den Angehörigen darüber, Zeile für Zeile
+          derselbe Aufbau. Vorher stand hier eine Beschreibungsliste — fachlich
+          dasselbe, optisch ein zweiter Baustil im selben Reiter. Zwei Listen
+          von Personen im Umfeld sollen gleich aussehen. */}
       {vorhanden ? (
-        <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
-          <div>
-            <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Name</dt>
-            <dd className="mt-1 text-sm text-ink">{kontakt.name}</dd>
-          </div>
-          <div>
-            <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Telefon</dt>
-            <dd className="mt-1 text-sm font-semibold text-ink">
-              {kontakt.telefon ? (
-                <a
-                  href={`tel:${kontakt.telefon.replace(/\s/g, "")}`}
-                  className="rounded hover:text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
-                >
-                  {kontakt.telefon}
-                </a>
-              ) : (
-                "–"
-              )}
-            </dd>
-          </div>
-          <div>
-            <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Verhältnis</dt>
-            <dd className="mt-1 text-sm text-ink">{kontakt.verhaeltnis || "–"}</dd>
-          </div>
-        </dl>
+        <div className="overflow-x-auto rounded border border-border">
+          <table className="w-full min-w-[600px] text-sm">
+            <thead>
+              <tr className="border-b border-border bg-accent-50 text-left text-xs font-semibold uppercase tracking-wide text-ink-muted">
+                <th className="px-4 py-2.5">Name</th>
+                <th className="px-4 py-2.5">Telefon</th>
+                <th className="px-4 py-2.5">Verhältnis</th>
+                <th className="px-4 py-2.5" />
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-b border-border last:border-0">
+                <td className="px-4 py-2.5 font-semibold text-ink">{kontakt.name}</td>
+                <td className="px-4 py-2.5 text-ink-body">
+                  {kontakt.telefon ? (
+                    // Wählbar: im Ernstfall greift jemand in Eile danach.
+                    <a
+                      href={`tel:${kontakt.telefon.replace(/\s/g, "")}`}
+                      className="rounded font-semibold hover:text-brand-700 hover:underline
+                                 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
+                    >
+                      {kontakt.telefon}
+                    </a>
+                  ) : (
+                    "–"
+                  )}
+                </td>
+                <td className="px-4 py-2.5 text-ink-body">{kontakt.verhaeltnis || "–"}</td>
+                <td className="px-4 py-2.5 text-right">
+                  <Button
+                    variant="icon"
+                    onClick={() => setModalOpen(true)}
+                    aria-label="Notfallkontakt ändern"
+                    className="hover:!text-brand-700"
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button
+                    variant="icon"
+                    onClick={handleEntfernen}
+                    pending={entfernt}
+                    aria-label="Notfallkontakt entfernen"
+                    className="hover:!text-danger-solid"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       ) : (
         <p className="text-sm text-ink-muted">Kein Notfallkontakt hinterlegt.</p>
       )}