From 125f9ae77b319d159750d76325c5afbdb1bb7873 Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Wed, 3 Dec 2025 09:55:35 +0100
Subject: [PATCH 1/3] fix: mailto formatting

---
 lib/mv_web/live/member_live/index.ex        | 23 ++++++----
 lib/mv_web/live/member_live/index.html.heex |  7 ++-
 priv/gettext/de/LC_MESSAGES/default.po      | 50 ++++++++++-----------
 priv/gettext/default.pot                    | 50 ++++++++++-----------
 priv/gettext/en/LC_MESSAGES/default.po      | 50 ++++++++++-----------
 5 files changed, 95 insertions(+), 85 deletions(-)

diff --git a/lib/mv_web/live/member_live/index.ex b/lib/mv_web/live/member_live/index.ex
index 3d30d76..67ce522 100644
--- a/lib/mv_web/live/member_live/index.ex
+++ b/lib/mv_web/live/member_live/index.ex
@@ -137,13 +137,7 @@ defmodule MvWeb.MemberLive.Index do
     selected_ids = socket.assigns.selected_members
 
     # Filter members that are in the selection and have email addresses
-    formatted_emails =
-      socket.assigns.members
-      |> Enum.filter(fn member ->
-        MapSet.member?(selected_ids, member.id) && member.email && member.email != ""
-      end)
-      |> Enum.map(&format_member_email/1)
-
+    formatted_emails = format_selected_member_emails(socket.assigns.members, selected_ids)
     email_count = length(formatted_emails)
 
     cond do
@@ -887,9 +881,20 @@ defmodule MvWeb.MemberLive.Index do
     end
   end
 
+  # Filters selected members with email addresses and formats them.
+  # Returns a list of formatted email strings in the format "First Last <email>".
+  # Used by both copy_emails and mailto links.
+  def format_selected_member_emails(members, selected_members) do
+    members
+    |> Enum.filter(fn member ->
+      MapSet.member?(selected_members, member.id) && member.email && member.email != ""
+    end)
+    |> Enum.map(&format_member_email/1)
+  end
+
   # Formats a member's email in the format "First Last <email>"
-  # Used for copy_emails feature to create email-client-friendly format.
-  defp format_member_email(member) do
+  # Used for copy_emails feature and mailto links to create email-client-friendly format.
+  def format_member_email(member) do
     first_name = member.first_name || ""
     last_name = member.last_name || ""
 
diff --git a/lib/mv_web/live/member_live/index.html.heex b/lib/mv_web/live/member_live/index.html.heex
index 58e22b6..9f8851b 100644
--- a/lib/mv_web/live/member_live/index.html.heex
+++ b/lib/mv_web/live/member_live/index.html.heex
@@ -14,7 +14,12 @@
       </.button>
       <.button
         :if={Enum.any?(@members, &MapSet.member?(@selected_members, &1.id))}
-        href={"mailto:?bcc=#{@members |> Enum.filter(&(MapSet.member?(@selected_members, &1.id) && &1.email)) |> Enum.map(& &1.email) |> Enum.join(",")}"}
+        href={
+          "mailto:?bcc=" <>
+          (MvWeb.MemberLive.Index.format_selected_member_emails(@members, @selected_members)
+           |> Enum.join(", ")
+           |> URI.encode())
+        }
         aria-label={gettext("Open email program with BCC recipients")}
       >
         <.icon name="hero-envelope" />
diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po
index 7a76f62..57df5ab 100644
--- a/priv/gettext/de/LC_MESSAGES/default.po
+++ b/priv/gettext/de/LC_MESSAGES/default.po
@@ -15,7 +15,7 @@ msgstr ""
 msgid "Actions"
 msgstr "Aktionen"
 
-#: lib/mv_web/live/member_live/index.html.heex:243
+#: lib/mv_web/live/member_live/index.html.heex:248
 #: lib/mv_web/live/user_live/index.html.heex:72
 #, elixir-autogen, elixir-format
 msgid "Are you sure?"
@@ -28,19 +28,19 @@ msgid "Attempting to reconnect"
 msgstr "Verbindung wird wiederhergestellt"
 
 #: lib/mv_web/live/member_live/form.ex:53
-#: lib/mv_web/live/member_live/index.html.heex:179
+#: lib/mv_web/live/member_live/index.html.heex:184
 #: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr "Stadt"
 
-#: lib/mv_web/live/member_live/index.html.heex:245
+#: lib/mv_web/live/member_live/index.html.heex:250
 #: lib/mv_web/live/user_live/index.html.heex:74
 #, elixir-autogen, elixir-format
 msgid "Delete"
 msgstr "Löschen"
 
-#: lib/mv_web/live/member_live/index.html.heex:237
+#: lib/mv_web/live/member_live/index.html.heex:242
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
 #, elixir-autogen, elixir-format
@@ -54,7 +54,7 @@ msgid "Edit Member"
 msgstr "Mitglied bearbeiten"
 
 #: lib/mv_web/live/member_live/form.ex:47
-#: lib/mv_web/live/member_live/index.html.heex:107
+#: lib/mv_web/live/member_live/index.html.heex:112
 #: lib/mv_web/live/member_live/show.ex:50
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
@@ -70,7 +70,7 @@ msgid "First Name"
 msgstr "Vorname"
 
 #: lib/mv_web/live/member_live/form.ex:50
-#: lib/mv_web/live/member_live/index.html.heex:215
+#: lib/mv_web/live/member_live/index.html.heex:220
 #: lib/mv_web/live/member_live/show.ex:55
 #, elixir-autogen, elixir-format
 msgid "Join Date"
@@ -82,12 +82,12 @@ msgstr "Beitrittsdatum"
 msgid "Last Name"
 msgstr "Nachname"
 
-#: lib/mv_web/live/member_live/index.html.heex:24
+#: lib/mv_web/live/member_live/index.html.heex:29
 #, elixir-autogen, elixir-format
 msgid "New Member"
 msgstr "Neues Mitglied"
 
-#: lib/mv_web/live/member_live/index.html.heex:234
+#: lib/mv_web/live/member_live/index.html.heex:239
 #: lib/mv_web/live/user_live/index.html.heex:63
 #, elixir-autogen, elixir-format
 msgid "Show"
@@ -115,7 +115,7 @@ msgid "Exit Date"
 msgstr "Austrittsdatum"
 
 #: lib/mv_web/live/member_live/form.ex:55
-#: lib/mv_web/live/member_live/index.html.heex:143
+#: lib/mv_web/live/member_live/index.html.heex:148
 #: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
@@ -130,21 +130,21 @@ msgstr "Notizen"
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
 #: lib/mv_web/live/member_live/form.ex:48
-#: lib/mv_web/live/member_live/index.html.heex:224
+#: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/show.ex:51
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr "Bezahlt"
 
 #: lib/mv_web/live/member_live/form.ex:49
-#: lib/mv_web/live/member_live/index.html.heex:197
+#: lib/mv_web/live/member_live/index.html.heex:202
 #: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr "Telefonnummer"
 
 #: lib/mv_web/live/member_live/form.ex:56
-#: lib/mv_web/live/member_live/index.html.heex:161
+#: lib/mv_web/live/member_live/index.html.heex:166
 #: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
@@ -165,7 +165,7 @@ msgid "Saving..."
 msgstr "Speichern..."
 
 #: lib/mv_web/live/member_live/form.ex:54
-#: lib/mv_web/live/member_live/index.html.heex:125
+#: lib/mv_web/live/member_live/index.html.heex:130
 #: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
@@ -176,7 +176,7 @@ msgstr "Straße"
 msgid "Id"
 msgstr "ID"
 
-#: lib/mv_web/live/member_live/index.html.heex:229
+#: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:61
 #: lib/mv_web/live/member_live/show.ex:52
 #, elixir-autogen, elixir-format
@@ -193,7 +193,7 @@ msgstr "Mitglied anzeigen"
 msgid "This is a member record from your database."
 msgstr "Dies ist ein Mitglied aus deiner Datenbank."
 
-#: lib/mv_web/live/member_live/index.html.heex:229
+#: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:60
 #: lib/mv_web/live/member_live/show.ex:52
 #, elixir-autogen, elixir-format
@@ -359,12 +359,12 @@ msgstr "Profil"
 msgid "Required"
 msgstr "Erforderlich"
 
-#: lib/mv_web/live/member_live/index.html.heex:63
+#: lib/mv_web/live/member_live/index.html.heex:68
 #, elixir-autogen, elixir-format
 msgid "Select all members"
 msgstr "Alle Mitglieder auswählen"
 
-#: lib/mv_web/live/member_live/index.html.heex:77
+#: lib/mv_web/live/member_live/index.html.heex:82
 #, elixir-autogen, elixir-format
 msgid "Select member"
 msgstr "Mitglied auswählen"
@@ -550,7 +550,7 @@ msgid "Toggle dark mode"
 msgstr "Dunklen Modus umschalten"
 
 #: lib/mv_web/live/components/search_bar_component.ex:15
-#: lib/mv_web/live/member_live/index.html.heex:34
+#: lib/mv_web/live/member_live/index.html.heex:39
 #, elixir-autogen, elixir-format
 msgid "Search..."
 msgstr "Suchen..."
@@ -566,7 +566,7 @@ msgstr "Benutzer*innen"
 msgid "Click to sort"
 msgstr "Klicke um zu sortieren"
 
-#: lib/mv_web/live/member_live/index.html.heex:89
+#: lib/mv_web/live/member_live/index.html.heex:94
 #, elixir-autogen, elixir-format
 msgid "First name"
 msgstr "Vorname"
@@ -776,7 +776,7 @@ msgstr "Mitglied entverknüpfen"
 msgid "Unlinking scheduled"
 msgstr "Entverknüpfung geplant"
 
-#: lib/mv_web/live/member_live/index.ex:165
+#: lib/mv_web/live/member_live/index.ex:159
 #, elixir-autogen, elixir-format
 msgid "Copied %{count} email address to clipboard"
 msgid_plural "Copied %{count} email addresses to clipboard"
@@ -793,27 +793,27 @@ msgstr "E-Mail-Adressen der ausgewählten Mitglieder kopieren"
 msgid "Copy emails"
 msgstr "E-Mails kopieren"
 
-#: lib/mv_web/live/member_live/index.ex:154
+#: lib/mv_web/live/member_live/index.ex:148
 #, elixir-autogen, elixir-format
 msgid "No email addresses found"
 msgstr "Keine E-Mail-Adressen gefunden"
 
-#: lib/mv_web/live/member_live/index.ex:151
+#: lib/mv_web/live/member_live/index.ex:145
 #, elixir-autogen, elixir-format
 msgid "No members selected"
 msgstr "Keine Mitglieder ausgewählt"
 
-#: lib/mv_web/live/member_live/index.html.heex:18
+#: lib/mv_web/live/member_live/index.html.heex:23
 #, elixir-autogen, elixir-format
 msgid "Open email program with BCC recipients"
 msgstr "E-Mail-Programm mit BCC-Empfänger*innen öffnen"
 
-#: lib/mv_web/live/member_live/index.html.heex:21
+#: lib/mv_web/live/member_live/index.html.heex:26
 #, elixir-autogen, elixir-format
 msgid "Open in email program"
 msgstr "Im E-Mail-Programm öffnen"
 
-#: lib/mv_web/live/member_live/index.ex:174
+#: lib/mv_web/live/member_live/index.ex:168
 #, elixir-autogen, elixir-format
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr "Tipp: E-Mail-Adressen ins BCC-Feld einfügen für Datenschutzkonformität"
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 7229e28..1e0e954 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -16,7 +16,7 @@ msgstr ""
 msgid "Actions"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:243
+#: lib/mv_web/live/member_live/index.html.heex:248
 #: lib/mv_web/live/user_live/index.html.heex:72
 #, elixir-autogen, elixir-format
 msgid "Are you sure?"
@@ -29,19 +29,19 @@ msgid "Attempting to reconnect"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:53
-#: lib/mv_web/live/member_live/index.html.heex:179
+#: lib/mv_web/live/member_live/index.html.heex:184
 #: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:245
+#: lib/mv_web/live/member_live/index.html.heex:250
 #: lib/mv_web/live/user_live/index.html.heex:74
 #, elixir-autogen, elixir-format
 msgid "Delete"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:237
+#: lib/mv_web/live/member_live/index.html.heex:242
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
 #, elixir-autogen, elixir-format
@@ -55,7 +55,7 @@ msgid "Edit Member"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:47
-#: lib/mv_web/live/member_live/index.html.heex:107
+#: lib/mv_web/live/member_live/index.html.heex:112
 #: lib/mv_web/live/member_live/show.ex:50
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
@@ -71,7 +71,7 @@ msgid "First Name"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:50
-#: lib/mv_web/live/member_live/index.html.heex:215
+#: lib/mv_web/live/member_live/index.html.heex:220
 #: lib/mv_web/live/member_live/show.ex:55
 #, elixir-autogen, elixir-format
 msgid "Join Date"
@@ -83,12 +83,12 @@ msgstr ""
 msgid "Last Name"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:24
+#: lib/mv_web/live/member_live/index.html.heex:29
 #, elixir-autogen, elixir-format
 msgid "New Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:234
+#: lib/mv_web/live/member_live/index.html.heex:239
 #: lib/mv_web/live/user_live/index.html.heex:63
 #, elixir-autogen, elixir-format
 msgid "Show"
@@ -116,7 +116,7 @@ msgid "Exit Date"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:55
-#: lib/mv_web/live/member_live/index.html.heex:143
+#: lib/mv_web/live/member_live/index.html.heex:148
 #: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
@@ -131,21 +131,21 @@ msgstr ""
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
 #: lib/mv_web/live/member_live/form.ex:48
-#: lib/mv_web/live/member_live/index.html.heex:224
+#: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/show.ex:51
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:49
-#: lib/mv_web/live/member_live/index.html.heex:197
+#: lib/mv_web/live/member_live/index.html.heex:202
 #: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:56
-#: lib/mv_web/live/member_live/index.html.heex:161
+#: lib/mv_web/live/member_live/index.html.heex:166
 #: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
@@ -166,7 +166,7 @@ msgid "Saving..."
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:54
-#: lib/mv_web/live/member_live/index.html.heex:125
+#: lib/mv_web/live/member_live/index.html.heex:130
 #: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
@@ -177,7 +177,7 @@ msgstr ""
 msgid "Id"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:229
+#: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:61
 #: lib/mv_web/live/member_live/show.ex:52
 #, elixir-autogen, elixir-format
@@ -194,7 +194,7 @@ msgstr ""
 msgid "This is a member record from your database."
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:229
+#: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:60
 #: lib/mv_web/live/member_live/show.ex:52
 #, elixir-autogen, elixir-format
@@ -360,12 +360,12 @@ msgstr ""
 msgid "Required"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:63
+#: lib/mv_web/live/member_live/index.html.heex:68
 #, elixir-autogen, elixir-format
 msgid "Select all members"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:77
+#: lib/mv_web/live/member_live/index.html.heex:82
 #, elixir-autogen, elixir-format
 msgid "Select member"
 msgstr ""
@@ -551,7 +551,7 @@ msgid "Toggle dark mode"
 msgstr ""
 
 #: lib/mv_web/live/components/search_bar_component.ex:15
-#: lib/mv_web/live/member_live/index.html.heex:34
+#: lib/mv_web/live/member_live/index.html.heex:39
 #, elixir-autogen, elixir-format
 msgid "Search..."
 msgstr ""
@@ -567,7 +567,7 @@ msgstr ""
 msgid "Click to sort"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:89
+#: lib/mv_web/live/member_live/index.html.heex:94
 #, elixir-autogen, elixir-format
 msgid "First name"
 msgstr ""
@@ -777,7 +777,7 @@ msgstr ""
 msgid "Unlinking scheduled"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:165
+#: lib/mv_web/live/member_live/index.ex:159
 #, elixir-autogen, elixir-format
 msgid "Copied %{count} email address to clipboard"
 msgid_plural "Copied %{count} email addresses to clipboard"
@@ -794,27 +794,27 @@ msgstr ""
 msgid "Copy emails"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:154
+#: lib/mv_web/live/member_live/index.ex:148
 #, elixir-autogen, elixir-format
 msgid "No email addresses found"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:151
+#: lib/mv_web/live/member_live/index.ex:145
 #, elixir-autogen, elixir-format
 msgid "No members selected"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:18
+#: lib/mv_web/live/member_live/index.html.heex:23
 #, elixir-autogen, elixir-format
 msgid "Open email program with BCC recipients"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:21
+#: lib/mv_web/live/member_live/index.html.heex:26
 #, elixir-autogen, elixir-format
 msgid "Open in email program"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:174
+#: lib/mv_web/live/member_live/index.ex:168
 #, elixir-autogen, elixir-format
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 3b471d5..319bcc3 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -16,7 +16,7 @@ msgstr ""
 msgid "Actions"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:243
+#: lib/mv_web/live/member_live/index.html.heex:248
 #: lib/mv_web/live/user_live/index.html.heex:72
 #, elixir-autogen, elixir-format
 msgid "Are you sure?"
@@ -29,19 +29,19 @@ msgid "Attempting to reconnect"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:53
-#: lib/mv_web/live/member_live/index.html.heex:179
+#: lib/mv_web/live/member_live/index.html.heex:184
 #: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:245
+#: lib/mv_web/live/member_live/index.html.heex:250
 #: lib/mv_web/live/user_live/index.html.heex:74
 #, elixir-autogen, elixir-format
 msgid "Delete"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:237
+#: lib/mv_web/live/member_live/index.html.heex:242
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
 #, elixir-autogen, elixir-format
@@ -55,7 +55,7 @@ msgid "Edit Member"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:47
-#: lib/mv_web/live/member_live/index.html.heex:107
+#: lib/mv_web/live/member_live/index.html.heex:112
 #: lib/mv_web/live/member_live/show.ex:50
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
@@ -71,7 +71,7 @@ msgid "First Name"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:50
-#: lib/mv_web/live/member_live/index.html.heex:215
+#: lib/mv_web/live/member_live/index.html.heex:220
 #: lib/mv_web/live/member_live/show.ex:55
 #, elixir-autogen, elixir-format
 msgid "Join Date"
