From b7c93f19cb151e58daddb39b176c46fa376685b9 Mon Sep 17 00:00:00 2001
From: carla <carla@local-it.org>
Date: Wed, 25 Feb 2026 09:12:33 +0100
Subject: [PATCH] refactor: use core components

---
 lib/mv_web/components/core_components.ex      | 115 +++-
 lib/mv_web/components/layouts.ex              |   2 +-
 lib/mv_web/components/layouts/root.html.heex  |   2 +-
 .../components/member_filter_component.ex     |  24 +-
 .../live/components/sort_header_component.ex  |  41 +-
 .../live/custom_field_live/form_component.ex  |   6 +-
 .../live/custom_field_live/index_component.ex |  12 +-
 lib/mv_web/live/global_settings_live.ex       |   4 +-
 lib/mv_web/live/group_live/form.ex            |  45 +-
 lib/mv_web/live/group_live/index.ex           | 120 ++--
 lib/mv_web/live/group_live/show.ex            | 571 +++++++++---------
 .../live/member_field_live/form_component.ex  |   8 +-
 .../live/member_field_live/index_component.ex |   7 +-
 lib/mv_web/live/member_live/form.ex           | 421 +++++++------
 lib/mv_web/live/member_live/index.html.heex   |  16 +-
 lib/mv_web/live/member_live/show.ex           | 418 ++++++-------
 .../show/membership_fees_component.ex         |  62 +-
 .../live/membership_fee_settings_live.ex      |  36 +-
 .../live/membership_fee_type_live/form.ex     |  12 +-
 .../live/membership_fee_type_live/index.ex    |  32 +-
 lib/mv_web/live/role_live/form.ex             |  30 +-
 lib/mv_web/live/role_live/index.html.heex     |  21 +-
 lib/mv_web/live/role_live/show.ex             |  14 +-
 lib/mv_web/live/user_live/form.ex             |  11 +-
 lib/mv_web/live/user_live/index.html.heex     |   2 +-
 lib/mv_web/live/user_live/show.ex             |   2 +-
 26 files changed, 1080 insertions(+), 954 deletions(-)

diff --git a/lib/mv_web/components/core_components.ex b/lib/mv_web/components/core_components.ex
index 21e3546..4f9d7af 100644
--- a/lib/mv_web/components/core_components.ex
+++ b/lib/mv_web/components/core_components.ex
@@ -60,15 +60,15 @@ defmodule MvWeb.CoreComponents do
       id={@id}
       phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
       role="alert"
-      class="z-50 toast toast-top toast-end"
+      class="z-50 toast toast-bottom toast-end"
       {@rest}
     >
       <div class={[
         "alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
         @kind == :info && "alert-info",
         @kind == :error && "alert-error",
-        @kind == :success && "bg-green-500 text-white",
-        @kind == :warning && "bg-blue-100 text-blue-800 border border-blue-300"
+        @kind == :success && "alert-success",
+        @kind == :warning && "alert-warning"
       ]}>
         <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
         <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
@@ -90,33 +90,71 @@ defmodule MvWeb.CoreComponents do
   @doc """
   Renders a button with navigation support.
 
+  ## Variants (Design Guidelines §5.2)
+  - primary (main CTA)
+  - secondary (supporting)
+  - neutral (cancel/back)
+  - ghost (low emphasis; table/toolbars)
+  - outline (alternative CTA)
+  - danger (destructive)
+  - link (inline; rare)
+  - icon (icon-only)
+
+  ## Sizes
+  - sm, md (default), lg
+
   ## Examples
 
       <.button>Send!</.button>
       <.button phx-click="go" variant="primary">Send!</.button>
-      <.button navigate={~p"/"}>Home</.button>
+      <.button navigate={~p"/"} variant="secondary">Home</.button>
+      <.button variant="ghost" size="sm">Edit</.button>
       <.button disabled={true}>Disabled</.button>
   """
   attr :rest, :global, include: ~w(href navigate patch method data-testid)
-  attr :variant, :string, values: ~w(primary)
+
+  attr :variant, :string,
+    values: ~w(primary secondary neutral ghost outline danger link icon),
+    default: "primary"
+
+  attr :size, :string, values: ~w(sm md lg), default: "md"
   attr :disabled, :boolean, default: false, doc: "Whether the button is disabled"
   slot :inner_block, required: true
 
   def button(assigns) do
     rest = assigns.rest
-    variants = %{"primary" => "btn-primary", nil => "btn-primary btn-soft"}
-    assigns = assign(assigns, :class, Map.fetch!(variants, assigns[:variant]))
+    variant = assigns[:variant] || "primary"
+    size = assigns[:size] || "md"
+
+    variant_classes = %{
+      "primary" => "btn-primary",
+      "secondary" => "btn-secondary",
+      "neutral" => "btn-neutral",
+      "ghost" => "btn-ghost",
+      "outline" => "btn-outline",
+      "danger" => "btn-error",
+      "link" => "btn-link",
+      "icon" => "btn-ghost btn-square"
+    }
+
+    size_classes = %{
+      "sm" => "btn-sm",
+      "md" => "",
+      "lg" => "btn-lg"
+    }
+
+    base_class = Map.fetch!(variant_classes, variant)
+    size_class = size_classes[size]
+    btn_class = [base_class, size_class] |> Enum.reject(&(&1 == "")) |> Enum.join(" ")
+
+    assigns = assign(assigns, :btn_class, btn_class)
 
     if rest[:href] || rest[:navigate] || rest[:patch] do
-      # For links, we can't use disabled attribute, so we use btn-disabled class
-      # DaisyUI's btn-disabled provides the same styling as :disabled on buttons
       link_class =
         if assigns[:disabled],
-          do: ["btn", assigns.class, "btn-disabled"],
-          else: ["btn", assigns.class]
+          do: ["btn", btn_class, "btn-disabled"],
+          else: ["btn", btn_class]
 
-      # Prevent interaction when disabled
-      # Remove navigation attributes to prevent "Open in new tab", "Copy link" etc.
       link_attrs =
         if assigns[:disabled] do
           rest
@@ -138,13 +176,49 @@ defmodule MvWeb.CoreComponents do
       """
     else
       ~H"""
-      <button class={["btn", @class]} disabled={@disabled} {@rest}>
+      <button class={["btn", @btn_class]} disabled={@disabled} {@rest}>
         {render_slot(@inner_block)}
       </button>
       """
     end
   end
 
+  @doc """
+  Wraps content with a DaisyUI tooltip. Use for icon-only actions, truncated content,
+  or status badges that need explanation (Design Guidelines §8.2).
+
+  ## Examples
+
+      <.tooltip content={gettext("Edit")}>
+        <.button variant="icon" size="sm"><.icon name="hero-pencil" /></.button>
+      </.tooltip>
+
+      <.tooltip content={@full_name} position="top">
+        <span class="truncate max-w-32">{@full_name}</span>
+      </.tooltip>
+  """
+  attr :content, :string, required: true, doc: "Tooltip text (data-tip)"
+
+  attr :position, :string,
+    values: ~w(top bottom left right),
+    default: "bottom"
+
+  attr :wrap_class, :string, default: nil, doc: "Additional classes for the wrapper"
+  slot :inner_block, required: true
+
+  def tooltip(assigns) do
+    position_class = "tooltip tooltip-#{assigns.position}"
+    wrap_class = [position_class, assigns.wrap_class] |> Enum.reject(&is_nil/1) |> Enum.join(" ")
+
+    assigns = assign(assigns, :wrap_class, wrap_class)
+
+    ~H"""
+    <div class={@wrap_class} data-tip={@content}>
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
+
   @doc """
   Renders a dropdown menu.
 
@@ -437,7 +511,7 @@ defmodule MvWeb.CoreComponents do
             {@rest}
           />{@label}<span
             :if={@is_required}
-            class="text-red-700 tooltip tooltip-right"
+            class="text-error tooltip tooltip-right"
             data-tip={gettext("This field is required")}
           >*</span>
         </span>
@@ -456,7 +530,7 @@ defmodule MvWeb.CoreComponents do
         <span :if={@label} class="mb-1 label">
           {@label}<span
             :if={@rest[:required]}
-            class="text-red-700 tooltip tooltip-right"
+            class="text-error tooltip tooltip-right"
             data-tip={gettext("This field cannot be empty")}
           >*</span>
         </span>
@@ -485,7 +559,7 @@ defmodule MvWeb.CoreComponents do
         <span :if={@label} class="mb-1 label">
           {@label}<span
             :if={@rest[:required]}
-            class="text-red-700 tooltip tooltip-right"
+            class="text-error tooltip tooltip-right"
             data-tip={gettext("This field cannot be empty")}
           >*</span>
         </span>
@@ -514,7 +588,7 @@ defmodule MvWeb.CoreComponents do
         <span :if={@label} class="mb-1 label">
           {@label}<span
             :if={@rest[:required]}
-            class="text-red-700 tooltip tooltip-right"
+            class="text-error tooltip tooltip-right"
             data-tip={gettext("This field cannot be empty")}
           >*</span>
         </span>
@@ -585,6 +659,11 @@ defmodule MvWeb.CoreComponents do
   @doc ~S"""
   Renders a table with generic styling.
 
+  When `row_click` is set, clicking a row (or a data cell) triggers the handler.
+  The action column has no phx-click on its `<td>`, so action buttons do not trigger row navigation.
+  For interactive elements inside other columns (e.g. checkboxes, buttons), use
+  `Phoenix.LiveView.JS.stop_propagation()` in the element's phx-click so the row click is not fired.
+
   ## Examples
 
       <.table id="users" rows={@users}>
