diff --git a/lib/moon/design/button.ex b/lib/moon/design/button.ex
index e5ca2c01e..7bd2de279 100644
--- a/lib/moon/design/button.ex
+++ b/lib/moon/design/button.ex
@@ -3,66 +3,13 @@ defmodule Moon.Design.Button do
 
   use Moon.StatelessComponent
 
+  use Moon.Design.Button.Properties
+
   alias Moon.Components.AsComponent
   alias Moon.Design.Button.Utils
   alias Moon.Icon
   alias Moon.Design.Loader
 
-  @doc "Visual/Logical variant of button"
-  prop(variant, :string,
-    values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
-    default: "fill"
-  )
-
-  @doc "Size of button"
-  prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
-  @doc "Rendered HTML element"
-  prop(as, :string, values!: ~w(a button), default: "button")
-  @doc "A href attribute when prop as=\"a\""
-  prop(href, :string)
-  @doc "Full width button"
-  prop(full_width, :boolean)
-  @doc "Disabled button"
-  prop(disabled, :boolean)
-  @doc "Animation of button"
-  prop(animation, :string, values: ~w(progress success error pulse))
-  @doc "Additional Tailwind classes"
-  prop(class, :css_class)
-  @doc "Additional Tailwind classes for hover background"
-  prop(hover_bg_class, :css_class)
-  @doc "Type attribute for DOM element"
-  prop(type, :string, default: "button")
-  @doc "Form attribute for DOM element"
-  prop(form, :string)
-  @doc "On click event"
-  prop(on_click, :event)
-  @doc "list of additional values to associate with the DOM element"
-  prop(values, :keyword, default: [])
-  @doc "Value attribute for DOM element"
-  prop(value, :string)
-  @doc "Left icon"
-  prop(left_icon, :string)
-  @doc "Right icon"
-  prop(right_icon, :string)
-  @doc "Id attribute for DOM element"
-  prop(id, :string)
-  @doc "Data-testid attribute for DOM element"
-  prop(testid, :string)
-  @doc "Additional attributes for DOM element"
-  prop(attrs, :keyword, default: [])
-  @doc "Aria label attribute for DOM element"
-  prop(aria_label, :string)
-  @doc "Target attribute for DOM element"
-  prop(target, :string)
-  @doc "Rel attribute for DOM element"
-  prop(rel, :string)
-  @doc "Inner content of the component"
-  slot(default)
-  @doc "Right icon slot"
-  slot(right_icon_slot)
-  @doc "Left icon slot"
-  slot(left_icon_slot)
-
   def render(assigns) do
     ~F"""
     <AsComponent
diff --git a/lib/moon/design/button/icon_button.ex b/lib/moon/design/button/icon_button.ex
index af0408f13..95b59b5de 100644
--- a/lib/moon/design/button/icon_button.ex
+++ b/lib/moon/design/button/icon_button.ex
@@ -3,60 +3,13 @@ defmodule Moon.Design.Button.IconButton do
 
   use Moon.StatelessComponent
 
+  use Moon.Design.Button.IconButtonProperties
+
   alias Moon.Components.AsComponent
   alias Moon.Icon
   alias Moon.Design.Loader
   alias Moon.Design.Button.Utils
 
-  @doc "Visual/Logical variant of button"
-  prop(variant, :string,
-    values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
-    default: "fill"
-  )
-
-  @doc "Size of button"
-  prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
-  @doc "Rendered HTML element"
-  prop(as, :string, values!: ~w(a button), default: "button")
-  @doc "A href attribute when prop as=\"a\""
-  prop(href, :string)
-  @doc "Disabled button"
-  prop(disabled, :boolean)
-  @doc "Animation of button"
-  prop(animation, :string, values: ~w(progress success error pulse))
-  @doc "Additional Tailwind classes"
-  prop(class, :css_class)
-  @doc "Icon. To be deprecated. Use prop \"icon\" instead."
-  prop(icon_only, :string)
-  @doc "Icon"
-  prop(icon, :string)
-  @doc "Additional Tailwind classes for hover background"
-  prop(hover_bg_class, :css_class)
-  @doc "Type attribute for DOM element"
-  prop(type, :string, default: "button")
-  @doc "Form attribute for DOM element"
-  prop(form, :string)
-  @doc "On click event"
-  prop(on_click, :event)
-  @doc "list of additional values to associate with the DOM element"
-  prop(values, :keyword, default: [])
-  @doc "Value attribute for DOM element"
-  prop(value, :string)
-  @doc "Id attribute for DOM element"
-  prop(id, :string)
-  @doc "Data-testid attribute for DOM element"
-  prop(testid, :string)
-  @doc "Additional attributes for DOM element"
-  prop(attrs, :keyword, default: [])
-  @doc "Aria label attribute for DOM element"
-  prop(aria_label, :string)
-  @doc "Target attribute for DOM element"
-  prop(target, :string)
-  @doc "Rel attribute for DOM element"
-  prop(rel, :string)
-  @doc "Slot for customizations"
-  slot(default)
-
   def render(assigns) do
     ~F"""
     <AsComponent