@@ -83,12 +83,12 @@ msgstr ""
 msgid "Last Name"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:24
+#: lib/mv_web/live/member_live/index.html.heex:29
 #, elixir-autogen, elixir-format
 msgid "New Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:234
+#: lib/mv_web/live/member_live/index.html.heex:239
 #: lib/mv_web/live/user_live/index.html.heex:63
 #, elixir-autogen, elixir-format
 msgid "Show"
@@ -116,7 +116,7 @@ msgid "Exit Date"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:55
-#: lib/mv_web/live/member_live/index.html.heex:143
+#: lib/mv_web/live/member_live/index.html.heex:148
 #: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
@@ -131,21 +131,21 @@ msgstr ""
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
 #: lib/mv_web/live/member_live/form.ex:48
-#: lib/mv_web/live/member_live/index.html.heex:224
+#: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/show.ex:51
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:49
-#: lib/mv_web/live/member_live/index.html.heex:197
+#: lib/mv_web/live/member_live/index.html.heex:202
 #: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:56
-#: lib/mv_web/live/member_live/index.html.heex:161
+#: lib/mv_web/live/member_live/index.html.heex:166
 #: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
@@ -166,7 +166,7 @@ msgid "Saving..."
 msgstr ""
 
 #: lib/mv_web/live/member_live/form.ex:54
-#: lib/mv_web/live/member_live/index.html.heex:125
+#: lib/mv_web/live/member_live/index.html.heex:130
 #: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
@@ -177,7 +177,7 @@ msgstr ""
 msgid "Id"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:229
+#: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:61
 #: lib/mv_web/live/member_live/show.ex:52
 #, elixir-autogen, elixir-format
@@ -194,7 +194,7 @@ msgstr ""
 msgid "This is a member record from your database."
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:229
+#: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:60
 #: lib/mv_web/live/member_live/show.ex:52
 #, elixir-autogen, elixir-format
@@ -360,12 +360,12 @@ msgstr ""
 msgid "Required"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:63
+#: lib/mv_web/live/member_live/index.html.heex:68
 #, elixir-autogen, elixir-format
 msgid "Select all members"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:77
+#: lib/mv_web/live/member_live/index.html.heex:82
 #, elixir-autogen, elixir-format
 msgid "Select member"
 msgstr ""
@@ -551,7 +551,7 @@ msgid "Toggle dark mode"
 msgstr ""
 
 #: lib/mv_web/live/components/search_bar_component.ex:15
-#: lib/mv_web/live/member_live/index.html.heex:34
+#: lib/mv_web/live/member_live/index.html.heex:39
 #, elixir-autogen, elixir-format
 msgid "Search..."
 msgstr ""
@@ -567,7 +567,7 @@ msgstr ""
 msgid "Click to sort"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:89
+#: lib/mv_web/live/member_live/index.html.heex:94
 #, elixir-autogen, elixir-format, fuzzy
 msgid "First name"
 msgstr ""
@@ -777,7 +777,7 @@ msgstr ""
 msgid "Unlinking scheduled"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:165
+#: lib/mv_web/live/member_live/index.ex:159
 #, elixir-autogen, elixir-format
 msgid "Copied %{count} email address to clipboard"
 msgid_plural "Copied %{count} email addresses to clipboard"
@@ -794,27 +794,27 @@ msgstr ""
 msgid "Copy emails"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:154
+#: lib/mv_web/live/member_live/index.ex:148
 #, elixir-autogen, elixir-format
 msgid "No email addresses found"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:151
+#: lib/mv_web/live/member_live/index.ex:145
 #, elixir-autogen, elixir-format, fuzzy
 msgid "No members selected"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:18
+#: lib/mv_web/live/member_live/index.html.heex:23
 #, elixir-autogen, elixir-format
 msgid "Open email program with BCC recipients"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.html.heex:21
+#: lib/mv_web/live/member_live/index.html.heex:26
 #, elixir-autogen, elixir-format
 msgid "Open in email program"
 msgstr ""
 
-#: lib/mv_web/live/member_live/index.ex:174
+#: lib/mv_web/live/member_live/index.ex:168
 #, elixir-autogen, elixir-format
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr ""

From 710cd3538f71d3bf94d15294aa86030630f08b39 Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Wed, 3 Dec 2025 13:34:44 +0100
Subject: [PATCH 2/3] Redesign member view/edit UI with improved accessibility

- Group fields into Personal Data, Custom Fields, and Payment Data sections
- Fix WCAG AA contrast issues and semantic HTML (dt/dd in dl)
- Format mailto links with member name in href attribute
---
 lib/mv_web/live/member_live/form.ex    | 284 +++++++++++++++-----
 lib/mv_web/live/member_live/show.ex    | 344 ++++++++++++++++++++-----
 priv/gettext/de/LC_MESSAGES/default.po | 217 +++++++++++-----
 priv/gettext/default.pot               | 190 +++++++++-----
 priv/gettext/en/LC_MESSAGES/default.po | 222 +++++++++++-----
 5 files changed, 950 insertions(+), 307 deletions(-)

diff --git a/lib/mv_web/live/member_live/form.ex b/lib/mv_web/live/member_live/form.ex
index 5370154..4781cd5 100644
--- a/lib/mv_web/live/member_live/form.ex
+++ b/lib/mv_web/live/member_live/form.ex
@@ -5,80 +5,212 @@ defmodule MvWeb.MemberLive.Form do
   ## Features
   - Create new members with personal information
   - Edit existing member details
-  - Manage custom properties (dynamic fields)
+  - Grouped sections for better organization
+  - Tab navigation (Payments tab disabled, coming soon)
+  - Manage custom properties (dynamic fields, displayed sorted by name)
   - Real-time validation with visual feedback
-  - Link/unlink user accounts
 
-  ## Form Fields
-  **Required:**
-  - first_name, last_name, email
-
-  **Optional:**
-  - phone_number, address fields (city, street, house_number, postal_code)
-  - join_date, exit_date
-  - paid status
-  - notes
-
-  ## Custom Field Values
-  Members can have dynamic custom field values defined by CustomFields.
-  The form dynamically renders inputs based on available CustomFields.
+  ## Form Sections
+  - Personal Data: Name, address, contact information, membership dates, notes
+  - Custom Fields: Dynamic fields in uniform grid layout (displayed sorted by name)
+  - Payment Data: Mockup section (not editable)
 
   ## Events
   - `validate` - Real-time form validation
   - `save` - Submit form (create or update member)
-  - Custom field value management events for adding/removing custom fields
   """
   use MvWeb, :live_view
 
   @impl true
   def render(assigns) do
+    # Sort custom fields by name for display only
+    sorted_custom_fields = Enum.sort_by(assigns.custom_fields, & &1.name)
+    assigns = assign(assigns, :sorted_custom_fields, sorted_custom_fields)
+
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <.header>
-        {@page_title}
-        <:subtitle>
-          {gettext("Fields marked with an asterisk (*) cannot be empty.")}
-        </:subtitle>
-      </.header>
-
       <.form for={@form} id="member-form" phx-change="validate" phx-submit="save">
-        <.input field={@form[:first_name]} label={gettext("First Name")} required />
-        <.input field={@form[:last_name]} label={gettext("Last Name")} required />
-        <.input field={@form[:email]} label={gettext("Email")} required type="email" />
-        <.input field={@form[:paid]} label={gettext("Paid")} type="checkbox" />
-        <.input field={@form[:phone_number]} label={gettext("Phone Number")} />
-        <.input field={@form[:join_date]} label={gettext("Join Date")} type="date" />
-        <.input field={@form[:exit_date]} label={gettext("Exit Date")} type="date" />
-        <.input field={@form[:notes]} label={gettext("Notes")} />
-        <.input field={@form[:city]} label={gettext("City")} />
-        <.input field={@form[:street]} label={gettext("Street")} />
-        <.input field={@form[:house_number]} label={gettext("House Number")} />
-        <.input field={@form[:postal_code]} label={gettext("Postal Code")} />
+        <%!-- Header with Back button, Name display, and Save button --%>
+        <div class="flex items-center justify-between gap-4 pb-4">
+          <.button navigate={return_path(@return_to, @member)} type="button">
+            <.icon name="hero-arrow-left" class="size-4" />
+            {gettext("Back")}
+          </.button>
 
-        <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("Custom Field Values")}</h3>
-        <.inputs_for :let={f_custom_field_value} field={@form[:custom_field_values]}>
-          <% type =
-            Enum.find(@custom_fields, &(&1.id == f_custom_field_value[:custom_field_id].value)) %>
-          <.inputs_for :let={value_form} field={f_custom_field_value[:value]}>
-            <% input_type =
-              cond do
-                type && type.value_type == :boolean -> "checkbox"
-                type && type.value_type == :date -> :date
-                true -> :text
-              end %>
-            <.input field={value_form[:value]} label={type && type.name} type={input_type} />
-          </.inputs_for>
-          <input
-            type="hidden"
-            name={f_custom_field_value[:custom_field_id].name}
-            value={f_custom_field_value[:custom_field_id].value}
-          />
-        </.inputs_for>
+          <h1 class="text-2xl font-bold text-center flex-1">
+            <%= if @member do %>
+              {@member.first_name} {@member.last_name}
+            <% else %>
+              {gettext("New Member")}
+            <% end %>
+          </h1>
 
-        <.button phx-disable-with={gettext("Saving...")} variant="primary">
-          {gettext("Save Member")}
-        </.button>
-        <.button navigate={return_path(@return_to, @member)}>{gettext("Cancel")}</.button>
+          <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+            {gettext("Save")}
+          </.button>
+        </div>
+
+        <%!-- Tab Navigation --%>
+        <div role="tablist" class="tabs tabs-bordered mb-6">
+          <button type="button" role="tab" class="tab tab-active" aria-selected="true">
+            <.icon name="hero-identification" class="size-4 mr-2" />
+            {gettext("Contact Data")}
+          </button>
+          <button
+            type="button"
+            role="tab"
+            class="tab"
+            disabled
+            aria-disabled="true"
+            title={gettext("Coming soon")}
+          >
+            <.icon name="hero-credit-card" class="size-4 mr-2" />
+            {gettext("Payments")}
+          </button>
+        </div>
+
+        <%!-- Personal Data and Custom Fields Row --%>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          <%!-- Personal Data Section --%>
+          <div>
+            <.form_section title={gettext("Personal Data")}>
+              <div class="space-y-4">
+                <%!-- Name Row --%>
+                <div class="flex gap-4">
+                  <div class="w-48">
+                    <.input field={@form[:first_name]} label={gettext("First Name")} required />
+                  </div>
+                  <div class="w-48">
+                    <.input field={@form[:last_name]} label={gettext("Last Name")} required />
+                  </div>
+                </div>
+
+                <%!-- Address Row --%>
+                <div class="flex gap-4">
+                  <div class="flex-1">
+                    <.input field={@form[:street]} label={gettext("Street")} />
+                  </div>
+                  <div class="w-16">
+                    <.input field={@form[:house_number]} label={gettext("Nr.")} />
+                  </div>
+                  <div class="w-24">
+                    <.input field={@form[:postal_code]} label={gettext("Postal Code")} />
+                  </div>
+                  <div class="w-32">
+                    <.input field={@form[:city]} label={gettext("City")} />
+                  </div>
+                </div>
+
+                <%!-- Email --%>
+                <div>
+                  <.input field={@form[:email]} label={gettext("Email")} required type="email" />
+                </div>
+
+                <%!-- Phone --%>
+                <div>
+                  <.input field={@form[:phone_number]} label={gettext("Phone")} type="tel" />
+                </div>
+
+                <%!-- Membership Dates Row --%>
+                <div class="flex gap-4">
+                  <div class="w-36">
+                    <.input field={@form[:join_date]} label={gettext("Join Date")} type="date" />
+                  </div>
+                  <div class="w-36">
+                    <.input field={@form[:exit_date]} label={gettext("Exit Date")} type="date" />
+                  </div>
+                </div>
+
+                <%!-- Notes --%>
+                <div>
+                  <.input field={@form[:notes]} label={gettext("Notes")} type="textarea" />
+                </div>
+              </div>
+            </.form_section>
+          </div>
+
+          <%!-- Custom Fields Section --%>
+          <%= if Enum.any?(@custom_fields) do %>
+            <div>
+              <.form_section title={gettext("Custom Fields")}>
+                <div class="grid grid-cols-2 gap-4">
+                  <%!-- Render in sorted order by finding the form for each sorted custom field --%>
+                  <%= for cf <- @sorted_custom_fields do %>
+                    <.inputs_for :let={f_cfv} field={@form[:custom_field_values]}>
+                      <%= if f_cfv[:custom_field_id].value == cf.id do %>
+                        <div class={if cf.value_type == :boolean, do: "flex items-end", else: ""}>
+                          <.inputs_for :let={value_form} field={f_cfv[:value]}>
+                            <.input
+                              field={value_form[:value]}
+                              label={cf.name}
+                              type={custom_field_input_type(cf.value_type)}
+                            />
+                          </.inputs_for>
+                          <input
+                            type="hidden"
+                            name={f_cfv[:custom_field_id].name}
+                            value={f_cfv[:custom_field_id].value}
+                          />
+                        </div>
+                      <% end %>
+                    </.inputs_for>
+                  <% end %>
+                </div>
+              </.form_section>
+            </div>
+          <% end %>
+        </div>
+
+        <%!-- Payment Data Section (Mockup) --%>
+        <div class="max-w-xl">
+          <.form_section title={gettext("Payment Data")}>
+            <div role="alert" class="alert alert-info mb-4">
+              <.icon name="hero-information-circle" class="size-5" />
+              <span>{gettext("This data is for demonstration purposes only (mockup).")}</span>
+            </div>
+
+            <div class="flex gap-8">
+              <div class="w-24">
+                <label for="mock-contribution" class="label text-sm font-medium">
+                  {gettext("Contribution")}
+                </label>
+                <input
+                  type="text"
+                  id="mock-contribution"
+                  value="72 €"
+                  disabled
+                  class="input input-bordered w-full bg-base-200"
+                />
+              </div>
+              <div class="w-40">
+                <label class="label text-sm font-medium">{gettext("Payment Cycle")}</label>
+                <div class="flex gap-3 mt-2">
+                  <label class="flex items-center gap-1 cursor-not-allowed opacity-60">
+                    <input type="radio" name="mock_cycle" checked disabled class="radio radio-sm" />
+                    <span class="text-sm">{gettext("monthly")}</span>
+                  </label>
+                  <label class="flex items-center gap-1 cursor-not-allowed opacity-60">
+                    <input type="radio" name="mock_cycle" disabled class="radio radio-sm" />
+                    <span class="text-sm">{gettext("yearly")}</span>
+                  </label>
+                </div>
+              </div>
+              <div class="w-24 flex items-end">
+                <.input field={@form[:paid]} label={gettext("Paid")} type="checkbox" />
+              </div>
+            </div>
+          </.form_section>
+        </div>
+
+        <%!-- Bottom Action Buttons --%>
+        <div class="flex justify-end gap-4 mt-6">
+          <.button navigate={return_path(@return_to, @member)} type="button">
+            {gettext("Cancel")}
+          </.button>
+          <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+            {gettext("Save Member")}
+          </.button>
+        </div>
       </.form>
     </Layouts.app>
     """
@@ -106,8 +238,8 @@ defmodule MvWeb.MemberLive.Form do
         id -> Ash.get!(Mv.Membership.Member, id)
       end
 