diff --git a/lib/mv_web/components/layouts.ex b/lib/mv_web/components/layouts.ex
index 89e3549..765edec 100644
--- a/lib/mv_web/components/layouts.ex
+++ b/lib/mv_web/components/layouts.ex
@@ -115,7 +115,7 @@ defmodule MvWeb.Layouts do
 
   def flash_group(assigns) do
     ~H"""
-    <div id={@id} aria-live="polite" class="z-50 flex flex-col gap-2 toast toast-top toast-end">
+    <div id={@id} aria-live="polite" class="z-50 flex flex-col gap-2 toast toast-bottom toast-end">
       <.flash kind={:success} flash={@flash} />
       <.flash kind={:warning} flash={@flash} />
       <.flash kind={:info} flash={@flash} />
diff --git a/lib/mv_web/components/layouts/root.html.heex b/lib/mv_web/components/layouts/root.html.heex
index a47fcc7..e107d5b 100644
--- a/lib/mv_web/components/layouts/root.html.heex
+++ b/lib/mv_web/components/layouts/root.html.heex
@@ -72,7 +72,7 @@
     <div
       id="flash-group-root"
       aria-live="polite"
-      class="z-50 flex flex-col gap-2 toast toast-top toast-end"
+      class="z-50 flex flex-col gap-2 toast toast-bottom toast-end"
     >
       <.flash id="flash-success-root" kind={:success} flash={@flash} />
       <.flash id="flash-warning-root" kind={:warning} flash={@flash} />
diff --git a/lib/mv_web/live/components/member_filter_component.ex b/lib/mv_web/live/components/member_filter_component.ex
index ef6f32e..c020fc1 100644
--- a/lib/mv_web/live/components/member_filter_component.ex
+++ b/lib/mv_web/live/components/member_filter_component.ex
@@ -64,11 +64,11 @@ defmodule MvWeb.Components.MemberFilterComponent do
       phx-key="Escape"
       phx-target={@myself}
     >
-      <button
+      <.button
         type="button"
-        tabindex="0"
+        variant="secondary"
         class={[
-          "btn gap-2",
+          "gap-2",
           (@cycle_status_filter || map_size(@group_filters) > 0 ||
              active_boolean_filters_count(@boolean_filters) > 0) &&
             "btn-active"
@@ -104,7 +104,7 @@ defmodule MvWeb.Components.MemberFilterComponent do
         >
           {@member_count}
         </span>
-      </button>
+      </.button>
       
     <!--
         NOTE: We use a div panel instead of ul.menu/li structure to avoid DaisyUI menu styles
@@ -318,22 +318,24 @@ defmodule MvWeb.Components.MemberFilterComponent do
           
     <!-- Footer -->
           <div class="mt-4 flex justify-between pt-3 border-t border-base-200">
-            <button
+            <.button
               type="button"
+              variant="neutral"
+              size="sm"
               phx-click="reset_filters"
               phx-target={@myself}
-              class="btn btn-sm"
             >
-              {gettext("Reset")}
-            </button>
-            <button
+              {gettext("Clear filters")}
+            </.button>
+            <.button
               type="button"
+              variant="primary"
+              size="sm"
               phx-click="close_dropdown"
               phx-target={@myself}
-              class="btn btn-primary btn-sm"
             >
               {gettext("Close")}
-            </button>
+            </.button>
           </div>
         </form>
       </div>
diff --git a/lib/mv_web/live/components/sort_header_component.ex b/lib/mv_web/live/components/sort_header_component.ex
index d548efa..c4850c4 100644
--- a/lib/mv_web/live/components/sort_header_component.ex
+++ b/lib/mv_web/live/components/sort_header_component.ex
@@ -19,25 +19,28 @@ defmodule MvWeb.Components.SortHeaderComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="tooltip tooltip-bottom" data-tip={aria_sort(@field, @sort_field, @sort_order)}>
-      <button
-        type="button"
-        aria-label={aria_sort(@field, @sort_field, @sort_order)}
-        class="btn btn-ghost select-none"
-        phx-click="sort"
-        phx-value-field={@field}
-        data-testid={@field}
-      >
-        {@label}
-        <%= if @sort_field == @field do %>
-          <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
-        <% else %>
-          <.icon
-            name="hero-chevron-up-down"
-            class="opacity-40"
-          />
-        <% end %>
-      </button>
+    <div>
+      <.tooltip content={aria_sort(@field, @sort_field, @sort_order)} position="bottom">
+        <.button
+          type="button"
+          variant="ghost"
+          aria-label={aria_sort(@field, @sort_field, @sort_order)}
+          class="select-none"
+          phx-click="sort"
+          phx-value-field={@field}
+          data-testid={@field}
+        >
+          {@label}
+          <%= if @sort_field == @field do %>
+            <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
+          <% else %>
+            <.icon
+              name="hero-chevron-up-down"
+              class="opacity-40"
+            />
+          <% end %>
+        </.button>
+      </.tooltip>
     </div>
     """
   end
diff --git a/lib/mv_web/live/custom_field_live/form_component.ex b/lib/mv_web/live/custom_field_live/form_component.ex
index f89f767..8e59ac9 100644
--- a/lib/mv_web/live/custom_field_live/form_component.ex
+++ b/lib/mv_web/live/custom_field_live/form_component.ex
@@ -24,11 +24,13 @@ defmodule MvWeb.CustomFieldLive.FormComponent do
         <div class="flex items-center gap-4 mb-4">
           <.button
             type="button"
+            variant="neutral"
             phx-click="cancel"
             phx-target={@myself}
             aria-label={gettext("Back to settings")}
           >
-            <.icon name="hero-arrow-left" class="w-4 h-4" />
+            <.icon name="hero-arrow-left" class="size-4" />
+            {gettext("Back")}
           </.button>
           <h3 class="card-title">
             {if @custom_field, do: gettext("Edit Data Field"), else: gettext("New Data Field")}
@@ -97,7 +99,7 @@ defmodule MvWeb.CustomFieldLive.FormComponent do
           />
 
           <div class="justify-end mt-4 card-actions">
-            <.button type="button" phx-click="cancel" phx-target={@myself}>
+            <.button type="button" variant="neutral" phx-click="cancel" phx-target={@myself}>
               {gettext("Cancel")}
             </.button>
             <.button phx-disable-with={gettext("Saving...")} variant="primary">
diff --git a/lib/mv_web/live/custom_field_live/index_component.ex b/lib/mv_web/live/custom_field_live/index_component.ex
index a670a3e..a944c85 100644
--- a/lib/mv_web/live/custom_field_live/index_component.ex
+++ b/lib/mv_web/live/custom_field_live/index_component.ex
@@ -100,7 +100,7 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
             <.link phx-click={
               JS.push("edit_custom_field", value: %{id: custom_field.id}, target: @myself)
             }>
-              {gettext("Edit")}
+              {gettext("Edit datafield")}
             </.link>
           </:action>
 
@@ -164,17 +164,17 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
           </div>
 
           <div class="modal-action">
-            <button phx-click="cancel_delete" phx-target={@myself} class="btn">
+            <.button variant="neutral" phx-click="cancel_delete" phx-target={@myself}>
               {gettext("Cancel")}
-            </button>
-            <button
+            </.button>
+            <.button
+              variant="danger"
               phx-click="confirm_delete"
               phx-target={@myself}
-              class="btn btn-error"
               disabled={@slug_confirmation != @custom_field_to_delete.slug}
             >
               {gettext("Delete Custom Field and All Values")}
-            </button>
+            </.button>
           </div>
         </div>
       </dialog>
diff --git a/lib/mv_web/live/global_settings_live.ex b/lib/mv_web/live/global_settings_live.ex
index 752c8d6..f3a61bc 100644
--- a/lib/mv_web/live/global_settings_live.ex
+++ b/lib/mv_web/live/global_settings_live.ex
@@ -181,18 +181,18 @@ defmodule MvWeb.GlobalSettingsLive do
             <.button
               :if={Mv.Config.vereinfacht_configured?()}
               type="button"
+              variant="outline"
               phx-click="test_vereinfacht_connection"
               phx-disable-with={gettext("Testing...")}
-              class="btn-outline"
             >
               {gettext("Test Integration")}
             </.button>
             <.button
               :if={Mv.Config.vereinfacht_configured?()}
               type="button"
+              variant="outline"
               phx-click="sync_vereinfacht_contacts"
               phx-disable-with={gettext("Syncing...")}
-              class="btn-outline"
             >
               {gettext("Sync all members without Vereinfacht contact")}
             </.button>
diff --git a/lib/mv_web/live/group_live/form.ex b/lib/mv_web/live/group_live/form.ex
index 0ffba09..5f781a7 100644
--- a/lib/mv_web/live/group_live/form.ex
+++ b/lib/mv_web/live/group_live/form.ex
@@ -78,30 +78,29 @@ defmodule MvWeb.GroupLive.Form do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
       <.form for={@form} id="group-form" phx-change="validate" phx-submit="save">
-        <%!-- Header with Back button, Title, and Save button --%>
-        <div class="flex items-center justify-between gap-4 pb-4">
-          <.button navigate={return_path(@return_to, @group)} type="button">
-            <.icon name="hero-arrow-left" class="size-4" />
-            {gettext("Back")}
-          </.button>
+        <.header>
+          {@page_title}
+          <:actions>
+            <.button navigate={return_path(@return_to, @group)} variant="neutral">
+              <.icon name="hero-arrow-left" class="size-4" />
+              {gettext("Back")}
+            </.button>
+            <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+              {gettext("Save")}
+            </.button>
+          </:actions>
+        </.header>
 
-          <h1 class="text-2xl font-bold text-center flex-1">
-            {@page_title}
-          </h1>
-
-          <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
-            {gettext("Save")}
-          </.button>
-        </div>
-
-        <div class="max-w-2xl space-y-4">
-          <.input field={@form[:name]} label={gettext("Name")} required />
-          <.input
-            field={@form[:description]}
-            type="textarea"
-            label={gettext("Description")}
-            rows="4"
-          />
+        <div class="mt-6 space-y-6">
+          <div class="max-w-2xl space-y-4">
+            <.input field={@form[:name]} label={gettext("Name")} required />
+            <.input
+              field={@form[:description]}
+              type="textarea"
+              label={gettext("Description")}
+              rows="4"
+            />
+          </div>
         </div>
       </.form>
     </Layouts.app>
diff --git a/lib/mv_web/live/group_live/index.ex b/lib/mv_web/live/group_live/index.ex
index deab7e1..b6c8277 100644
--- a/lib/mv_web/live/group_live/index.ex
+++ b/lib/mv_web/live/group_live/index.ex
@@ -39,72 +39,64 @@ defmodule MvWeb.GroupLive.Index do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <div class="flex items-center justify-between mb-6">
-        <h1 class="text-2xl font-bold">{gettext("Groups")}</h1>
-        <%= if can?(@current_user, :create, Mv.Membership.Group) do %>
-          <.button navigate={~p"/groups/new"} variant="primary">
-            <.icon name="hero-plus" class="size-4 mr-2" />
-            {gettext("Create Group")}
-          </.button>
+      <.header>
+        {gettext("Groups")}
+        <:actions>
+          <%= if can?(@current_user, :create, Mv.Membership.Group) do %>
+            <.button navigate={~p"/groups/new"} variant="primary">
+              <.icon name="hero-plus" class="size-4 mr-2" />
+              {gettext("Create Group")}
+            </.button>
+          <% end %>
+        </:actions>
+      </.header>
+
+      <div class="mt-6 space-y-6">
+        <%= if Enum.empty?(@groups) do %>
+          <div class="text-center py-12">
+            <p class="text-base-content/60 italic">{gettext("No groups")}</p>
+          </div>
+        <% else %>
+          <.table
+            id="groups-table"
+            rows={@groups}
+            row_id={fn group -> "group-#{group.id}" end}
+            row_click={fn group -> JS.navigate(~p"/groups/#{group.slug}") end}
+          >
+            <:col :let={group} label={gettext("Name")}>
+              {group.name}
+            </:col>
+            <:col :let={group} label={gettext("Description")}>
+              <%= if group.description do %>
+                {group.description}
+              <% else %>
+                <span class="text-base-content/50 italic">—</span>
+              <% end %>
+            </:col>
+            <:col :let={group} label={gettext("Members")} class="text-right">
+              {group.member_count || 0}
+            </:col>
+          <:action :let={group}>
+            <.button
+              variant="ghost"
+              size="sm"
+              navigate={~p"/groups/#{group.slug}"}
+            >
+              {gettext("View")}
+            </.button>
+            <%= if can?(@current_user, :update, Mv.Membership.Group) do %>
+              <.button
+                variant="ghost"
+                size="sm"
+                navigate={~p"/groups/#{group.slug}/edit"}
+              >
+                {gettext("Edit group")}
+              </.button>
+            <% end %>
+          </:action>
+          </.table>
         <% end %>
       </div>