diff --git a/lib/moon/design/button/icon_button_properties.ex b/lib/moon/design/button/icon_button_properties.ex
new file mode 100644
index 000000000..0e98be025
--- /dev/null
+++ b/lib/moon/design/button/icon_button_properties.ex
@@ -0,0 +1,56 @@
+defmodule Moon.Design.Button.IconButtonProperties do
+  @moduledoc "Module for putting button properties in one place"
+
+  defmacro __using__(_opts \\ []) do
+    quote do
+      @doc "Visual/Logical variant of button"
+      prop(variant, :string,
+        values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
+        default: "fill"
+      )
+
+      @doc "Size of button"
+      prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
+      @doc "Rendered HTML element"
+      prop(as, :string, values!: ~w(a button), default: "button")
+      @doc "A href attribute when prop as=\"a\""
+      prop(href, :string)
+      @doc "Disabled button"
+      prop(disabled, :boolean)
+      @doc "Animation of button"
+      prop(animation, :string, values: ~w(progress success error pulse))
+      @doc "Additional Tailwind classes"
+      prop(class, :css_class)
+      @doc "Icon. To be deprecated. Use prop \"icon\" instead."
+      prop(icon_only, :string)
+      @doc "Icon"
+      prop(icon, :string)
+      @doc "Additional Tailwind classes for hover background"
+      prop(hover_bg_class, :css_class)
+      @doc "Type attribute for DOM element"
+      prop(type, :string, default: "button")
+      @doc "Form attribute for DOM element"
+      prop(form, :string)
+      @doc "On click event"
+      prop(on_click, :event)
+      @doc "list of additional values to associate with the DOM element"
+      prop(values, :keyword, default: [])
+      @doc "Value attribute for DOM element"
+      prop(value, :string)
+      @doc "Id attribute for DOM element"
+      prop(id, :string)
+      @doc "Data-testid attribute for DOM element"
+      prop(testid, :string)
+      @doc "Additional attributes for DOM element"
+      prop(attrs, :keyword, default: [])
+      @doc "Aria label attribute for DOM element"
+      prop(aria_label, :string)
+      @doc "Target attribute for DOM element"
+      prop(target, :string)
+      @doc "Rel attribute for DOM element"
+      prop(rel, :string)
+      @doc "Slot for customizations"
+      slot(default)
+    end
+  end
+end
diff --git a/lib/moon/design/button/properties.ex b/lib/moon/design/button/properties.ex
new file mode 100644
index 000000000..38f0964b6
--- /dev/null
+++ b/lib/moon/design/button/properties.ex
@@ -0,0 +1,62 @@
+defmodule Moon.Design.Button.Properties do
+  @moduledoc "Module for putting button properties in one place"
+
+  defmacro __using__(_opts \\ []) do
+    quote do
+      @doc "Visual/Logical variant of button"
+      prop(variant, :string,
+        values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
+        default: "fill"
+      )
+
+      @doc "Size of button"
+      prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
+      @doc "Rendered HTML element"
+      prop(as, :string, values!: ~w(a button), default: "button")
+      @doc "A href attribute when prop as=\"a\""
+      prop(href, :string)
+      @doc "Full width button"
+      prop(full_width, :boolean)
+      @doc "Disabled button"
+      prop(disabled, :boolean)
+      @doc "Animation of button"
+      prop(animation, :string, values: ~w(progress success error pulse))
+      @doc "Additional Tailwind classes"
+      prop(class, :css_class)
+      @doc "Additional Tailwind classes for hover background"
+      prop(hover_bg_class, :css_class)
+      @doc "Type attribute for DOM element"
+      prop(type, :string, default: "button")
+      @doc "Form attribute for DOM element"
+      prop(form, :string)
+      @doc "On click event"
+      prop(on_click, :event)
+      @doc "list of additional values to associate with the DOM element"
+      prop(values, :keyword, default: [])
+      @doc "Value attribute for DOM element"
+      prop(value, :string)
+      @doc "Left icon"
+      prop(left_icon, :string)
+      @doc "Right icon"
+      prop(right_icon, :string)
+      @doc "Id attribute for DOM element"
+      prop(id, :string)
+      @doc "Data-testid attribute for DOM element"
+      prop(testid, :string)
+      @doc "Additional attributes for DOM element"
+      prop(attrs, :keyword, default: [])
+      @doc "Aria label attribute for DOM element"
+      prop(aria_label, :string)
+      @doc "Target attribute for DOM element"
+      prop(target, :string)
+      @doc "Rel attribute for DOM element"
+      prop(rel, :string)
+      @doc "Inner content of the component"
+      slot(default)
+      @doc "Right icon slot"
+      slot(right_icon_slot)
+      @doc "Left icon slot"
+      slot(left_icon_slot)
+    end
+  end
+end
diff --git a/lib/moon/helpers/merge_class.ex b/lib/moon/helpers/merge_class.ex
index 15a69b915..1d615fa14 100644
--- a/lib/moon/helpers/merge_class.ex
+++ b/lib/moon/helpers/merge_class.ex
@@ -33,6 +33,10 @@ defmodule Moon.Helpers.MergeClass do
   defp group_name("font-" <> family) when family in ~w(averta dm-sans grotesk),
     do: "prop_font_family"
 