-    action = if is_nil(member), do: "New", else: "Edit"
-    page_title = action <> " " <> "Member"
+    action = if is_nil(member), do: gettext("New"), else: gettext("Edit")
+    page_title = "#{action} #{gettext("Member")}"
 
     {:ok,
      socket
@@ -213,5 +345,37 @@ defmodule MvWeb.MemberLive.Form do
   end
 
   defp return_path("index", _member), do: ~p"/members"
+  defp return_path("show", nil), do: ~p"/members"
   defp return_path("show", member), do: ~p"/members/#{member.id}"
+
+  # -----------------------------------------------------------------
+  # Helper Components
+  # -----------------------------------------------------------------
+
+  # Renders a form section box with border and title.
+  attr :title, :string, required: true
+  slot :inner_block, required: true
+
+  defp form_section(assigns) do
+    ~H"""
+    <section class="mb-6">
+      <h2 class="text-lg font-semibold mb-3">{@title}</h2>
+      <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+        {render_slot(@inner_block)}
+      </div>
+    </section>
+    """
+  end
+
+  # -----------------------------------------------------------------
+  # Helper Functions for Custom Fields
+  # -----------------------------------------------------------------
+
+  # Returns input type for custom field based on value type
+  defp custom_field_input_type(:string), do: "text"
+  defp custom_field_input_type(:integer), do: "number"
+  defp custom_field_input_type(:boolean), do: "checkbox"
+  defp custom_field_input_type(:date), do: "date"
+  defp custom_field_input_type(:email), do: "email"
+  defp custom_field_input_type(_), do: "text"
 end
diff --git a/lib/mv_web/live/member_live/show.ex b/lib/mv_web/live/member_live/show.ex
index de46a3a..55d8991 100644
--- a/lib/mv_web/live/member_live/show.ex
+++ b/lib/mv_web/live/member_live/show.ex
@@ -3,19 +3,16 @@ defmodule MvWeb.MemberLive.Show do
   LiveView for displaying a single member's details.
 
   ## Features
-  - Display all member information (personal, contact, address)
-  - Show linked user account (if exists)
-  - Display custom field values
+  - Display all member information in grouped sections
+  - Tab navigation for future features (Payments)
+  - Show custom field values with type-based formatting
   - Navigate to edit form
   - Return to member list
 
-  ## Displayed Information
-  - Basic: name, email, dates (join, exit)
-  - Contact: phone number
-  - Address: street, house number, postal code, city
-  - Status: paid flag
-  - Relationships: linked user account
-  - Custom: dynamic custom field values from CustomFields
+  ## Sections
+  - Personal Data: Name, address, contact information, membership dates, notes
+  - Custom Fields: Dynamic fields in uniform grid layout (sorted by name)
+  - Payment Data: Mockup section with placeholder data
 
   ## Navigation
   - Back to member list
@@ -28,66 +25,150 @@ defmodule MvWeb.MemberLive.Show do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <.header>
-        {@member.first_name} {@member.last_name}
-        <:subtitle>{gettext("This is a member record from your database.")}</:subtitle>
+      <%!-- Header with Back button, Name, and Edit button --%>
+      <div class="flex items-center justify-between gap-4 pb-4">
+        <.button navigate={~p"/members"} aria-label={gettext("Back to members list")}>
+          <.icon name="hero-arrow-left" class="size-4" />
+          {gettext("Back")}
+        </.button>
 
-        <:actions>
-          <.button navigate={~p"/members"} aria-label={gettext("Back to members list")}>
-            <.icon name="hero-arrow-left" />
-            <span class="sr-only">{gettext("Back to members list")}</span>
-          </.button>
-          <.button variant="primary" navigate={~p"/members/#{@member}/edit?return_to=show"}>
-            <.icon name="hero-pencil-square" /> {gettext("Edit Member")}
-          </.button>
-        </:actions>
-      </.header>
+        <h1 class="text-2xl font-bold text-center flex-1">
+          {@member.first_name} {@member.last_name}
+        </h1>
 
-      <.list>
-        <:item title={gettext("Id")}>{@member.id}</:item>
-        <:item title={gettext("First Name")}>{@member.first_name}</:item>
-        <:item title={gettext("Last Name")}>{@member.last_name}</:item>
-        <:item title={gettext("Email")}>{@member.email}</:item>
-        <:item title={gettext("Paid")}>
-          {if @member.paid, do: gettext("Yes"), else: gettext("No")}
-        </:item>
-        <:item title={gettext("Phone Number")}>{@member.phone_number}</:item>
-        <:item title={gettext("Join Date")}>{@member.join_date}</:item>
-        <:item title={gettext("Exit Date")}>{@member.exit_date}</:item>
-        <:item title={gettext("Notes")}>{@member.notes}</:item>
-        <:item title={gettext("City")}>{@member.city}</:item>
-        <:item title={gettext("Street")}>{@member.street}</:item>
-        <:item title={gettext("House Number")}>{@member.house_number}</:item>
-        <:item title={gettext("Postal Code")}>{@member.postal_code}</:item>
-        <:item title={gettext("Linked User")}>
-          <%= if @member.user do %>
-            <.link
-              navigate={~p"/users/#{@member.user}"}
-              class="text-blue-600 hover:text-blue-800 underline"
-            >
-              <.icon name="hero-user" class="h-4 w-4 inline mr-1" />
-              {@member.user.email}
-            </.link>
-          <% else %>
-            <span class="text-gray-500 italic">{gettext("No user linked")}</span>
-          <% end %>
-        </:item>
-      </.list>
+        <.button variant="primary" navigate={~p"/members/#{@member}/edit?return_to=show"}>
+          {gettext("Edit Member")}
+        </.button>
+      </div>
 
-      <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("Custom Field Values")}</h3>
-      <.generic_list items={
-        Enum.map(@member.custom_field_values, fn cfv ->
-          {
-            # name
-            cfv.custom_field && cfv.custom_field.name,
-            # value
-            case cfv.value do
-              %{value: v} -> v
-              v -> v
-            end
-          }
-        end)
-      } />
+      <%!-- Tab Navigation --%>
+      <div role="tablist" class="tabs tabs-bordered mb-6">
+        <button role="tab" class="tab tab-active" aria-selected="true">
+          <.icon name="hero-identification" class="size-4 mr-2" />
+          {gettext("Contact Data")}
+        </button>
+        <button role="tab" class="tab" disabled aria-disabled="true" title={gettext("Coming soon")}>
+          <.icon name="hero-credit-card" class="size-4 mr-2" />
+          {gettext("Payments")}
+        </button>
+      </div>
+
+      <%!-- Personal Data and Custom Fields Row --%>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <%!-- Personal Data Section --%>
+        <div>
+          <.section_box title={gettext("Personal Data")}>
+            <div class="space-y-4">
+              <%!-- Name Row --%>
+              <div class="flex gap-6">
+                <.data_field label={gettext("First Name")} value={@member.first_name} class="w-48" />
+                <.data_field label={gettext("Last Name")} value={@member.last_name} class="w-48" />
+              </div>
+
+              <%!-- Address --%>
+              <div>
+                <.data_field label={gettext("Address")} value={format_address(@member)} />
+              </div>
+
+              <%!-- Email --%>
+              <div>
+                <.data_field label={gettext("Email")}>
+                  <a
+                    href={"mailto:#{format_email_mailto(@member.first_name, @member.last_name, @member.email)}"}
+                    class="text-blue-700 hover:text-blue-800 underline"
+                  >
+                    {@member.email}
+                  </a>
+                </.data_field>
+              </div>
+
+              <%!-- Phone --%>
+              <div>
+                <.data_field label={gettext("Phone")} value={@member.phone_number} />
+              </div>
+
+              <%!-- Membership Dates Row --%>
+              <div class="flex gap-6">
+                <.data_field
+                  label={gettext("Join Date")}
+                  value={format_date(@member.join_date)}
+                  class="w-28"
+                />
+                <.data_field
+                  label={gettext("Exit Date")}
+                  value={format_date(@member.exit_date)}
+                  class="w-28"
+                />
+              </div>
+
+              <%!-- Linked User --%>
+              <div>
+                <.data_field label={gettext("Linked User")}>
+                  <%= if @member.user do %>
+                    <.link
+                      navigate={~p"/users/#{@member.user}"}
+                      class="text-blue-700 hover:text-blue-800 underline inline-flex items-center gap-1"
+                    >
+                      <.icon name="hero-user" class="size-4" />
+                      {@member.user.email}
+                    </.link>
+                  <% else %>
+                    <span class="text-base-content/70 italic">{gettext("No user linked")}</span>
+                  <% end %>
+                </.data_field>
+              </div>
+
+              <%!-- Notes --%>
+              <%= if @member.notes && String.trim(@member.notes) != "" do %>
+                <div>
+                  <.data_field label={gettext("Notes")}>
+                    <p class="whitespace-pre-wrap text-base-content/80">{@member.notes}</p>
+                  </.data_field>
+                </div>
+              <% end %>
+            </div>
+          </.section_box>
+        </div>
+
+        <%!-- Custom Fields Section --%>
+        <%= if Enum.any?(@member.custom_field_values) do %>
+          <div>
+            <.section_box title={gettext("Custom Fields")}>
+              <div class="grid grid-cols-2 gap-4">
+                <%= for cfv <- sort_custom_field_values(@member.custom_field_values) do %>
+                  <% custom_field = cfv.custom_field %>
+                  <% value_type = custom_field && custom_field.value_type %>
+                  <.data_field label={custom_field && custom_field.name}>
+                    {format_custom_field_value(cfv.value, value_type)}
+                  </.data_field>
+                <% end %>
+              </div>
+            </.section_box>
+          </div>
+        <% end %>
+      </div>
+
+      <%!-- Payment Data Section (Mockup) --%>
+      <div class="max-w-xl">
+        <.section_box title={gettext("Payment Data")}>
+          <div role="alert" class="alert alert-info mb-4">
+            <.icon name="hero-information-circle" class="size-5" />
+            <span>{gettext("This data is for demonstration purposes only (mockup).")}</span>
+          </div>
+
+          <div class="flex gap-6">
+            <.data_field label={gettext("Contribution")} value="72 €" class="w-24" />
+            <.data_field label={gettext("Payment Cycle")} value={gettext("monthly")} class="w-28" />
+            <.data_field label={gettext("Paid")} class="w-24">
+              <%= if @member.paid do %>
+                <span class="badge badge-success">{gettext("Paid")}</span>
+              <% else %>
+                <span class="badge badge-warning">{gettext("Pending")}</span>
+              <% end %>
+            </.data_field>
+          </div>
+        </.section_box>
+      </div>
     </Layouts.app>
     """
   end
@@ -114,4 +195,133 @@ defmodule MvWeb.MemberLive.Show do
 
   defp page_title(:show), do: gettext("Show Member")
   defp page_title(:edit), do: gettext("Edit Member")
+
+  # -----------------------------------------------------------------
+  # Helper Components
+  # -----------------------------------------------------------------
+
+  # Renders a section box with border and title.
+  attr :title, :string, required: true
+  slot :inner_block, required: true
+
+  defp section_box(assigns) do
+    ~H"""
+    <section class="mb-6">
+      <h2 class="text-lg font-semibold mb-3">{@title}</h2>
+      <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+        {render_slot(@inner_block)}
+      </div>
+    </section>
+    """
+  end
+
+  # Renders a labeled data field.
+  attr :label, :string, required: true
+  attr :value, :string, default: nil
+  attr :class, :string, default: ""
+  slot :inner_block
+
+  defp data_field(assigns) do
+    ~H"""
+    <dl class={@class}>
+      <dt class="text-sm font-medium text-base-content/70">{@label}</dt>
+      <dd class="mt-1 text-base-content">
+        <%= if @inner_block != [] do %>
+          {render_slot(@inner_block)}
+        <% else %>
+          {display_value(@value)}
+        <% end %>
+      </dd>
+    </dl>
+    """
+  end
+
+  # -----------------------------------------------------------------
+  # Helper Functions
+  # -----------------------------------------------------------------
+
+  defp display_value(nil), do: "—"
+  defp display_value(""), do: "—"
+  defp display_value(value), do: value
+
+  defp format_email_mailto(first_name, last_name, email) do
+    name =
+      [first_name, last_name]
+      |> Enum.filter(&(&1 && &1 != ""))
+      |> Enum.join(" ")
+
+    if name != "" do
+      "#{name} <#{email}>"
+    else
+      email
+    end
+  end
+
+  defp format_address(member) do
+    street_part =
+      [member.street, member.house_number]
+      |> Enum.filter(&(&1 && &1 != ""))
+      |> Enum.join(" ")
+
+    city_part =
+      [member.postal_code, member.city]
+      |> Enum.filter(&(&1 && &1 != ""))
+      |> Enum.join(" ")
+
+    [street_part, city_part]
+    |> Enum.filter(&(&1 != ""))
+    |> Enum.join(", ")
+    |> case do
+      "" -> nil
+      address -> address
+    end
+  end
+
+  defp format_date(nil), do: nil
+
+  defp format_date(%Date{} = date) do
+    Calendar.strftime(date, "%d.%m.%Y")
+  end
+
+  defp format_date(date), do: to_string(date)
+
+  # Sorts custom field values by custom field name
+  defp sort_custom_field_values(custom_field_values) do
+    Enum.sort_by(custom_field_values, fn cfv ->
+      (cfv.custom_field && cfv.custom_field.name) || ""
+    end)
+  end
+
+  # Formats custom field value based on type
+  defp format_custom_field_value(%Ash.Union{value: value, type: type}, _expected_type) do
+    format_custom_field_value(value, type)
+  end
+
+  defp format_custom_field_value(nil, _type), do: "—"
+
+  defp format_custom_field_value(value, :boolean) when is_boolean(value) do
+    if value, do: gettext("Yes"), else: gettext("No")
+  end
+
+  defp format_custom_field_value(%Date{} = date, :date) do
+    Calendar.strftime(date, "%d.%m.%Y")
+  end
+
+  defp format_custom_field_value(value, :email) when is_binary(value) do
+    assigns = %{email: value}
+
+    ~H"""
+    <a href={"mailto:#{@email}"} class="text-blue-700 hover:text-blue-800 underline">{@email}</a>
+    """
+  end
+
+  defp format_custom_field_value(value, :integer) when is_integer(value) do
+    Integer.to_string(value)
+  end
+
+  defp format_custom_field_value(value, _type) when is_binary(value) do
+    if String.trim(value) == "", do: "—", else: value
+  end
+
+  defp format_custom_field_value(value, _type), do: to_string(value)
 end
diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po
index 7a76f62..543739b 100644
--- a/priv/gettext/de/LC_MESSAGES/default.po
+++ b/priv/gettext/de/LC_MESSAGES/default.po
@@ -27,9 +27,8 @@ msgstr "Bist du sicher?"
 msgid "Attempting to reconnect"
 msgstr "Verbindung wird wiederhergestellt"
 
-#: lib/mv_web/live/member_live/form.ex:53
+#: lib/mv_web/live/member_live/form.ex:100
 #: lib/mv_web/live/member_live/index.html.heex:179
-#: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr "Stadt"
@@ -40,6 +39,7 @@ msgstr "Stadt"
 msgid "Delete"
 msgstr "Löschen"
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/member_live/index.html.heex:237
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
@@ -47,15 +47,15 @@ msgstr "Löschen"
 msgid "Edit"
 msgstr "Bearbeite"
 
-#: lib/mv_web/live/member_live/show.ex:41
-#: lib/mv_web/live/member_live/show.ex:116
+#: lib/mv_web/live/member_live/show.ex:40
+#: lib/mv_web/live/member_live/show.ex:197
 #, elixir-autogen, elixir-format
 msgid "Edit Member"
 msgstr "Mitglied bearbeiten"
 
-#: lib/mv_web/live/member_live/form.ex:47
+#: lib/mv_web/live/member_live/form.ex:106
 #: lib/mv_web/live/member_live/index.html.heex:107
-#: lib/mv_web/live/member_live/show.ex:50
+#: lib/mv_web/live/member_live/show.ex:75
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
 #: lib/mv_web/live/user_live/show.ex:50
@@ -63,25 +63,26 @@ msgstr "Mitglied bearbeiten"
 msgid "Email"
 msgstr "E-Mail"
 
-#: lib/mv_web/live/member_live/form.ex:45
-#: lib/mv_web/live/member_live/show.ex:48
+#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/show.ex:64
 #, elixir-autogen, elixir-format
 msgid "First Name"
 msgstr "Vorname"
 
-#: lib/mv_web/live/member_live/form.ex:50
+#: lib/mv_web/live/member_live/form.ex:117
 #: lib/mv_web/live/member_live/index.html.heex:215
-#: lib/mv_web/live/member_live/show.ex:55
+#: lib/mv_web/live/member_live/show.ex:93
 #, elixir-autogen, elixir-format
 msgid "Join Date"
 msgstr "Beitrittsdatum"
 
-#: lib/mv_web/live/member_live/form.ex:46
-#: lib/mv_web/live/member_live/show.ex:49
+#: lib/mv_web/live/member_live/form.ex:84
+#: lib/mv_web/live/member_live/show.ex:65
 #, elixir-autogen, elixir-format
 msgid "Last Name"
 msgstr "Nachname"
 
+#: lib/mv_web/live/member_live/form.ex:44
 #: lib/mv_web/live/member_live/index.html.heex:24
 #, elixir-autogen, elixir-format
 msgid "New Member"
@@ -108,49 +109,45 @@ msgstr "Keine Internetverbindung gefunden"
 msgid "close"
 msgstr "schließen"
 
-#: lib/mv_web/live/member_live/form.ex:51
-#: lib/mv_web/live/member_live/show.ex:56
+#: lib/mv_web/live/member_live/form.ex:120
+#: lib/mv_web/live/member_live/show.ex:98
 #, elixir-autogen, elixir-format
 msgid "Exit Date"
 msgstr "Austrittsdatum"
 
-#: lib/mv_web/live/member_live/form.ex:55
 #: lib/mv_web/live/member_live/index.html.heex:143
-#: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
 msgstr "Hausnummer"
 
-#: lib/mv_web/live/member_live/form.ex:52
-#: lib/mv_web/live/member_live/show.ex:57
+#: lib/mv_web/live/member_live/form.ex:126
+#: lib/mv_web/live/member_live/show.ex:124
 #, elixir-autogen, elixir-format
 msgid "Notes"
 msgstr "Notizen"
 
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
-#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:199
 #: lib/mv_web/live/member_live/index.html.heex:224
-#: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:162
+#: lib/mv_web/live/member_live/show.ex:164
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr "Bezahlt"
 
-#: lib/mv_web/live/member_live/form.ex:49
 #: lib/mv_web/live/member_live/index.html.heex:197
-#: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr "Telefonnummer"
 
-#: lib/mv_web/live/member_live/form.ex:56
+#: lib/mv_web/live/member_live/form.ex:97
 #: lib/mv_web/live/member_live/index.html.heex:161
-#: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
 msgstr "Postleitzahl"
 
-#: lib/mv_web/live/member_live/form.ex:79
+#: lib/mv_web/live/member_live/form.ex:211
 #, elixir-autogen, elixir-format
 msgid "Save Member"
 msgstr "Mitglied speichern"
@@ -158,58 +155,48 @@ msgstr "Mitglied speichern"
 #: lib/mv_web/live/custom_field_live/form.ex:66
 #: lib/mv_web/live/custom_field_value_live/form.ex:74
 #: lib/mv_web/live/global_settings_live.ex:55
-#: lib/mv_web/live/member_live/form.ex:78
+#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:210
 #: lib/mv_web/live/user_live/form.ex:248
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr "Speichern..."
 
-#: lib/mv_web/live/member_live/form.ex:54
+#: lib/mv_web/live/member_live/form.ex:91
 #: lib/mv_web/live/member_live/index.html.heex:125
-#: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
 msgstr "Straße"
 
-#: lib/mv_web/live/member_live/show.ex:47
-#, elixir-autogen, elixir-format
-msgid "Id"
-msgstr "ID"
-
 #: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/index/formatter.ex:61
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "No"
 msgstr "Nein"
 
-#: lib/mv_web/live/member_live/show.ex:115
+#: lib/mv_web/live/member_live/show.ex:196
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Show Member"
 msgstr "Mitglied anzeigen"
 
-#: lib/mv_web/live/member_live/show.ex:33
-#, elixir-autogen, elixir-format
-msgid "This is a member record from your database."
-msgstr "Dies ist ein Mitglied aus deiner Datenbank."
-
 #: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/index/formatter.ex:60
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "Yes"
 msgstr "Ja"
 
 #: lib/mv_web/live/custom_field_live/form.ex:110
 #: lib/mv_web/live/custom_field_value_live/form.ex:233
-#: lib/mv_web/live/member_live/form.ex:137
+#: lib/mv_web/live/member_live/form.ex:269
 #, elixir-autogen, elixir-format
 msgid "create"
 msgstr "erstellt"
 
 #: lib/mv_web/live/custom_field_live/form.ex:111
 #: lib/mv_web/live/custom_field_value_live/form.ex:234
-#: lib/mv_web/live/member_live/form.ex:138
+#: lib/mv_web/live/member_live/form.ex:270
 #, elixir-autogen, elixir-format
 msgid "update"
 msgstr "aktualisiert"
@@ -219,7 +206,7 @@ msgstr "aktualisiert"
 msgid "Incorrect email or password"
 msgstr "Falsche E-Mail oder Passwort"
 
-#: lib/mv_web/live/member_live/form.ex:144
+#: lib/mv_web/live/member_live/form.ex:276
 #, elixir-autogen, elixir-format
 msgid "Member %{action} successfully"
 msgstr "Mitglied %{action} erfolgreich"
@@ -252,7 +239,7 @@ msgstr "Ihr Passwort wurde erfolgreich zurückgesetzt"
 #: lib/mv_web/live/custom_field_live/form.ex:69
 #: lib/mv_web/live/custom_field_live/index.ex:120
 #: lib/mv_web/live/custom_field_value_live/form.ex:77
-#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/form.ex:208
 #: lib/mv_web/live/user_live/form.ex:251
 #, elixir-autogen, elixir-format
 msgid "Cancel"
@@ -300,6 +287,7 @@ msgid "Listing Users"
 msgstr "Benutzer*innen auflisten"
 
 #: lib/mv_web/live/custom_field_value_live/form.ex:60
+#: lib/mv_web/live/member_live/form.ex:242
 #, elixir-autogen, elixir-format
 msgid "Member"
 msgstr "Mitglied"
@@ -427,6 +415,7 @@ msgstr "aufsteigend"
 msgid "descending"
 msgstr "absteigend"
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/user_live/form.ex:265
 #, elixir-autogen, elixir-format
 msgid "New"
@@ -509,7 +498,7 @@ msgstr "Benutzer*in wird ohne Passwort erstellt. Aktivieren Sie 'Passwort setzen
 msgid "Linked Member"
 msgstr "Verknüpftes Mitglied"
 
-#: lib/mv_web/live/member_live/show.ex:62
+#: lib/mv_web/live/member_live/show.ex:106
 #, elixir-autogen, elixir-format
 msgid "Linked User"
 msgstr "Verknüpfte*r Benutzer*in"
@@ -520,13 +509,12 @@ msgstr "Verknüpfte*r Benutzer*in"
 msgid "No member linked"
 msgstr "Kein Mitglied verknüpft"
 
-#: lib/mv_web/live/member_live/show.ex:72
+#: lib/mv_web/live/member_live/show.ex:116
 #, elixir-autogen, elixir-format
 msgid "No user linked"
 msgstr "Keine*r Benutzer*in verknüpft"
 
-#: lib/mv_web/live/member_live/show.ex:36
-#: lib/mv_web/live/member_live/show.ex:38
+#: lib/mv_web/live/member_live/show.ex:30
 #, elixir-autogen, elixir-format
 msgid "Back to members list"
 msgstr "Zurück zur Mitgliederliste"
@@ -607,12 +595,6 @@ msgstr "Diese E-Mail-Adresse ist bereits mit einem anderen OIDC-Konto verknüpft
 msgid "Choose a custom field"
 msgstr "Wähle ein Benutzerdefiniertes Feld"
 
-#: lib/mv_web/live/member_live/form.ex:58
-#: lib/mv_web/live/member_live/show.ex:77
-#, elixir-autogen, elixir-format
-msgid "Custom Field Values"
-msgstr "Benutzerdefinierte Feldwerte"
-
 #: lib/mv_web/live/custom_field_value_live/form.ex:51
 #, elixir-autogen, elixir-format
 msgid "Custom field"
@@ -649,6 +631,8 @@ msgid "Use this form to manage custom_field records in your database."
 msgstr "Verwende dieses Formular, um Benutzerdefinierte Felder in deiner Datenbank zu verwalten."
 
 #: lib/mv_web/components/layouts/navbar.ex:26
+#: lib/mv_web/live/member_live/form.ex:135
+#: lib/mv_web/live/member_live/show.ex:136
 #, elixir-autogen, elixir-format
 msgid "Custom Fields"
 msgstr "Benutzerdefinierte Felder"
@@ -818,11 +802,6 @@ msgstr "Im E-Mail-Programm öffnen"
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr "Tipp: E-Mail-Adressen ins BCC-Feld einfügen für Datenschutzkonformität"
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Fields marked with an asterisk (*) cannot be empty."
-msgstr "Felder, die mit einem Sternchen (*) markiert sind, dürfen nicht leer bleiben."
-
 #: lib/mv_web/components/core_components.ex:206
 #: lib/mv_web/components/core_components.ex:223
 #: lib/mv_web/components/core_components.ex:250
@@ -853,8 +832,126 @@ msgstr "Nicht bezahlt"
 msgid "Payment filter"
 msgstr "Zahlungsfilter"
 
+#: lib/mv_web/live/member_live/show.ex:70
+#, elixir-autogen, elixir-format
+msgid "Address"
+msgstr "Adresse"
+
+#: lib/mv_web/live/member_live/form.ex:37
+#: lib/mv_web/live/member_live/show.ex:32
+#, elixir-autogen, elixir-format
+msgid "Back"
+msgstr "Zurück"
+
+#: lib/mv_web/live/member_live/form.ex:65
+#: lib/mv_web/live/member_live/show.ex:50
+#, elixir-autogen, elixir-format
+msgid "Coming soon"
+msgstr "Demnächst verfügbar"
+
+#: lib/mv_web/live/member_live/form.ex:57
+#: lib/mv_web/live/member_live/show.ex:48
+#, elixir-autogen, elixir-format
+msgid "Contact Data"
+msgstr "Kontaktdaten"
+
+#: lib/mv_web/live/member_live/form.ex:175
+#: lib/mv_web/live/member_live/show.ex:160
+#, elixir-autogen, elixir-format
+msgid "Contribution"
+msgstr "Beitrag"
+
+#: lib/mv_web/live/member_live/form.ex:94
+#, elixir-autogen, elixir-format
+msgid "Nr."
+msgstr "Nr."
+
+#: lib/mv_web/live/member_live/form.ex:186
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "Payment Cycle"
+msgstr "Zahlungszyklus"
+
+#: lib/mv_web/live/member_live/form.ex:166
+#: lib/mv_web/live/member_live/show.ex:153
+#, elixir-autogen, elixir-format
+msgid "Payment Data"
+msgstr "Beitragsdaten"
+
+#: lib/mv_web/live/member_live/form.ex:68
+#: lib/mv_web/live/member_live/show.ex:52
+#, elixir-autogen, elixir-format
+msgid "Payments"
+msgstr "Zahlungen"
+
+#: lib/mv_web/live/member_live/show.ex:166
+#, elixir-autogen, elixir-format
+msgid "Pending"
+msgstr "Ausstehend"
+
+#: lib/mv_web/live/member_live/form.ex:76
+#: lib/mv_web/live/member_live/show.ex:60
+#, elixir-autogen, elixir-format
+msgid "Personal Data"
+msgstr "Persönliche Daten"
+
+#: lib/mv_web/live/member_live/form.ex:111
+#: lib/mv_web/live/member_live/show.ex:87
+#, elixir-autogen, elixir-format
+msgid "Phone"
+msgstr "Telefon"
+
+#: lib/mv_web/live/member_live/form.ex:49
+#, elixir-autogen, elixir-format
+msgid "Save"
+msgstr "Speichern"
+
+#: lib/mv_web/live/member_live/form.ex:169
+#: lib/mv_web/live/member_live/show.ex:156
+#, elixir-autogen, elixir-format
+msgid "This data is for demonstration purposes only (mockup)."
+msgstr "Diese Daten dienen nur zu Demonstrationszwecken (Mockup)."
+
+#: lib/mv_web/live/member_live/form.ex:190
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "monthly"
+msgstr "monatlich"
+
+#: lib/mv_web/live/member_live/form.ex:194
+#, elixir-autogen, elixir-format
+msgid "yearly"
+msgstr "jährlich"
+
 #~ #: lib/mv_web/live/member_live/form.ex:48
 #~ #: lib/mv_web/live/member_live/show.ex:51
 #~ #, elixir-autogen, elixir-format
 #~ msgid "Birth Date"
 #~ msgstr "Geburtsdatum"
+
+#~ #: lib/mv_web/live/member_live/form.ex:58
+#~ #: lib/mv_web/live/member_live/show.ex:77
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Custom Field Values"
+#~ msgstr "Benutzerdefinierte Feldwerte"
+
+#~ #: lib/mv_web/live/member_live/form.ex:40
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Fields marked with an asterisk (*) cannot be empty."
+#~ msgstr "Felder, die mit einem Sternchen (*) markiert sind, dürfen nicht leer bleiben."
+
+#~ #: lib/mv_web/live/member_live/form.ex:79
+#~ #: lib/mv_web/live/member_live/show.ex:56
+#~ #, elixir-autogen, elixir-format
+#~ msgid "History"
+#~ msgstr "Historie"
+
+#~ #: lib/mv_web/live/member_live/show.ex:47
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Id"
+#~ msgstr "ID"
+
+#~ #: lib/mv_web/live/member_live/show.ex:33
+#~ #, elixir-autogen, elixir-format
+#~ msgid "This is a member record from your database."
+#~ msgstr "Dies ist ein Mitglied aus deiner Datenbank."
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 7229e28..6fc0b5c 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -28,9 +28,8 @@ msgstr ""
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:53
+#: lib/mv_web/live/member_live/form.ex:100
 #: lib/mv_web/live/member_live/index.html.heex:179
-#: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr ""
@@ -41,6 +40,7 @@ msgstr ""
 msgid "Delete"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/member_live/index.html.heex:237
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
@@ -48,15 +48,15 @@ msgstr ""
 msgid "Edit"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:41
-#: lib/mv_web/live/member_live/show.ex:116
+#: lib/mv_web/live/member_live/show.ex:40
+#: lib/mv_web/live/member_live/show.ex:197
 #, elixir-autogen, elixir-format
 msgid "Edit Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:47
+#: lib/mv_web/live/member_live/form.ex:106
 #: lib/mv_web/live/member_live/index.html.heex:107
-#: lib/mv_web/live/member_live/show.ex:50
+#: lib/mv_web/live/member_live/show.ex:75
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
 #: lib/mv_web/live/user_live/show.ex:50
@@ -64,25 +64,26 @@ msgstr ""
 msgid "Email"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:45
-#: lib/mv_web/live/member_live/show.ex:48
+#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/show.ex:64
 #, elixir-autogen, elixir-format
 msgid "First Name"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:50
+#: lib/mv_web/live/member_live/form.ex:117
 #: lib/mv_web/live/member_live/index.html.heex:215
-#: lib/mv_web/live/member_live/show.ex:55
+#: lib/mv_web/live/member_live/show.ex:93
 #, elixir-autogen, elixir-format
 msgid "Join Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:46
-#: lib/mv_web/live/member_live/show.ex:49
+#: lib/mv_web/live/member_live/form.ex:84
+#: lib/mv_web/live/member_live/show.ex:65
 #, elixir-autogen, elixir-format
 msgid "Last Name"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:44
 #: lib/mv_web/live/member_live/index.html.heex:24
 #, elixir-autogen, elixir-format
 msgid "New Member"
@@ -109,49 +110,45 @@ msgstr ""
 msgid "close"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:51
-#: lib/mv_web/live/member_live/show.ex:56
+#: lib/mv_web/live/member_live/form.ex:120
+#: lib/mv_web/live/member_live/show.ex:98
 #, elixir-autogen, elixir-format
 msgid "Exit Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:55
 #: lib/mv_web/live/member_live/index.html.heex:143
-#: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:52
-#: lib/mv_web/live/member_live/show.ex:57
+#: lib/mv_web/live/member_live/form.ex:126
+#: lib/mv_web/live/member_live/show.ex:124
 #, elixir-autogen, elixir-format
 msgid "Notes"
 msgstr ""
 
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
-#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:199
 #: lib/mv_web/live/member_live/index.html.heex:224
-#: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:162
+#: lib/mv_web/live/member_live/show.ex:164
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:49
 #: lib/mv_web/live/member_live/index.html.heex:197
-#: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:56
+#: lib/mv_web/live/member_live/form.ex:97
 #: lib/mv_web/live/member_live/index.html.heex:161
-#: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:79
+#: lib/mv_web/live/member_live/form.ex:211
 #, elixir-autogen, elixir-format
 msgid "Save Member"
 msgstr ""
@@ -159,58 +156,48 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:66
 #: lib/mv_web/live/custom_field_value_live/form.ex:74
 #: lib/mv_web/live/global_settings_live.ex:55
-#: lib/mv_web/live/member_live/form.ex:78
+#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:210
 #: lib/mv_web/live/user_live/form.ex:248
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:54
+#: lib/mv_web/live/member_live/form.ex:91
 #: lib/mv_web/live/member_live/index.html.heex:125
-#: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:47
-#, elixir-autogen, elixir-format
-msgid "Id"
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/index/formatter.ex:61
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "No"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:115
+#: lib/mv_web/live/member_live/show.ex:196
 #, elixir-autogen, elixir-format
 msgid "Show Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:33
-#, elixir-autogen, elixir-format
-msgid "This is a member record from your database."
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/index/formatter.ex:60
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "Yes"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:110
 #: lib/mv_web/live/custom_field_value_live/form.ex:233
-#: lib/mv_web/live/member_live/form.ex:137
+#: lib/mv_web/live/member_live/form.ex:269
 #, elixir-autogen, elixir-format
 msgid "create"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:111
 #: lib/mv_web/live/custom_field_value_live/form.ex:234
-#: lib/mv_web/live/member_live/form.ex:138
+#: lib/mv_web/live/member_live/form.ex:270
 #, elixir-autogen, elixir-format
 msgid "update"
 msgstr ""
@@ -220,7 +207,7 @@ msgstr ""
 msgid "Incorrect email or password"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:144
+#: lib/mv_web/live/member_live/form.ex:276
 #, elixir-autogen, elixir-format
 msgid "Member %{action} successfully"
 msgstr ""
@@ -253,7 +240,7 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:69
 #: lib/mv_web/live/custom_field_live/index.ex:120
 #: lib/mv_web/live/custom_field_value_live/form.ex:77
-#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/form.ex:208
 #: lib/mv_web/live/user_live/form.ex:251
 #, elixir-autogen, elixir-format
 msgid "Cancel"
@@ -301,6 +288,7 @@ msgid "Listing Users"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_value_live/form.ex:60
+#: lib/mv_web/live/member_live/form.ex:242
 #, elixir-autogen, elixir-format
 msgid "Member"
 msgstr ""
@@ -428,6 +416,7 @@ msgstr ""
 msgid "descending"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/user_live/form.ex:265
 #, elixir-autogen, elixir-format
 msgid "New"
@@ -510,7 +499,7 @@ msgstr ""
 msgid "Linked Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:62
+#: lib/mv_web/live/member_live/show.ex:106
 #, elixir-autogen, elixir-format
 msgid "Linked User"
 msgstr ""
@@ -521,13 +510,12 @@ msgstr ""
 msgid "No member linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:72
+#: lib/mv_web/live/member_live/show.ex:116
 #, elixir-autogen, elixir-format
 msgid "No user linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:36
-#: lib/mv_web/live/member_live/show.ex:38
+#: lib/mv_web/live/member_live/show.ex:30
 #, elixir-autogen, elixir-format
 msgid "Back to members list"
 msgstr ""
@@ -608,12 +596,6 @@ msgstr ""
 msgid "Choose a custom field"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:58
-#: lib/mv_web/live/member_live/show.ex:77
-#, elixir-autogen, elixir-format
-msgid "Custom Field Values"
-msgstr ""
-
 #: lib/mv_web/live/custom_field_value_live/form.ex:51
 #, elixir-autogen, elixir-format
 msgid "Custom field"
@@ -650,6 +632,8 @@ msgid "Use this form to manage custom_field records in your database."
 msgstr ""
 
 #: lib/mv_web/components/layouts/navbar.ex:26
+#: lib/mv_web/live/member_live/form.ex:135
+#: lib/mv_web/live/member_live/show.ex:136
 #, elixir-autogen, elixir-format
 msgid "Custom Fields"
 msgstr ""
@@ -819,11 +803,6 @@ msgstr ""
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Fields marked with an asterisk (*) cannot be empty."
-msgstr ""
-
 #: lib/mv_web/components/core_components.ex:206
 #: lib/mv_web/components/core_components.ex:223
 #: lib/mv_web/components/core_components.ex:250
@@ -853,3 +832,94 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Payment filter"
 msgstr ""
+
+#: lib/mv_web/live/member_live/show.ex:70
+#, elixir-autogen, elixir-format
+msgid "Address"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:37
+#: lib/mv_web/live/member_live/show.ex:32
+#, elixir-autogen, elixir-format
+msgid "Back"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:65
+#: lib/mv_web/live/member_live/show.ex:50
+#, elixir-autogen, elixir-format
+msgid "Coming soon"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:57
+#: lib/mv_web/live/member_live/show.ex:48
+#, elixir-autogen, elixir-format
+msgid "Contact Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:175
+#: lib/mv_web/live/member_live/show.ex:160
+#, elixir-autogen, elixir-format
+msgid "Contribution"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:94
+#, elixir-autogen, elixir-format
+msgid "Nr."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:186
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "Payment Cycle"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:166
+#: lib/mv_web/live/member_live/show.ex:153
+#, elixir-autogen, elixir-format
+msgid "Payment Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:68
+#: lib/mv_web/live/member_live/show.ex:52
+#, elixir-autogen, elixir-format
+msgid "Payments"
+msgstr ""
+
+#: lib/mv_web/live/member_live/show.ex:166
+#, elixir-autogen, elixir-format
+msgid "Pending"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:76
+#: lib/mv_web/live/member_live/show.ex:60
+#, elixir-autogen, elixir-format
+msgid "Personal Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:111
+#: lib/mv_web/live/member_live/show.ex:87
+#, elixir-autogen, elixir-format
+msgid "Phone"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:49
+#, elixir-autogen, elixir-format
+msgid "Save"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:169
+#: lib/mv_web/live/member_live/show.ex:156
+#, elixir-autogen, elixir-format
+msgid "This data is for demonstration purposes only (mockup)."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:190
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "monthly"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:194
+#, elixir-autogen, elixir-format
+msgid "yearly"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 3b471d5..ef8d3c5 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -28,9 +28,8 @@ msgstr ""
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:53
+#: lib/mv_web/live/member_live/form.ex:100
 #: lib/mv_web/live/member_live/index.html.heex:179
-#: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr ""
@@ -41,6 +40,7 @@ msgstr ""
 msgid "Delete"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/member_live/index.html.heex:237
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
@@ -48,15 +48,15 @@ msgstr ""
 msgid "Edit"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:41
-#: lib/mv_web/live/member_live/show.ex:116
+#: lib/mv_web/live/member_live/show.ex:40
+#: lib/mv_web/live/member_live/show.ex:197
 #, elixir-autogen, elixir-format
 msgid "Edit Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:47
+#: lib/mv_web/live/member_live/form.ex:106
 #: lib/mv_web/live/member_live/index.html.heex:107
-#: lib/mv_web/live/member_live/show.ex:50
+#: lib/mv_web/live/member_live/show.ex:75
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
 #: lib/mv_web/live/user_live/show.ex:50
@@ -64,25 +64,26 @@ msgstr ""
 msgid "Email"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:45
-#: lib/mv_web/live/member_live/show.ex:48
+#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/show.ex:64
 #, elixir-autogen, elixir-format
 msgid "First Name"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:50
+#: lib/mv_web/live/member_live/form.ex:117
 #: lib/mv_web/live/member_live/index.html.heex:215
-#: lib/mv_web/live/member_live/show.ex:55
+#: lib/mv_web/live/member_live/show.ex:93
 #, elixir-autogen, elixir-format
 msgid "Join Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:46
-#: lib/mv_web/live/member_live/show.ex:49
+#: lib/mv_web/live/member_live/form.ex:84
+#: lib/mv_web/live/member_live/show.ex:65
 #, elixir-autogen, elixir-format
 msgid "Last Name"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:44
 #: lib/mv_web/live/member_live/index.html.heex:24
 #, elixir-autogen, elixir-format
 msgid "New Member"
@@ -109,49 +110,45 @@ msgstr ""
 msgid "close"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:51
-#: lib/mv_web/live/member_live/show.ex:56
+#: lib/mv_web/live/member_live/form.ex:120
+#: lib/mv_web/live/member_live/show.ex:98
 #, elixir-autogen, elixir-format
 msgid "Exit Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:55
 #: lib/mv_web/live/member_live/index.html.heex:143
-#: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:52
-#: lib/mv_web/live/member_live/show.ex:57
+#: lib/mv_web/live/member_live/form.ex:126
+#: lib/mv_web/live/member_live/show.ex:124
 #, elixir-autogen, elixir-format
 msgid "Notes"
 msgstr ""
 
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
-#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:199
 #: lib/mv_web/live/member_live/index.html.heex:224
-#: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:162
+#: lib/mv_web/live/member_live/show.ex:164
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:49
 #: lib/mv_web/live/member_live/index.html.heex:197
-#: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:56
+#: lib/mv_web/live/member_live/form.ex:97
 #: lib/mv_web/live/member_live/index.html.heex:161
-#: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:79
+#: lib/mv_web/live/member_live/form.ex:211
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Save Member"
 msgstr ""
@@ -159,58 +156,48 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:66
 #: lib/mv_web/live/custom_field_value_live/form.ex:74
 #: lib/mv_web/live/global_settings_live.ex:55
-#: lib/mv_web/live/member_live/form.ex:78
+#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:210
 #: lib/mv_web/live/user_live/form.ex:248
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:54
+#: lib/mv_web/live/member_live/form.ex:91
 #: lib/mv_web/live/member_live/index.html.heex:125
-#: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:47
-#, elixir-autogen, elixir-format
-msgid "Id"
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/index/formatter.ex:61
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "No"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:115
+#: lib/mv_web/live/member_live/show.ex:196
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Show Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:33
-#, elixir-autogen, elixir-format
-msgid "This is a member record from your database."
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:229
 #: lib/mv_web/live/member_live/index/formatter.ex:60
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "Yes"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:110
 #: lib/mv_web/live/custom_field_value_live/form.ex:233
-#: lib/mv_web/live/member_live/form.ex:137
+#: lib/mv_web/live/member_live/form.ex:269
 #, elixir-autogen, elixir-format
 msgid "create"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:111
 #: lib/mv_web/live/custom_field_value_live/form.ex:234
-#: lib/mv_web/live/member_live/form.ex:138
+#: lib/mv_web/live/member_live/form.ex:270
 #, elixir-autogen, elixir-format
 msgid "update"
 msgstr ""
@@ -220,7 +207,7 @@ msgstr ""
 msgid "Incorrect email or password"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:144
+#: lib/mv_web/live/member_live/form.ex:276
 #, elixir-autogen, elixir-format
 msgid "Member %{action} successfully"
 msgstr ""
@@ -253,7 +240,7 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:69
 #: lib/mv_web/live/custom_field_live/index.ex:120
 #: lib/mv_web/live/custom_field_value_live/form.ex:77
-#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/form.ex:208
 #: lib/mv_web/live/user_live/form.ex:251
 #, elixir-autogen, elixir-format
 msgid "Cancel"
@@ -301,6 +288,7 @@ msgid "Listing Users"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_value_live/form.ex:60
+#: lib/mv_web/live/member_live/form.ex:242
 #, elixir-autogen, elixir-format
 msgid "Member"
 msgstr ""
@@ -428,6 +416,7 @@ msgstr ""
 msgid "descending"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/user_live/form.ex:265
 #, elixir-autogen, elixir-format
 msgid "New"
@@ -510,7 +499,7 @@ msgstr "User will be created without a password. Check 'Set Password' to add one
 msgid "Linked Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:62
+#: lib/mv_web/live/member_live/show.ex:106
 #, elixir-autogen, elixir-format
 msgid "Linked User"
 msgstr ""
@@ -521,13 +510,12 @@ msgstr ""
 msgid "No member linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:72
+#: lib/mv_web/live/member_live/show.ex:116
 #, elixir-autogen, elixir-format
 msgid "No user linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:36
-#: lib/mv_web/live/member_live/show.ex:38
+#: lib/mv_web/live/member_live/show.ex:30
 #, elixir-autogen, elixir-format
 msgid "Back to members list"
 msgstr ""
@@ -608,12 +596,6 @@ msgstr ""
 msgid "Choose a custom field"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:58
-#: lib/mv_web/live/member_live/show.ex:77
-#, elixir-autogen, elixir-format
-msgid "Custom Field Values"
-msgstr ""
-
 #: lib/mv_web/live/custom_field_value_live/form.ex:51
 #, elixir-autogen, elixir-format
 msgid "Custom field"
@@ -650,6 +632,8 @@ msgid "Use this form to manage custom_field records in your database."
 msgstr ""
 
 #: lib/mv_web/components/layouts/navbar.ex:26
+#: lib/mv_web/live/member_live/form.ex:135
+#: lib/mv_web/live/member_live/show.ex:136
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Custom Fields"
 msgstr ""
@@ -819,11 +803,6 @@ msgstr ""
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Fields marked with an asterisk (*) cannot be empty."
-msgstr ""
-
 #: lib/mv_web/components/core_components.ex:206
 #: lib/mv_web/components/core_components.ex:223
 #: lib/mv_web/components/core_components.ex:250
@@ -854,8 +833,131 @@ msgstr ""
 msgid "Payment filter"
 msgstr ""
 
+#: lib/mv_web/live/member_live/show.ex:70
+#, elixir-autogen, elixir-format
+msgid "Address"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:37
+#: lib/mv_web/live/member_live/show.ex:32
+#, elixir-autogen, elixir-format
+msgid "Back"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:65
+#: lib/mv_web/live/member_live/show.ex:50
+#, elixir-autogen, elixir-format
+msgid "Coming soon"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:57
+#: lib/mv_web/live/member_live/show.ex:48
+#, elixir-autogen, elixir-format
+msgid "Contact Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:175
+#: lib/mv_web/live/member_live/show.ex:160
+#, elixir-autogen, elixir-format
+msgid "Contribution"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:94
+#, elixir-autogen, elixir-format
+msgid "Nr."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:186
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Payment Cycle"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:166
+#: lib/mv_web/live/member_live/show.ex:153
+#, elixir-autogen, elixir-format
+msgid "Payment Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:68
+#: lib/mv_web/live/member_live/show.ex:52
+#, elixir-autogen, elixir-format
+msgid "Payments"
+msgstr ""
+
+#: lib/mv_web/live/member_live/show.ex:166
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Pending"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:76
+#: lib/mv_web/live/member_live/show.ex:60
+#, elixir-autogen, elixir-format
+msgid "Personal Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:111
+#: lib/mv_web/live/member_live/show.ex:87
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Phone"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:49
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Save"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:169
+#: lib/mv_web/live/member_live/show.ex:156
+#, elixir-autogen, elixir-format
+msgid "This data is for demonstration purposes only (mockup)."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:190
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "monthly"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:194
+#, elixir-autogen, elixir-format
+msgid "yearly"
+msgstr ""
+
 #~ #: lib/mv_web/live/member_live/form.ex:48
 #~ #: lib/mv_web/live/member_live/show.ex:51
 #~ #, elixir-autogen, elixir-format
 #~ msgid "Birth Date"
 #~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/form.ex:58
+#~ #: lib/mv_web/live/member_live/show.ex:77
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Custom Field Values"
+#~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/form.ex:40
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Fields marked with an asterisk (*) cannot be empty."
+#~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/form.ex:79
+#~ #: lib/mv_web/live/member_live/show.ex:56
+#~ #, elixir-autogen, elixir-format
+#~ msgid "History"
+#~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/show.ex:47
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Id"
+#~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/show.ex:161
+#~ #, elixir-autogen, elixir-format, fuzzy
+#~ msgid "Paid at"
+#~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/show.ex:33
+#~ #, elixir-autogen, elixir-format
+#~ msgid "This is a member record from your database."
+#~ msgstr ""

From d24096ceafdedc877eb904f7022cb7c66697d999 Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Wed, 3 Dec 2025 13:34:44 +0100
Subject: [PATCH 3/3] Redesign member view/edit UI with improved accessibility

- Group fields into Personal Data, Custom Fields, and Payment Data sections
- Fix WCAG AA contrast issues and semantic HTML (dt/dd in dl)
- Format mailto links with member name in href attribute
---
 lib/mv_web/live/member_live/form.ex    | 284 +++++++++++++++-----
 lib/mv_web/live/member_live/show.ex    | 344 ++++++++++++++++++++-----
 priv/gettext/de/LC_MESSAGES/default.po | 202 ++++++++++-----
 priv/gettext/default.pot               | 190 +++++++++-----
 priv/gettext/en/LC_MESSAGES/default.po | 200 +++++++++-----
 5 files changed, 906 insertions(+), 314 deletions(-)

diff --git a/lib/mv_web/live/member_live/form.ex b/lib/mv_web/live/member_live/form.ex
index 5370154..4781cd5 100644
--- a/lib/mv_web/live/member_live/form.ex
+++ b/lib/mv_web/live/member_live/form.ex
@@ -5,80 +5,212 @@ defmodule MvWeb.MemberLive.Form do
   ## Features
   - Create new members with personal information
   - Edit existing member details
-  - Manage custom properties (dynamic fields)
+  - Grouped sections for better organization
+  - Tab navigation (Payments tab disabled, coming soon)
+  - Manage custom properties (dynamic fields, displayed sorted by name)
   - Real-time validation with visual feedback
-  - Link/unlink user accounts
 
-  ## Form Fields
-  **Required:**
-  - first_name, last_name, email
-
-  **Optional:**
-  - phone_number, address fields (city, street, house_number, postal_code)
-  - join_date, exit_date
-  - paid status
-  - notes
-
-  ## Custom Field Values
-  Members can have dynamic custom field values defined by CustomFields.
-  The form dynamically renders inputs based on available CustomFields.
+  ## Form Sections
+  - Personal Data: Name, address, contact information, membership dates, notes
+  - Custom Fields: Dynamic fields in uniform grid layout (displayed sorted by name)
+  - Payment Data: Mockup section (not editable)
 
   ## Events
   - `validate` - Real-time form validation
   - `save` - Submit form (create or update member)
-  - Custom field value management events for adding/removing custom fields
   """
   use MvWeb, :live_view
 
   @impl true
   def render(assigns) do