-
-      <%= if Enum.empty?(@groups) do %>
-        <div class="text-center py-12">
-          <p class="text-base-content/70">{gettext("No groups")}</p>
-        </div>
-      <% else %>
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>{gettext("Name")}</th>
-                <th>{gettext("Description")}</th>
-                <th>{gettext("Members")}</th>
-                <th>{gettext("Actions")}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <%= for group <- @groups do %>
-                <tr>
-                  <td>
-                    {group.name}
-                  </td>
-                  <td>
-                    <%= if group.description do %>
-                      {group.description}
-                    <% else %>
-                      <span class="text-base-content/50 italic">—</span>
-                    <% end %>
-                  </td>
-                  <td>
-                    <%= if group.member_count do %>
-                      {group.member_count}
-                    <% else %>
-                      0
-                    <% end %>
-                  </td>
-                  <td>
-                    <div class="flex gap-2">
-                      <.link navigate={~p"/groups/#{group.slug}"} class="btn btn-sm btn-ghost">
-                        {gettext("View")}
-                      </.link>
-                      <%= if can?(@current_user, :update, Mv.Membership.Group) do %>
-                        <.link
-                          navigate={~p"/groups/#{group.slug}/edit"}
-                          class="btn btn-sm btn-ghost"
-                        >
-                          {gettext("Edit")}
-                        </.link>
-                      <% end %>
-                    </div>
-                  </td>
-                </tr>
-              <% end %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
     </Layouts.app>
     """
   end
diff --git a/lib/mv_web/live/group_live/show.ex b/lib/mv_web/live/group_live/show.ex
index 0c7e93e..46766ef 100644
--- a/lib/mv_web/live/group_live/show.ex
+++ b/lib/mv_web/live/group_live/show.ex
@@ -85,318 +85,327 @@ defmodule MvWeb.GroupLive.Show do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <%!-- Header with Back button, Name, and Edit/Delete buttons --%>
-      <div class="flex items-center justify-between gap-4 pb-4">
-        <.button navigate={~p"/groups"} aria-label={gettext("Back to groups list")}>
-          <.icon name="hero-arrow-left" class="size-4" />
-          {gettext("Back")}
-        </.button>
-
-        <h1 class="text-2xl font-bold text-center flex-1">
-          {@group.name}
-        </h1>
-
-        <div class="flex gap-2">
+      <.header>
+        {@group.name}
+        <:actions>
+          <.button
+            navigate={~p"/groups"}
+            variant="neutral"
+            aria-label={gettext("Back to groups list")}
+          >
+            <.icon name="hero-arrow-left" class="size-4" />
+            {gettext("Back")}
+          </.button>
           <%= if can?(@current_user, :update, @group) do %>
             <.button
               variant="primary"
               navigate={~p"/groups/#{@group.slug}/edit"}
               data-testid="group-show-edit-btn"
             >
-              {gettext("Edit")}
+              {gettext("Edit group")}
             </.button>
           <% end %>
           <%= if can?(@current_user, :destroy, @group) do %>
             <.button
-              class="btn-error"
+              variant="danger"
               phx-click="open_delete_modal"
               data-testid="group-show-delete-btn"
             >
               {gettext("Delete")}
             </.button>
           <% end %>
-        </div>
-      </div>
+        </:actions>
+      </.header>
 
-      <%!-- Group Information --%>
-      <div class="max-w-2xl space-y-6 mb-6">
-        <div>
-          <h2 class="text-lg font-semibold mb-2">{gettext("Description")}</h2>
-          <div class="border border-base-300 rounded-lg p-4 bg-base-100">
-            <%= if @group.description && String.trim(@group.description) != "" do %>
-              <p class="whitespace-pre-wrap">{@group.description}</p>
-            <% else %>
-              <p class="text-base-content/50 italic">{gettext("No description")}</p>
-            <% end %>
+      <div class="mt-6 space-y-6">
+        <%!-- Group Information --%>
+        <div class="max-w-2xl space-y-6 mb-6">
+          <div>
+            <h2 class="text-lg font-semibold mb-2">{gettext("Description")}</h2>
+            <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+              <%= if @group.description && String.trim(@group.description) != "" do %>
+                <p class="whitespace-pre-wrap">{@group.description}</p>
+              <% else %>
+                <p class="text-base-content/50 italic">{gettext("No description")}</p>
+              <% end %>
+            </div>
           </div>
-        </div>
 
-        <div>
-          <h2 class="text-lg font-semibold mb-2">{gettext("Members")}</h2>
-          <div class="border border-base-300 rounded-lg p-4 bg-base-100">
-            <p class="mb-4" data-testid="group-show-member-count">
-              {ngettext(
-                "Total: %{count} member",
-                "Total: %{count} members",
-                @group.member_count || 0,
-                count: @group.member_count || 0
-              )}
-            </p>
-
-            <%= if can?(@current_user, :update, @group) do %>
-              <div class="mb-4">
-                <%= if assigns[:show_add_member_input] do %>
-                  <div class="join w-full">
-                    <form phx-change="search_members" class="flex-1">
-                      <div class="relative">
-                        <div class="input input-bordered join-item w-full flex flex-wrap gap-1 items-center py-1 px-2">
-                          <%= for member <- @selected_members do %>
-                            <span class="badge badge-outline badge flex items-center gap-1">
-                              {MvWeb.Helpers.MemberHelpers.display_name(member)}
-                              <button
-                                type="button"
-                                class="btn btn-ghost btn-xs p-0 h-4 w-4 min-h-0"
-                                phx-click="remove_selected_member"
-                                phx-value-member_id={member.id}
-                                aria-label={
-                                  gettext("Remove %{name}",
-                                    name: MvWeb.Helpers.MemberHelpers.display_name(member)
-                                  )
-                                }
-                              >
-                                <.icon name="hero-x-mark" class="size-3" />
-                              </button>
-                            </span>
-                          <% end %>
-                          <input
-                            type="text"
-                            id="member-search-input"
-                            data-testid="group-show-member-search-input"
-                            role="combobox"
-                            phx-hook="ComboBox"
-                            phx-focus="show_member_dropdown"
-                            phx-debounce="300"
-                            phx-keydown="member_dropdown_keydown"
-                            phx-mounted={JS.focus()}
-                            value={@member_search_query}
-                            placeholder={
-                              if Enum.empty?(@selected_members),
-                                do: gettext("Search for a member..."),
-                                else: ""
-                            }
-                            class="flex-1 min-w-[120px] border-0 focus:outline-none bg-transparent"
-                            name="member_search"
-                            aria-label={gettext("Search for a member")}
-                            aria-autocomplete="list"
-                            aria-controls="member-dropdown"
-                            aria-expanded={to_string(@show_member_dropdown)}
-                            aria-activedescendant={
-                              if @focused_member_index,
-                                do: "member-option-#{@focused_member_index}",
-                                else: nil
-                            }
-                            autocomplete="off"
-                          />
-                        </div>
-
-                        <%= if length(@available_members) > 0 do %>
-                          <div
-                            id="member-dropdown"
-                            role="listbox"
-                            aria-label={gettext("Available members")}
-                            class={"absolute z-10 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto top-full #{if !@show_member_dropdown, do: "hidden"}"}
-                            phx-click-away="hide_member_dropdown"
-                          >
-                            <%= for {member, index} <- Enum.with_index(@available_members) do %>
-                              <div
-                                id={"member-option-#{index}"}
-                                role="option"
-                                tabindex="0"
-                                aria-selected={to_string(@focused_member_index == index)}
-                                phx-click="select_member"
-                                phx-value-id={member.id}
-                                data-member-id={member.id}
-                                class={[
-                                  "px-4 py-3 cursor-pointer border-b border-base-300 last:border-b-0",
-                                  if(@focused_member_index == index,
-                                    do: "bg-base-300",
-                                    else: "hover:bg-base-200"
-                                  )
-                                ]}
-                              >
-                                <p class="font-medium">
-                                  {MvWeb.Helpers.MemberHelpers.display_name(member)}
-                                </p>
-                                <p class="text-sm text-base-content/70">
-                                  {member.email || gettext("No email")}
-                                </p>
-                              </div>
-                            <% end %>
-                          </div>
-                        <% end %>
-                      </div>
-                    </form>
-                    <button
-                      type="button"
-                      class="btn btn-primary join-item"
-                      phx-click="add_selected_members"
-                      data-testid="group-show-add-selected-members-btn"
-                      disabled={Enum.empty?(@selected_member_ids)}
-                      aria-label={gettext("Add members")}
-                    >
-                      <.icon name="hero-plus" class="size-5" />
-                    </button>
-                    <button
-                      type="button"
-                      class="btn join-item"
-                      phx-click="hide_add_member_input"
-                      aria-label={gettext("Cancel")}
-                    >
-                      {gettext("Cancel")}
-                    </button>
-                  </div>
-                <% else %>
-                  <.button
-                    variant="primary"
-                    phx-click="show_add_member_input"
-                    aria-label={gettext("Add Member")}
-                  >
-                    {gettext("Add Member")}
-                  </.button>
-                <% end %>
-              </div>
-            <% end %>
-
-            <%= if Enum.empty?(@group.members || []) do %>
-              <p class="text-base-content/50 italic" data-testid="group-show-no-members">
-                {gettext("No members in this group")}
+          <div>
+            <h2 class="text-lg font-semibold mb-2">{gettext("Members")}</h2>
+            <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+              <p class="mb-4" data-testid="group-show-member-count">
+                {ngettext(
+                  "Total: %{count} member",
+                  "Total: %{count} members",
+                  @group.member_count || 0,
+                  count: @group.member_count || 0
+                )}
               </p>
-            <% else %>
-              <div class="overflow-x-auto" data-testid="group-show-members-table">
-                <table class="table table-zebra">
-                  <thead>
-                    <tr>
-                      <th>{gettext("Name")}</th>
-                      <th>{gettext("Email")}</th>
-                      <%= if can?(@current_user, :update, @group) do %>
-                        <th class="w-0">{gettext("Actions")}</th>
-                      <% end %>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <%= for member <- @group.members do %>
-                      <tr>
-                        <td>
-                          <.link
-                            navigate={~p"/members/#{member.id}"}
-                            class="link link-primary"
-                          >
-                            {MvWeb.Helpers.MemberHelpers.display_name(member)}
-                          </.link>
-                        </td>
-                        <td>
-                          <%= if member.email do %>
-                            <a
-                              href={"mailto:#{member.email}"}
-                              class="text-blue-700 hover:text-blue-800 underline"
+
+              <%= if can?(@current_user, :update, @group) do %>
+                <div class="mb-4">
+                  <%= if assigns[:show_add_member_input] do %>
+                    <div class="join w-full">
+                      <form phx-change="search_members" class="flex-1">
+                        <div class="relative">
+                          <div class="input input-bordered join-item w-full flex flex-wrap gap-1 items-center py-1 px-2">
+                              <%= for member <- @selected_members do %>
+                              <span class="badge badge-outline badge flex items-center gap-1">
+                                {MvWeb.Helpers.MemberHelpers.display_name(member)}
+                                <.tooltip content={gettext("Remove")} position="top">
+                                  <.button
+                                    type="button"
+                                    variant="icon"
+                                    size="sm"
+                                    phx-click="remove_selected_member"
+                                    phx-value-member_id={member.id}
+                                    aria-label={
+                                      gettext("Remove %{name}",
+                                        name: MvWeb.Helpers.MemberHelpers.display_name(member)
+                                      )
+                                    }
+                                    class="p-0 h-4 w-4 min-h-0"
+                                  >
+                                    <.icon name="hero-x-mark" class="size-3" />
+                                  </.button>
+                                </.tooltip>
+                              </span>
+                            <% end %>
+                            <input
+                              type="text"
+                              id="member-search-input"
+                              data-testid="group-show-member-search-input"
+                              role="combobox"
+                              phx-hook="ComboBox"
+                              phx-focus="show_member_dropdown"
+                              phx-debounce="300"
+                              phx-keydown="member_dropdown_keydown"
+                              phx-mounted={JS.focus()}
+                              value={@member_search_query}
+                              placeholder={
+                                if Enum.empty?(@selected_members),
+                                  do: gettext("Search for a member..."),
+                                  else: ""
+                              }
+                              class="flex-1 min-w-[120px] border-0 focus:outline-none bg-transparent"
+                              name="member_search"
+                              aria-label={gettext("Search for a member")}
+                              aria-autocomplete="list"
+                              aria-controls="member-dropdown"
+                              aria-expanded={to_string(@show_member_dropdown)}
+                              aria-activedescendant={
+                                if @focused_member_index,
+                                  do: "member-option-#{@focused_member_index}",
+                                  else: nil
+                              }
+                              autocomplete="off"
+                            />
+                          </div>
+
+                          <%= if length(@available_members) > 0 do %>
+                            <div
+                              id="member-dropdown"
+                              role="listbox"
+                              aria-label={gettext("Available members")}
+                              class={"absolute z-10 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto top-full #{if !@show_member_dropdown, do: "hidden"}"}
+                              phx-click-away="hide_member_dropdown"
                             >
-                              {member.email}
-                            </a>
-                          <% else %>
-                            <span class="text-base-content/50 italic">—</span>
+                              <%= for {member, index} <- Enum.with_index(@available_members) do %>
+                                <div
+                                  id={"member-option-#{index}"}
+                                  role="option"
+                                  tabindex="0"
+                                  aria-selected={to_string(@focused_member_index == index)}
+                                  phx-click="select_member"
+                                  phx-value-id={member.id}
+                                  data-member-id={member.id}
+                                  class={[
+                                    "px-4 py-3 cursor-pointer border-b border-base-300 last:border-b-0",
+                                    if(@focused_member_index == index,
+                                      do: "bg-base-300",
+                                      else: "hover:bg-base-200"
+                                    )
+                                  ]}
+                                >
+                                  <p class="font-medium">
+                                    {MvWeb.Helpers.MemberHelpers.display_name(member)}
+                                  </p>
+                                  <p class="text-sm text-base-content/70">
+                                    {member.email || gettext("No email")}
+                                  </p>
+                                </div>
+                              <% end %>
+                            </div>
                           <% end %>
-                        </td>
+                        </div>
+                      </form>
+                      <.button
+                        type="button"
+                        variant="primary"
+                        phx-click="add_selected_members"
+                        data-testid="group-show-add-selected-members-btn"
+                        disabled={Enum.empty?(@selected_member_ids)}
+                        aria-label={gettext("Add members")}
+                        class="join-item"
+                      >
+                        <.icon name="hero-plus" class="size-5" />
+                      </.button>
+                      <.button
+                        type="button"
+                        variant="neutral"
+                        phx-click="hide_add_member_input"
+                        aria-label={gettext("Cancel")}
+                        class="join-item"
+                      >
+                        {gettext("Cancel")}
+                      </.button>
+                    </div>
+                  <% else %>
+                    <.button
+                      variant="primary"
+                      phx-click="show_add_member_input"
+                      aria-label={gettext("Add Member")}
+                    >
+                      {gettext("Add Member")}
+                    </.button>
+                  <% end %>
+                </div>
+              <% end %>
+
+              <%= if Enum.empty?(@group.members || []) do %>
+                <p class="text-base-content/50 italic" data-testid="group-show-no-members">
+                  {gettext("No members in this group")}
+                </p>
+              <% else %>
+                <div class="overflow-x-auto" data-testid="group-show-members-table">
+                  <table class="table table-zebra">
+                    <thead>
+                      <tr>
+                        <th>{gettext("Name")}</th>
+                        <th>{gettext("Email")}</th>
                         <%= if can?(@current_user, :update, @group) do %>
-                          <td>
-                            <button
-                              type="button"
-                              class="btn btn-ghost btn-sm text-error"
-                              phx-click="remove_member"
-                              phx-value-member_id={member.id}
-                              data-testid="group-show-remove-member"
-                              aria-label={gettext("Remove member from group")}
-                              data-tooltip={gettext("Remove")}
-                            >
-                              <.icon name="hero-trash" class="size-4" />
-                            </button>
-                          </td>
+                          <th class="w-0">{gettext("Actions")}</th>
                         <% end %>
                       </tr>
-                    <% end %>
-                  </tbody>
-                </table>
-              </div>
-            <% end %>
+                    </thead>
+                    <tbody>
+                      <%= for member <- @group.members do %>
+                        <tr>
+                          <td>
+                            <.link
+                              navigate={~p"/members/#{member.id}"}
+                              class="link link-primary"
+                            >
+                              {MvWeb.Helpers.MemberHelpers.display_name(member)}
+                            </.link>
+                          </td>
+                          <td>
+                            <%= if member.email do %>
+                              <a
+                                href={"mailto:#{member.email}"}
+                                class="link link-primary"
+                              >
+                                {member.email}
+                              </a>
+                            <% else %>
+                              <span class="text-base-content/50 italic">—</span>
+                            <% end %>
+                          </td>
+                          <%= if can?(@current_user, :update, @group) do %>
+                            <td>
+                              <.tooltip content={gettext("Remove")} position="left">
+                                <.button
+                                  type="button"
+                                  variant="danger"
+                                  size="sm"
+                                  phx-click="remove_member"
+                                  phx-value-member_id={member.id}
+                                  data-testid="group-show-remove-member"
+                                  aria-label={gettext("Remove member from group")}
+                                >
+                                  <.icon name="hero-trash" class="size-4" />
+                                </.button>
+                              </.tooltip>
+                            </td>
+                          <% end %>
+                        </tr>
+                      <% end %>
+                    </tbody>
+                  </table>
+                </div>
+              <% end %>
+            </div>
           </div>
         </div>
-      </div>
 
-      <%!-- Delete Confirmation Modal --%>
-      <%= if assigns[:show_delete_modal] do %>
-        <dialog id="delete-group-modal" class="modal modal-open" role="dialog">
-          <div class="modal-box">
-            <h3 class="text-lg font-bold mb-4">{gettext("Delete Group")}</h3>
-            <p class="mb-4">
-              {gettext("Are you sure you want to delete this group? This action cannot be undone.")}
-            </p>
-            <%= if @group.member_count && @group.member_count > 0 do %>
-              <div class="alert alert-warning mb-4">
-                <.icon name="hero-exclamation-triangle" class="size-5" />
-                <span>
-                  {ngettext(
-                    "This group has %{count} member. All member-group associations will be permanently deleted.",
-                    "This group has %{count} members. All member-group associations will be permanently deleted.",
-                    @group.member_count,
-                    count: @group.member_count
-                  )}
-                </span>
+        <%!-- Delete Confirmation Modal --%>
+        <%= if assigns[:show_delete_modal] do %>
+          <dialog id="delete-group-modal" class="modal modal-open" role="dialog">
+            <div class="modal-box">
+              <h3 class="text-lg font-bold mb-4">{gettext("Delete Group")}</h3>
+              <p class="mb-4">
+                {gettext("Are you sure you want to delete this group? This action cannot be undone.")}
+              </p>
+              <%= if @group.member_count && @group.member_count > 0 do %>
+                <div class="alert alert-warning mb-4">
+                  <.icon name="hero-exclamation-triangle" class="size-5" />
+                  <span>
+                    {ngettext(
+                      "This group has %{count} member. All member-group associations will be permanently deleted.",
+                      "This group has %{count} members. All member-group associations will be permanently deleted.",
+                      @group.member_count,
+                      count: @group.member_count
+                    )}
+                  </span>
+                </div>
+              <% end %>
+              <div>
+                <label for="group-name-confirmation" class="label">
+                  <span class="label-text">
+                    {gettext("To confirm deletion, please enter the group name:")}
+                  </span>
+                </label>
+                <div class="p-2 mb-2 font-mono text-lg font-bold break-all rounded bg-base-200">
+                  {@group.name}
+                </div>
+                <form phx-change="update_name_confirmation">
+                  <input
+                    id="group-name-confirmation"
+                    name="name"
+                    type="text"
+                    value={@name_confirmation || ""}
+                    placeholder={gettext("Enter the group name to confirm")}
+                    autocomplete="off"
+                    phx-debounce="200"
+                    class="w-full input input-bordered"
+                  />
+                </form>
               </div>
-            <% end %>
-            <div>
-              <label for="group-name-confirmation" class="label">
-                <span class="label-text">
-                  {gettext("To confirm deletion, please enter the group name:")}
-                </span>
-              </label>
-              <div class="p-2 mb-2 font-mono text-lg font-bold break-all rounded bg-base-200">
-                {@group.name}
+              <div class="modal-action">
+                <.button
+                  type="button"
+                  variant="neutral"
+                  phx-click="cancel_delete"
+                  aria-label={gettext("Cancel")}
+                >
+                  {gettext("Cancel")}
+                </.button>
+                <.button
+                  type="button"
+                  variant="danger"
+                  phx-click="confirm_delete"
+                  phx-value-slug={@group.slug}
+                  disabled={(@name_confirmation || "") != @group.name}
+                  aria-label={gettext("Delete group")}
+                >
+                  {gettext("Delete")}
+                </.button>
               </div>
-              <form phx-change="update_name_confirmation">
-                <input
-                  id="group-name-confirmation"
-                  name="name"
-                  type="text"
-                  value={@name_confirmation || ""}
-                  placeholder={gettext("Enter the group name to confirm")}
-                  autocomplete="off"
-                  phx-debounce="200"
-                  class="w-full input input-bordered"
-                />
-              </form>
             </div>
-            <div class="modal-action">
-              <button
-                type="button"
-                class="btn"
-                phx-click="cancel_delete"
-                aria-label={gettext("Cancel")}
-              >
-                {gettext("Cancel")}
-              </button>
-              <button
-                type="button"
-                class="btn btn-error"
-                phx-click="confirm_delete"
-                phx-value-slug={@group.slug}
-                disabled={(@name_confirmation || "") != @group.name}
-                aria-label={gettext("Delete group")}
-              >
-                {gettext("Delete")}
-              </button>
-            </div>
-          </div>
-        </dialog>
-      <% end %>
+          </dialog>
+        <% end %>
+      </div>
     </Layouts.app>
     """
   end