+  defp group_name("bg-" <> _rest) do
+    "background"
+  end
+
   defp group_name(class) do
     class
     # removing square brackets bc of "top-[-7px]"
diff --git a/lib/moon/parts/button.ex b/lib/moon/parts/button.ex
new file mode 100644
index 000000000..eff9f3df2
--- /dev/null
+++ b/lib/moon/parts/button.ex
@@ -0,0 +1,45 @@
+defmodule Moon.Parts.Button do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  use Moon.Design.Button.Properties
+
+  alias Moon.Design.Button
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-popo")
+
+  def render(assigns) do
+    ~F"""
+    <Button
+      {=@as}
+      {=@variant}
+      {=@size}
+      {=@full_width}
+      {=@disabled}
+      {=@animation}
+      {=@type}
+      {=@form}
+      {=@hover_bg_class}
+      {=@left_icon}
+      {=@right_icon}
+      {=@href}
+      {=@id}
+      {=@on_click}
+      {=@testid}
+      {=@aria_label}
+      {=@values}
+      {=@value}
+      {=@target}
+      {=@rel}
+      {=@attrs}
+      class={"rounded-moon-s-xx rounded-full", @bg_class, @class}
+    >
+      <#slot {@left_icon_slot} />
+      <#slot />
+      <#slot {@right_icon_slot} />
+    </Button>
+    """
+  end
+end
diff --git a/lib/moon/parts/button/error.ex b/lib/moon/parts/button/error.ex
new file mode 100644
index 000000000..04123d702
--- /dev/null
+++ b/lib/moon/parts/button/error.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Error do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-chichi-10 text-chichi")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/gray.ex b/lib/moon/parts/button/gray.ex
new file mode 100644
index 000000000..479b58889
--- /dev/null
+++ b/lib/moon/parts/button/gray.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Gray do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-gohan text-bulma border border-beerus")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/success.ex b/lib/moon/parts/button/success.ex
new file mode 100644
index 000000000..e938d502d
--- /dev/null
+++ b/lib/moon/parts/button/success.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Success do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-roshi-10 text-roshi")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/warning.ex b/lib/moon/parts/button/warning.ex
new file mode 100644
index 000000000..6fe2cd38b
--- /dev/null
+++ b/lib/moon/parts/button/warning.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Warning do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-krillin-10 text-krillin")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/white.ex b/lib/moon/parts/button/white.ex
new file mode 100644
index 000000000..26d244ea3
--- /dev/null
+++ b/lib/moon/parts/button/white.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.White do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-goku text-bulma border border-beerus")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/icon_button.ex b/lib/moon/parts/icon_button.ex
new file mode 100644
index 000000000..60ff11953
--- /dev/null
+++ b/lib/moon/parts/icon_button.ex
@@ -0,0 +1,41 @@
+defmodule Moon.Parts.IconButton do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  use Moon.Design.Button.IconButtonProperties
+
+  alias Moon.Design.Button.IconButton
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-popo")
+
+  def render(assigns) do
+    ~F"""
+    <IconButton
+      {=@as}
+      {=@variant}
+      {=@size}
+      {=@disabled}
+      {=@animation}
+      {=@icon}
+      {=@type}
+      {=@form}
+      {=@hover_bg_class}
+      {=@href}
+      {=@id}
+      {=@on_click}
+      {=@testid}
+      {=@aria_label}
+      {=@values}
+      {=@value}
+      {=@target}
+      {=@rel}
+      {=@attrs}
+      class={"rounded-moon-s-xx rounded-full", @bg_class, @class}
+    >
+      <#slot />
+    </IconButton>
+    """
+  end
+end
diff --git a/lib/moon/parts/icon_button/error.ex b/lib/moon/parts/icon_button/error.ex
new file mode 100644
index 000000000..2bb346085
--- /dev/null
+++ b/lib/moon/parts/icon_button/error.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.IconButton.Error do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.IconButtonProperties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-chichi-10 text-chichi")
+
+  defdelegate render(assigns), to: Moon.Parts.IconButton
+end
diff --git a/lib/moon/parts/icon_button/gray.ex b/lib/moon/parts/icon_button/gray.ex
new file mode 100644
index 000000000..f4f39939b
--- /dev/null
+++ b/lib/moon/parts/icon_button/gray.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.IconButton.Gray do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.IconButtonProperties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-gohan text-bulma border border-beerus")
+
+  defdelegate render(assigns), to: Moon.Parts.IconButton
+end
diff --git a/lib/moon/parts/icon_button/success.ex b/lib/moon/parts/icon_button/success.ex
new file mode 100644
index 000000000..bf37b7a9e
--- /dev/null
+++ b/lib/moon/parts/icon_button/success.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.IconButton.Success do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.IconButtonProperties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-roshi-10 text-roshi")
+
+  defdelegate render(assigns), to: Moon.Parts.IconButton
+end
diff --git a/lib/moon/parts/icon_button/warning.ex b/lib/moon/parts/icon_button/warning.ex
new file mode 100644
index 000000000..32199cff1
--- /dev/null
+++ b/lib/moon/parts/icon_button/warning.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.IconButton.Warning do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.IconButtonProperties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-krillin-10 text-krillin")
+
+  defdelegate render(assigns), to: Moon.Parts.IconButton
+end
diff --git a/lib/moon/parts/icon_button/white.ex b/lib/moon/parts/icon_button/white.ex
new file mode 100644
index 000000000..4f8d36b96
--- /dev/null
+++ b/lib/moon/parts/icon_button/white.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.IconButton.White do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.IconButtonProperties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-goku text-bulma border border-beerus")
+
+  defdelegate render(assigns), to: Moon.Parts.IconButton
+end
diff --git a/lib/moon/parts/sidebar/avatar.ex b/lib/moon/parts/sidebar/avatar.ex
new file mode 100644
index 000000000..fd3f442d2
--- /dev/null
+++ b/lib/moon/parts/sidebar/avatar.ex
@@ -0,0 +1,32 @@
+defmodule Moon.Parts.Sidebar.Avatar do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Moon.Design.Avatar
+
+  @doc "Capital letters of name"
+  prop(name, :string)
+  @doc "Additional Tailwind classes"
+  prop(class, :css_class)
+  @doc "Additional Tailwind classes"
+  prop(status_class, :css_class)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Id of the component"
+  prop(id, :string)
+
+  def render(assigns) do
+    ~F"""
+    <Avatar
+      {=@id}
+      {=@testid}
+      class={merge(["rounded-full rounded-moon-i-xx text-goku bg-cell overflow-visible", @class])}
+      size="sm"
+      {=@name}
+    >
+      <Avatar.Status class={merge(["border-goku bg-cell z-10 -bottom-0.5 -end-0.5", @status_class])} />
+    </Avatar>
+    """
+  end
+end
diff --git a/lib/moon_web/examples/parts/button_example/default.ex b/lib/moon_web/examples/parts/button_example/default.ex
new file mode 100644
index 000000000..4b04f4682
--- /dev/null
+++ b/lib/moon_web/examples/parts/button_example/default.ex
@@ -0,0 +1,57 @@
+defmodule MoonWeb.Examples.Parts.ButtonExample.Default do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  use MoonWeb, :example
+
+  alias Moon.Parts.Button
+  alias Moon.Parts.IconButton
+
+  def render(assigns) do
+    ~F"""
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Button>Button</Button>
+      <Button.Gray>Button</Button.Gray>
+      <Button.White>Button</Button.White>
+      <Button.Success>Button</Button.Success>
+      <Button.Warning>Button</Button.Warning>
+      <Button.Error>Button</Button.Error>
+    </div>
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <IconButton icon="generic_settings" />
+      <IconButton.Gray icon="generic_settings" />
+      <IconButton.White icon="generic_settings" />
+      <IconButton.Success icon="generic_settings" />
+      <IconButton.Warning icon="generic_settings" />
+      <IconButton.Error icon="generic_settings" />
+    </div>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Parts.Button
+    alias Moon.Parts.IconButton
+
+    ...
+
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Button>Button</Button>
+      <Button.Gray>Button</Button.Gray>
+      <Button.White>Button</Button.White>
+      <Button.Success>Button</Button.Success>
+      <Button.Warning>Button</Button.Warning>
+      <Button.Error>Button</Button.Error>
+    </div>
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <IconButton icon="generic_settings" />
+      <IconButton.Gray icon="generic_settings" />
+      <IconButton.White icon="generic_settings" />
+      <IconButton.Success icon="generic_settings" />
+      <IconButton.Warning icon="generic_settings" />
+      <IconButton.Error icon="generic_settings" />
+    </div>
+    """
+  end
+end
diff --git a/lib/moon_web/examples/parts/sidebar_example/short.ex b/lib/moon_web/examples/parts/sidebar_example/short.ex
index 7c4ab5a8e..6e9e34417 100644
--- a/lib/moon_web/examples/parts/sidebar_example/short.ex
+++ b/lib/moon_web/examples/parts/sidebar_example/short.ex
@@ -7,7 +7,6 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Short do
   alias Moon.Parts.Sidebar
   alias Moon.Design.Button
 