+    # Sort custom fields by name for display only
+    sorted_custom_fields = Enum.sort_by(assigns.custom_fields, & &1.name)
+    assigns = assign(assigns, :sorted_custom_fields, sorted_custom_fields)
+
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <.header>
-        {@page_title}
-        <:subtitle>
-          {gettext("Fields marked with an asterisk (*) cannot be empty.")}
-        </:subtitle>
-      </.header>
-
       <.form for={@form} id="member-form" phx-change="validate" phx-submit="save">
-        <.input field={@form[:first_name]} label={gettext("First Name")} required />
-        <.input field={@form[:last_name]} label={gettext("Last Name")} required />
-        <.input field={@form[:email]} label={gettext("Email")} required type="email" />
-        <.input field={@form[:paid]} label={gettext("Paid")} type="checkbox" />
-        <.input field={@form[:phone_number]} label={gettext("Phone Number")} />
-        <.input field={@form[:join_date]} label={gettext("Join Date")} type="date" />
-        <.input field={@form[:exit_date]} label={gettext("Exit Date")} type="date" />
-        <.input field={@form[:notes]} label={gettext("Notes")} />
-        <.input field={@form[:city]} label={gettext("City")} />
-        <.input field={@form[:street]} label={gettext("Street")} />
-        <.input field={@form[:house_number]} label={gettext("House Number")} />
-        <.input field={@form[:postal_code]} label={gettext("Postal Code")} />
+        <%!-- Header with Back button, Name display, and Save button --%>
+        <div class="flex items-center justify-between gap-4 pb-4">
+          <.button navigate={return_path(@return_to, @member)} type="button">
+            <.icon name="hero-arrow-left" class="size-4" />
+            {gettext("Back")}
+          </.button>
 