diff --git a/lib/mv_web/live/member_field_live/form_component.ex b/lib/mv_web/live/member_field_live/form_component.ex
index ae9e239..17266a8 100644
--- a/lib/mv_web/live/member_field_live/form_component.ex
+++ b/lib/mv_web/live/member_field_live/form_component.ex
@@ -42,11 +42,13 @@ defmodule MvWeb.MemberFieldLive.FormComponent do
         <div class="flex items-center gap-4 mb-4">
           <.button
             type="button"
+            variant="neutral"
             phx-click="cancel"
             phx-target={@myself}
-            aria-label={gettext("Back to Settings")}
+            aria-label={gettext("Back to settings")}
           >
-            <.icon name="hero-arrow-left" class="w-4 h-4" />
+            <.icon name="hero-arrow-left" class="size-4" />
+            {gettext("Back")}
           </.button>
           <h3 class="card-title">
             {gettext("Edit Field: %{field}", field: @field_label)}
@@ -176,7 +178,7 @@ defmodule MvWeb.MemberFieldLive.FormComponent do
           </div>
 
           <div class="justify-end mt-4 card-actions">
-            <.button type="button" phx-click="cancel" phx-target={@myself}>
+            <.button type="button" variant="neutral" phx-click="cancel" phx-target={@myself}>
               {gettext("Cancel")}
             </.button>
             <.button phx-disable-with={gettext("Saving...")} variant="primary">