-  prop(active_page, :any)
   prop(menu_items, :list, default: MoonWeb.Schema.Link.menu())
 
   def render(assigns) do
diff --git a/lib/moon_web/examples/parts/sidebar_example/slim.ex b/lib/moon_web/examples/parts/sidebar_example/slim.ex
index 54795ada0..5a7aa9cca 100644
--- a/lib/moon_web/examples/parts/sidebar_example/slim.ex
+++ b/lib/moon_web/examples/parts/sidebar_example/slim.ex
@@ -4,7 +4,7 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Slim do
   use Moon.StatefulComponent
   use MoonWeb, :example
 
-  alias Moon.Design.Avatar
+  alias Moon.Parts.Sidebar.Avatar
   alias Moon.Parts.Sidebar
 
   prop(menu_items, :list, default: MoonWeb.Schema.Link.menu())
@@ -21,7 +21,7 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Slim do
         <Sidebar.SlimLogo src="/moon_icons/svgs/logos/logo-moon-design-short.svg#item" />
         <:bottom>
           <Sidebar.SlimMenuLink route="#" icon_name="generic_settings" tooltip_text="Settings" />
-          <Avatar class="rounded-full rounded-moon-i-xx bg-cell" name="ET" />
+          <Avatar name="ET" />
         </:bottom>
       </Sidebar.Slim>
     </div>