-        <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("Custom Field Values")}</h3>
-        <.inputs_for :let={f_custom_field_value} field={@form[:custom_field_values]}>
-          <% type =
-            Enum.find(@custom_fields, &(&1.id == f_custom_field_value[:custom_field_id].value)) %>
-          <.inputs_for :let={value_form} field={f_custom_field_value[:value]}>
-            <% input_type =
-              cond do
-                type && type.value_type == :boolean -> "checkbox"
-                type && type.value_type == :date -> :date
-                true -> :text
-              end %>
-            <.input field={value_form[:value]} label={type && type.name} type={input_type} />
-          </.inputs_for>
-          <input
-            type="hidden"
-            name={f_custom_field_value[:custom_field_id].name}
-            value={f_custom_field_value[:custom_field_id].value}
-          />
-        </.inputs_for>
+          <h1 class="text-2xl font-bold text-center flex-1">
+            <%= if @member do %>
+              {@member.first_name} {@member.last_name}
+            <% else %>
+              {gettext("New Member")}
+            <% end %>
+          </h1>
 
-        <.button phx-disable-with={gettext("Saving...")} variant="primary">
-          {gettext("Save Member")}
-        </.button>
-        <.button navigate={return_path(@return_to, @member)}>{gettext("Cancel")}</.button>
+          <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+            {gettext("Save")}
+          </.button>
+        </div>
+
+        <%!-- Tab Navigation --%>
+        <div role="tablist" class="tabs tabs-bordered mb-6">
+          <button type="button" role="tab" class="tab tab-active" aria-selected="true">
+            <.icon name="hero-identification" class="size-4 mr-2" />
+            {gettext("Contact Data")}
+          </button>
+          <button
+            type="button"
+            role="tab"
+            class="tab"
+            disabled
+            aria-disabled="true"
+            title={gettext("Coming soon")}
+          >
+            <.icon name="hero-credit-card" class="size-4 mr-2" />
+            {gettext("Payments")}
+          </button>
+        </div>
+
+        <%!-- Personal Data and Custom Fields Row --%>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          <%!-- Personal Data Section --%>
+          <div>
+            <.form_section title={gettext("Personal Data")}>
+              <div class="space-y-4">
+                <%!-- Name Row --%>
+                <div class="flex gap-4">
+                  <div class="w-48">
+                    <.input field={@form[:first_name]} label={gettext("First Name")} required />
+                  </div>
+                  <div class="w-48">
+                    <.input field={@form[:last_name]} label={gettext("Last Name")} required />
+                  </div>
+                </div>
+
+                <%!-- Address Row --%>
+                <div class="flex gap-4">
+                  <div class="flex-1">
+                    <.input field={@form[:street]} label={gettext("Street")} />
+                  </div>
+                  <div class="w-16">
+                    <.input field={@form[:house_number]} label={gettext("Nr.")} />
+                  </div>
+                  <div class="w-24">
+                    <.input field={@form[:postal_code]} label={gettext("Postal Code")} />
+                  </div>
+                  <div class="w-32">
+                    <.input field={@form[:city]} label={gettext("City")} />
+                  </div>
+                </div>
+
+                <%!-- Email --%>
+                <div>
+                  <.input field={@form[:email]} label={gettext("Email")} required type="email" />
+                </div>
+
+                <%!-- Phone --%>
+                <div>
+                  <.input field={@form[:phone_number]} label={gettext("Phone")} type="tel" />
+                </div>
+
+                <%!-- Membership Dates Row --%>
+                <div class="flex gap-4">
+                  <div class="w-36">
+                    <.input field={@form[:join_date]} label={gettext("Join Date")} type="date" />
+                  </div>
+                  <div class="w-36">
+                    <.input field={@form[:exit_date]} label={gettext("Exit Date")} type="date" />
+                  </div>
+                </div>
+
+                <%!-- Notes --%>
+                <div>
+                  <.input field={@form[:notes]} label={gettext("Notes")} type="textarea" />
+                </div>
+              </div>
+            </.form_section>
+          </div>
+
+          <%!-- Custom Fields Section --%>
+          <%= if Enum.any?(@custom_fields) do %>
+            <div>
+              <.form_section title={gettext("Custom Fields")}>
+                <div class="grid grid-cols-2 gap-4">
+                  <%!-- Render in sorted order by finding the form for each sorted custom field --%>
+                  <%= for cf <- @sorted_custom_fields do %>
+                    <.inputs_for :let={f_cfv} field={@form[:custom_field_values]}>
+                      <%= if f_cfv[:custom_field_id].value == cf.id do %>
+                        <div class={if cf.value_type == :boolean, do: "flex items-end", else: ""}>
+                          <.inputs_for :let={value_form} field={f_cfv[:value]}>
+                            <.input
+                              field={value_form[:value]}
+                              label={cf.name}
+                              type={custom_field_input_type(cf.value_type)}
+                            />
+                          </.inputs_for>
+                          <input
+                            type="hidden"
+                            name={f_cfv[:custom_field_id].name}
+                            value={f_cfv[:custom_field_id].value}
+                          />
+                        </div>
+                      <% end %>
+                    </.inputs_for>
+                  <% end %>
+                </div>
+              </.form_section>
+            </div>
+          <% end %>
+        </div>
+
+        <%!-- Payment Data Section (Mockup) --%>
+        <div class="max-w-xl">
+          <.form_section title={gettext("Payment Data")}>
+            <div role="alert" class="alert alert-info mb-4">
+              <.icon name="hero-information-circle" class="size-5" />
+              <span>{gettext("This data is for demonstration purposes only (mockup).")}</span>
+            </div>
+
+            <div class="flex gap-8">
+              <div class="w-24">
+                <label for="mock-contribution" class="label text-sm font-medium">
+                  {gettext("Contribution")}
+                </label>
+                <input
+                  type="text"
+                  id="mock-contribution"
+                  value="72 €"
+                  disabled
+                  class="input input-bordered w-full bg-base-200"
+                />
+              </div>
+              <div class="w-40">
+                <label class="label text-sm font-medium">{gettext("Payment Cycle")}</label>
+                <div class="flex gap-3 mt-2">
+                  <label class="flex items-center gap-1 cursor-not-allowed opacity-60">
+                    <input type="radio" name="mock_cycle" checked disabled class="radio radio-sm" />
+                    <span class="text-sm">{gettext("monthly")}</span>
+                  </label>
+                  <label class="flex items-center gap-1 cursor-not-allowed opacity-60">
+                    <input type="radio" name="mock_cycle" disabled class="radio radio-sm" />
+                    <span class="text-sm">{gettext("yearly")}</span>
+                  </label>
+                </div>
+              </div>
+              <div class="w-24 flex items-end">
+                <.input field={@form[:paid]} label={gettext("Paid")} type="checkbox" />
+              </div>
+            </div>
+          </.form_section>
+        </div>
+
+        <%!-- Bottom Action Buttons --%>
+        <div class="flex justify-end gap-4 mt-6">
+          <.button navigate={return_path(@return_to, @member)} type="button">
+            {gettext("Cancel")}
+          </.button>
+          <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+            {gettext("Save Member")}
+          </.button>
+        </div>
       </.form>
     </Layouts.app>
     """
@@ -106,8 +238,8 @@ defmodule MvWeb.MemberLive.Form do
         id -> Ash.get!(Mv.Membership.Member, id)
       end
 
-    action = if is_nil(member), do: "New", else: "Edit"
-    page_title = action <> " " <> "Member"
+    action = if is_nil(member), do: gettext("New"), else: gettext("Edit")
+    page_title = "#{action} #{gettext("Member")}"
 
     {:ok,
      socket
@@ -213,5 +345,37 @@ defmodule MvWeb.MemberLive.Form do
   end
 
   defp return_path("index", _member), do: ~p"/members"
+  defp return_path("show", nil), do: ~p"/members"
   defp return_path("show", member), do: ~p"/members/#{member.id}"
+
+  # -----------------------------------------------------------------
+  # Helper Components
+  # -----------------------------------------------------------------
+
+  # Renders a form section box with border and title.
+  attr :title, :string, required: true
+  slot :inner_block, required: true
+
+  defp form_section(assigns) do
+    ~H"""
+    <section class="mb-6">
+      <h2 class="text-lg font-semibold mb-3">{@title}</h2>
+      <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+        {render_slot(@inner_block)}
+      </div>
+    </section>
+    """
+  end
+
+  # -----------------------------------------------------------------
+  # Helper Functions for Custom Fields
+  # -----------------------------------------------------------------
+
+  # Returns input type for custom field based on value type
+  defp custom_field_input_type(:string), do: "text"
+  defp custom_field_input_type(:integer), do: "number"
+  defp custom_field_input_type(:boolean), do: "checkbox"
+  defp custom_field_input_type(:date), do: "date"
+  defp custom_field_input_type(:email), do: "email"
+  defp custom_field_input_type(_), do: "text"
 end
diff --git a/lib/mv_web/live/member_live/show.ex b/lib/mv_web/live/member_live/show.ex
index de46a3a..55d8991 100644
--- a/lib/mv_web/live/member_live/show.ex
+++ b/lib/mv_web/live/member_live/show.ex
@@ -3,19 +3,16 @@ defmodule MvWeb.MemberLive.Show do
   LiveView for displaying a single member's details.
 
   ## Features
-  - Display all member information (personal, contact, address)
-  - Show linked user account (if exists)
-  - Display custom field values
+  - Display all member information in grouped sections
+  - Tab navigation for future features (Payments)
+  - Show custom field values with type-based formatting
   - Navigate to edit form
   - Return to member list
 
-  ## Displayed Information
-  - Basic: name, email, dates (join, exit)
-  - Contact: phone number
-  - Address: street, house number, postal code, city
-  - Status: paid flag
-  - Relationships: linked user account
-  - Custom: dynamic custom field values from CustomFields
+  ## Sections
+  - Personal Data: Name, address, contact information, membership dates, notes
+  - Custom Fields: Dynamic fields in uniform grid layout (sorted by name)
+  - Payment Data: Mockup section with placeholder data
 
   ## Navigation
   - Back to member list
@@ -28,66 +25,150 @@ defmodule MvWeb.MemberLive.Show do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <.header>
-        {@member.first_name} {@member.last_name}
-        <:subtitle>{gettext("This is a member record from your database.")}</:subtitle>
+      <%!-- Header with Back button, Name, and Edit button --%>
+      <div class="flex items-center justify-between gap-4 pb-4">
+        <.button navigate={~p"/members"} aria-label={gettext("Back to members list")}>
+          <.icon name="hero-arrow-left" class="size-4" />
+          {gettext("Back")}
+        </.button>
 
-        <:actions>
-          <.button navigate={~p"/members"} aria-label={gettext("Back to members list")}>
-            <.icon name="hero-arrow-left" />
-            <span class="sr-only">{gettext("Back to members list")}</span>
-          </.button>
-          <.button variant="primary" navigate={~p"/members/#{@member}/edit?return_to=show"}>
-            <.icon name="hero-pencil-square" /> {gettext("Edit Member")}
-          </.button>
-        </:actions>
-      </.header>
+        <h1 class="text-2xl font-bold text-center flex-1">
+          {@member.first_name} {@member.last_name}
+        </h1>
 
-      <.list>
-        <:item title={gettext("Id")}>{@member.id}</:item>
-        <:item title={gettext("First Name")}>{@member.first_name}</:item>
-        <:item title={gettext("Last Name")}>{@member.last_name}</:item>
-        <:item title={gettext("Email")}>{@member.email}</:item>
-        <:item title={gettext("Paid")}>
-          {if @member.paid, do: gettext("Yes"), else: gettext("No")}
-        </:item>
-        <:item title={gettext("Phone Number")}>{@member.phone_number}</:item>
-        <:item title={gettext("Join Date")}>{@member.join_date}</:item>
-        <:item title={gettext("Exit Date")}>{@member.exit_date}</:item>
-        <:item title={gettext("Notes")}>{@member.notes}</:item>
-        <:item title={gettext("City")}>{@member.city}</:item>
-        <:item title={gettext("Street")}>{@member.street}</:item>
-        <:item title={gettext("House Number")}>{@member.house_number}</:item>
-        <:item title={gettext("Postal Code")}>{@member.postal_code}</:item>
-        <:item title={gettext("Linked User")}>
-          <%= if @member.user do %>
-            <.link
-              navigate={~p"/users/#{@member.user}"}
-              class="text-blue-600 hover:text-blue-800 underline"
-            >
-              <.icon name="hero-user" class="h-4 w-4 inline mr-1" />
-              {@member.user.email}
-            </.link>
-          <% else %>
-            <span class="text-gray-500 italic">{gettext("No user linked")}</span>
-          <% end %>
-        </:item>
-      </.list>
+        <.button variant="primary" navigate={~p"/members/#{@member}/edit?return_to=show"}>
+          {gettext("Edit Member")}
+        </.button>
+      </div>
 
-      <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("Custom Field Values")}</h3>
-      <.generic_list items={
-        Enum.map(@member.custom_field_values, fn cfv ->
-          {
-            # name
-            cfv.custom_field && cfv.custom_field.name,
-            # value
-            case cfv.value do
-              %{value: v} -> v
-              v -> v
-            end
-          }
-        end)
-      } />
+      <%!-- Tab Navigation --%>
+      <div role="tablist" class="tabs tabs-bordered mb-6">
+        <button role="tab" class="tab tab-active" aria-selected="true">
+          <.icon name="hero-identification" class="size-4 mr-2" />
+          {gettext("Contact Data")}
+        </button>
+        <button role="tab" class="tab" disabled aria-disabled="true" title={gettext("Coming soon")}>
+          <.icon name="hero-credit-card" class="size-4 mr-2" />
+          {gettext("Payments")}
+        </button>
+      </div>
+
+      <%!-- Personal Data and Custom Fields Row --%>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <%!-- Personal Data Section --%>
+        <div>
+          <.section_box title={gettext("Personal Data")}>
+            <div class="space-y-4">
+              <%!-- Name Row --%>
+              <div class="flex gap-6">
+                <.data_field label={gettext("First Name")} value={@member.first_name} class="w-48" />
+                <.data_field label={gettext("Last Name")} value={@member.last_name} class="w-48" />
+              </div>
+
+              <%!-- Address --%>
+              <div>
+                <.data_field label={gettext("Address")} value={format_address(@member)} />
+              </div>
+
+              <%!-- Email --%>
+              <div>
+                <.data_field label={gettext("Email")}>
+                  <a
+                    href={"mailto:#{format_email_mailto(@member.first_name, @member.last_name, @member.email)}"}
+                    class="text-blue-700 hover:text-blue-800 underline"
+                  >
+                    {@member.email}
+                  </a>
+                </.data_field>
+              </div>
+
+              <%!-- Phone --%>
+              <div>
+                <.data_field label={gettext("Phone")} value={@member.phone_number} />
+              </div>
+
+              <%!-- Membership Dates Row --%>
+              <div class="flex gap-6">
+                <.data_field
+                  label={gettext("Join Date")}
+                  value={format_date(@member.join_date)}
+                  class="w-28"
+                />
+                <.data_field
+                  label={gettext("Exit Date")}
+                  value={format_date(@member.exit_date)}
+                  class="w-28"
+                />
+              </div>
+
+              <%!-- Linked User --%>
+              <div>
+                <.data_field label={gettext("Linked User")}>
+                  <%= if @member.user do %>
+                    <.link
+                      navigate={~p"/users/#{@member.user}"}
+                      class="text-blue-700 hover:text-blue-800 underline inline-flex items-center gap-1"
+                    >
+                      <.icon name="hero-user" class="size-4" />
+                      {@member.user.email}
+                    </.link>
+                  <% else %>
+                    <span class="text-base-content/70 italic">{gettext("No user linked")}</span>
+                  <% end %>
+                </.data_field>
+              </div>
+
+              <%!-- Notes --%>
+              <%= if @member.notes && String.trim(@member.notes) != "" do %>
+                <div>
+                  <.data_field label={gettext("Notes")}>
+                    <p class="whitespace-pre-wrap text-base-content/80">{@member.notes}</p>
+                  </.data_field>
+                </div>
+              <% end %>
+            </div>
+          </.section_box>
+        </div>
+
+        <%!-- Custom Fields Section --%>
+        <%= if Enum.any?(@member.custom_field_values) do %>
+          <div>
+            <.section_box title={gettext("Custom Fields")}>
+              <div class="grid grid-cols-2 gap-4">
+                <%= for cfv <- sort_custom_field_values(@member.custom_field_values) do %>
+                  <% custom_field = cfv.custom_field %>
+                  <% value_type = custom_field && custom_field.value_type %>
+                  <.data_field label={custom_field && custom_field.name}>
+                    {format_custom_field_value(cfv.value, value_type)}
+                  </.data_field>
+                <% end %>
+              </div>
+            </.section_box>
+          </div>
+        <% end %>
+      </div>
+
+      <%!-- Payment Data Section (Mockup) --%>
+      <div class="max-w-xl">
+        <.section_box title={gettext("Payment Data")}>
+          <div role="alert" class="alert alert-info mb-4">
+            <.icon name="hero-information-circle" class="size-5" />
+            <span>{gettext("This data is for demonstration purposes only (mockup).")}</span>
+          </div>
+
+          <div class="flex gap-6">
+            <.data_field label={gettext("Contribution")} value="72 €" class="w-24" />
+            <.data_field label={gettext("Payment Cycle")} value={gettext("monthly")} class="w-28" />
+            <.data_field label={gettext("Paid")} class="w-24">
+              <%= if @member.paid do %>
+                <span class="badge badge-success">{gettext("Paid")}</span>
+              <% else %>
+                <span class="badge badge-warning">{gettext("Pending")}</span>
+              <% end %>
+            </.data_field>
+          </div>
+        </.section_box>
+      </div>
     </Layouts.app>
     """
   end
