diff --git a/lib/pearl_web.ex b/lib/pearl_web.ex
index 12a7eae..c5f2279 100644
--- a/lib/pearl_web.ex
+++ b/lib/pearl_web.ex
@@ -102,6 +102,7 @@ defmodule PearlWeb do
         layout: {PearlWeb.Layouts, :backoffice}
 
       import PearlWeb.Components.Avatar
+      import PearlWeb.Components.Button
       import PearlWeb.Components.EnsurePermissions
       import PearlWeb.BackofficeHelpers
 
@@ -122,6 +123,7 @@ defmodule PearlWeb do
     quote do
       use Phoenix.LiveComponent
       import PearlWeb.Components.Avatar
+      import PearlWeb.Components.Button
       unquote(html_helpers())
     end
   end
diff --git a/lib/pearl_web/components/button.ex b/lib/pearl_web/components/button.ex
index 6629bec..541bb6c 100644
--- a/lib/pearl_web/components/button.ex
+++ b/lib/pearl_web/components/button.ex
@@ -33,4 +33,109 @@ defmodule PearlWeb.Components.Button do
     </button>
     """
   end
+
+  @doc """
+  Renders a backoffice_button.
+
+  ## Examples
+
+      <.backoffice_button>Send!</.backoffice_button>
+      <.backoffice_button phx-click="go" class="ml-2">Send!</.backoffice_button>
+  """
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def backoffice_button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg bg-dark text-light dark:bg-light dark:text-dark hover:bg-darkShade dark:hover:bg-lightShade/95 py-2 px-3",
+        "text-sm font-semibold leading-6 transition-colors",
+        @class
+      ]}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
+
+  @doc """
+  Renders a primary button with icon and title.
+
+  ## Examples
+
+      <.primary_button title="Continue" />
+      <.primary_button title="Next" class="w-full" />
+      <.primary_button small />
+  """
+  attr :title, :string, default: nil
+  attr :icon, :string, default: "hero-arrow-right"
+  attr :small, :boolean, default: false
+  attr :gap, :string, default: "gap-1.5"
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled phx-click phx-disable-with phx-target)
+
+  def primary_button(assigns) do
+    ~H"""
+    <button
+      class={[
+        "flex items-center justify-center py-3",
+        if(@small, do: "w-13 h-13", else: ["w-27 px-12 h-9", @gap]),
+        "bg-primary text-white hover:bg-primary/80 disabled:opacity-50 disabled:cursor-not-allowed",
+        @class
+      ]}
+      {@rest}
+    >
+      <%= if @small do %>
+        <.icon name={@icon} class="w-5 h-5 shrink-0" />
+      <% else %>
+        <.icon name={@icon} class="w-4 h-4 shrink-0" />
+        <span class="text-base">{assigns.title}</span>
+      <% end %>
+    </button>
+    """
+  end
+
+  @doc """
+  Renders a secondary button with icon and title.
+
+  ## Examples
+
+      <.secondary_button title="Continue" />
+      <.secondary_button title="Next" icon_position="left" />
+  """
+  attr :title, :string, required: true
+  attr :icon, :string, default: "hero-arrow-left"
+  attr :icon_position, :string, default: "right", values: ["left", "right"]
+  attr :gap, :string, default: "gap-1.5"
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled phx-click phx-disable-with phx-target)
+
+  def secondary_button(assigns) do
+    ~H"""
+    <button
+      class={[
+        "flex items-center justify-center px-12 py-3",
+        @gap,
+        "bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed",
+        "w-22 h-9",
+        @class
+      ]}
+      {@rest}
+    >
+      <%= if @icon_position == "left" do %>
+        <.icon name={@icon} class="w-4 h-4 shrink-0" />
+        <span class="text-base">{assigns.title}</span>
+      <% else %>
+        <span class="text-base">{assigns.title}</span>
+        <.icon name={@icon} class="w-4 h-4 shrink-0" />
+      <% end %>
+    </button>
+    """
+  end
 end
diff --git a/lib/pearl_web/components/core_components.ex b/lib/pearl_web/components/core_components.ex
index fa839ac..16eaa71 100644
--- a/lib/pearl_web/components/core_components.ex
+++ b/lib/pearl_web/components/core_components.ex
@@ -188,7 +188,7 @@ defmodule PearlWeb.CoreComponents do
         <.input field={@form[:email]} label="Email"/>
         <.input field={@form[:username]} label="Username" />
         <:actions>
-          <.button>Save</.button>
+          <.backoffice_button>Save</.backoffice_button>
         </:actions>
       </.simple_form>
   """
@@ -216,36 +216,6 @@ defmodule PearlWeb.CoreComponents do
     """
   end
 
-  @doc """
-  Renders a button.
-
-  ## Examples
-
-      <.button>Send!</.button>
-      <.button phx-click="go" class="ml-2">Send!</.button>
-  """
-  attr :type, :string, default: nil
-  attr :class, :string, default: nil
-  attr :rest, :global, include: ~w(disabled form name value)
-
-  slot :inner_block, required: true
-
-  def button(assigns) do
-    ~H"""
-    <button
-      type={@type}
-      class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-dark text-light dark:bg-light dark:text-dark hover:bg-darkShade dark:hover:bg-lightShade/95 py-2 px-3",
-        "text-sm font-semibold leading-6 transition-colors",
-        @class
-      ]}
-      {@rest}
-    >
-      {render_slot(@inner_block)}
-    </button>
-    """
-  end
-
   @doc """
   Renders an input with label and error messages.
 
diff --git a/lib/pearl_web/components/cv_upload.ex b/lib/pearl_web/components/cv_upload.ex
index 63f1c5a..44ab0ea 100644
--- a/lib/pearl_web/components/cv_upload.ex
+++ b/lib/pearl_web/components/cv_upload.ex
@@ -47,7 +47,7 @@ defmodule PearlWeb.Components.CVUpload do
           <%= if @in_app do %>
             <.action_button title="Upload" phx-disable-with="Uploading..." />
           <% else %>
-            <.button phx-disable-with="Uploading...">Upload</.button>
+            <.backoffice_button phx-disable-with="Uploading...">Upload</.backoffice_button>
           <% end %>
         </:actions>
       </.simple_form>
diff --git a/lib/pearl_web/live/app/badge_live/index.ex b/lib/pearl_web/live/app/badge_live/index.ex
index 3edc2b4..d22b2d9 100644
--- a/lib/pearl_web/live/app/badge_live/index.ex
+++ b/lib/pearl_web/live/app/badge_live/index.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.App.BadgeLive.Index do
   use PearlWeb, :app_view
 
   alias Pearl.Contest
-  import PearlWeb.Components.Badge
+  import PearlWeb.Components.{Button, Badge}
 
   @impl true
   def mount(_params, _session, socket) do
diff --git a/lib/pearl_web/live/app/coin_flip_live/components/room.ex b/lib/pearl_web/live/app/coin_flip_live/components/room.ex
index baec626..792a246 100644
--- a/lib/pearl_web/live/app/coin_flip_live/components/room.ex
+++ b/lib/pearl_web/live/app/coin_flip_live/components/room.ex
@@ -5,7 +5,7 @@ defmodule PearlWeb.App.CoinFlipLive.Components.Room do
   use PearlWeb, :component
 
   import PearlWeb.CoreComponents
-  import PearlWeb.Components.Avatar
+  import PearlWeb.Components.{Avatar, Button}
 
   attr :room, :map, required: true
   attr :current_user, :map, required: true
@@ -104,7 +104,7 @@ defmodule PearlWeb.App.CoinFlipLive.Components.Room do
           <div :if={@player_id == @room.player2_id} class="side-b-not-rotated"></div>
         </div>
       <% else %>
-        <.button
+        <.backoffice_button
           :if={@room.player1.user.id != @current_user.id}
           class="px-7 size-full rounded-none !bg-transparent !text-white"
           phx-click="join-room"
@@ -112,15 +112,15 @@ defmodule PearlWeb.App.CoinFlipLive.Components.Room do
           disabled={@attendee_tokens < @room.bet}
         >
           <.icon name="hero-plus" class="size-12" />
-        </.button>
-        <.button
+        </.backoffice_button>
+        <.backoffice_button
           :if={@room.player1.user.id == @current_user.id}
           class="px-7 my-auto size-full rounded-none !bg-transparent !text-white"
           phx-click="delete-room"
           phx-value-room_id={@room.id}
         >
           <.icon name="hero-x-mark" class="size-12" />
-        </.button>
+        </.backoffice_button>
       <% end %>
     </div>
     """
diff --git a/lib/pearl_web/live/app/credential_live/edit.ex b/lib/pearl_web/live/app/credential_live/edit.ex
index f1d87fc..6c9b4b5 100644
--- a/lib/pearl_web/live/app/credential_live/edit.ex
+++ b/lib/pearl_web/live/app/credential_live/edit.ex
@@ -3,6 +3,8 @@ defmodule PearlWeb.App.CredentialLive.Edit do
 
   alias Pearl.Accounts
 
+  import PearlWeb.Components.Button
+
   @impl true
   def mount(_params, _session, socket) do
     {:ok, socket}
diff --git a/lib/pearl_web/live/app/credential_live/edit.html.heex b/lib/pearl_web/live/app/credential_live/edit.html.heex
index d831b92..2449f95 100644
--- a/lib/pearl_web/live/app/credential_live/edit.html.heex
+++ b/lib/pearl_web/live/app/credential_live/edit.html.heex
@@ -17,9 +17,9 @@
         "Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
       )}
     </p>
-    <.button id="permission-button" type="button">
+    <.backoffice_button id="permission-button" type="button">
       {gettext("Request Permission")}
-    </.button>
+    </.backoffice_button>
   </div>
 </.page>
 
diff --git a/lib/pearl_web/live/auth/components/user_profile_settings.html.heex b/lib/pearl_web/live/auth/components/user_profile_settings.html.heex
index 3d5e0d8..3b34c31 100644
--- a/lib/pearl_web/live/auth/components/user_profile_settings.html.heex
+++ b/lib/pearl_web/live/auth/components/user_profile_settings.html.heex
@@ -86,9 +86,9 @@
           <%= if @in_app? do %>
             <.action_button title="Save Profile" class="w-full" />
           <% else %>
-            <.button class="w-full">
+            <.backoffice_button class="w-full">
               Save Profile
-            </.button>
+            </.backoffice_button>
           <% end %>
         </div>
       </div>
diff --git a/lib/pearl_web/live/auth/user_confirmation_instructions_live.ex b/lib/pearl_web/live/auth/user_confirmation_instructions_live.ex
index e3539d7..ec2b93a 100644
--- a/lib/pearl_web/live/auth/user_confirmation_instructions_live.ex
+++ b/lib/pearl_web/live/auth/user_confirmation_instructions_live.ex
@@ -3,6 +3,8 @@ defmodule PearlWeb.UserConfirmationInstructionsLive do
 
   alias Pearl.Accounts
 
+  import PearlWeb.Components.Button
+
   def render(assigns) do
     ~H"""
     <div class="mx-auto max-w-sm">