diff --git a/lib/mv_web/live/member_field_live/index_component.ex b/lib/mv_web/live/member_field_live/index_component.ex
index db62778..1e8cf05 100644
--- a/lib/mv_web/live/member_field_live/index_component.ex
+++ b/lib/mv_web/live/member_field_live/index_component.ex
@@ -52,6 +52,11 @@ defmodule MvWeb.MemberFieldLive.IndexComponent do
         :if={!@show_form}
         id="member_fields"
         rows={@member_fields}
+        row_click={
+          fn {field_name, _field_data} ->
+            JS.push("edit_member_field", value: %{"field" => field_name}, target: @myself)
+          end
+        }
       >
         <:col :let={{_field_name, field_data}} label={gettext("Name")}>
           {MemberFields.label(field_data.field)}
@@ -93,7 +98,7 @@ defmodule MvWeb.MemberFieldLive.IndexComponent do
             phx-value-field={Atom.to_string(field_data.field)}
             phx-target={@myself}
           >
-            {gettext("Edit")}
+            {gettext("Edit datafield")}
           </.link>
         </:action>
       </.table>
diff --git a/lib/mv_web/live/member_live/form.ex b/lib/mv_web/live/member_live/form.ex
index 6b3ce67..625ab2a 100644
--- a/lib/mv_web/live/member_live/form.ex
+++ b/lib/mv_web/live/member_live/form.ex
@@ -38,227 +38,226 @@ defmodule MvWeb.MemberLive.Form do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
       <.form for={@form} id="member-form" phx-change="validate" phx-submit="save">
-        <%!-- 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>
+        <.header>
+          <%= if @member do %>
+            {MvWeb.Helpers.MemberHelpers.display_name(@member)}
+          <% else %>
+            {gettext("New Member")}
+          <% end %>
+          <:actions>
+            <.button navigate={return_path(@return_to, @member)} variant="neutral">
+              <.icon name="hero-arrow-left" class="size-4" />
+              {gettext("Back")}
+            </.button>
+            <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+              {gettext("Save")}
+            </.button>
+          </:actions>
+        </.header>
 
-          <h1 class="text-2xl font-bold text-center flex-1">
-            <%= if @member do %>
-              {MvWeb.Helpers.MemberHelpers.display_name(@member)}
-            <% else %>
-              {gettext("New Member")}
+        <div class="mt-6 space-y-6">
+          <%!-- Tab Navigation --%>
+          <div role="tablist" class="tabs tabs-bordered">
+            <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={@member_field_required_map[:first_name]}
+                      />
+                    </div>
+                    <div class="w-48">
+                      <.input
+                        field={@form[:last_name]}
+                        label={gettext("Last Name")}
+                        required={@member_field_required_map[:last_name]}
+                      />
+                    </div>
+                  </div>
+
+                  <%!-- Address Row --%>
+                  <div class="flex gap-4">
+                    <div class="flex-1">
+                      <.input
+                        field={@form[:street]}
+                        label={gettext("Street")}
+                        required={@member_field_required_map[:street]}
+                      />
+                    </div>
+                    <div class="w-16">
+                      <.input
+                        field={@form[:house_number]}
+                        label={gettext("Nr.")}
+                        required={@member_field_required_map[:house_number]}
+                      />
+                    </div>
+                    <div class="w-24">
+                      <.input
+                        field={@form[:postal_code]}
+                        label={gettext("Postal Code")}
+                        required={@member_field_required_map[:postal_code]}
+                      />
+                    </div>
+                    <div class="w-32">
+                      <.input
+                        field={@form[:city]}
+                        label={gettext("City")}
+                        required={@member_field_required_map[:city]}
+                      />
+                    </div>
+                  </div>
+
+                  <%!-- Email (always required) --%>
+                  <div>
+                    <.input field={@form[:email]} label={gettext("Email")} required type="email" />
+                  </div>
+
+                  <%!-- Membership Dates Row --%>
+                  <div class="flex gap-4">
+                    <div class="w-36">
+                      <.input
+                        field={@form[:join_date]}
+                        label={gettext("Join Date")}
+                        type="date"
+                        required={@member_field_required_map[:join_date]}
+                      />
+                    </div>
+                    <div class="w-36">
+                      <.input
+                        field={@form[:exit_date]}
+                        label={gettext("Exit Date")}
+                        type="date"
+                        required={@member_field_required_map[:exit_date]}
+                      />
+                    </div>
+                  </div>
+
+                  <%!-- Notes --%>
+                  <div>
+                    <.input
+                      field={@form[:notes]}
+                      label={gettext("Notes")}
+                      type="textarea"
+                      required={@member_field_required_map[:notes]}
+                    />
+                  </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)}
+                                required={cf.required}
+                              />
+                            </.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 %>
-          </h1>
+          </div>
 
-          <.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")}>
+          <%!-- Membership Fee Section --%>
+          <div class="max-w-xl">
+            <.form_section title={gettext("Membership Fee")}>
               <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={@member_field_required_map[:first_name]}
-                    />
-                  </div>
-                  <div class="w-48">
-                    <.input
-                      field={@form[:last_name]}
-                      label={gettext("Last Name")}
-                      required={@member_field_required_map[:last_name]}
-                    />
-                  </div>
-                </div>
-
-                <%!-- Address Row --%>
-                <div class="flex gap-4">
-                  <div class="flex-1">
-                    <.input
-                      field={@form[:street]}
-                      label={gettext("Street")}
-                      required={@member_field_required_map[:street]}
-                    />
-                  </div>
-                  <div class="w-16">
-                    <.input
-                      field={@form[:house_number]}
-                      label={gettext("Nr.")}
-                      required={@member_field_required_map[:house_number]}
-                    />
-                  </div>
-                  <div class="w-24">
-                    <.input
-                      field={@form[:postal_code]}
-                      label={gettext("Postal Code")}
-                      required={@member_field_required_map[:postal_code]}
-                    />
-                  </div>
-                  <div class="w-32">
-                    <.input
-                      field={@form[:city]}
-                      label={gettext("City")}
-                      required={@member_field_required_map[:city]}
-                    />
-                  </div>
-                </div>
-
-                <%!-- Email (always required) --%>
                 <div>
-                  <.input field={@form[:email]} label={gettext("Email")} required type="email" />
-                </div>
-
-                <%!-- Membership Dates Row --%>
-                <div class="flex gap-4">
-                  <div class="w-36">
-                    <.input
-                      field={@form[:join_date]}
-                      label={gettext("Join Date")}
-                      type="date"
-                      required={@member_field_required_map[:join_date]}
-                    />
-                  </div>
-                  <div class="w-36">
-                    <.input
-                      field={@form[:exit_date]}
-                      label={gettext("Exit Date")}
-                      type="date"
-                      required={@member_field_required_map[:exit_date]}
-                    />
-                  </div>
-                </div>
-
-                <%!-- Notes --%>
-                <div>
-                  <.input
-                    field={@form[:notes]}
-                    label={gettext("Notes")}
-                    type="textarea"
-                    required={@member_field_required_map[:notes]}
-                  />
+                  <label class="label">
+                    <span class="label-text font-semibold">{gettext("Membership Fee Type")}</span>
+                  </label>
+                  <select
+                    class="select select-bordered w-full"
+                    name={@form[:membership_fee_type_id].name}
+                    phx-change="validate"
+                    value={@form[:membership_fee_type_id].value || ""}
+                  >
+                    <%!-- No "None" option: a membership fee type is required (validated in Member resource). --%>
+                    <option value="">{gettext("Select a membership fee type")}</option>
+                    <%= for fee_type <- @available_fee_types do %>
+                      <option
+                        value={fee_type.id}
+                        selected={fee_type.id == @form[:membership_fee_type_id].value}
+                      >
+                        {fee_type.name} ({MembershipFeeHelpers.format_currency(fee_type.amount)}, {MembershipFeeHelpers.format_interval(
+                          fee_type.interval
+                        )})
+                      </option>
+                    <% end %>
+                  </select>
+                  <%= for error <- List.wrap(@form.errors[:membership_fee_type_id] || []) do %>
+                    <% {msg, _opts} = if is_tuple(error), do: error, else: {error, []} %>
+                    <p class="text-error text-sm mt-1">{msg}</p>
+                  <% end %>
+                  <%= if @interval_warning do %>
+                    <div class="alert alert-warning mt-2">
+                      <.icon name="hero-exclamation-triangle" class="size-5" />
+                      <span>{@interval_warning}</span>
+                    </div>
+                  <% end %>
+                  <p class="text-sm text-base-content/60 mt-2">
+                    {gettext(
+                      "Select a membership fee type for this member. Members can only switch between types with the same interval."
+                    )}
+                  </p>
                 </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)}
-                              required={cf.required}
-                            />
-                          </.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>
-
-        <%!-- Membership Fee Section --%>
-        <div class="max-w-xl">
-          <.form_section title={gettext("Membership Fee")}>
-            <div class="space-y-4">
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">{gettext("Membership Fee Type")}</span>
-                </label>
-                <select
-                  class="select select-bordered w-full"
-                  name={@form[:membership_fee_type_id].name}
-                  phx-change="validate"
-                  value={@form[:membership_fee_type_id].value || ""}
-                >
-                  <%!-- No "None" option: a membership fee type is required (validated in Member resource). --%>
-                  <option value="">{gettext("Select a membership fee type")}</option>
-                  <%= for fee_type <- @available_fee_types do %>
-                    <option
-                      value={fee_type.id}
-                      selected={fee_type.id == @form[:membership_fee_type_id].value}
-                    >
-                      {fee_type.name} ({MembershipFeeHelpers.format_currency(fee_type.amount)}, {MembershipFeeHelpers.format_interval(
-                        fee_type.interval
-                      )})
-                    </option>
-                  <% end %>
-                </select>
-                <%= for error <- List.wrap(@form.errors[:membership_fee_type_id] || []) do %>
-                  <% {msg, _opts} = if is_tuple(error), do: error, else: {error, []} %>
-                  <p class="text-error text-sm mt-1">{msg}</p>
-                <% end %>
-                <%= if @interval_warning do %>
-                  <div class="alert alert-warning mt-2">
-                    <.icon name="hero-exclamation-triangle" class="size-5" />
-                    <span>{@interval_warning}</span>
-                  </div>
-                <% end %>
-                <p class="text-sm text-base-content/60 mt-2">
-                  {gettext(
-                    "Select a membership fee type for this member. Members can only switch between types with the same interval."
-                  )}
-                </p>
-              </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>
+          <%!-- Bottom Action Buttons --%>
+          <div class="flex justify-end gap-4 mt-6">
+            <.button navigate={return_path(@return_to, @member)} variant="neutral" type="button">
+              {gettext("Cancel")}
+            </.button>
+            <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+              {gettext("Save Member")}
+            </.button>
+          </div>
         </div>
       </.form>
     </Layouts.app>
