diff --git a/CODE_GUIDELINES.md b/CODE_GUIDELINES.md
index 68e7887..d4769f3 100644
--- a/CODE_GUIDELINES.md
+++ b/CODE_GUIDELINES.md
@@ -61,7 +61,7 @@ We are building a membership management system (Mila) using the following techno
8. [Accessibility Guidelines](#8-accessibility-guidelines)
**Related documents:**
-- **UI / UX:** [`DESIGN_DUIDELINES.md`](../DESIGN_DUIDELINES.md) defines visual and interaction consistency: use of CoreComponents (no raw DaisyUI in views), page skeleton (`<.header>`, `mt-6 space-y-6`), typography, buttons, forms, tables, flash/toast, and microcopy (e.g. German "du" and glossary). Follow "components first" and semantic variants instead of hard-coded colors.
+- **UI / UX:** [`DESIGN_DUIDELINES.md`](../DESIGN_DUIDELINES.md) defines visual and interaction consistency: use of CoreComponents (no raw DaisyUI in views), page skeleton (`<.header>`, `mt-6 space-y-6`), **Back button left in header for edit/new forms** (§2.2), typography, buttons, forms, tables, flash/toast, and microcopy (e.g. German "du" and glossary). Follow "components first" and semantic variants instead of hard-coded colors.
---
diff --git a/DESIGN_DUIDELINES.md b/DESIGN_DUIDELINES.md
index e3faf50..fc3acac 100644
--- a/DESIGN_DUIDELINES.md
+++ b/DESIGN_DUIDELINES.md
@@ -46,19 +46,35 @@ Every authenticated page should follow the same structure:
**MUST:** Use `<.header>` on every page (except login/public pages).
**SHOULD:** Put short explanations into `<:subtitle>` rather than sprinkling random text blocks.
-**Template:**
+### 2.2 Edit/New form header: Back button left (mandatory)
+
+For LiveViews that render an edit or new form (e.g. member, group, role, user, custom field, membership fee type):
+
+- **MUST:** Provide a **Back** button on the **left** side of the header using the `<:leading>` slot (same as data fields: Back left, title next, primary action on the right).
+- **MUST:** Use the same pattern everywhere: Back button with `variant="neutral"`, arrow-left icon, and label “Back”. It navigates to the previous context (e.g. detail page or index) via a `return_path`-style helper.
+- **SHOULD:** Place the primary action (e.g. “Save”) in `<:actions>` on the right.
+- **Rationale:** Users expect a consistent way to leave the form without submitting; Back left matches the data fields edit view and keeps primary actions on the right.
+
+**Template for form pages:**
```heex
<.header>
- Title
- <:subtitle>Short explanation of what the page is for.
+ <:leading>
+ <.button navigate={return_path(@return_to, @resource)} variant="neutral">
+ <.icon name="hero-arrow-left" class="size-4" />
+ {gettext("Back")}
+
+
+ Page title (e.g. “Edit Member” or “New User”)
+ <:subtitle>Short explanation.
<:actions>
- <.button variant="primary" navigate={...}>Primary action
+ <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+ {gettext("Save")}
+
+```
-
-
-
+If the `<.header>` is outside the `<.form>`, the submit button must reference the form via the `form` attribute (e.g. `form="user-form"`).
## 3) Typography (system)
diff --git a/lib/mv_web/components/core_components.ex b/lib/mv_web/components/core_components.ex
index 83d506a..85c26c7 100644
--- a/lib/mv_web/components/core_components.ex
+++ b/lib/mv_web/components/core_components.ex
@@ -111,7 +111,7 @@ defmodule MvWeb.CoreComponents do
<.button variant="ghost" size="sm">Edit
<.button disabled={true}>Disabled
"""
- attr :rest, :global, include: ~w(href navigate patch method data-testid)
+ attr :rest, :global, include: ~w(href navigate patch method data-testid form)
attr :variant, :string,
values: ~w(primary secondary neutral ghost outline danger link icon),
@@ -633,17 +633,24 @@ defmodule MvWeb.CoreComponents do
@doc """
Renders a header with title.
+
+ Use the `:leading` slot for the Back button (left side, consistent with data fields).
+ Use the `:actions` slot for primary actions (e.g. Save) on the right.
"""
attr :class, :string, default: nil
+ slot :leading, doc: "Content on the left (e.g. Back button)"
slot :inner_block, required: true
slot :subtitle
slot :actions
def header(assigns) do
~H"""
-
-
+
+
+ {render_slot(@leading)}
+
+
{render_slot(@inner_block)}
@@ -651,7 +658,9 @@ defmodule MvWeb.CoreComponents do
{render_slot(@subtitle)}
-
{render_slot(@actions)}
+
+ {render_slot(@actions)}
+
"""
end
diff --git a/lib/mv_web/live/components/field_visibility_dropdown_component.ex b/lib/mv_web/live/components/field_visibility_dropdown_component.ex
index a8e8d45..58777da 100644
--- a/lib/mv_web/live/components/field_visibility_dropdown_component.ex
+++ b/lib/mv_web/live/components/field_visibility_dropdown_component.ex
@@ -188,7 +188,7 @@ defmodule MvWeb.Components.FieldVisibilityDropdownComponent do
defp find_custom_field_name(id, _field_string, custom_fields) do
case Enum.find(custom_fields, fn cf -> to_string(cf.id) == id end) do
- nil -> gettext("Custom Field %{id}", id: id)
+ nil -> gettext("Datafield %{id}", id: id)
custom_field -> custom_field.name
end
end
diff --git a/lib/mv_web/live/components/member_filter_component.ex b/lib/mv_web/live/components/member_filter_component.ex
index b837bc0..4ee72d3 100644
--- a/lib/mv_web/live/components/member_filter_component.ex
+++ b/lib/mv_web/live/components/member_filter_component.ex
@@ -252,7 +252,7 @@ defmodule MvWeb.Components.MemberFilterComponent do