@@ -14,9 +16,9 @@ defmodule PearlWeb.UserConfirmationInstructionsLive do
       <.simple_form for={@form} id="resend_confirmation_form" phx-submit="send_instructions">
         <.input field={@form[:email]} type="email" placeholder="Email" required />
         <:actions>
-          <.button phx-disable-with="Sending..." class="w-full">
+          <.backoffice_button phx-disable-with="Sending..." class="w-full">
             Resend confirmation instructions
-          </.button>
+          </.backoffice_button>
         </:actions>
       </.simple_form>
 
diff --git a/lib/pearl_web/live/backoffice/attendee_live/index.ex b/lib/pearl_web/live/backoffice/attendee_live/index.ex
index 60d553b..e63e7e6 100644
--- a/lib/pearl_web/live/backoffice/attendee_live/index.ex
+++ b/lib/pearl_web/live/backoffice/attendee_live/index.ex
@@ -2,8 +2,7 @@ defmodule PearlWeb.Backoffice.AttendeeLive.Index do
   alias Pearl.Accounts
   use PearlWeb, :backoffice_view
 
-  import PearlWeb.Components.Table
-  import PearlWeb.Components.TableSearch
+  import PearlWeb.Components.{Table, TableSearch, Button}
 
   on_mount {PearlWeb.StaffRoles,
             index: %{"attendees" => ["show"]}, edit: %{"attendees" => ["edit"]}}
diff --git a/lib/pearl_web/live/backoffice/attendee_live/index.html.heex b/lib/pearl_web/live/backoffice/attendee_live/index.html.heex
index e8b911e..d49fab6 100644
--- a/lib/pearl_web/live/backoffice/attendee_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/attendee_live/index.html.heex
@@ -6,21 +6,21 @@
           user={@current_user}
           permissions={%{"attendees" => ["show_leaderboard"]}}
         >
-          <.button>
+          <.backoffice_button>
             <span class="flex flex-row items-center gap-2">
               <.icon name="hero-trophy" class="w-5 h-5" />
               <span class="hidden sm:block">{gettext("Leaderboard")}</span>
             </span>
-          </.button>
+          </.backoffice_button>
         </.ensure_permissions>
       </.link>
       <.link patch={~p"/downloads/attendees"} target="_blank">
-        <.button>
+        <.backoffice_button>
           <span class="flex flex-row items-center gap-2">
             <.icon name="hero-cloud-arrow-down" class="w-5 h-5" />
             <span class="hidden sm:block">{gettext("Export attendees")}</span>
           </span>
-        </.button>
+        </.backoffice_button>
       </.link>
       <.table_search
         id="attendees-table-name-search"
diff --git a/lib/pearl_web/live/backoffice/attendee_live/ineligible_live/form_component.ex b/lib/pearl_web/live/backoffice/attendee_live/ineligible_live/form_component.ex
index 01b2108..d9f3a07 100644
--- a/lib/pearl_web/live/backoffice/attendee_live/ineligible_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/attendee_live/ineligible_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.AttendeeLive.IneligibleLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Accounts
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Forms, Button}
 
   @impl true
   def render(assigns) do
@@ -21,9 +21,9 @@ defmodule PearlWeb.Backoffice.AttendeeLive.IneligibleLive.FormComponent do
         >
           <.field field={@form[:ineligible]} label="Ineligible" type="switch" />
           <:actions>
-            <.button phx-disable-with="Saving...">
+            <.backoffice_button phx-disable-with="Saving...">
               {gettext("Save Eligibility")}
-            </.button>
+            </.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/attendee_live/show.ex b/lib/pearl_web/live/backoffice/attendee_live/show.ex
index acdd24c..6fa5f1e 100644
--- a/lib/pearl_web/live/backoffice/attendee_live/show.ex
+++ b/lib/pearl_web/live/backoffice/attendee_live/show.ex
@@ -3,6 +3,8 @@ defmodule PearlWeb.Backoffice.AttendeeLive.Show do
 
   alias Pearl.Accounts
 
+  import PearlWeb.Components.Button
+
   on_mount {PearlWeb.StaffRoles,
             show: %{"attendees" => ["show"]}, edit: %{"attendees" => ["edit"]}}
 