diff --git a/lib/moon_web/examples/parts/sidebar_example/wide.ex b/lib/moon_web/examples/parts/sidebar_example/wide.ex
index d48608ad5..57d0315fc 100644
--- a/lib/moon_web/examples/parts/sidebar_example/wide.ex
+++ b/lib/moon_web/examples/parts/sidebar_example/wide.ex
@@ -4,7 +4,7 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Wide do
   use Moon.StatefulComponent
   use MoonWeb, :example
 
-  alias Moon.Design.Avatar
+  alias Moon.Parts.Sidebar.Avatar
   alias Moon.Parts.Sidebar
 
   prop(active_page, :any)
@@ -31,7 +31,7 @@ defmodule MoonWeb.Examples.Parts.SidebarExample.Wide do
         </:slim_top>
         <:slim_bottom>
           <Sidebar.SlimMenuLink route="#" icon_name="generic_settings" tooltip_text="Settings" />
-          <Avatar class="rounded-full rounded-moon-i-xx bg-cell" name="ET" />
+          <Avatar name="ET" />
         </:slim_bottom>
         <:generic>
           <Sidebar.Section>
diff --git a/lib/moon_web/pages/parts/buttons_page.ex b/lib/moon_web/pages/parts/buttons_page.ex
new file mode 100644
index 000000000..d24f8124b
--- /dev/null
+++ b/lib/moon_web/pages/parts/buttons_page.ex
@@ -0,0 +1,35 @@
+defmodule MoonWeb.Pages.Parts.ButtonsPage do
+  @moduledoc false
+
+  use MoonWeb, :live_view
+
+  alias MoonWeb.Components.ComponentPageDescription
+  alias MoonWeb.Components.Page
+  alias MoonWeb.Components.ExamplesList
+  alias MoonWeb.Examples.Parts.ButtonExample
+
+  data(breadcrumbs, :any,
+    default: [
+      %{
+        to: "/#",
+        name: "Templates"
+      },
+      %{
+        to: "/templates/button-examples",
+        name: "Buttons"
+      }
+    ]
+  )
+
+  def render(assigns) do
+    ~F"""
+    <Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction} hide_left_menu>
+      <ComponentPageDescription title="Button examples" />
+
+      <ExamplesList examples={[
+        ButtonExample.Default
+      ]} />
+    </Page>
+    """
+  end
+end
diff --git a/lib/moon_web/router.ex b/lib/moon_web/router.ex
index e2cc311c3..509bdd22e 100644
--- a/lib/moon_web/router.ex
+++ b/lib/moon_web/router.ex
@@ -59,6 +59,7 @@ defmodule MoonWeb.Router do
     live("/sidebar-examples/generic", MoonWeb.Pages.Parts.GenericSidebarPage)
     live("/sidebar-examples/slim", MoonWeb.Pages.Parts.SlimSidebarPage)
     live("/sidebar-examples/wide", MoonWeb.Pages.Parts.WideSidebarPage)
+    live("/templates/button-examples", MoonWeb.Pages.Parts.ButtonsPage)
 
     live("/components/v2/alert/", MoonWeb.Pages.Design.AlertPage)
     live("/components/v2/accordion/", MoonWeb.Pages.Design.AccordionPage)
diff --git a/test/moon/helpers/merge_class_test.exs b/test/moon/helpers/merge_class_test.exs
index bca242c94..88bf63e0d 100644
--- a/test/moon/helpers/merge_class_test.exs
+++ b/test/moon/helpers/merge_class_test.exs
@@ -38,4 +38,9 @@ defmodule Moon.Helpers.MergeClassTest do
     merged = merge(~w(absolute relative))
     assert merged == ~w(relative)
   end
+
+  test "background color should be overwritten" do
+    merged = merge(~w(bg-piccolo bg-chichi-10))
+    assert merged == ~w(bg-chichi-10)
+  end
 end