diff --git a/lib/mv_web/live/member_live/index.html.heex b/lib/mv_web/live/member_live/index.html.heex
index fcf06c8..c54ec7c 100644
--- a/lib/mv_web/live/member_live/index.html.heex
+++ b/lib/mv_web/live/member_live/index.html.heex
@@ -9,7 +9,7 @@
         selected_count={@selected_count}
       />
       <.button
-        class="secondary"
+        variant="secondary"
         id="copy-emails-btn"
         phx-hook="CopyToClipboard"
         phx-click="copy_emails"
@@ -20,7 +20,7 @@
         {gettext("Copy email addresses")} ({@selected_count})
       </.button>
       <.button
-        class="secondary"
+        variant="secondary"
         id="open-email-btn"
         href={"mailto:?bcc=" <> @mailto_bcc}
         disabled={not @any_selected?}
@@ -54,13 +54,11 @@
       boolean_filters={@boolean_custom_field_filters}
       member_count={length(@members)}
     />
-    <button
+    <.button
       type="button"
+      variant="secondary"
+      class={["gap-2", @show_current_cycle && "btn-active"]}
       phx-click="toggle_cycle_view"
-      class={[
-        "btn gap-2",
-        @show_current_cycle && "btn-active"
-      ]}
       aria-label={
         if(@show_current_cycle,
           do: gettext("Current Cycle Payment Status"),
@@ -81,7 +79,7 @@
           else: gettext("Last Cycle Payment Status")
         )}
       </span>
-    </button>
+    </.button>
     <.live_component
       module={MvWeb.Components.FieldVisibilityDropdownComponent}
       id="field-visibility-dropdown"
@@ -386,7 +384,7 @@
 
       <%= if can?(@current_user, :update, member) do %>
         <.link navigate={~p"/members/#{member}/edit"} data-testid="member-edit">
-          {gettext("Edit")}
+          {gettext("Edit member")}
         </.link>
       <% end %>
     </:action>
diff --git a/lib/mv_web/live/member_live/show.ex b/lib/mv_web/live/member_live/show.ex
index a85bf69..3af0ed2 100644
--- a/lib/mv_web/live/member_live/show.ex
+++ b/lib/mv_web/live/member_live/show.ex
@@ -30,235 +30,243 @@ defmodule MvWeb.MemberLive.Show do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <%!-- 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>
-
-        <h1 class="text-2xl font-bold text-center flex-1">
-          {MvWeb.Helpers.MemberHelpers.display_name(@member)}
-        </h1>
-
-        <%= if can?(@current_user, :update, @member) do %>
+      <.header>
+        {MvWeb.Helpers.MemberHelpers.display_name(@member)}
+        <:actions>
           <.button
-            variant="primary"
-            navigate={~p"/members/#{@member}/edit?return_to=show"}
-            data-testid="member-edit"
+            navigate={~p"/members"}
+            variant="neutral"
+            aria-label={gettext("Back to members list")}
           >
-            {gettext("Edit Member")}
+            <.icon name="hero-arrow-left" class="size-4" />
+            {gettext("Back")}
           </.button>
-        <% end %>
-      </div>
+          <%= if can?(@current_user, :update, @member) do %>
+            <.button
+              variant="primary"
+              navigate={~p"/members/#{@member}/edit?return_to=show"}
+              data-testid="member-edit"
+            >
+              {gettext("Edit member")}
+            </.button>
+          <% end %>
+        </:actions>
+      </.header>
 
-      <%!-- Tab Navigation --%>
-      <div role="tablist" class="tabs tabs-bordered mb-6">
-        <button
-          role="tab"
-          class={[
-            "tab",
-            if(@active_tab == :contact, do: "tab-active", else: "!text-gray-800")
-          ]}
-          aria-selected={@active_tab == :contact}
-          phx-click="switch_tab"
-          phx-value-tab="contact"
-        >
-          <.icon name="hero-identification" class="size-4 mr-2" />
-          {gettext("Contact Data")}
-        </button>
-        <button
-          role="tab"
-          class={[
-            "tab",
-            if(@active_tab == :membership_fees, do: "tab-active", else: "!text-gray-800")
-          ]}
-          aria-selected={@active_tab == :membership_fees}
-          phx-click="switch_tab"
-          phx-value-tab="membership_fees"
-        >
-          <.icon name="hero-credit-card" class="size-4 mr-2" />
-          {gettext("Membership Fees")}
-        </button>
-      </div>
+      <div class="mt-6 space-y-6">
+        <%!-- Tab Navigation --%>
+        <div role="tablist" class="tabs tabs-bordered">
+          <button
+            role="tab"
+            class={[
+              "tab",
+              if(@active_tab == :contact, do: "tab-active", else: "!text-gray-800")
+            ]}
+            aria-selected={@active_tab == :contact}
+            phx-click="switch_tab"
+            phx-value-tab="contact"
+          >
+            <.icon name="hero-identification" class="size-4 mr-2" />
+            {gettext("Contact Data")}
+          </button>
+          <button
+            role="tab"
+            class={[
+              "tab",
+              if(@active_tab == :membership_fees, do: "tab-active", else: "!text-gray-800")
+            ]}
+            aria-selected={@active_tab == :membership_fees}
+            phx-click="switch_tab"
+            phx-value-tab="membership_fees"
+          >
+            <.icon name="hero-credit-card" class="size-4 mr-2" />
+            {gettext("Membership Fees")}
+          </button>
+        </div>
 
-      <%= if @active_tab == :contact do %>
-        <%!-- Contact Data Tab Content --%>
-        <%!-- 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>
+        <%= if @active_tab == :contact do %>
+          <%!-- Contact Data Tab Content --%>
+          <%!-- 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>
+                  <%!-- Address --%>
+                  <div>
+                    <.data_field label={gettext("Address")} value={format_address(@member)} />
+                  </div>
 
-                <%!-- Email --%>
-                <div>
-                  <.data_field label={gettext("Email")}>
-                    <a
-                      href={"mailto:#{MvWeb.MemberLive.Index.format_member_email(@member)}"}
-                      class="text-blue-700 hover:text-blue-800 underline"
-                    >
-                      {@member.email}
-                    </a>
-                  </.data_field>
-                </div>
+                  <%!-- Email --%>
+                  <div>
+                    <.data_field label={gettext("Email")}>
+                      <a
+                        href={"mailto:#{MvWeb.MemberLive.Index.format_member_email(@member)}"}
+                        class="text-blue-700 hover:text-blue-800 underline"
+                      >
+                        {@member.email}
+                      </a>
+                    </.data_field>
+                  </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>
+                  <%!-- 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: only show when current user can see other users (e.g. admin).
+                  <%!-- Linked User: only show when current user can see other users (e.g. admin).
                   read_only cannot see linked user, so hide the section to avoid "No user linked" when
                   a user is linked but not visible. --%>
-                <%= if can_access_page?(@current_user, "/users") do %>
+                  <%= if can_access_page?(@current_user, "/users") do %>
+                    <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>
+                  <% end %>
+
+                  <%!-- Groups (in Personal Data) --%>
+                  <% groups = @member.groups || [] %>
                   <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>
+                    <.data_field label={gettext("Groups")}>
+                      <%= if Enum.empty?(groups) do %>
+                        <span class="text-base-content/70 italic">{gettext("No groups")}</span>
                       <% else %>
-                        <span class="text-base-content/70 italic">{gettext("No user linked")}</span>
+                        <div class="flex flex-wrap gap-2">
+                          <%= for group <- groups do %>
+                            <.button
+                              variant="outline"
+                              size="sm"
+                              navigate={~p"/groups/#{group.slug}"}
+                              aria-label={gettext("Member of group %{name}", name: group.name)}
+                            >
+                              {group.name}
+                            </.button>
+                          <% end %>
+                        </div>
                       <% end %>
                     </.data_field>
                   </div>
-                <% end %>
 
-                <%!-- Groups (in Personal Data) --%>
-                <% groups = @member.groups || [] %>
-                <div>
-                  <.data_field label={gettext("Groups")}>
-                    <%= if Enum.empty?(groups) do %>
-                      <span class="text-base-content/70 italic">{gettext("No groups")}</span>
-                    <% else %>
-                      <div class="flex flex-wrap gap-2">
-                        <%= for group <- groups do %>
-                          <.link
-                            navigate={~p"/groups/#{group.slug}"}
-                            class="btn btn-xs btn-outline btn-primary"
-                            aria-label={gettext("Member of group %{name}", name: group.name)}
-                          >
-                            {group.name}
-                          </.link>
-                        <% end %>
-                      </div>
-                    <% 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?(@custom_fields) do %>
-            <div>
-              <.section_box title={gettext("Custom Fields")}>
-                <div class="grid grid-cols-2 gap-4">
-                  <%= for custom_field <- @custom_fields do %>
-                    <% cfv = find_custom_field_value(@member.custom_field_values, custom_field.id) %>
-                    <.data_field label={custom_field.name}>
-                      {format_custom_field_value(cfv, custom_field.value_type)}
-                    </.data_field>
+                  <%!-- 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>
-          <% end %>
-        </div>
 
-        <%!-- Payment Data Section --%>
-        <div class="w-full">
-          <.section_box title={gettext("Payment Data")}>
-            <%= if @member.membership_fee_type do %>
-              <div class="flex gap-6 flex-wrap">
-                <.data_field
-                  label={gettext("Type")}
-                  value={@member.membership_fee_type.name}
-                  class="min-w-32"
-                />
-                <.data_field
-                  label={gettext("Membership Fee")}
-                  value={MembershipFeeHelpers.format_currency(@member.membership_fee_type.amount)}
-                  class="min-w-24"
-                />
-                <.data_field
-                  label={gettext("Payment Interval")}
-                  value={MembershipFeeHelpers.format_interval(@member.membership_fee_type.interval)}
-                  class="min-w-32"
-                />
-                <.data_field label={gettext("Last Cycle")} class="min-w-32">
-                  <%= if @member.last_cycle_status do %>
-                    <% status = @member.last_cycle_status %>
-                    <span class={["badge", MembershipFeeHelpers.status_color(status)]}>
-                      {format_status_label(status)}
-                    </span>
-                  <% else %>
-                    <span class="badge badge-ghost">{gettext("No cycles")}</span>
-                  <% end %>
-                </.data_field>
-                <.data_field label={gettext("Current Cycle")} class="min-w-36">
-                  <%= if @member.current_cycle_status do %>
-                    <% status = @member.current_cycle_status %>
-                    <span class={["badge", MembershipFeeHelpers.status_color(status)]}>
-                      {format_status_label(status)}
-                    </span>
-                  <% else %>
-                    <span class="badge badge-ghost">{gettext("No cycles")}</span>
-                  <% end %>
-                </.data_field>
-              </div>
-            <% else %>
-              <div class="text-base-content/70 italic">
-                {gettext("No membership fee type assigned")}
+            <%!-- Custom Fields Section --%>
+            <%= if Enum.any?(@custom_fields) do %>
+              <div>
+                <.section_box title={gettext("Custom Fields")}>
+                  <div class="grid grid-cols-2 gap-4">
+                    <%= for custom_field <- @custom_fields do %>
+                      <% cfv = find_custom_field_value(@member.custom_field_values, custom_field.id) %>
+                      <.data_field label={custom_field.name}>
+                        {format_custom_field_value(cfv, custom_field.value_type)}
+                      </.data_field>
+                    <% end %>
+                  </div>
+                </.section_box>
               </div>
             <% end %>