@@ -114,4 +195,133 @@ defmodule MvWeb.MemberLive.Show do
 
   defp page_title(:show), do: gettext("Show Member")
   defp page_title(:edit), do: gettext("Edit Member")
+
+  # -----------------------------------------------------------------
+  # Helper Components
+  # -----------------------------------------------------------------
+
+  # Renders a section box with border and title.
+  attr :title, :string, required: true
+  slot :inner_block, required: true
+
+  defp section_box(assigns) do
+    ~H"""
+    <section class="mb-6">
+      <h2 class="text-lg font-semibold mb-3">{@title}</h2>
+      <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+        {render_slot(@inner_block)}
+      </div>
+    </section>
+    """
+  end
+
+  # Renders a labeled data field.
+  attr :label, :string, required: true
+  attr :value, :string, default: nil
+  attr :class, :string, default: ""
+  slot :inner_block
+
+  defp data_field(assigns) do
+    ~H"""
+    <dl class={@class}>
+      <dt class="text-sm font-medium text-base-content/70">{@label}</dt>
+      <dd class="mt-1 text-base-content">
+        <%= if @inner_block != [] do %>
+          {render_slot(@inner_block)}
+        <% else %>
+          {display_value(@value)}
+        <% end %>
+      </dd>
+    </dl>
+    """
+  end
+
+  # -----------------------------------------------------------------
+  # Helper Functions
+  # -----------------------------------------------------------------
+
+  defp display_value(nil), do: "—"
+  defp display_value(""), do: "—"
+  defp display_value(value), do: value
+
+  defp format_email_mailto(first_name, last_name, email) do
+    name =
+      [first_name, last_name]
+      |> Enum.filter(&(&1 && &1 != ""))
+      |> Enum.join(" ")
+
+    if name != "" do
+      "#{name} <#{email}>"
+    else
+      email
+    end
+  end
+
+  defp format_address(member) do
+    street_part =
+      [member.street, member.house_number]
+      |> Enum.filter(&(&1 && &1 != ""))
+      |> Enum.join(" ")
+
+    city_part =
+      [member.postal_code, member.city]
+      |> Enum.filter(&(&1 && &1 != ""))
+      |> Enum.join(" ")
+
+    [street_part, city_part]
+    |> Enum.filter(&(&1 != ""))
+    |> Enum.join(", ")
+    |> case do
+      "" -> nil
+      address -> address
+    end
+  end
+
+  defp format_date(nil), do: nil
+
+  defp format_date(%Date{} = date) do
+    Calendar.strftime(date, "%d.%m.%Y")
+  end
+
+  defp format_date(date), do: to_string(date)
+
+  # Sorts custom field values by custom field name
+  defp sort_custom_field_values(custom_field_values) do
+    Enum.sort_by(custom_field_values, fn cfv ->
+      (cfv.custom_field && cfv.custom_field.name) || ""
+    end)
+  end
+
+  # Formats custom field value based on type
+  defp format_custom_field_value(%Ash.Union{value: value, type: type}, _expected_type) do
+    format_custom_field_value(value, type)
+  end
+
+  defp format_custom_field_value(nil, _type), do: "—"
+
+  defp format_custom_field_value(value, :boolean) when is_boolean(value) do
+    if value, do: gettext("Yes"), else: gettext("No")
+  end
+
+  defp format_custom_field_value(%Date{} = date, :date) do
+    Calendar.strftime(date, "%d.%m.%Y")
+  end
+
+  defp format_custom_field_value(value, :email) when is_binary(value) do
+    assigns = %{email: value}
+
+    ~H"""
+    <a href={"mailto:#{@email}"} class="text-blue-700 hover:text-blue-800 underline">{@email}</a>
+    """
+  end
+
+  defp format_custom_field_value(value, :integer) when is_integer(value) do
+    Integer.to_string(value)
+  end
+
+  defp format_custom_field_value(value, _type) when is_binary(value) do
+    if String.trim(value) == "", do: "—", else: value
+  end
+
+  defp format_custom_field_value(value, _type), do: to_string(value)
 end
diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po
index 57df5ab..c6f2028 100644
--- a/priv/gettext/de/LC_MESSAGES/default.po
+++ b/priv/gettext/de/LC_MESSAGES/default.po
@@ -27,9 +27,8 @@ msgstr "Bist du sicher?"
 msgid "Attempting to reconnect"
 msgstr "Verbindung wird wiederhergestellt"
 
-#: lib/mv_web/live/member_live/form.ex:53
+#: lib/mv_web/live/member_live/form.ex:100
 #: lib/mv_web/live/member_live/index.html.heex:184
-#: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr "Stadt"
@@ -40,6 +39,7 @@ msgstr "Stadt"
 msgid "Delete"
 msgstr "Löschen"
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/member_live/index.html.heex:242
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
@@ -47,15 +47,15 @@ msgstr "Löschen"
 msgid "Edit"
 msgstr "Bearbeite"
 
-#: lib/mv_web/live/member_live/show.ex:41
-#: lib/mv_web/live/member_live/show.ex:116
+#: lib/mv_web/live/member_live/show.ex:40
+#: lib/mv_web/live/member_live/show.ex:197
 #, elixir-autogen, elixir-format
 msgid "Edit Member"
 msgstr "Mitglied bearbeiten"
 
-#: lib/mv_web/live/member_live/form.ex:47
+#: lib/mv_web/live/member_live/form.ex:106
 #: lib/mv_web/live/member_live/index.html.heex:112
-#: lib/mv_web/live/member_live/show.ex:50
+#: lib/mv_web/live/member_live/show.ex:75
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
 #: lib/mv_web/live/user_live/show.ex:50
@@ -63,25 +63,26 @@ msgstr "Mitglied bearbeiten"
 msgid "Email"
 msgstr "E-Mail"
 
-#: lib/mv_web/live/member_live/form.ex:45
-#: lib/mv_web/live/member_live/show.ex:48
+#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/show.ex:64
 #, elixir-autogen, elixir-format
 msgid "First Name"
 msgstr "Vorname"
 
-#: lib/mv_web/live/member_live/form.ex:50
+#: lib/mv_web/live/member_live/form.ex:117
 #: lib/mv_web/live/member_live/index.html.heex:220
-#: lib/mv_web/live/member_live/show.ex:55
+#: lib/mv_web/live/member_live/show.ex:93
 #, elixir-autogen, elixir-format
 msgid "Join Date"
 msgstr "Beitrittsdatum"
 
-#: lib/mv_web/live/member_live/form.ex:46
-#: lib/mv_web/live/member_live/show.ex:49
+#: lib/mv_web/live/member_live/form.ex:84
+#: lib/mv_web/live/member_live/show.ex:65
 #, elixir-autogen, elixir-format
 msgid "Last Name"
 msgstr "Nachname"
 
+#: lib/mv_web/live/member_live/form.ex:44
 #: lib/mv_web/live/member_live/index.html.heex:29
 #, elixir-autogen, elixir-format
 msgid "New Member"
@@ -108,49 +109,45 @@ msgstr "Keine Internetverbindung gefunden"
 msgid "close"
 msgstr "schließen"
 
-#: lib/mv_web/live/member_live/form.ex:51
-#: lib/mv_web/live/member_live/show.ex:56
+#: lib/mv_web/live/member_live/form.ex:120
+#: lib/mv_web/live/member_live/show.ex:98
 #, elixir-autogen, elixir-format
 msgid "Exit Date"
 msgstr "Austrittsdatum"
 
-#: lib/mv_web/live/member_live/form.ex:55
 #: lib/mv_web/live/member_live/index.html.heex:148
-#: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
 msgstr "Hausnummer"
 
-#: lib/mv_web/live/member_live/form.ex:52
-#: lib/mv_web/live/member_live/show.ex:57
+#: lib/mv_web/live/member_live/form.ex:126
+#: lib/mv_web/live/member_live/show.ex:124
 #, elixir-autogen, elixir-format
 msgid "Notes"
 msgstr "Notizen"
 
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
-#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:199
 #: lib/mv_web/live/member_live/index.html.heex:229
-#: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:162
+#: lib/mv_web/live/member_live/show.ex:164
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr "Bezahlt"
 
-#: lib/mv_web/live/member_live/form.ex:49
 #: lib/mv_web/live/member_live/index.html.heex:202
-#: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr "Telefonnummer"
 
-#: lib/mv_web/live/member_live/form.ex:56
+#: lib/mv_web/live/member_live/form.ex:97
 #: lib/mv_web/live/member_live/index.html.heex:166
-#: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
 msgstr "Postleitzahl"
 
-#: lib/mv_web/live/member_live/form.ex:79
+#: lib/mv_web/live/member_live/form.ex:211
 #, elixir-autogen, elixir-format
 msgid "Save Member"
 msgstr "Mitglied speichern"
@@ -158,58 +155,48 @@ msgstr "Mitglied speichern"
 #: lib/mv_web/live/custom_field_live/form.ex:66
 #: lib/mv_web/live/custom_field_value_live/form.ex:74
 #: lib/mv_web/live/global_settings_live.ex:55
-#: lib/mv_web/live/member_live/form.ex:78
+#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:210
 #: lib/mv_web/live/user_live/form.ex:248
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr "Speichern..."
 
-#: lib/mv_web/live/member_live/form.ex:54
+#: lib/mv_web/live/member_live/form.ex:91
 #: lib/mv_web/live/member_live/index.html.heex:130
-#: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
 msgstr "Straße"
 
-#: lib/mv_web/live/member_live/show.ex:47
-#, elixir-autogen, elixir-format
-msgid "Id"
-msgstr "ID"
-
 #: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:61
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "No"
 msgstr "Nein"
 
-#: lib/mv_web/live/member_live/show.ex:115
+#: lib/mv_web/live/member_live/show.ex:196
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Show Member"
 msgstr "Mitglied anzeigen"
 
-#: lib/mv_web/live/member_live/show.ex:33
-#, elixir-autogen, elixir-format
-msgid "This is a member record from your database."
-msgstr "Dies ist ein Mitglied aus deiner Datenbank."
-
 #: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:60
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "Yes"
 msgstr "Ja"
 
 #: lib/mv_web/live/custom_field_live/form.ex:110
 #: lib/mv_web/live/custom_field_value_live/form.ex:233
-#: lib/mv_web/live/member_live/form.ex:137
+#: lib/mv_web/live/member_live/form.ex:269
 #, elixir-autogen, elixir-format
 msgid "create"
 msgstr "erstellt"
 
 #: lib/mv_web/live/custom_field_live/form.ex:111
 #: lib/mv_web/live/custom_field_value_live/form.ex:234
-#: lib/mv_web/live/member_live/form.ex:138
+#: lib/mv_web/live/member_live/form.ex:270
 #, elixir-autogen, elixir-format
 msgid "update"
 msgstr "aktualisiert"
@@ -219,7 +206,7 @@ msgstr "aktualisiert"
 msgid "Incorrect email or password"
 msgstr "Falsche E-Mail oder Passwort"
 
-#: lib/mv_web/live/member_live/form.ex:144
+#: lib/mv_web/live/member_live/form.ex:276
 #, elixir-autogen, elixir-format
 msgid "Member %{action} successfully"
 msgstr "Mitglied %{action} erfolgreich"
@@ -252,7 +239,7 @@ msgstr "Ihr Passwort wurde erfolgreich zurückgesetzt"
 #: lib/mv_web/live/custom_field_live/form.ex:69
 #: lib/mv_web/live/custom_field_live/index.ex:120
 #: lib/mv_web/live/custom_field_value_live/form.ex:77
-#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/form.ex:208
 #: lib/mv_web/live/user_live/form.ex:251
 #, elixir-autogen, elixir-format
 msgid "Cancel"
@@ -300,6 +287,7 @@ msgid "Listing Users"
 msgstr "Benutzer*innen auflisten"
 
 #: lib/mv_web/live/custom_field_value_live/form.ex:60
+#: lib/mv_web/live/member_live/form.ex:242
 #, elixir-autogen, elixir-format
 msgid "Member"
 msgstr "Mitglied"
@@ -427,6 +415,7 @@ msgstr "aufsteigend"
 msgid "descending"
 msgstr "absteigend"
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/user_live/form.ex:265
 #, elixir-autogen, elixir-format
 msgid "New"
@@ -509,7 +498,7 @@ msgstr "Benutzer*in wird ohne Passwort erstellt. Aktivieren Sie 'Passwort setzen
 msgid "Linked Member"
 msgstr "Verknüpftes Mitglied"
 
-#: lib/mv_web/live/member_live/show.ex:62
+#: lib/mv_web/live/member_live/show.ex:106
 #, elixir-autogen, elixir-format
 msgid "Linked User"
 msgstr "Verknüpfte*r Benutzer*in"
@@ -520,13 +509,12 @@ msgstr "Verknüpfte*r Benutzer*in"
 msgid "No member linked"
 msgstr "Kein Mitglied verknüpft"
 
-#: lib/mv_web/live/member_live/show.ex:72
+#: lib/mv_web/live/member_live/show.ex:116
 #, elixir-autogen, elixir-format
 msgid "No user linked"
 msgstr "Keine*r Benutzer*in verknüpft"
 
-#: lib/mv_web/live/member_live/show.ex:36
-#: lib/mv_web/live/member_live/show.ex:38
+#: lib/mv_web/live/member_live/show.ex:30
 #, elixir-autogen, elixir-format
 msgid "Back to members list"
 msgstr "Zurück zur Mitgliederliste"
@@ -607,12 +595,6 @@ msgstr "Diese E-Mail-Adresse ist bereits mit einem anderen OIDC-Konto verknüpft
 msgid "Choose a custom field"
 msgstr "Wähle ein Benutzerdefiniertes Feld"
 
-#: lib/mv_web/live/member_live/form.ex:58
-#: lib/mv_web/live/member_live/show.ex:77
-#, elixir-autogen, elixir-format
-msgid "Custom Field Values"
-msgstr "Benutzerdefinierte Feldwerte"
-
 #: lib/mv_web/live/custom_field_value_live/form.ex:51
 #, elixir-autogen, elixir-format
 msgid "Custom field"
@@ -649,6 +631,8 @@ msgid "Use this form to manage custom_field records in your database."
 msgstr "Verwende dieses Formular, um Benutzerdefinierte Felder in deiner Datenbank zu verwalten."
 
 #: lib/mv_web/components/layouts/navbar.ex:26
+#: lib/mv_web/live/member_live/form.ex:135
+#: lib/mv_web/live/member_live/show.ex:136
 #, elixir-autogen, elixir-format
 msgid "Custom Fields"
 msgstr "Benutzerdefinierte Felder"
@@ -818,11 +802,6 @@ msgstr "Im E-Mail-Programm öffnen"
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr "Tipp: E-Mail-Adressen ins BCC-Feld einfügen für Datenschutzkonformität"
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Fields marked with an asterisk (*) cannot be empty."
-msgstr "Felder, die mit einem Sternchen (*) markiert sind, dürfen nicht leer bleiben."
-
 #: lib/mv_web/components/core_components.ex:206
 #: lib/mv_web/components/core_components.ex:223
 #: lib/mv_web/components/core_components.ex:250
@@ -853,8 +832,103 @@ msgstr "Nicht bezahlt"
 msgid "Payment filter"
 msgstr "Zahlungsfilter"
 
-#~ #: lib/mv_web/live/member_live/form.ex:48
-#~ #: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:70
+#, elixir-autogen, elixir-format
+msgid "Address"
+msgstr "Adresse"
+
+#: lib/mv_web/live/member_live/form.ex:37
+#: lib/mv_web/live/member_live/show.ex:32
+#, elixir-autogen, elixir-format
+msgid "Back"
+msgstr "Zurück"
+
+#: lib/mv_web/live/member_live/form.ex:65
+#: lib/mv_web/live/member_live/show.ex:50
+#, elixir-autogen, elixir-format
+msgid "Coming soon"
+msgstr "Demnächst verfügbar"
+
+#: lib/mv_web/live/member_live/form.ex:57
+#: lib/mv_web/live/member_live/show.ex:48
+#, elixir-autogen, elixir-format
+msgid "Contact Data"
+msgstr "Kontaktdaten"
+
+#: lib/mv_web/live/member_live/form.ex:175
+#: lib/mv_web/live/member_live/show.ex:160
+#, elixir-autogen, elixir-format
+msgid "Contribution"
+msgstr "Beitrag"
+
+#: lib/mv_web/live/member_live/form.ex:94
+#, elixir-autogen, elixir-format
+msgid "Nr."
+msgstr "Nr."
+
+#: lib/mv_web/live/member_live/form.ex:186
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "Payment Cycle"
+msgstr "Zahlungszyklus"
+
+#: lib/mv_web/live/member_live/form.ex:166
+#: lib/mv_web/live/member_live/show.ex:153
+#, elixir-autogen, elixir-format
+msgid "Payment Data"
+msgstr "Beitragsdaten"
+
+#: lib/mv_web/live/member_live/form.ex:68
+#: lib/mv_web/live/member_live/show.ex:52
+#, elixir-autogen, elixir-format
+msgid "Payments"
+msgstr "Zahlungen"
+
+#: lib/mv_web/live/member_live/show.ex:166
+#, elixir-autogen, elixir-format
+msgid "Pending"
+msgstr "Ausstehend"
+
+#: lib/mv_web/live/member_live/form.ex:76
+#: lib/mv_web/live/member_live/show.ex:60
+#, elixir-autogen, elixir-format
+msgid "Personal Data"
+msgstr "Persönliche Daten"
+
+#: lib/mv_web/live/member_live/form.ex:111
+#: lib/mv_web/live/member_live/show.ex:87
+#, elixir-autogen, elixir-format
+msgid "Phone"
+msgstr "Telefon"
+
+#: lib/mv_web/live/member_live/form.ex:49
+#, elixir-autogen, elixir-format
+msgid "Save"
+msgstr "Speichern"
+
+#: lib/mv_web/live/member_live/form.ex:169
+#: lib/mv_web/live/member_live/show.ex:156
+#, elixir-autogen, elixir-format
+msgid "This data is for demonstration purposes only (mockup)."
+msgstr "Diese Daten dienen nur zu Demonstrationszwecken (Mockup)."
+
+#: lib/mv_web/live/member_live/form.ex:190
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "monthly"
+msgstr "monatlich"
+
+#: lib/mv_web/live/member_live/form.ex:194
+#, elixir-autogen, elixir-format
+msgid "yearly"
+msgstr "jährlich"
+
+#~ #: lib/mv_web/live/member_live/show.ex:47
 #~ #, elixir-autogen, elixir-format
-#~ msgid "Birth Date"
-#~ msgstr "Geburtsdatum"
+#~ msgid "Id"
+#~ msgstr "ID"
+
+#~ #: lib/mv_web/live/member_live/show.ex:33
+#~ #, elixir-autogen, elixir-format
+#~ msgid "This is a member record from your database."
+#~ msgstr "Dies ist ein Mitglied aus deiner Datenbank."
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 1e0e954..9f0d0aa 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -28,9 +28,8 @@ msgstr ""
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:53
+#: lib/mv_web/live/member_live/form.ex:100
 #: lib/mv_web/live/member_live/index.html.heex:184
-#: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr ""
@@ -41,6 +40,7 @@ msgstr ""
 msgid "Delete"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/member_live/index.html.heex:242
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
@@ -48,15 +48,15 @@ msgstr ""
 msgid "Edit"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:41
-#: lib/mv_web/live/member_live/show.ex:116
+#: lib/mv_web/live/member_live/show.ex:40
+#: lib/mv_web/live/member_live/show.ex:197
 #, elixir-autogen, elixir-format
 msgid "Edit Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:47
+#: lib/mv_web/live/member_live/form.ex:106
 #: lib/mv_web/live/member_live/index.html.heex:112
-#: lib/mv_web/live/member_live/show.ex:50
+#: lib/mv_web/live/member_live/show.ex:75
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
 #: lib/mv_web/live/user_live/show.ex:50
@@ -64,25 +64,26 @@ msgstr ""
 msgid "Email"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:45
-#: lib/mv_web/live/member_live/show.ex:48
+#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/show.ex:64
 #, elixir-autogen, elixir-format
 msgid "First Name"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:50
+#: lib/mv_web/live/member_live/form.ex:117
 #: lib/mv_web/live/member_live/index.html.heex:220
-#: lib/mv_web/live/member_live/show.ex:55
+#: lib/mv_web/live/member_live/show.ex:93
 #, elixir-autogen, elixir-format
 msgid "Join Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:46
-#: lib/mv_web/live/member_live/show.ex:49
+#: lib/mv_web/live/member_live/form.ex:84
+#: lib/mv_web/live/member_live/show.ex:65
 #, elixir-autogen, elixir-format
 msgid "Last Name"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:44
 #: lib/mv_web/live/member_live/index.html.heex:29
 #, elixir-autogen, elixir-format
 msgid "New Member"
@@ -109,49 +110,45 @@ msgstr ""
 msgid "close"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:51
-#: lib/mv_web/live/member_live/show.ex:56
+#: lib/mv_web/live/member_live/form.ex:120
+#: lib/mv_web/live/member_live/show.ex:98
 #, elixir-autogen, elixir-format
 msgid "Exit Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:55
 #: lib/mv_web/live/member_live/index.html.heex:148