diff --git a/lib/pearl_web/live/backoffice/attendee_live/show.html.heex b/lib/pearl_web/live/backoffice/attendee_live/show.html.heex
index c9ed332..ae946e6 100644
--- a/lib/pearl_web/live/backoffice/attendee_live/show.html.heex
+++ b/lib/pearl_web/live/backoffice/attendee_live/show.html.heex
@@ -3,24 +3,24 @@
     <div class="flex flex-row gap-x-4">
       <.ensure_permissions user={@current_user} permissions={%{"attendees" => ["edit"]}}>
         <.link patch={~p"/dashboard/attendees/#{@attendee.id}/edit/tokens"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-currency-euro" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
         <.link patch={~p"/dashboard/attendees/#{@attendee.id}/edit/eligibility"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-shield-exclamation" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
         <.link patch={~p"/dashboard/attendees/#{@attendee.id}/redeem"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-check-badge" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
-      <.button>
+      <.backoffice_button>
         <.icon name="hero-flag" class="w-5 h-5" />
-      </.button>
+      </.backoffice_button>
     </div>
   </:actions>
   <div class="flex flex-col items-center gap-4 w-full sm:w-fit py-8">
diff --git a/lib/pearl_web/live/backoffice/attendee_live/tokens_live/form_component.ex b/lib/pearl_web/live/backoffice/attendee_live/tokens_live/form_component.ex
index 1d41d86..5a3d1a4 100644
--- a/lib/pearl_web/live/backoffice/attendee_live/tokens_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/attendee_live/tokens_live/form_component.ex
@@ -3,7 +3,7 @@ defmodule PearlWeb.Backoffice.AttendeeLive.TokensLive.FormComponent do
 
   alias Pearl.Accounts
   alias Pearl.Contest
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Forms, Button}
 
   @impl true
   def render(assigns) do
@@ -32,9 +32,9 @@ defmodule PearlWeb.Backoffice.AttendeeLive.TokensLive.FormComponent do
           />
           <.field field={assigns.form[:tokens]} type="number" value={0} label="Tokens" required />
           <:actions>
-            <.button phx-disable-with="Saving...">
+            <.backoffice_button phx-disable-with="Saving...">
               {gettext("Save Tokens")}
-            </.button>
+            </.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
@@ -55,13 +55,18 @@ defmodule PearlWeb.Backoffice.AttendeeLive.TokensLive.FormComponent do
           </h2>
         </div>
         <div class="flex flex-row gap-x-4">
-          <.button phx-click="save" phx-target={@myself} class="w-full">
+          <.backoffice_button phx-click="save" phx-target={@myself} class="w-full">
             {gettext("Confirm")}
-          </.button>
-
-          <.button phx-click="cancel" phx-value="Remove" phx-target={@myself} class="w-full">
+          </.backoffice_button>
+
+          <.backoffice_button
+            phx-click="cancel"
+            phx-value="Remove"
+            phx-target={@myself}
+            class="w-full"
+          >
             {gettext("Cancel")}
-          </.button>
+          </.backoffice_button>
         </div>
       </.modal>
     </div>
diff --git a/lib/pearl_web/live/backoffice/badge_live/category_live/form_component.ex b/lib/pearl_web/live/backoffice/badge_live/category_live/form_component.ex
index 3966b1e..1e71a94 100644
--- a/lib/pearl_web/live/backoffice/badge_live/category_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/badge_live/category_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.CategoryLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Contest
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -38,7 +38,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.CategoryLive.FormComponent do
             />
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Category</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Category</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/badge_live/category_live/index.ex b/lib/pearl_web/live/backoffice/badge_live/category_live/index.ex
index 541b1c0..49106fa 100644
--- a/lib/pearl_web/live/backoffice/badge_live/category_live/index.ex
+++ b/lib/pearl_web/live/backoffice/badge_live/category_live/index.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.CategoryLive.Index do
   use PearlWeb, :live_component
 
   alias Pearl.Contest
-  import PearlWeb.Components.EnsurePermissions
+  import PearlWeb.Components.{Button, EnsurePermissions}
 
   @impl true
   def render(assigns) do
@@ -12,7 +12,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.CategoryLive.Index do
         <:actions>
           <.ensure_permissions user={@current_user} permissions={%{"badges" => ["edit"]}}>
             <.link navigate={~p"/dashboard/badges/categories/new"}>
-              <.button>New Category</.button>
+              <.backoffice_button>New Category</.backoffice_button>
             </.link>
           </.ensure_permissions>
         </:actions>
diff --git a/lib/pearl_web/live/backoffice/badge_live/condition_live/form_component.ex b/lib/pearl_web/live/backoffice/badge_live/condition_live/form_component.ex
index dc286d0..c8d1f42 100644
--- a/lib/pearl_web/live/backoffice/badge_live/condition_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/badge_live/condition_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.ConditionLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Contest
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -73,7 +73,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.ConditionLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Condition</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Condition</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/badge_live/condition_live/index.ex b/lib/pearl_web/live/backoffice/badge_live/condition_live/index.ex
index 8812090..63c0e3f 100644
--- a/lib/pearl_web/live/backoffice/badge_live/condition_live/index.ex
+++ b/lib/pearl_web/live/backoffice/badge_live/condition_live/index.ex
@@ -3,6 +3,8 @@ defmodule PearlWeb.Backoffice.BadgeLive.ConditionLive.Index do
 
   alias Pearl.Contest
 
+  import PearlWeb.Components.Button
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -13,7 +15,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.ConditionLive.Index do
       >
         <:actions>
           <.link navigate={~p"/dashboard/badges/#{@badge.id}/conditions/new"}>
-            <.button>New Condition</.button>
+            <.backoffice_button>New Condition</.backoffice_button>
           </.link>
         </:actions>
 
diff --git a/lib/pearl_web/live/backoffice/badge_live/form_component.ex b/lib/pearl_web/live/backoffice/badge_live/form_component.ex
index d7421f1..8d58b82 100644
--- a/lib/pearl_web/live/backoffice/badge_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/badge_live/form_component.ex
@@ -4,8 +4,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.FormComponent do
   alias Pearl.Contest
   alias Pearl.Uploaders.Badge
 
-  import PearlWeb.Components.ImageUploader
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Forms, Button, ImageUploader}
 
   @impl true
   def render(assigns) do
@@ -21,19 +20,19 @@ defmodule PearlWeb.Backoffice.BadgeLive.FormComponent do
       >
         <:actions>
           <.link :if={@badge.id} patch={~p"/dashboard/badges/#{@badge.id}/triggers"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-bolt" />
-            </.button>
+            </.backoffice_button>
           </.link>
           <.link :if={@badge.id} patch={~p"/dashboard/badges/#{@badge.id}/conditions"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-check-circle" />
-            </.button>
+            </.backoffice_button>
           </.link>
           <.link :if={@badge.id} patch={~p"/dashboard/badges/#{@badge.id}/redeems"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-check-badge" />
-            </.button>
+            </.backoffice_button>
           </.link>
         </:actions>
         <.simple_form
@@ -99,7 +98,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Badge</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Badge</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/badge_live/index.html.heex b/lib/pearl_web/live/backoffice/badge_live/index.html.heex
index 0d6528b..a87477b 100644
--- a/lib/pearl_web/live/backoffice/badge_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/badge_live/index.html.heex
@@ -10,20 +10,20 @@
       />
       <.ensure_permissions user={@current_user} permissions={%{"badges" => ["edit"]}}>
         <.link patch={~p"/dashboard/badges/new"}>
-          <.button>New Badge</.button>
+          <.backoffice_button>New Badge</.backoffice_button>
         </.link>
         <.link patch={~p"/dashboard/badges/import"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-arrow-up-tray" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
 
       <.ensure_permissions user={@current_user} permissions={%{"badges" => ["show"]}}>
         <.link patch={~p"/dashboard/badges/categories"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-tag" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
     </div>
diff --git a/lib/pearl_web/live/backoffice/badge_live/trigger_live/form_component.ex b/lib/pearl_web/live/backoffice/badge_live/trigger_live/form_component.ex
index c839f18..6b6120b 100644
--- a/lib/pearl_web/live/backoffice/badge_live/trigger_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/badge_live/trigger_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.TriggerLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Contest
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Forms, Button}
 
   @impl true
   def render(assigns) do
@@ -39,7 +39,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.TriggerLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Trigger</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Trigger</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/badge_live/trigger_live/index.ex b/lib/pearl_web/live/backoffice/badge_live/trigger_live/index.ex
index eedcab2..1abbc88 100644
--- a/lib/pearl_web/live/backoffice/badge_live/trigger_live/index.ex
+++ b/lib/pearl_web/live/backoffice/badge_live/trigger_live/index.ex
@@ -2,6 +2,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.TriggerLive.Index do
   use PearlWeb, :live_component
 
   alias Pearl.Contest
+  import PearlWeb.Components.Button
 
   @impl true
   def render(assigns) do
@@ -10,7 +11,7 @@ defmodule PearlWeb.Backoffice.BadgeLive.TriggerLive.Index do
       <.page title={@title} subtitle={gettext("Attendee actions can trigger badge redeems.")}>
         <:actions>
           <.link navigate={~p"/dashboard/badges/#{@badge.id}/triggers/new"}>
-            <.button>New Trigger</.button>
+            <.backoffice_button>New Trigger</.backoffice_button>
           </.link>
         </:actions>
 
diff --git a/lib/pearl_web/live/backoffice/challenge_live/form_component.ex b/lib/pearl_web/live/backoffice/challenge_live/form_component.ex
index 38baccd..235c09e 100644
--- a/lib/pearl_web/live/backoffice/challenge_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/challenge_live/form_component.ex
@@ -3,7 +3,7 @@ defmodule PearlWeb.ChallengeLive.FormComponent do
 
   alias Pearl.Challenges
   alias Pearl.Challenges.Challenge
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Forms, Button}
 
   @impl true
   def render(assigns) do
@@ -81,7 +81,7 @@ defmodule PearlWeb.ChallengeLive.FormComponent do
             {gettext("New Prize")}
           </button>
 
-          <.button phx-disable-with="Saving...">Save Challenge</.button>
+          <.backoffice_button phx-disable-with="Saving...">Save Challenge</.backoffice_button>
         </:actions>
       </.simple_form>
     </div>
diff --git a/lib/pearl_web/live/backoffice/challenge_live/index.ex b/lib/pearl_web/live/backoffice/challenge_live/index.ex
index 09791bc..3848d4d 100644
--- a/lib/pearl_web/live/backoffice/challenge_live/index.ex
+++ b/lib/pearl_web/live/backoffice/challenge_live/index.ex
@@ -8,8 +8,7 @@ defmodule PearlWeb.Backoffice.ChallengeLive.Index do
 
   alias PearlWeb.Helpers
 
-  import PearlWeb.Components.Table
-  import PearlWeb.Components.TableSearch
+  import PearlWeb.Components.{Button, TableSearch, Table}
 
   on_mount {PearlWeb.StaffRoles,
             index: %{"challenges" => ["show"]},
diff --git a/lib/pearl_web/live/backoffice/challenge_live/index.html.heex b/lib/pearl_web/live/backoffice/challenge_live/index.html.heex
index 37d5886..48a5348 100644
--- a/lib/pearl_web/live/backoffice/challenge_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/challenge_live/index.html.heex
@@ -10,7 +10,7 @@
       />
       <.ensure_permissions user={@current_user} permissions={%{"challenges" => ["edit"]}}>
         <.link patch={~p"/dashboard/minigames/challenges/new"}>
-          <.button>New Challenge</.button>
+          <.backoffice_button>New Challenge</.backoffice_button>
         </.link>
       </.ensure_permissions>
     </div>
diff --git a/lib/pearl_web/live/backoffice/companies_live/form_component.ex b/lib/pearl_web/live/backoffice/companies_live/form_component.ex
index 9ff878d..0dbb25d 100644
--- a/lib/pearl_web/live/backoffice/companies_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/companies_live/form_component.ex
@@ -5,7 +5,7 @@ defmodule PearlWeb.Backoffice.CompanyLive.FormComponent do
   alias Pearl.Uploaders.Company
 
   import PearlWeb.Components.ImageUploader
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{ImageUploader, Forms, Button}
 
   @impl true
   def render(assigns) do
@@ -96,7 +96,7 @@ defmodule PearlWeb.Backoffice.CompanyLive.FormComponent do
           </div>
         </div>
         <:actions>
-          <.button phx-disable-with="Saving...">Save Company</.button>
+          <.backoffice_button phx-disable-with="Saving...">Save Company</.backoffice_button>
         </:actions>
       </.simple_form>
     </div>
diff --git a/lib/pearl_web/live/backoffice/companies_live/index.html.heex b/lib/pearl_web/live/backoffice/companies_live/index.html.heex
index 9b3c9ba..d0237f4 100644
--- a/lib/pearl_web/live/backoffice/companies_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/companies_live/index.html.heex
@@ -10,15 +10,15 @@
       />
       <.ensure_permissions user={@current_user} permissions={%{"companies" => ["edit"]}}>
         <.link patch={~p"/dashboard/companies/new"}>
-          <.button>New Company</.button>
+          <.backoffice_button>New Company</.backoffice_button>
         </.link>
       </.ensure_permissions>
 
       <.ensure_permissions user={@current_user} permissions={%{"companies" => ["edit"]}}>
         <.link patch={~p"/dashboard/companies/tiers"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-rectangle-stack" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
     </div>
diff --git a/lib/pearl_web/live/backoffice/companies_live/tier_live/form_component.ex b/lib/pearl_web/live/backoffice/companies_live/tier_live/form_component.ex
index 7e76dea..b53aaf3 100644
--- a/lib/pearl_web/live/backoffice/companies_live/tier_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/companies_live/tier_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.CompanyLive.TierLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Companies
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -24,7 +24,7 @@ defmodule PearlWeb.Backoffice.CompanyLive.TierLive.FormComponent do
             <.field field={@form[:full_cv_access]} type="switch" label="Full CV Access" />
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Tier</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Tier</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/companies_live/tier_live/index.ex b/lib/pearl_web/live/backoffice/companies_live/tier_live/index.ex
index 3257732..be46691 100644
--- a/lib/pearl_web/live/backoffice/companies_live/tier_live/index.ex
+++ b/lib/pearl_web/live/backoffice/companies_live/tier_live/index.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.CompanyLive.TierLive.Index do
   use PearlWeb, :live_component
 
   alias Pearl.Companies
-  import PearlWeb.Components.EnsurePermissions
+  import PearlWeb.Components.{EnsurePermissions, Button}
 
   @impl true
   def render(assigns) do
@@ -12,7 +12,7 @@ defmodule PearlWeb.Backoffice.CompanyLive.TierLive.Index do
         <:actions>
           <.ensure_permissions user={@current_user} permissions={%{"companies" => ["edit"]}}>
             <.link navigate={~p"/dashboard/companies/tiers/new"}>
-              <.button>New Tier</.button>
+              <.backoffice_button>New Tier</.backoffice_button>
             </.link>
           </.ensure_permissions>
         </:actions>
diff --git a/lib/pearl_web/live/backoffice/event_live/faq_live/form_component.ex b/lib/pearl_web/live/backoffice/event_live/faq_live/form_component.ex
index 728757c..53c46e0 100644
--- a/lib/pearl_web/live/backoffice/event_live/faq_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/event_live/faq_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.EventLive.FaqLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Event
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -24,7 +24,7 @@ defmodule PearlWeb.Backoffice.EventLive.FaqLive.FormComponent do
             <.field field={@form[:answer]} type="textarea" required />
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save FAQ</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save FAQ</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/event_live/faq_live/index.ex b/lib/pearl_web/live/backoffice/event_live/faq_live/index.ex
index c61e899..00595a1 100644
--- a/lib/pearl_web/live/backoffice/event_live/faq_live/index.ex
+++ b/lib/pearl_web/live/backoffice/event_live/faq_live/index.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.EventLive.FaqLive.Index do
   use PearlWeb, :live_component
 
   alias Pearl.Event
-  import PearlWeb.Components.EnsurePermissions
+  import PearlWeb.Components.{Button, EnsurePermissions}
 
   @impl true
   def render(assigns) do
@@ -12,7 +12,7 @@ defmodule PearlWeb.Backoffice.EventLive.FaqLive.Index do
         <:actions>
           <.ensure_permissions user={@current_user} permissions={%{"event" => ["edit_faqs"]}}>
             <.link navigate={~p"/dashboard/event/faqs/new"}>
-              <.button>New FAQ</.button>
+              <.backoffice_button>New FAQ</.backoffice_button>
             </.link>
           </.ensure_permissions>
         </:actions>
diff --git a/lib/pearl_web/live/backoffice/event_live/form_component.ex b/lib/pearl_web/live/backoffice/event_live/form_component.ex
index a2f56c8..e36685b 100644
--- a/lib/pearl_web/live/backoffice/event_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/event_live/form_component.ex
@@ -1,7 +1,7 @@
 defmodule PearlWeb.Backoffice.EventLive.FormComponent do
   use PearlWeb, :live_component
 
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   alias Pearl.Event
   alias PearlWeb.Helpers
@@ -51,12 +51,12 @@ defmodule PearlWeb.Backoffice.EventLive.FormComponent do
             <.field field={@form[:start_time]} type="datetime-local" label="Start Date/Time" required />
           </div>
           <:actions>
-            <.button
+            <.backoffice_button
               data-confirm="Do you want to save these changes? It can break stuff if you are not careful"
               phx-disable-with="Saving..."
             >
               {gettext("Save Settings")}
-            </.button>
+            </.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/event_live/generate_credentials_live/form_component.ex b/lib/pearl_web/live/backoffice/event_live/generate_credentials_live/form_component.ex
index 89de58e..ffc7812 100644
--- a/lib/pearl_web/live/backoffice/event_live/generate_credentials_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/event_live/generate_credentials_live/form_component.ex
@@ -1,7 +1,7 @@
 defmodule PearlWeb.Backoffice.EventLive.GenerateCredentialsLive.FormComponent do
   use PearlWeb, :live_component
 
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -13,7 +13,7 @@ defmodule PearlWeb.Backoffice.EventLive.GenerateCredentialsLive.FormComponent do
             <.field field={@form[:count]} type="number" label="Number of Credentials" required />
           </div>
           <:actions>
-            <.button phx-disable-with="Generating...">Generate</.button>
+            <.backoffice_button phx-disable-with="Generating...">Generate</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/event_live/index.ex b/lib/pearl_web/live/backoffice/event_live/index.ex
index 522dc19..e0d1d62 100644
--- a/lib/pearl_web/live/backoffice/event_live/index.ex
+++ b/lib/pearl_web/live/backoffice/event_live/index.ex
@@ -5,6 +5,8 @@ defmodule PearlWeb.Backoffice.EventLive.Index do
   alias Pearl.Event.Faq
   alias Pearl.Teams
 
+  import PearlWeb.Components.Button
+
   on_mount {PearlWeb.StaffRoles,
             show: %{"event" => ["show"]},
             edit: %{"event" => ["edit"]},
diff --git a/lib/pearl_web/live/backoffice/event_live/index.html.heex b/lib/pearl_web/live/backoffice/event_live/index.html.heex
index 9cb7bd0..1c49ab2 100644
--- a/lib/pearl_web/live/backoffice/event_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/event_live/index.html.heex
@@ -1,29 +1,29 @@
 <.page title="Event Settings">
   <:actions>
     <.link patch={~p"/dashboard/event/teams"}>
-      <.button>
+      <.backoffice_button>
         <.icon name="hero-user-group" class="w-5 h-5" />
-      </.button>
+      </.backoffice_button>
     </.link>
     <.link patch={~p"/dashboard/event/faqs"}>
-      <.button>
+      <.backoffice_button>
         <.icon name="hero-lifebuoy" class="w-5 h-5" />
-      </.button>
+      </.backoffice_button>
     </.link>
     <.link patch={~p"/dashboard/event/credentials"}>
-      <.button>
+      <.backoffice_button>
         <.icon name="hero-qr-code" class="w-5 h-5" />
-      </.button>
+      </.backoffice_button>
     </.link>
     <.link patch={~p"/dashboard/event/edit"}>
-      <.button>{gettext("Edit Settings")}</.button>
+      <.backoffice_button>{gettext("Edit Settings")}</.backoffice_button>
     </.link>
 
     <.link href={~p"/downloads/cv_challenge"} target="_blank">
-      <.button>{gettext("CV Challenge")}</.button>
+      <.backoffice_button>{gettext("CV Challenge")}</.backoffice_button>
     </.link>
     <.link patch={~p"/downloads/final_draw"} target="_blank">
-      <.button>{gettext("Export Final Draw CSV")}</.button>
+      <.backoffice_button>{gettext("Export Final Draw CSV")}</.backoffice_button>
     </.link>
   </:actions>
 
diff --git a/lib/pearl_web/live/backoffice/event_live/teams_live/form_component.ex b/lib/pearl_web/live/backoffice/event_live/teams_live/form_component.ex
index be72959..6ab0676 100644
--- a/lib/pearl_web/live/backoffice/event_live/teams_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/event_live/teams_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Live.Backoffice.EventLive.TeamsLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Teams
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -14,9 +14,9 @@ defmodule PearlWeb.Live.Backoffice.EventLive.TeamsLive.FormComponent do
             :if={@action != :teams_new}
             navigate={~p"/dashboard/event/teams/#{@team.id}/edit/members"}
           >
-            <.button>
+            <.backoffice_button>
               {gettext("New Member")}
-            </.button>
+            </.backoffice_button>
           </.link>
         </:actions>
         <.simple_form for={@form} id="edit-team-form" phx-target={@myself} phx-submit="save">
@@ -56,7 +56,7 @@ defmodule PearlWeb.Live.Backoffice.EventLive.TeamsLive.FormComponent do
             </div>
           </ul>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Team</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Team</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/event_live/teams_live/index.ex b/lib/pearl_web/live/backoffice/event_live/teams_live/index.ex
index 5fcfea1..7e6288b 100644
--- a/lib/pearl_web/live/backoffice/event_live/teams_live/index.ex
+++ b/lib/pearl_web/live/backoffice/event_live/teams_live/index.ex
@@ -3,6 +3,8 @@ defmodule PearlWeb.Live.Backoffice.EventLive.TeamsLive.Index do
 
   alias Pearl.Teams
 
+  import PearlWeb.Components.Button
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -10,7 +12,7 @@ defmodule PearlWeb.Live.Backoffice.EventLive.TeamsLive.Index do
       <.page title={@title}>
         <:actions>
           <.link navigate={~p"/dashboard/event/teams/new"}>
-            <.button>New Team</.button>
+            <.backoffice_button>New Team</.backoffice_button>
           </.link>
         </:actions>
         <ul
diff --git a/lib/pearl_web/live/backoffice/event_live/teams_live/member_live/form_component.ex b/lib/pearl_web/live/backoffice/event_live/teams_live/member_live/form_component.ex
index b8a269e..f384480 100644
--- a/lib/pearl_web/live/backoffice/event_live/teams_live/member_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/event_live/teams_live/member_live/form_component.ex
@@ -5,7 +5,7 @@ defmodule PearlWeb.Live.Backoffice.EventLive.TeamsLive.MemberLive.FormComponent
   alias Pearl.Uploaders.Member
 
   import PearlWeb.Components.Forms
-  import PearlWeb.Components.ImageUploader
+  import PearlWeb.Components.{ImageUploader, Button}
 
   @impl true
   def render(assigns) do
@@ -33,7 +33,7 @@ defmodule PearlWeb.Live.Backoffice.EventLive.TeamsLive.MemberLive.FormComponent
             />
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/coin_flip_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/coin_flip_live/form_component.ex
index 95365a5..f19f549 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/coin_flip_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/coin_flip_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.MinigamesLive.CoinFlip.FormComponent do
   @moduledoc false
   use PearlWeb, :live_component
 
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   alias Ecto.Changeset
   alias Pearl.Minigames
@@ -43,7 +43,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.CoinFlip.FormComponent do
               />
             </div>
             <div class="flex flex-row-reverse">
-              <.button phx-disable-with="Saving...">{gettext("Save Configuration")}</.button>
+              <.backoffice_button phx-disable-with="Saving...">
+                {gettext("Save Configuration")}
+              </.backoffice_button>
             </div>
           </.form>
         </div>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/slots_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/slots_live/form_component.ex
index 88d7932..25239b1 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/slots_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/slots_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.MinigamesLive.Slots.FormComponent do
   @moduledoc false
   use PearlWeb, :live_component
 
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Forms, Button}
 
   alias Ecto.Changeset
   alias Pearl.Minigames
@@ -16,24 +16,24 @@ defmodule PearlWeb.Backoffice.MinigamesLive.Slots.FormComponent do
       >
         <:actions>
           <.link navigate={~p"/dashboard/minigames/slots/reels_icons"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-star" class="w-5" />
-            </.button>
+            </.backoffice_button>
           </.link>
           <.link navigate={~p"/dashboard/minigames/slots/reels_position"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-view-columns" class="w-5" />
-            </.button>
+            </.backoffice_button>
           </.link>
           <.link navigate={~p"/dashboard/minigames/slots/paytable"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-circle-stack" class="w-5" />
-            </.button>
+            </.backoffice_button>
           </.link>
           <.link navigate={~p"/dashboard/minigames/slots/payline"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-rectangle-stack" class="w-5" />
-            </.button>
+            </.backoffice_button>
           </.link>
         </:actions>
         <div class="my-8">
@@ -55,7 +55,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.Slots.FormComponent do
               />
             </div>
             <div class="flex flex-row-reverse">
-              <.button phx-disable-with="Saving...">{gettext("Save Configuration")}</.button>
+              <.backoffice_button phx-disable-with="Saving...">
+                {gettext("Save Configuration")}
+              </.backoffice_button>
             </div>
           </.form>
         </div>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/slots_live/payline_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/slots_live/payline_live/form_component.ex
index 4a95b59..13617e8 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/slots_live/payline_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/slots_live/payline_live/form_component.ex
@@ -5,7 +5,7 @@ defmodule PearlWeb.Backoffice.MinigamesLive.SlotsPayline.FormComponent do
 
   alias Pearl.Minigames
 
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -15,9 +15,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.SlotsPayline.FormComponent do
         <div class="pt-8">
           <div class="flex flex-row justify-between items-center">
             <h2 class="font-semibold">{gettext("Entries")}</h2>
-            <.button phx-click="add-entry" phx-target={@myself}>
+            <.backoffice_button phx-click="add-entry" phx-target={@myself}>
               <.icon name="hero-plus" class="w-5 h-5" />
-            </.button>
+            </.backoffice_button>
           </div>
           <ul class="h-[45vh] overflow-y-scroll scrollbar-hide mt-4 border-b-[1px] border-lightShade  dark:border-darkShade">
             <%= for {id, _entry, form} <- @entries do %>
@@ -71,9 +71,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.SlotsPayline.FormComponent do
           </ul>
         </div>
         <div class="w-full flex flex-row-reverse">
-          <.button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
+          <.backoffice_button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
             Save Configuration
-          </.button>
+          </.backoffice_button>
         </div>
       </.page>
     </div>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/slots_live/paytable_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/slots_live/paytable_live/form_component.ex
index 51c8314..92217a6 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/slots_live/paytable_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/slots_live/paytable_live/form_component.ex
@@ -16,9 +16,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.SlotsPaytable.FormComponent do
         <div class="pt-8">
           <div class="flex flex-row justify-between items-center">
             <h2 class="font-semibold">{gettext("Entries")}</h2>
-            <.button phx-click="add-entry" phx-target={@myself}>
+            <.backoffice_button phx-click="add-entry" phx-target={@myself}>
               <.icon name="hero-plus" class="w-5 h-5" />
-            </.button>
+            </.backoffice_button>
           </div>
           <ul class="h-[45vh] overflow-y-scroll scrollbar-hide mt-4 border-b-[1px] border-lightShade  dark:border-darkShade">
             <%= for {id, _entry, form} <- @entries do %>
@@ -62,9 +62,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.SlotsPaytable.FormComponent do
           </div>
         </div>
         <div class="w-full flex flex-row-reverse">
-          <.button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
+          <.backoffice_button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
             Save Configuration
-          </.button>
+          </.backoffice_button>
         </div>
       </.page>
     </div>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_icons_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_icons_live/form_component.ex
index 5c6e42f..0e18a45 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_icons_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_icons_live/form_component.ex
@@ -4,7 +4,7 @@ defmodule PearlWeb.Backoffice.MinigamesLive.ReelIcons.FormComponent do
   use PearlWeb, :live_component
 
   import PearlWeb.Components.Forms
-  import PearlWeb.Components.ImageUploader
+  import PearlWeb.Components.{ImageUploader, Button}
 
   alias Pearl.Minigames
 
@@ -64,7 +64,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.ReelIcons.FormComponent do
               )}
             </p>
             <div class="flex justify-end">
-              <.button phx-disable-with="Saving...">{gettext("Save Configuration")}</.button>
+              <.backoffice_button phx-disable-with="Saving...">
+                {gettext("Save Configuration")}
+              </.backoffice_button>
             </div>
           </.simple_form>
         </div>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_position_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_position_live/form_component.ex
index dfdce82..9ef26bf 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_position_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/slots_live/reels_position_live/form_component.ex
@@ -70,14 +70,14 @@ defmodule PearlWeb.Backoffice.MinigamesLive.ReelsPosition.FormComponent do
             </p>
           </div>
           <div class="flex justify-end">
-            <.button
+            <.backoffice_button
               phx-click="save"
               phx-target={@myself}
               phx-disable-with="Saving..."
               disabled={not all_reels_match?(@visibility)}
             >
               {gettext("Save Configuration")}
-            </.button>
+            </.backoffice_button>
           </div>
         </div>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/wheel_live/drops_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/wheel_live/drops_live/form_component.ex
index 1b099ca..4d5cde8 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/wheel_live/drops_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/wheel_live/drops_live/form_component.ex
@@ -19,17 +19,17 @@ defmodule PearlWeb.Backoffice.MinigamesLive.WheelDrops.FormComponent do
       >
         <:actions>
           <.link patch={~p"/dashboard/minigames/wheel/simulator"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-play" class="w-5 h-5" />
-            </.button>
+            </.backoffice_button>
           </.link>
         </:actions>
         <div class="pt-8">
           <div class="flex flex-row justify-between items-center">
             <h2 class="font-semibold">{gettext("Drops")}</h2>
-            <.button phx-click={JS.push("add-drop", target: @myself)}>
+            <.backoffice_button phx-click={JS.push("add-drop", target: @myself)}>
               <.icon name="hero-plus" class="w-5 h-5" />
-            </.button>
+            </.backoffice_button>
           </div>
           <ul class="h-[45vh] overflow-y-scroll scrollbar-hide mt-4 border-b-[1px] border-lightShade  dark:border-darkShade">
             <%= for {id, type, _drop, form} <- @drops do %>
@@ -112,9 +112,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.WheelDrops.FormComponent do
           </div>
         </div>
         <div class="w-full flex flex-row-reverse">
-          <.button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
+          <.backoffice_button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
             Save Configuration
-          </.button>
+          </.backoffice_button>
         </div>
       </.page>
     </div>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/wheel_live/form_component.ex b/lib/pearl_web/live/backoffice/minigames_live/wheel_live/form_component.ex
index 24f704a..392d65e 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/wheel_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/wheel_live/form_component.ex
@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.MinigamesLive.Wheel.FormComponent do
   @moduledoc false
   use PearlWeb, :live_component
 
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   alias Ecto.Changeset
   alias Pearl.Minigames
@@ -16,9 +16,9 @@ defmodule PearlWeb.Backoffice.MinigamesLive.Wheel.FormComponent do
       >
         <:actions>
           <.link navigate={~p"/dashboard/minigames/wheel/drops"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-table-cells" class="w-5" />
-            </.button>
+            </.backoffice_button>
           </.link>
         </:actions>
         <div class="my-8">
@@ -48,7 +48,7 @@ defmodule PearlWeb.Backoffice.MinigamesLive.Wheel.FormComponent do
               />
             </div>
             <div class="flex flex-row-reverse">
-              <.button phx-disable-with="Saving...">Save Configuration</.button>
+              <.backoffice_button phx-disable-with="Saving...">Save Configuration</.backoffice_button>
             </div>
           </.form>
         </div>
diff --git a/lib/pearl_web/live/backoffice/minigames_live/wheel_live/simulator_live/index.ex b/lib/pearl_web/live/backoffice/minigames_live/wheel_live/simulator_live/index.ex
index a487039..884d5ac 100644
--- a/lib/pearl_web/live/backoffice/minigames_live/wheel_live/simulator_live/index.ex
+++ b/lib/pearl_web/live/backoffice/minigames_live/wheel_live/simulator_live/index.ex
@@ -18,11 +18,11 @@ defmodule PearlWeb.Backoffice.MinigamesLive.Simulator.Index do
         <div class="py-8 flex flex-col gap-12 items-center">
           <.wheel />
 
-          <.button phx-click="spin-wheel" disabled={@in_spin?} phx-target={@myself}>
+          <.backoffice_button phx-click="spin-wheel" disabled={@in_spin?} phx-target={@myself}>
             <p class="uppercase font-terminal text-xl px-4">
               {gettext("Spin the wheel")}
             </p>
-          </.button>
+          </.backoffice_button>
         </div>
       </.page>
 
diff --git a/lib/pearl_web/live/backoffice/prize_live/daily_live/form_component.ex b/lib/pearl_web/live/backoffice/prize_live/daily_live/form_component.ex
index 024f04f..42806f9 100644
--- a/lib/pearl_web/live/backoffice/prize_live/daily_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/prize_live/daily_live/form_component.ex
@@ -6,7 +6,7 @@ defmodule PearlWeb.PrizeLive.Daily.FormComponent do
   alias Pearl.Contest.DailyPrize
   alias Pearl.Minigames
 
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Button, Forms}
 
   @impl true
   def render(assigns) do
@@ -16,9 +16,9 @@ defmodule PearlWeb.PrizeLive.Daily.FormComponent do
         <div class="pt-8">
           <div class="flex flex-row justify-between items-center">
             <h2 class="font-semibold">{gettext("Daily Prizes")}</h2>
-            <.button phx-click={JS.push("add-prize", target: @myself)}>
+            <.backoffice_button phx-click={JS.push("add-prize", target: @myself)}>
               <.icon name="hero-plus" class="w-5 h-5" />
-            </.button>
+            </.backoffice_button>
           </div>
           <ul class="h-[45vh] overflow-y-scroll scrollbar-hide mt-4 border-b-[1px] border-lightShade  dark:border-darkShade">
             <%= for {id, _daily_prize, form} <- @daily_prizes do %>
@@ -61,9 +61,9 @@ defmodule PearlWeb.PrizeLive.Daily.FormComponent do
           </ul>
         </div>
         <div class="w-full flex flex-row-reverse">
-          <.button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
+          <.backoffice_button phx-click="save" phx-target={@myself} phx-disable-with="Saving...">
             Save Daily Prizes
-          </.button>
+          </.backoffice_button>
         </div>
       </.page>
     </div>
diff --git a/lib/pearl_web/live/backoffice/prize_live/form_component.ex b/lib/pearl_web/live/backoffice/prize_live/form_component.ex
index 419d591..a4da3c2 100644
--- a/lib/pearl_web/live/backoffice/prize_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/prize_live/form_component.ex
@@ -42,7 +42,7 @@ defmodule PearlWeb.PrizeLive.FormComponent do
           </div>
         </div>
         <:actions>
-          <.button phx-disable-with="Saving...">Save Prize</.button>
+          <.backoffice_button phx-disable-with="Saving...">Save Prize</.backoffice_button>
         </:actions>
       </.simple_form>
     </div>
diff --git a/lib/pearl_web/live/backoffice/prize_live/index.html.heex b/lib/pearl_web/live/backoffice/prize_live/index.html.heex
index 227cf29..a160564 100644
--- a/lib/pearl_web/live/backoffice/prize_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/prize_live/index.html.heex
@@ -9,13 +9,13 @@
         placeholder={gettext("Search for prizes")}
       />
       <.link navigate={~p"/dashboard/minigames/prizes/daily"}>
-        <.button>
+        <.backoffice_button>
           <.icon name="hero-calendar-days" class="w-5" />
-        </.button>
+        </.backoffice_button>
       </.link>
       <.ensure_permissions user={@current_user} permissions={%{"minigames" => ["edit"]}}>
         <.link patch={~p"/dashboard/minigames/prizes/new"}>
-          <.button>New Prize</.button>
+          <.backoffice_button>New Prize</.backoffice_button>
         </.link>
       </.ensure_permissions>
     </div>
diff --git a/lib/pearl_web/live/backoffice/scanner_live/badge_live/index.ex b/lib/pearl_web/live/backoffice/scanner_live/badge_live/index.ex
index 2b73a48..44efeaf 100644
--- a/lib/pearl_web/live/backoffice/scanner_live/badge_live/index.ex
+++ b/lib/pearl_web/live/backoffice/scanner_live/badge_live/index.ex
@@ -47,9 +47,9 @@ defmodule PearlWeb.Backoffice.ScannerLive.BadgeLive.Index do
                 "Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
               )}
             </p>
-            <.button id="permission-button" type="button">
+            <.backoffice_button id="permission-button" type="button">
               {gettext("Request Permission")}
-            </.button>
+            </.backoffice_button>
           </div>
         </.page>
       </div>
diff --git a/lib/pearl_web/live/backoffice/scanner_live/enrolment_live/index.ex b/lib/pearl_web/live/backoffice/scanner_live/enrolment_live/index.ex
index 339bf34..81fcebe 100644
--- a/lib/pearl_web/live/backoffice/scanner_live/enrolment_live/index.ex
+++ b/lib/pearl_web/live/backoffice/scanner_live/enrolment_live/index.ex
@@ -31,9 +31,9 @@ defmodule PearlWeb.Backoffice.ScannerLive.EnrolmentLive.Index do
                 "Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
               )}
             </p>
-            <.button id="permission-button" type="button">
+            <.backoffice_button id="permission-button" type="button">
               {gettext("Request Permission")}
-            </.button>
+            </.backoffice_button>
           </div>
         </.page>
       </div>
diff --git a/lib/pearl_web/live/backoffice/scanner_live/index.html.heex b/lib/pearl_web/live/backoffice/scanner_live/index.html.heex
index 2f5ee73..ea27021 100644
--- a/lib/pearl_web/live/backoffice/scanner_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/scanner_live/index.html.heex
@@ -15,10 +15,10 @@
     <:actions>
       <div class="flex flex-row gap-4 justify-center items-center">
         <.link patch={~p"/dashboard/scanner/redeems"} class="hidden sm:block w-full">
-          <.button class="flex gap-2">
+          <.backoffice_button class="flex gap-2">
             <.icon name="hero-gift" />
             {gettext("Redeems")}
-          </.button>
+          </.backoffice_button>
         </.link>
         <.table_search
           id="badge-table-name-search"
diff --git a/lib/pearl_web/live/backoffice/scanner_live/inventory_live/index.ex b/lib/pearl_web/live/backoffice/scanner_live/inventory_live/index.ex
index 03b76e1..4d8fa2c 100644
--- a/lib/pearl_web/live/backoffice/scanner_live/inventory_live/index.ex
+++ b/lib/pearl_web/live/backoffice/scanner_live/inventory_live/index.ex
@@ -40,9 +40,9 @@ defmodule PearlWeb.Backoffice.ScannerLive.InventoryLive.Index do
                 "Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
               )}
             </p>
-            <.button id="permission-button" type="button">
+            <.backoffice_button id="permission-button" type="button">
               {gettext("Request Permission")}
-            </.button>
+            </.backoffice_button>
           </div>
         </.page>
       </div>
diff --git a/lib/pearl_web/live/backoffice/scanner_live/inventory_live/show.ex b/lib/pearl_web/live/backoffice/scanner_live/inventory_live/show.ex
index af03345..2c6e666 100644
--- a/lib/pearl_web/live/backoffice/scanner_live/inventory_live/show.ex
+++ b/lib/pearl_web/live/backoffice/scanner_live/inventory_live/show.ex
@@ -81,20 +81,20 @@ defmodule PearlWeb.Backoffice.ScannerLive.InventoryLive.Show do
           </p>
 
           <div class="flex flex-row w-full gap-2">
-            <.button
+            <.backoffice_button
               phx-click="cancel-deliver"
               class="w-full flex flex-row items-center justify-center"
             >
               <.icon name="hero-x-circle" class="w-5 h-5 mr-2" />
               {gettext("Cancel")}
-            </.button>
-            <.button
+            </.backoffice_button>
+            <.backoffice_button
               phx-click="confirm-deliver"
               class="w-full flex flex-row items-center justify-center"
             >
               <.icon name="hero-check-circle" class="w-5 h-5 mr-2" />
               {gettext("Deliver")}
-            </.button>
+            </.backoffice_button>
           </div>
         </div>
       </.modal>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/activity_live/form_component.ex b/lib/pearl_web/live/backoffice/schedule_live/activity_live/form_component.ex
index 18a52e3..e4a90df 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/activity_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/activity_live/form_component.ex
@@ -91,7 +91,7 @@ defmodule PearlWeb.Backoffice.ScheduleLive.ActivityLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Activity</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Activity</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/category_live/form_component.ex b/lib/pearl_web/live/backoffice/schedule_live/category_live/form_component.ex
index e2ab9cc..af0a460 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/category_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/category_live/form_component.ex
@@ -20,7 +20,7 @@ defmodule PearlWeb.Backoffice.ScheduleLive.CategoryLive.FormComponent do
             <.field field={@form[:name]} type="text" label="Name" required />
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Category</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Category</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/category_live/index.ex b/lib/pearl_web/live/backoffice/schedule_live/category_live/index.ex
index a3aa0c9..1f7ceea 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/category_live/index.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/category_live/index.ex
@@ -13,7 +13,7 @@ defmodule PearlWeb.Backoffice.ScheduleLive.CategoryLive.Index do
         <:actions>
           <.ensure_permissions user={@current_user} permissions={%{"schedule" => ["edit"]}}>
             <.link navigate={~p"/dashboard/schedule/activities/categories/new"}>
-              <.button>New Category</.button>
+              <.backoffice_button>New Category</.backoffice_button>
             </.link>
           </.ensure_permissions>
         </:actions>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/form_component.ex b/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/form_component.ex
index 214df2e..7e76a02 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/form_component.ex
@@ -30,7 +30,7 @@ defmodule PearlWeb.Backoffice.ScheduleLive.EnrolmentLive.FormComponent do
               wrapper_class="w-full"
               placeholder={gettext("Search for attendees")}
             />
-            <.button phx-disable-with="Saving...">Save</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save</.backoffice_button>
           </.simple_form>
         </div>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/index.ex b/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/index.ex
index c25b6b1..edd8083 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/index.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/enrolment_live/index.ex
@@ -14,14 +14,14 @@ defmodule PearlWeb.Backoffice.ScheduleLive.EnrolmentLive.Index do
         <:actions>
           <.ensure_permissions user={@current_user} permissions={%{"enrolments" => ["show"]}}>
             <.link navigate={~p"/dashboard/scanner/enrolments/#{@activity_id}"}>
-              <.button>
+              <.backoffice_button>
                 <.icon name="hero-qr-code" class="w-5 h-5" />
-              </.button>
+              </.backoffice_button>
             </.link>
           </.ensure_permissions>
           <.ensure_permissions user={@current_user} permissions={%{"enrolments" => ["edit"]}}>
             <.link navigate={~p"/dashboard/schedule/activities/#{@activity_id}/enrolments/new"}>
-              <.button>New Enrolment</.button>
+              <.backoffice_button>New Enrolment</.backoffice_button>
             </.link>
           </.ensure_permissions>
         </:actions>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/form_component.ex b/lib/pearl_web/live/backoffice/schedule_live/form_component.ex
index 280d235..a2ad1ae 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/form_component.ex
@@ -34,7 +34,7 @@ defmodule PearlWeb.Backoffice.ScheduleLive.FormComponent do
               />
             </div>
             <div class="flex flex-row-reverse">
-              <.button phx-disable-with="Saving...">Save Configuration</.button>
+              <.backoffice_button phx-disable-with="Saving...">Save Configuration</.backoffice_button>
             </div>
           </.form>
         </div>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/index.html.heex b/lib/pearl_web/live/backoffice/schedule_live/index.html.heex
index 7d753f0..546a67c 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/schedule_live/index.html.heex
@@ -10,31 +10,31 @@
       />
       <.ensure_permissions user={@current_user} permissions={%{"schedule" => ["edit"]}}>
         <.link patch={~p"/dashboard/schedule/activities/new"}>
-          <.button>New Activity</.button>
+          <.backoffice_button>New Activity</.backoffice_button>
         </.link>
       </.ensure_permissions>
 
       <.ensure_permissions user={@current_user} permissions={%{"schedule" => ["edit"]}}>
         <.link patch={~p"/dashboard/schedule/edit"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-calendar-days" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
 
       <.ensure_permissions user={@current_user} permissions={%{"schedule" => ["edit"]}}>
         <.link patch={~p"/dashboard/schedule/activities/speakers"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-user" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
 
       <.ensure_permissions user={@current_user} permissions={%{"schedule" => ["edit"]}}>
         <.link patch={~p"/dashboard/schedule/activities/categories"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-tag" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
     </div>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/speaker_live/form_component.ex b/lib/pearl_web/live/backoffice/schedule_live/speaker_live/form_component.ex
index c37d04e..a9d0448 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/speaker_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/speaker_live/form_component.ex
@@ -75,7 +75,7 @@ defmodule PearlWeb.Backoffice.ScheduleLive.SpeakerLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Speaker</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Speaker</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/schedule_live/speaker_live/index.ex b/lib/pearl_web/live/backoffice/schedule_live/speaker_live/index.ex
index a521d30..e5eefbd 100644
--- a/lib/pearl_web/live/backoffice/schedule_live/speaker_live/index.ex
+++ b/lib/pearl_web/live/backoffice/schedule_live/speaker_live/index.ex
@@ -14,7 +14,7 @@ defmodule PearlWeb.Backoffice.ScheduleLive.SpeakerLive.Index do
         <:actions>
           <.ensure_permissions user={@current_user} permissions={%{"schedule" => ["edit"]}}>
             <.link navigate={~p"/dashboard/schedule/activities/speakers/new"}>
-              <.button>New Speaker</.button>
+              <.backoffice_button>New Speaker</.backoffice_button>
             </.link>
           </.ensure_permissions>
         </:actions>
diff --git a/lib/pearl_web/live/backoffice/spotlights_live/confirm.ex b/lib/pearl_web/live/backoffice/spotlights_live/confirm.ex
index 1411c2c..2d803dc 100644
--- a/lib/pearl_web/live/backoffice/spotlights_live/confirm.ex
+++ b/lib/pearl_web/live/backoffice/spotlights_live/confirm.ex
@@ -23,12 +23,22 @@ defmodule PearlWeb.Backoffice.SpotlightLive.Confirm do
             )}
           </p>
           <div class="flex justify-center space-x-8">
-            <.button phx-click="cancel-spotlight" class="w-full" phx-target={@myself} type="button">
+            <.backoffice_button
+              phx-click="cancel-spotlight"
+              class="w-full"
+              phx-target={@myself}
+              type="button"
+            >
               Cancel
-            </.button>
-            <.button phx-click="confirm-spotlight" class="w-full" phx-target={@myself} type="button">
+            </.backoffice_button>
+            <.backoffice_button
+              phx-click="confirm-spotlight"
+              class="w-full"
+              phx-target={@myself}
+              type="button"
+            >
               Start Spotlight
-            </.button>
+            </.backoffice_button>
           </div>
         </div>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/spotlights_live/form_component.ex b/lib/pearl_web/live/backoffice/spotlights_live/form_component.ex
index 2116e93..6ebcac4 100644
--- a/lib/pearl_web/live/backoffice/spotlights_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/spotlights_live/form_component.ex
@@ -16,9 +16,9 @@ defmodule PearlWeb.Backoffice.SpotlightLive.FormComponent do
       <.page title={@title}>
         <:actions>
           <.link navigate={~p"/dashboard/spotlights/config/tiers"}>
-            <.button>
+            <.backoffice_button>
               <.icon name="hero-rectangle-stack" class="w-5" />
-            </.button>
+            </.backoffice_button>
           </.link>
         </:actions>
         <div class="w-full space-y-2">
@@ -26,7 +26,7 @@ defmodule PearlWeb.Backoffice.SpotlightLive.FormComponent do
             <div>
               <.field field={@form[:duration]} type="number" label="Duration (in minutes)" required />
             </div>
-            <.button phx-disable-with="Saving...">Save Configuration</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Configuration</.backoffice_button>
           </.simple_form>
         </div>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/spotlights_live/index.ex b/lib/pearl_web/live/backoffice/spotlights_live/index.ex
index 0ac2ed0..fc34f8f 100644
--- a/lib/pearl_web/live/backoffice/spotlights_live/index.ex
+++ b/lib/pearl_web/live/backoffice/spotlights_live/index.ex
@@ -4,6 +4,8 @@ defmodule PearlWeb.Backoffice.SpotlightLive.Index do
   alias Pearl.Companies
   alias Pearl.Spotlights
 
+  import PearlWeb.Components.Button
+
   @impl true
   def mount(_params, _session, socket) do
     case Spotlights.get_current_spotlight() do
diff --git a/lib/pearl_web/live/backoffice/spotlights_live/index.html.heex b/lib/pearl_web/live/backoffice/spotlights_live/index.html.heex
index 0177e2a..77cc209 100644
--- a/lib/pearl_web/live/backoffice/spotlights_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/spotlights_live/index.html.heex
@@ -2,9 +2,9 @@
   <:actions>
     <div>
       <.link patch={~p"/dashboard/spotlights/config"}>
-        <.button>
+        <.backoffice_button>
           <.icon name="hero-cog-6-tooth" class="w-5 h-5" />
-        </.button>
+        </.backoffice_button>
       </.link>
     </div>
   </:actions>
@@ -26,9 +26,9 @@
     <% else %>
       <p>{gettext("There are no companies on spotlight!")}</p>
       <.link patch={~p"/dashboard/spotlights/new"}>
-        <.button class="mt-4">
+        <.backoffice_button class="mt-4">
           {gettext("Create Spotlight")}
-        </.button>
+        </.backoffice_button>
       </.link>
     <% end %>
   </div>
diff --git a/lib/pearl_web/live/backoffice/spotlights_live/new.ex b/lib/pearl_web/live/backoffice/spotlights_live/new.ex
index 98cf130..4d9f12f 100644
--- a/lib/pearl_web/live/backoffice/spotlights_live/new.ex
+++ b/lib/pearl_web/live/backoffice/spotlights_live/new.ex
@@ -21,7 +21,7 @@ defmodule PearlWeb.Backoffice.SpotlightLive.New do
               wrapper_class=""
               required
             />
-            <.button phx-disable-with="Saving...">Save</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save</.backoffice_button>
           </.simple_form>
         </div>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/spotlights_live/tiers/form_component.ex b/lib/pearl_web/live/backoffice/spotlights_live/tiers/form_component.ex
index cbfef45..ba35c2d 100644
--- a/lib/pearl_web/live/backoffice/spotlights_live/tiers/form_component.ex
+++ b/lib/pearl_web/live/backoffice/spotlights_live/tiers/form_component.ex
@@ -26,7 +26,7 @@ defmodule PearlWeb.Backoffice.SpotlightLive.Tiers.FormComponent do
             <.field field={@form[:max_spotlights]} type="number" label="Max Spotlights" required />
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/staff_live/form_component.ex b/lib/pearl_web/live/backoffice/staff_live/form_component.ex
index 67fee7d..b019b9c 100644
--- a/lib/pearl_web/live/backoffice/staff_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/staff_live/form_component.ex
@@ -43,7 +43,7 @@ defmodule PearlWeb.Backoffice.StaffLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Staff</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Staff</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/staff_live/index.html.heex b/lib/pearl_web/live/backoffice/staff_live/index.html.heex
index 7b2b9ce..a6ccca5 100644
--- a/lib/pearl_web/live/backoffice/staff_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/staff_live/index.html.heex
@@ -11,15 +11,15 @@
 
       <.ensure_permissions user={@current_user} permissions={%{"staffs" => ["edit"]}}>
         <.link patch={~p"/dashboard/staffs/new"}>
-          <.button>New Staff</.button>
+          <.backoffice_button>New Staff</.backoffice_button>
         </.link>
       </.ensure_permissions>
 
       <.ensure_permissions user={@current_user} permissions={%{"staffs" => ["roles_edit"]}}>
         <.link patch={~p"/dashboard/staffs/roles"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-shield-exclamation" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
     </div>
diff --git a/lib/pearl_web/live/backoffice/staff_live/role_live/form_component.ex b/lib/pearl_web/live/backoffice/staff_live/role_live/form_component.ex
index 7c6184a..a508c2f 100644
--- a/lib/pearl_web/live/backoffice/staff_live/role_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/staff_live/role_live/form_component.ex
@@ -42,7 +42,7 @@ defmodule PearlWeb.Backoffice.StaffLive.RoleLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Role</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Role</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/staff_live/role_live/index.ex b/lib/pearl_web/live/backoffice/staff_live/role_live/index.ex
index 3addbb3..4107dec 100644
--- a/lib/pearl_web/live/backoffice/staff_live/role_live/index.ex
+++ b/lib/pearl_web/live/backoffice/staff_live/role_live/index.ex
@@ -10,7 +10,7 @@ defmodule PearlWeb.Backoffice.StaffLive.RoleLive.Index do
       <.page title={@title}>
         <:actions>
           <.link navigate={~p"/dashboard/staffs/roles/new"}>
-            <.button>{gettext("New Role")}</.button>
+            <.backoffice_button>{gettext("New Role")}</.backoffice_button>
           </.link>
         </:actions>
         <ul class="h-96 mt-8 pb-8 flex flex-col space-y-2 overflow-y-auto">
diff --git a/lib/pearl_web/live/backoffice/store_live/product_live/form_component.ex b/lib/pearl_web/live/backoffice/store_live/product_live/form_component.ex
index 84b423e..9f22495 100644
--- a/lib/pearl_web/live/backoffice/store_live/product_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/store_live/product_live/form_component.ex
@@ -43,7 +43,7 @@ defmodule PearlWeb.Backoffice.ProductLive.FormComponent do
             </div>
           </div>
           <:actions>
-            <.button phx-disable-with="Saving...">Save Product</.button>
+            <.backoffice_button phx-disable-with="Saving...">Save Product</.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>
diff --git a/lib/pearl_web/live/backoffice/store_live/product_live/index.html.heex b/lib/pearl_web/live/backoffice/store_live/product_live/index.html.heex
index 5fe20bf..87076ea 100644
--- a/lib/pearl_web/live/backoffice/store_live/product_live/index.html.heex
+++ b/lib/pearl_web/live/backoffice/store_live/product_live/index.html.heex
@@ -10,13 +10,13 @@
       />
       <.ensure_permissions user={@current_user} permissions={%{"products" => ["edit"]}}>
         <.link patch={~p"/dashboard/store/products/new"}>
-          <.button>New Product</.button>
+          <.backoffice_button>New Product</.backoffice_button>
         </.link>
       </.ensure_permissions>
       <.link patch={~p"/dashboard/store/purchases"}>
-        <.button class="flex flex-row items-center gap-2">
+        <.backoffice_button class="flex flex-row items-center gap-2">
           <.icon name="hero-shopping-cart" />{gettext("Purchases")}
-        </.button>
+        </.backoffice_button>
       </.link>
     </div>
   </:actions>
diff --git a/lib/pearl_web/live/backoffice/store_live/product_live/show.html.heex b/lib/pearl_web/live/backoffice/store_live/product_live/show.html.heex
index 548f219..c71c4cf 100644
--- a/lib/pearl_web/live/backoffice/store_live/product_live/show.html.heex
+++ b/lib/pearl_web/live/backoffice/store_live/product_live/show.html.heex
@@ -1,7 +1,7 @@
 <.page title={@product.name}>
   <:actions>
     <.link patch={~p"/dashboard/store/products/#{@product}/show/edit"} phx-click={JS.push_focus()}>
-      <.button>Edit product</.button>
+      <.backoffice_button>Edit product</.backoffice_button>
     </.link>
   </:actions>
 
diff --git a/lib/pearl_web/live/backoffice/store_live/purchase_live/form_component.ex b/lib/pearl_web/live/backoffice/store_live/purchase_live/form_component.ex
index 2869966..aef6918 100644
--- a/lib/pearl_web/live/backoffice/store_live/purchase_live/form_component.ex
+++ b/lib/pearl_web/live/backoffice/store_live/purchase_live/form_component.ex
@@ -17,22 +17,22 @@ defmodule PearlWeb.Backoffice.PurchaseLive.FormComponent do
         </p>
 
         <div class="flex flex-row w-full gap-2">
-          <.button
+          <.backoffice_button
             phx-click="cancel"
             phx-target={@myself}
             class="w-full flex flex-row items-center justify-center"
           >
             <.icon name="hero-x-circle" class="w-5 h-5 mr-2" />
             {gettext("Cancel")}
-          </.button>
-          <.button
+          </.backoffice_button>
+          <.backoffice_button
             phx-click="confirm-action"
             phx-target={@myself}
             class="w-full flex flex-row items-center justify-center"
           >
             <.icon name="hero-check-circle" class="w-5 h-5 mr-2" />
             {confirmation_button(@action)}
-          </.button>
+          </.backoffice_button>
         </div>
       </div>
     </div>
diff --git a/lib/pearl_web/live/landing/components/navbar.ex b/lib/pearl_web/live/landing/components/navbar.ex
index a6fcc9c..0a3bc04 100644
--- a/lib/pearl_web/live/landing/components/navbar.ex
+++ b/lib/pearl_web/live/landing/components/navbar.ex
@@ -2,8 +2,7 @@ defmodule PearlWeb.Landing.Components.Navbar do
   @moduledoc false
   use PearlWeb, :component
 
-  import PearlWeb.Components.{Avatar, Dropdown}
-  import PearlWeb.Landing.Components.JoinUs
+  import PearlWeb.Components.{Avatar, Dropdown, Button}
 
   attr :pages, :list, default: []
   attr :registrations_open?, :boolean, default: false
@@ -46,14 +45,17 @@ defmodule PearlWeb.Landing.Components.Navbar do
             <.link
               :if={!@current_user}
               navigate={~p"/users/log_in"}
-              class="flex items-center gap-2 h-10 px-5 border border-primary bg-primary/10 text-primary text-sm transition-all hover:bg-primary/20"
+              phx-click={hide_mobile_navbar()}
             >
-              <.icon name="hero-user" class="h-4 w-4" />
-              <span>entrar</span>
+              <.secondary_button title="entrar" icon_position="left" icon="hero-user" />
+            </.link>
+            <.link
+              :if={@registrations_open? && !@current_user}
+              navigate={~p"/users/register"}
+              phx-click={hide_mobile_navbar()}
+            >
+              <.primary_button title="inscrição" />
             </.link>
-            <div :if={@registrations_open? && !@current_user}>
-              <.join_us />
-            </div>
           </div>
 
           <div :if={@current_user} class="hidden xl:flex items-center shrink-0">
diff --git a/lib/pearl_web/live/sponsor/home_live/index.ex b/lib/pearl_web/live/sponsor/home_live/index.ex
index c66f03e..eb0830a 100644
--- a/lib/pearl_web/live/sponsor/home_live/index.ex
+++ b/lib/pearl_web/live/sponsor/home_live/index.ex
@@ -5,9 +5,7 @@ defmodule PearlWeb.Sponsor.HomeLive.Index do
   alias Pearl.Contest
 
   import PearlWeb.Sponsor.HomeLive.Components.Attendee
-  import PearlWeb.Components.Forms
-  import PearlWeb.Components.Table
-  import PearlWeb.Components.TableSearch
+  import PearlWeb.Components.{TableSearch, Table, Forms, Button}
 
   @limit 12
 
diff --git a/lib/pearl_web/live/sponsor/home_live/index.html.heex b/lib/pearl_web/live/sponsor/home_live/index.html.heex
index e421a29..251864c 100644
--- a/lib/pearl_web/live/sponsor/home_live/index.html.heex
+++ b/lib/pearl_web/live/sponsor/home_live/index.html.heex
@@ -9,9 +9,9 @@
         placeholder={gettext("Search by name")}
       />
       <.link href={~p"/downloads/cvs"} target="_blank" class="sm:flex hidden">
-        <.button>
+        <.backoffice_button>
           {gettext("Download CVs")}
-        </.button>
+        </.backoffice_button>
       </.link>
       <.simple_form :if={@all_enabled} for={@form} phx-change="validate" class="sm:flex hidden">
         <.field field={@form[:all]} type="switch" label="All" wrapper_class="pb-2" />
@@ -24,9 +24,9 @@
       <.field field={@form[:all]} type="switch" label="All" wrapper_class="pb-2" />
     </.simple_form>
     <.link href={~p"/downloads/cvs"} target="_blank" class="justify-end">
-      <.button>
+      <.backoffice_button>
         {gettext("Download CVs")}
-      </.button>
+      </.backoffice_button>
     </.link>
   </div>
 
diff --git a/lib/pearl_web/live/sponsor/scanner_live/index.ex b/lib/pearl_web/live/sponsor/scanner_live/index.ex
index 11f5fe4..27ceb57 100644
--- a/lib/pearl_web/live/sponsor/scanner_live/index.ex
+++ b/lib/pearl_web/live/sponsor/scanner_live/index.ex
@@ -3,6 +3,8 @@ defmodule PearlWeb.Sponsor.ScannerLive.Index do
 
   alias Pearl.{Accounts, Contest}
 
+  import PearlWeb.Components.Button
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -30,9 +32,9 @@ defmodule PearlWeb.Sponsor.ScannerLive.Index do
               "Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
             )}
           </p>
-          <.button id="permission-button" type="button">
+          <.backoffice_button id="permission-button" type="button">
             {gettext("Request Permission")}
-          </.button>
+          </.backoffice_button>
         </div>
       </.page>
 
diff --git a/test/pearl_web/live/user_registration_live_test.exs b/test/pearl_web/live/user_registration_live_test.exs
index 8a9d9e6..58c94a8 100644
--- a/test/pearl_web/live/user_registration_live_test.exs
+++ b/test/pearl_web/live/user_registration_live_test.exs
@@ -49,7 +49,7 @@ defmodule PearlWeb.UserRegistrationLiveTest do
 
       {:ok, _login_live, login_html} =
         lv
-        |> element("a[href='/users/log_in'].text-sm")
+        |> element("a[href='/users/log_in'].font-semibold")
         |> render_click()
         |> follow_redirect(conn, ~p"/users/log_in")