-          </.section_box>
-        </div>
-      <% end %>
+          </div>
 
-      <%= if @active_tab == :membership_fees do %>
-        <%!-- Membership Fees Tab Content --%>
-        <.live_component
-          module={MvWeb.MemberLive.Show.MembershipFeesComponent}
-          id={"membership-fees-#{@member.id}"}
-          member={@member}
-          current_user={@current_user}
-          vereinfacht_receipts={@vereinfacht_receipts}
-        />
-      <% end %>
+          <%!-- Payment Data Section --%>
+          <div class="w-full">
+            <.section_box title={gettext("Payment Data")}>
+              <%= if @member.membership_fee_type do %>
+                <div class="flex gap-6 flex-wrap">
+                  <.data_field
+                    label={gettext("Type")}
+                    value={@member.membership_fee_type.name}
+                    class="min-w-32"
+                  />
+                  <.data_field
+                    label={gettext("Membership Fee")}
+                    value={MembershipFeeHelpers.format_currency(@member.membership_fee_type.amount)}
+                    class="min-w-24"
+                  />
+                  <.data_field
+                    label={gettext("Payment Interval")}
+                    value={MembershipFeeHelpers.format_interval(@member.membership_fee_type.interval)}
+                    class="min-w-32"
+                  />
+                  <.data_field label={gettext("Last Cycle")} class="min-w-32">
+                    <%= if @member.last_cycle_status do %>
+                      <% status = @member.last_cycle_status %>
+                      <span class={["badge", MembershipFeeHelpers.status_color(status)]}>
+                        {format_status_label(status)}
+                      </span>
+                    <% else %>
+                      <span class="badge badge-ghost">{gettext("No cycles")}</span>
+                    <% end %>
+                  </.data_field>
+                  <.data_field label={gettext("Current Cycle")} class="min-w-36">
+                    <%= if @member.current_cycle_status do %>
+                      <% status = @member.current_cycle_status %>
+                      <span class={["badge", MembershipFeeHelpers.status_color(status)]}>
+                        {format_status_label(status)}
+                      </span>
+                    <% else %>
+                      <span class="badge badge-ghost">{gettext("No cycles")}</span>
+                    <% end %>
+                  </.data_field>
+                </div>
+              <% else %>
+                <div class="text-base-content/70 italic">
+                  {gettext("No membership fee type assigned")}
+                </div>
+              <% end %>
+            </.section_box>
+          </div>
+        <% end %>
+
+        <%= if @active_tab == :membership_fees do %>
+          <%!-- Membership Fees Tab Content --%>
+          <.live_component
+            module={MvWeb.MemberLive.Show.MembershipFeesComponent}
+            id={"membership-fees-#{@member.id}"}
+            member={@member}
+            current_user={@current_user}
+            vereinfacht_receipts={@vereinfacht_receipts}
+          />
+        <% end %>
+      </div>
     </Layouts.app>
     """
   end
@@ -403,7 +411,7 @@ defmodule MvWeb.MemberLive.Show do
       ~H"""
       <a
         href={"mailto:#{@email}"}
-        class="text-blue-700 hover:text-blue-800 underline"
+        class="link link-primary"
       >
         {@display}
       </a>
diff --git a/lib/mv_web/live/member_live/show/membership_fees_component.ex b/lib/mv_web/live/member_live/show/membership_fees_component.ex
index b8757a0..2e75b57 100644
--- a/lib/mv_web/live/member_live/show/membership_fees_component.ex
+++ b/lib/mv_web/live/member_live/show/membership_fees_component.ex
@@ -66,14 +66,15 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                   <.icon name="hero-arrow-top-right-on-square" class="inline-block size-4" />
                 </.link>
                 <div>
-                  <button
+                  <.button
                     type="button"
+                    variant="ghost"
+                    size="sm"
                     phx-click="load_vereinfacht_receipts"
                     phx-value-contact_id={@member.vereinfacht_contact_id}
-                    class="btn btn-sm btn-ghost"
                   >
                     {gettext("Show bookings/receipts from Vereinfacht")}
-                  </button>
+                  </.button>
                 </div>
                 <%= if @vereinfacht_receipts do %>
                   <div
@@ -148,9 +149,10 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
           </.button>
           <.button
             :if={Enum.any?(@cycles) and @can_destroy_cycle}
+            variant="outline"
+            size="sm"
             phx-click="delete_all_cycles"
             phx-target={@myself}
-            class="btn btn-sm btn-error btn-outline"
             title={gettext("Delete all cycles")}
           >
             <.icon name="hero-trash" class="size-4" />
@@ -158,9 +160,10 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
           </.button>
           <.button
             :if={@member.membership_fee_type != nil and @can_create_cycle}
+            variant="primary"
+            size="sm"
             phx-click="open_create_cycle_modal"
             phx-target={@myself}
-            class="btn btn-sm btn-primary"
             title={gettext("Create a new cycle manually")}
           >
             <.icon name="hero-plus" class="size-4" />
@@ -259,17 +262,18 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                   </div>
                 <% end %>
                 <%= if @can_destroy_cycle do %>
-                  <button
+                  <.button
                     type="button"
+                    variant="outline"
+                    size="sm"
                     phx-click="delete_cycle"
                     phx-value-cycle_id={cycle.id}
                     phx-target={@myself}
-                    class="btn btn-sm btn-error btn-outline"
                     title={gettext("Delete cycle")}
                   >
                     <.icon name="hero-trash" class="size-4" />
                     {gettext("Delete")}
-                  </button>
+                  </.button>
                 <% end %>
               </div>
             </:action>
@@ -309,10 +313,15 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                 />
               </div>
               <div class="modal-action">
-                <button type="button" phx-click="cancel_edit_amount" phx-target={@myself} class="btn">
+                <.button
+                  type="button"
+                  variant="neutral"
+                  phx-click="cancel_edit_amount"
+                  phx-target={@myself}
+                >
                   {gettext("Cancel")}
-                </button>
-                <button type="submit" class="btn btn-primary">{gettext("Save")}</button>
+                </.button>
+                <.button type="submit" variant="primary">{gettext("Save")}</.button>
               </div>
             </form>
           </div>
@@ -334,17 +343,17 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
               )} - {MembershipFeeHelpers.format_currency(@deleting_cycle.amount)}
             </p>
             <div class="modal-action">
-              <button phx-click="cancel_delete_cycle" phx-target={@myself} class="btn">
+              <.button variant="neutral" phx-click="cancel_delete_cycle" phx-target={@myself}>
                 {gettext("Cancel")}
-              </button>
-              <button
+              </.button>
+              <.button
+                variant="danger"
                 phx-click="confirm_delete_cycle"
                 phx-value-cycle_id={@deleting_cycle.id}
                 phx-target={@myself}
-                class="btn btn-error"
               >
                 {gettext("Delete")}
-              </button>
+              </.button>
             </div>
           </div>
         </dialog>
@@ -385,20 +394,20 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
               />
             </div>
             <div class="modal-action">
-              <button phx-click="cancel_delete_all_cycles" phx-target={@myself} class="btn">
+              <.button variant="neutral" phx-click="cancel_delete_all_cycles" phx-target={@myself}>
                 {gettext("Cancel")}
-              </button>
-              <button
+              </.button>
+              <.button
+                variant="danger"
                 phx-click="confirm_delete_all_cycles"
                 phx-target={@myself}
-                class="btn btn-error"
                 disabled={
                   String.trim(String.downcase(@delete_all_confirmation)) !=
                     String.downcase(gettext("Yes"))
                 }
               >
                 {gettext("Delete All")}
-              </button>
+              </.button>
             </div>
           </div>
         </dialog>
@@ -472,10 +481,15 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                 </div>
               <% end %>
               <div class="modal-action">
-                <button type="button" phx-click="cancel_create_cycle" phx-target={@myself} class="btn">
+                <.button
+                  type="button"
+                  variant="neutral"
+                  phx-click="cancel_create_cycle"
+                  phx-target={@myself}
+                >
                   {gettext("Cancel")}
-                </button>
-                <button type="submit" class="btn btn-primary">{gettext("Create")}</button>
+                </.button>
+                <.button type="submit" variant="primary">{gettext("Create")}</.button>
               </div>
             </form>
           </div>
diff --git a/lib/mv_web/live/membership_fee_settings_live.ex b/lib/mv_web/live/membership_fee_settings_live.ex
index bfa20f8..aabb210 100644
--- a/lib/mv_web/live/membership_fee_settings_live.ex
+++ b/lib/mv_web/live/membership_fee_settings_live.ex
@@ -239,10 +239,10 @@ defmodule MvWeb.MembershipFeeSettingsLive do
 
               <div class="divider"></div>
 
-              <button type="submit" class="btn btn-primary w-full">
+              <.button type="submit" variant="primary" class="w-full">
                 <.icon name="hero-check" class="size-5" />
                 {gettext("Save Settings")}
-              </button>
+              </.button>
             </.form>
           </div>
         </div>
@@ -333,24 +333,27 @@ defmodule MvWeb.MembershipFeeSettingsLive do
           </:col>
 
           <:action :let={mft}>
-            <.link
-              navigate={~p"/membership_fee_settings/#{mft.id}/edit_fee_type"}
-              class="btn btn-ghost btn-xs"
-              aria-label={gettext("Edit membership fee type")}
-            >
-              <.icon name="hero-pencil" class="size-4" />
-            </.link>
+            <.tooltip content={gettext("Edit membership fee type")} position="left">
+              <.button
+                variant="ghost"
+                size="sm"
+                navigate={~p"/membership_fee_settings/#{mft.id}/edit_fee_type"}
+                aria-label={gettext("Edit membership fee type")}
+              >
+                <.icon name="hero-pencil" class="size-4" />
+              </.button>
+            </.tooltip>
           </:action>
 
           <:action :let={mft}>
-            <div
+            <.tooltip
               :if={get_member_count(mft, @member_counts) > 0}