-#: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:52
-#: lib/mv_web/live/member_live/show.ex:57
+#: lib/mv_web/live/member_live/form.ex:126
+#: lib/mv_web/live/member_live/show.ex:124
 #, elixir-autogen, elixir-format
 msgid "Notes"
 msgstr ""
 
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
-#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:199
 #: lib/mv_web/live/member_live/index.html.heex:229
-#: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:162
+#: lib/mv_web/live/member_live/show.ex:164
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:49
 #: lib/mv_web/live/member_live/index.html.heex:202
-#: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:56
+#: lib/mv_web/live/member_live/form.ex:97
 #: lib/mv_web/live/member_live/index.html.heex:166
-#: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:79
+#: lib/mv_web/live/member_live/form.ex:211
 #, elixir-autogen, elixir-format
 msgid "Save Member"
 msgstr ""
@@ -159,58 +156,48 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:66
 #: lib/mv_web/live/custom_field_value_live/form.ex:74
 #: lib/mv_web/live/global_settings_live.ex:55
-#: lib/mv_web/live/member_live/form.ex:78
+#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:210
 #: lib/mv_web/live/user_live/form.ex:248
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:54
+#: lib/mv_web/live/member_live/form.ex:91
 #: lib/mv_web/live/member_live/index.html.heex:130
-#: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:47
-#, elixir-autogen, elixir-format
-msgid "Id"
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:61
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "No"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:115
+#: lib/mv_web/live/member_live/show.ex:196
 #, elixir-autogen, elixir-format
 msgid "Show Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:33
-#, elixir-autogen, elixir-format
-msgid "This is a member record from your database."
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:60
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "Yes"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:110
 #: lib/mv_web/live/custom_field_value_live/form.ex:233
-#: lib/mv_web/live/member_live/form.ex:137
+#: lib/mv_web/live/member_live/form.ex:269
 #, elixir-autogen, elixir-format
 msgid "create"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:111
 #: lib/mv_web/live/custom_field_value_live/form.ex:234
-#: lib/mv_web/live/member_live/form.ex:138
+#: lib/mv_web/live/member_live/form.ex:270
 #, elixir-autogen, elixir-format
 msgid "update"
 msgstr ""
@@ -220,7 +207,7 @@ msgstr ""
 msgid "Incorrect email or password"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:144
+#: lib/mv_web/live/member_live/form.ex:276
 #, elixir-autogen, elixir-format
 msgid "Member %{action} successfully"
 msgstr ""
@@ -253,7 +240,7 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:69
 #: lib/mv_web/live/custom_field_live/index.ex:120
 #: lib/mv_web/live/custom_field_value_live/form.ex:77
-#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/form.ex:208
 #: lib/mv_web/live/user_live/form.ex:251
 #, elixir-autogen, elixir-format
 msgid "Cancel"
@@ -301,6 +288,7 @@ msgid "Listing Users"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_value_live/form.ex:60
+#: lib/mv_web/live/member_live/form.ex:242
 #, elixir-autogen, elixir-format
 msgid "Member"
 msgstr ""
@@ -428,6 +416,7 @@ msgstr ""
 msgid "descending"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/user_live/form.ex:265
 #, elixir-autogen, elixir-format
 msgid "New"
@@ -510,7 +499,7 @@ msgstr ""
 msgid "Linked Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:62
+#: lib/mv_web/live/member_live/show.ex:106
 #, elixir-autogen, elixir-format
 msgid "Linked User"
 msgstr ""
@@ -521,13 +510,12 @@ msgstr ""
 msgid "No member linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:72
+#: lib/mv_web/live/member_live/show.ex:116
 #, elixir-autogen, elixir-format
 msgid "No user linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:36
-#: lib/mv_web/live/member_live/show.ex:38
+#: lib/mv_web/live/member_live/show.ex:30
 #, elixir-autogen, elixir-format
 msgid "Back to members list"
 msgstr ""
@@ -608,12 +596,6 @@ msgstr ""
 msgid "Choose a custom field"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:58
-#: lib/mv_web/live/member_live/show.ex:77
-#, elixir-autogen, elixir-format
-msgid "Custom Field Values"
-msgstr ""
-
 #: lib/mv_web/live/custom_field_value_live/form.ex:51
 #, elixir-autogen, elixir-format
 msgid "Custom field"
@@ -650,6 +632,8 @@ msgid "Use this form to manage custom_field records in your database."
 msgstr ""
 
 #: lib/mv_web/components/layouts/navbar.ex:26
+#: lib/mv_web/live/member_live/form.ex:135
+#: lib/mv_web/live/member_live/show.ex:136
 #, elixir-autogen, elixir-format
 msgid "Custom Fields"
 msgstr ""
@@ -819,11 +803,6 @@ msgstr ""
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Fields marked with an asterisk (*) cannot be empty."
-msgstr ""
-
 #: lib/mv_web/components/core_components.ex:206
 #: lib/mv_web/components/core_components.ex:223
 #: lib/mv_web/components/core_components.ex:250
@@ -853,3 +832,94 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Payment filter"
 msgstr ""
+
+#: lib/mv_web/live/member_live/show.ex:70
+#, elixir-autogen, elixir-format
+msgid "Address"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:37
+#: lib/mv_web/live/member_live/show.ex:32
+#, elixir-autogen, elixir-format
+msgid "Back"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:65
+#: lib/mv_web/live/member_live/show.ex:50
+#, elixir-autogen, elixir-format
+msgid "Coming soon"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:57
+#: lib/mv_web/live/member_live/show.ex:48
+#, elixir-autogen, elixir-format
+msgid "Contact Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:175
+#: lib/mv_web/live/member_live/show.ex:160
+#, elixir-autogen, elixir-format
+msgid "Contribution"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:94
+#, elixir-autogen, elixir-format
+msgid "Nr."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:186
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "Payment Cycle"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:166
+#: lib/mv_web/live/member_live/show.ex:153
+#, elixir-autogen, elixir-format
+msgid "Payment Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:68
+#: lib/mv_web/live/member_live/show.ex:52
+#, elixir-autogen, elixir-format
+msgid "Payments"
+msgstr ""
+
+#: lib/mv_web/live/member_live/show.ex:166
+#, elixir-autogen, elixir-format
+msgid "Pending"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:76
+#: lib/mv_web/live/member_live/show.ex:60
+#, elixir-autogen, elixir-format
+msgid "Personal Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:111
+#: lib/mv_web/live/member_live/show.ex:87
+#, elixir-autogen, elixir-format
+msgid "Phone"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:49
+#, elixir-autogen, elixir-format
+msgid "Save"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:169
+#: lib/mv_web/live/member_live/show.ex:156
+#, elixir-autogen, elixir-format
+msgid "This data is for demonstration purposes only (mockup)."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:190
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "monthly"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:194
+#, elixir-autogen, elixir-format
+msgid "yearly"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 319bcc3..9cb10a3 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -28,9 +28,8 @@ msgstr ""
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:53
+#: lib/mv_web/live/member_live/form.ex:100
 #: lib/mv_web/live/member_live/index.html.heex:184
-#: lib/mv_web/live/member_live/show.ex:58
 #, elixir-autogen, elixir-format
 msgid "City"
 msgstr ""
@@ -41,6 +40,7 @@ msgstr ""
 msgid "Delete"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/member_live/index.html.heex:242
 #: lib/mv_web/live/user_live/form.ex:265
 #: lib/mv_web/live/user_live/index.html.heex:66
@@ -48,15 +48,15 @@ msgstr ""
 msgid "Edit"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:41
-#: lib/mv_web/live/member_live/show.ex:116
+#: lib/mv_web/live/member_live/show.ex:40
+#: lib/mv_web/live/member_live/show.ex:197
 #, elixir-autogen, elixir-format
 msgid "Edit Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:47
+#: lib/mv_web/live/member_live/form.ex:106
 #: lib/mv_web/live/member_live/index.html.heex:112
-#: lib/mv_web/live/member_live/show.ex:50
+#: lib/mv_web/live/member_live/show.ex:75
 #: lib/mv_web/live/user_live/form.ex:46
 #: lib/mv_web/live/user_live/index.html.heex:44
 #: lib/mv_web/live/user_live/show.ex:50
@@ -64,25 +64,26 @@ msgstr ""
 msgid "Email"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:45
-#: lib/mv_web/live/member_live/show.ex:48
+#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/show.ex:64
 #, elixir-autogen, elixir-format
 msgid "First Name"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:50
+#: lib/mv_web/live/member_live/form.ex:117
 #: lib/mv_web/live/member_live/index.html.heex:220
-#: lib/mv_web/live/member_live/show.ex:55
+#: lib/mv_web/live/member_live/show.ex:93
 #, elixir-autogen, elixir-format
 msgid "Join Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:46
-#: lib/mv_web/live/member_live/show.ex:49
+#: lib/mv_web/live/member_live/form.ex:84
+#: lib/mv_web/live/member_live/show.ex:65
 #, elixir-autogen, elixir-format
 msgid "Last Name"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:44
 #: lib/mv_web/live/member_live/index.html.heex:29
 #, elixir-autogen, elixir-format
 msgid "New Member"
@@ -109,49 +110,45 @@ msgstr ""
 msgid "close"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:51
-#: lib/mv_web/live/member_live/show.ex:56
+#: lib/mv_web/live/member_live/form.ex:120
+#: lib/mv_web/live/member_live/show.ex:98
 #, elixir-autogen, elixir-format
 msgid "Exit Date"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:55
 #: lib/mv_web/live/member_live/index.html.heex:148
-#: lib/mv_web/live/member_live/show.ex:60
 #, elixir-autogen, elixir-format
 msgid "House Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:52
-#: lib/mv_web/live/member_live/show.ex:57
+#: lib/mv_web/live/member_live/form.ex:126
+#: lib/mv_web/live/member_live/show.ex:124
 #, elixir-autogen, elixir-format
 msgid "Notes"
 msgstr ""
 
 #: lib/mv_web/live/components/payment_filter_component.ex:94
 #: lib/mv_web/live/components/payment_filter_component.ex:144
-#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:199
 #: lib/mv_web/live/member_live/index.html.heex:229
-#: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:162
+#: lib/mv_web/live/member_live/show.ex:164
 #, elixir-autogen, elixir-format
 msgid "Paid"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:49
 #: lib/mv_web/live/member_live/index.html.heex:202
-#: lib/mv_web/live/member_live/show.ex:54
 #, elixir-autogen, elixir-format
 msgid "Phone Number"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:56
+#: lib/mv_web/live/member_live/form.ex:97
 #: lib/mv_web/live/member_live/index.html.heex:166
-#: lib/mv_web/live/member_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "Postal Code"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:79
+#: lib/mv_web/live/member_live/form.ex:211
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Save Member"
 msgstr ""
@@ -159,58 +156,48 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:66
 #: lib/mv_web/live/custom_field_value_live/form.ex:74
 #: lib/mv_web/live/global_settings_live.ex:55
-#: lib/mv_web/live/member_live/form.ex:78
+#: lib/mv_web/live/member_live/form.ex:48
+#: lib/mv_web/live/member_live/form.ex:210
 #: lib/mv_web/live/user_live/form.ex:248
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:54
+#: lib/mv_web/live/member_live/form.ex:91
 #: lib/mv_web/live/member_live/index.html.heex:130
-#: lib/mv_web/live/member_live/show.ex:59
 #, elixir-autogen, elixir-format
 msgid "Street"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:47
-#, elixir-autogen, elixir-format
-msgid "Id"
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:61
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "No"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:115
+#: lib/mv_web/live/member_live/show.ex:196
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Show Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:33
-#, elixir-autogen, elixir-format
-msgid "This is a member record from your database."
-msgstr ""
-
 #: lib/mv_web/live/member_live/index.html.heex:234
 #: lib/mv_web/live/member_live/index/formatter.ex:60
-#: lib/mv_web/live/member_live/show.ex:52
+#: lib/mv_web/live/member_live/show.ex:303
 #, elixir-autogen, elixir-format
 msgid "Yes"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:110
 #: lib/mv_web/live/custom_field_value_live/form.ex:233
-#: lib/mv_web/live/member_live/form.ex:137
+#: lib/mv_web/live/member_live/form.ex:269
 #, elixir-autogen, elixir-format
 msgid "create"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_live/form.ex:111
 #: lib/mv_web/live/custom_field_value_live/form.ex:234
-#: lib/mv_web/live/member_live/form.ex:138
+#: lib/mv_web/live/member_live/form.ex:270
 #, elixir-autogen, elixir-format
 msgid "update"
 msgstr ""
@@ -220,7 +207,7 @@ msgstr ""
 msgid "Incorrect email or password"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:144
+#: lib/mv_web/live/member_live/form.ex:276
 #, elixir-autogen, elixir-format
 msgid "Member %{action} successfully"
 msgstr ""
@@ -253,7 +240,7 @@ msgstr ""
 #: lib/mv_web/live/custom_field_live/form.ex:69
 #: lib/mv_web/live/custom_field_live/index.ex:120
 #: lib/mv_web/live/custom_field_value_live/form.ex:77
-#: lib/mv_web/live/member_live/form.ex:81
+#: lib/mv_web/live/member_live/form.ex:208
 #: lib/mv_web/live/user_live/form.ex:251
 #, elixir-autogen, elixir-format
 msgid "Cancel"
@@ -301,6 +288,7 @@ msgid "Listing Users"
 msgstr ""
 
 #: lib/mv_web/live/custom_field_value_live/form.ex:60
+#: lib/mv_web/live/member_live/form.ex:242
 #, elixir-autogen, elixir-format
 msgid "Member"
 msgstr ""
@@ -428,6 +416,7 @@ msgstr ""
 msgid "descending"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:241
 #: lib/mv_web/live/user_live/form.ex:265
 #, elixir-autogen, elixir-format
 msgid "New"
@@ -510,7 +499,7 @@ msgstr "User will be created without a password. Check 'Set Password' to add one
 msgid "Linked Member"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:62
+#: lib/mv_web/live/member_live/show.ex:106
 #, elixir-autogen, elixir-format
 msgid "Linked User"
 msgstr ""
@@ -521,13 +510,12 @@ msgstr ""
 msgid "No member linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:72
+#: lib/mv_web/live/member_live/show.ex:116
 #, elixir-autogen, elixir-format
 msgid "No user linked"
 msgstr ""
 
-#: lib/mv_web/live/member_live/show.ex:36
-#: lib/mv_web/live/member_live/show.ex:38
+#: lib/mv_web/live/member_live/show.ex:30
 #, elixir-autogen, elixir-format
 msgid "Back to members list"
 msgstr ""
@@ -608,12 +596,6 @@ msgstr ""
 msgid "Choose a custom field"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:58
-#: lib/mv_web/live/member_live/show.ex:77
-#, elixir-autogen, elixir-format
-msgid "Custom Field Values"
-msgstr ""
-
 #: lib/mv_web/live/custom_field_value_live/form.ex:51
 #, elixir-autogen, elixir-format
 msgid "Custom field"
@@ -650,6 +632,8 @@ msgid "Use this form to manage custom_field records in your database."
 msgstr ""
 
 #: lib/mv_web/components/layouts/navbar.ex:26
+#: lib/mv_web/live/member_live/form.ex:135
+#: lib/mv_web/live/member_live/show.ex:136
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Custom Fields"
 msgstr ""
@@ -819,11 +803,6 @@ msgstr ""
 msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Fields marked with an asterisk (*) cannot be empty."
-msgstr ""
-
 #: lib/mv_web/components/core_components.ex:206
 #: lib/mv_web/components/core_components.ex:223
 #: lib/mv_web/components/core_components.ex:250
@@ -854,8 +833,103 @@ msgstr ""
 msgid "Payment filter"
 msgstr ""
 
-#~ #: lib/mv_web/live/member_live/form.ex:48
-#~ #: lib/mv_web/live/member_live/show.ex:51
+#: lib/mv_web/live/member_live/show.ex:70
+#, elixir-autogen, elixir-format
+msgid "Address"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:37
+#: lib/mv_web/live/member_live/show.ex:32
+#, elixir-autogen, elixir-format
+msgid "Back"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:65
+#: lib/mv_web/live/member_live/show.ex:50
+#, elixir-autogen, elixir-format
+msgid "Coming soon"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:57
+#: lib/mv_web/live/member_live/show.ex:48
+#, elixir-autogen, elixir-format
+msgid "Contact Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:175
+#: lib/mv_web/live/member_live/show.ex:160
+#, elixir-autogen, elixir-format
+msgid "Contribution"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:94
+#, elixir-autogen, elixir-format
+msgid "Nr."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:186
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Payment Cycle"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:166
+#: lib/mv_web/live/member_live/show.ex:153
+#, elixir-autogen, elixir-format
+msgid "Payment Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:68
+#: lib/mv_web/live/member_live/show.ex:52
+#, elixir-autogen, elixir-format
+msgid "Payments"
+msgstr ""
+
+#: lib/mv_web/live/member_live/show.ex:166
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Pending"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:76
+#: lib/mv_web/live/member_live/show.ex:60
+#, elixir-autogen, elixir-format
+msgid "Personal Data"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:111
+#: lib/mv_web/live/member_live/show.ex:87
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Phone"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:49
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Save"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:169
+#: lib/mv_web/live/member_live/show.ex:156
+#, elixir-autogen, elixir-format
+msgid "This data is for demonstration purposes only (mockup)."
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:190
+#: lib/mv_web/live/member_live/show.ex:161
+#, elixir-autogen, elixir-format
+msgid "monthly"
+msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:194
+#, elixir-autogen, elixir-format
+msgid "yearly"
+msgstr ""
+
+#~ #: lib/mv_web/live/member_live/show.ex:47
 #~ #, elixir-autogen, elixir-format
-#~ msgid "Birth Date"
+#~ msgid "Id"
+#~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/show.ex:33
+#~ #, elixir-autogen, elixir-format
+#~ msgid "This is a member record from your database."
 #~ msgstr ""