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 1ce6f77..f6aa21d 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
@@ -214,47 +214,49 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
             </:col>
 
             <:action :let={cycle}>
-              <div class="flex gap-1">
+              <div class="flex gap-2">
                 <%= if @can_update_cycle do %>
-                  <button
-                    :if={cycle.status != :paid}
-                    type="button"
-                    phx-click="mark_cycle_status"
-                    phx-value-cycle_id={cycle.id}
-                    phx-value-status="paid"
-                    phx-target={@myself}
-                    class="btn btn-sm btn-success"
-                    title={gettext("Mark as paid")}
-                  >
-                    <.icon name="hero-check-circle" class="size-4" />
-                    {gettext("Paid")}
-                  </button>
-                  <button
-                    :if={cycle.status != :suspended}
-                    type="button"
-                    phx-click="mark_cycle_status"
-                    phx-value-cycle_id={cycle.id}
-                    phx-value-status="suspended"
-                    phx-target={@myself}
-                    class="btn btn-sm btn-outline btn-warning"
-                    title={gettext("Mark as suspended")}
-                  >
-                    <.icon name="hero-pause-circle" class="size-4" />
-                    {gettext("Suspended")}
-                  </button>
-                  <button
-                    :if={cycle.status != :unpaid}
-                    type="button"
-                    phx-click="mark_cycle_status"
-                    phx-value-cycle_id={cycle.id}
-                    phx-value-status="unpaid"
-                    phx-target={@myself}
-                    class="btn btn-sm btn-error"
-                    title={gettext("Mark as unpaid")}
-                  >
-                    <.icon name="hero-x-circle" class="size-4" />
-                    {gettext("Unpaid")}
-                  </button>
+                  <div class="join">
+                    <button
+                      :if={cycle.status != :paid}
+                      type="button"
+                      phx-click="mark_cycle_status"
+                      phx-value-cycle_id={cycle.id}
+                      phx-value-status="paid"
+                      phx-target={@myself}
+                      class="join-item btn btn-sm btn-success"
+                      title={gettext("Mark as paid")}
+                    >
+                      <.icon name="hero-check-circle" class="size-4" />
+                      {gettext("Paid")}
+                    </button>
+                    <button
+                      :if={cycle.status != :suspended}
+                      type="button"
+                      phx-click="mark_cycle_status"
+                      phx-value-cycle_id={cycle.id}
+                      phx-value-status="suspended"
+                      phx-target={@myself}
+                      class="join-item btn btn-sm btn-outline btn-warning"
+                      title={gettext("Mark as suspended")}
+                    >
+                      <.icon name="hero-pause-circle" class="size-4" />
+                      {gettext("Suspended")}
+                    </button>
+                    <button
+                      :if={cycle.status != :unpaid}
+                      type="button"
+                      phx-click="mark_cycle_status"
+                      phx-value-cycle_id={cycle.id}
+                      phx-value-status="unpaid"
+                      phx-target={@myself}
+                      class="join-item btn btn-sm btn-error"
+                      title={gettext("Mark as unpaid")}
+                    >
+                      <.icon name="hero-x-circle" class="size-4" />
+                      {gettext("Unpaid")}
+                    </button>
+                  </div>
                 <% end %>
                 <%= if @can_destroy_cycle do %>
                   <button