-              class="tooltip tooltip-left"
-              data-tip={
+              content={
                 gettext("Cannot delete - %{count} member(s) assigned",
                   count: get_member_count(mft, @member_counts)
                 )
               }
+              position="left"
             >
               <button
                 phx-click="delete"
@@ -366,17 +369,18 @@ defmodule MvWeb.MembershipFeeSettingsLive do
               >
                 <.icon name="hero-trash" class="size-4" />
               </button>
-            </div>
-            <button
+            </.tooltip>
+            <.button
               :if={get_member_count(mft, @member_counts) == 0}
+              variant="danger"
+              size="sm"
               phx-click="delete"
               phx-value-id={mft.id}
               data-confirm={gettext("Are you sure?")}
-              class="btn btn-ghost btn-xs text-error"
               aria-label={gettext("Delete Membership Fee Type")}
             >
               <.icon name="hero-trash" class="size-4" />
-            </button>
+            </.button>
           </:action>
         </.table>
 
diff --git a/lib/mv_web/live/membership_fee_type_live/form.ex b/lib/mv_web/live/membership_fee_type_live/form.ex
index d8569e2..72add11 100644
--- a/lib/mv_web/live/membership_fee_type_live/form.ex
+++ b/lib/mv_web/live/membership_fee_type_live/form.ex
@@ -176,20 +176,20 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
             </div>
 
             <div class="modal-action">
-              <button
+              <.button
                 type="button"
+                variant="neutral"
                 phx-click="cancel_amount_change"
-                class="btn"
               >
                 {gettext("Cancel")}
-              </button>
-              <button
+              </.button>
+              <.button
                 type="button"
+                variant="primary"
                 phx-click="confirm_amount_change"
-                class="btn btn-primary"
               >
                 {gettext("Confirm Change")}
-              </button>
+              </.button>
             </div>
           </div>
         </dialog>
diff --git a/lib/mv_web/live/membership_fee_type_live/index.ex b/lib/mv_web/live/membership_fee_type_live/index.ex
index f5f760f..0a17920 100644
--- a/lib/mv_web/live/membership_fee_type_live/index.ex
+++ b/lib/mv_web/live/membership_fee_type_live/index.ex
@@ -78,24 +78,27 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
         </:col>
 
         <:action :let={mft}>
-          <.link
-            navigate={~p"/membership_fee_settings/#{mft.id}/edit_fee_type"}
-            class="btn btn-ghost btn-xs"
-            aria-label={gettext("Edit membership fee type")}
-          >
-            <.icon name="hero-pencil" class="size-4" />
-          </.link>
+          <.tooltip content={gettext("Edit membership fee type")} position="left">
+            <.button
+              variant="ghost"
+              size="sm"
+              navigate={~p"/membership_fee_settings/#{mft.id}/edit_fee_type"}
+              aria-label={gettext("Edit membership fee type")}
+            >
+              <.icon name="hero-pencil" class="size-4" />
+            </.button>
+          </.tooltip>
         </:action>
 
         <:action :let={mft}>
-          <div
+          <.tooltip
             :if={get_member_count(mft, @member_counts) > 0}
-            class="tooltip tooltip-left"
-            data-tip={
+            content={
               gettext("Cannot delete - %{count} member(s) assigned",
                 count: get_member_count(mft, @member_counts)
               )
             }
+            position="left"
           >
             <button
               phx-click="delete"
@@ -111,17 +114,18 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
             >
               <.icon name="hero-trash" class="size-4" />
             </button>
-          </div>
-          <button
+          </.tooltip>
+          <.button
             :if={get_member_count(mft, @member_counts) == 0}
+            variant="danger"
+            size="sm"
             phx-click="delete"
             phx-value-id={mft.id}
             data-confirm={gettext("Are you sure?")}
-            class="btn btn-ghost btn-xs text-error"
             aria-label={gettext("Delete Membership Fee Type")}
           >
             <.icon name="hero-trash" class="size-4" />
-          </button>
+          </.button>
         </:action>
       </.table>
 
diff --git a/lib/mv_web/live/role_live/form.ex b/lib/mv_web/live/role_live/form.ex
index ea76fe8..ccd03cf 100644
--- a/lib/mv_web/live/role_live/form.ex
+++ b/lib/mv_web/live/role_live/form.ex
@@ -21,13 +21,23 @@ defmodule MvWeb.RoleLive.Form do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
-      <.header>
-        {@page_title}
-        <:subtitle>{gettext("Use this form to manage roles in your database.")}</:subtitle>
-      </.header>
-
       <.form class="max-w-xl" for={@form} id="role-form" phx-change="validate" phx-submit="save">
-        <.input field={@form[:name]} type="text" label={gettext("Name")} required />
+        <.header>
+          {@page_title}
+          <:subtitle>{gettext("Use this form to manage roles in your database.")}</:subtitle>
+          <:actions>
+            <.button navigate={return_path(@return_to, @role)} variant="neutral">
+              <.icon name="hero-arrow-left" class="size-4" />
+              {gettext("Back")}
+            </.button>
+            <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+              {gettext("Save")}
+            </.button>
+          </:actions>
+        </.header>
+
+        <div class="mt-6 space-y-6">
+          <.input field={@form[:name]} type="text" label={gettext("Name")} required />
 
         <.input
           field={@form[:description]}
@@ -73,14 +83,6 @@ defmodule MvWeb.RoleLive.Form do
             <% end %>
           <% end %>
         </div>
-
-        <div class="mt-4">
-          <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
-            {gettext("Save Role")}
-          </.button>
-          <.button navigate={return_path(@return_to, @role)} type="button">
-            {gettext("Cancel")}
-          </.button>
         </div>
       </.form>
     </Layouts.app>
diff --git a/lib/mv_web/live/role_live/index.html.heex b/lib/mv_web/live/role_live/index.html.heex
index f409944..5829bca 100644
--- a/lib/mv_web/live/role_live/index.html.heex
+++ b/lib/mv_web/live/role_live/index.html.heex
@@ -59,28 +59,29 @@
       </div>
 
       <%= if can?(@current_user, :update, Mv.Authorization.Role) do %>
-        <.link navigate={~p"/admin/roles/#{role}/edit"} class="btn btn-ghost btn-sm">
+        <.button variant="ghost" size="sm" navigate={~p"/admin/roles/#{role}/edit"}>
           <.icon name="hero-pencil" class="size-4" />
-          {gettext("Edit")}
-        </.link>
+          {gettext("Edit role")}
+        </.button>
       <% end %>
     </:action>
 
     <:action :let={role}>
       <%= if can?(@current_user, :destroy, Mv.Authorization.Role) and not role.is_system_role do %>
-        <.link
+        <.button
+          variant="danger"
+          size="sm"
           phx-click={JS.push("delete", value: %{id: role.id}) |> hide("#row-#{role.id}")}
           data-confirm={gettext("Are you sure?")}
-          class="btn btn-ghost btn-sm text-error"
         >
           <.icon name="hero-trash" class="size-4" />
           {gettext("Delete")}
-        </.link>
+        </.button>
       <% else %>
-        <div
+        <.tooltip
           :if={role.is_system_role}
-          class="tooltip tooltip-left"
-          data-tip={gettext("System roles cannot be deleted")}
+          content={gettext("System roles cannot be deleted")}
+          position="left"
         >
           <button
             class="btn btn-ghost btn-sm text-error opacity-50 cursor-not-allowed"
@@ -90,7 +91,7 @@
             <.icon name="hero-trash" class="size-4" />
             {gettext("Delete")}
           </button>
-        </div>
+        </.tooltip>
       <% end %>
     </:action>
   </.table>
diff --git a/lib/mv_web/live/role_live/show.ex b/lib/mv_web/live/role_live/show.ex
index 0e1c7ca..4dbbb1f 100644
--- a/lib/mv_web/live/role_live/show.ex
+++ b/lib/mv_web/live/role_live/show.ex
@@ -165,23 +165,23 @@ defmodule MvWeb.RoleLive.Show do
         <:subtitle>{gettext("Role details and permissions.")}</:subtitle>
 
         <:actions>
-          <.button navigate={~p"/admin/roles"} aria-label={gettext("Back to roles list")}>
-            <.icon name="hero-arrow-left" />
-            <span class="sr-only">{gettext("Back to roles list")}</span>
+          <.button navigate={~p"/admin/roles"} variant="neutral" aria-label={gettext("Back to roles list")}>
+            <.icon name="hero-arrow-left" class="size-4" />
+            {gettext("Back")}
           </.button>
           <%= if can?(@current_user, :update, Mv.Authorization.Role) do %>
             <.button variant="primary" navigate={~p"/admin/roles/#{@role}/edit"}>
-              <.icon name="hero-pencil-square" /> {gettext("Edit Role")}
+              <.icon name="hero-pencil-square" /> {gettext("Rolle bearbeiten")}
             </.button>
           <% end %>
           <%= if can?(@current_user, :destroy, Mv.Authorization.Role) and not @role.is_system_role do %>
-            <.link
+            <.button
+              variant="danger"
               phx-click={JS.push("delete", value: %{id: @role.id})}
               data-confirm={gettext("Are you sure?")}
-              class="btn btn-error"
             >
               <.icon name="hero-trash" /> {gettext("Delete Role")}
-            </.link>
+            </.button>
           <% end %>
         </:actions>
       </.header>
diff --git a/lib/mv_web/live/user_live/form.ex b/lib/mv_web/live/user_live/form.ex
index 46e23b3..f9f17bb 100644
--- a/lib/mv_web/live/user_live/form.ex
+++ b/lib/mv_web/live/user_live/form.ex
@@ -167,13 +167,14 @@ defmodule MvWeb.UserLive.Form do
                     </p>
                     <p class="text-sm text-green-700">{@user.member.email}</p>
                   </div>
-                  <button
+                  <.button
                     type="button"
+                    variant="danger"
+                    size="sm"
                     phx-click="unlink_member"
-                    class="btn btn-sm btn-error"
                   >
                     {gettext("Unlink Member")}
-                  </button>
+                  </.button>
                 </div>
               </div>
             <% else %>
@@ -281,10 +282,12 @@ defmodule MvWeb.UserLive.Form do
         <% end %>
 
         <div class="mt-4">
+          <.button navigate={return_path(@return_to, @user)} variant="neutral">
+            {gettext("Cancel")}
+          </.button>
           <.button phx-disable-with={gettext("Saving...")} variant="primary">
             {gettext("Save User")}
           </.button>
-          <.button navigate={return_path(@return_to, @user)}>{gettext("Cancel")}</.button>
         </div>
       </.form>
     </Layouts.app>
diff --git a/lib/mv_web/live/user_live/index.html.heex b/lib/mv_web/live/user_live/index.html.heex
index ab13f90..364e5a4 100644
--- a/lib/mv_web/live/user_live/index.html.heex
+++ b/lib/mv_web/live/user_live/index.html.heex
@@ -91,7 +91,7 @@
 
       <%= if can?(@current_user, :update, user) do %>
         <.link navigate={~p"/users/#{user}/edit"} data-testid="user-edit">
-          {gettext("Edit")}
+          {gettext("Edit user")}
         </.link>
       <% end %>
     </:action>
diff --git a/lib/mv_web/live/user_live/show.ex b/lib/mv_web/live/user_live/show.ex
index 4d803cd..3530b36 100644
--- a/lib/mv_web/live/user_live/show.ex
+++ b/lib/mv_web/live/user_live/show.ex
@@ -37,7 +37,7 @@ defmodule MvWeb.UserLive.Show do
         <:subtitle>{gettext("This is a user record from your database.")}</:subtitle>
 
         <:actions>
-          <.button navigate={~p"/users"} aria-label={gettext("Back to users list")}>
+          <.button navigate={~p"/users"} variant="neutral" aria-label={gettext("Back to users list")}>
             <.icon name="hero-arrow-left" />
             <span class="sr-only">{gettext("Back to users list")}</span>
           </.button>