From 0794f740d1ad9bb45b9ed3949a297b0c53a6d7ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?=
 <30907944+joaodiaslobo@users.noreply.github.com>
Date: Wed, 11 Sep 2024 17:55:48 +0100
Subject: [PATCH 1/4] feat: avatar group component (#529)

---
 assets/css/components/avatar.css              |   6 +
 lib/atomic_web/components/avatar.ex           |  75 ++++++-
 .../components/department_card.ex             |  34 +--
 .../live/department_live/show.html.heex       |  24 ++-
 storybook/components/avatar_group.story.exs   | 196 ++++++++++++++++++
 5 files changed, 313 insertions(+), 22 deletions(-)
 create mode 100644 storybook/components/avatar_group.story.exs

diff --git a/assets/css/components/avatar.css b/assets/css/components/avatar.css
index 1bdae7f01..74e76cd17 100644
--- a/assets/css/components/avatar.css
+++ b/assets/css/components/avatar.css
@@ -94,4 +94,10 @@
 
 .atomic-avatar--src {
   @apply bg-transparent;
+}
+
+/* Avatar Group */
+
+.atomic-avatar-grouped {
+  @apply ring-1 ring-white;
 }
\ No newline at end of file
diff --git a/lib/atomic_web/components/avatar.ex b/lib/atomic_web/components/avatar.ex
index 9dacd363a..2db005261 100644
--- a/lib/atomic_web/components/avatar.ex
+++ b/lib/atomic_web/components/avatar.ex
@@ -21,7 +21,7 @@ defmodule AtomicWeb.Components.Avatar do
     doc: "The size of the avatar."
 
   attr :color, :atom,
-    default: :primary,
+    default: :light_gray,
     values: [
       :primary,
       :secondary,
@@ -36,13 +36,13 @@ defmodule AtomicWeb.Components.Avatar do
       :light,
       :dark
     ],
-    doc: "Button color."
+    doc: "Avatar color."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
 
   def avatar(assigns) do
     ~H"""
-    <span class={generate_classes(assigns)}>
+    <span class={generate_avatar_classes(assigns)}>
       <%= if @src do %>
         <img src={@src} class={"atomic-avatar--#{assigns.type} h-full w-full"} />
       <% else %>
@@ -56,7 +56,62 @@ defmodule AtomicWeb.Components.Avatar do
     """
   end
 
-  defp generate_classes(assigns) do
+  attr :items, :list, required: true, doc: "The list of avatars to display."
+
+  attr :spacing, :integer,
+    default: -1,
+    values: [-3, -2, -1, 0, 1, 2, 3],
+    doc: "The spacing between avatars."
+
+  attr :type, :atom,
+    values: [:user, :organization, :company],
+    default: :user,
+    doc: "The type of entity associated with the avatars."
+
+  attr :size, :atom,
+    values: [:xs, :sm, :md, :lg, :xl],
+    default: :md,
+    doc: "The size of the avatars."
+
+  attr :color, :atom,
+    default: :light_gray,
+    values: [
+      :primary,
+      :secondary,
+      :info,
+      :success,
+      :warning,
+      :danger,
+      :gray,
+      :light_gray,
+      :pure_white,
+      :white,
+      :light,
+      :dark
+    ],
+    doc: "Avatar color."
+
+  attr :wrap, :boolean, default: false, doc: "Whether to wrap the avatars in a flex container."
+
+  attr :class, :string, default: "", doc: "Additional classes to apply to the component."
+
+  attr :avatar_class, :string,
+    default: "",
+    doc: "Additional classes to apply to the individual avatars."
+
+  def avatar_group(assigns) do
+    ~H"""
+    <ul class={"#{generate_avatar_group_spacing_class(@spacing)} #{if @wrap do "flex-wrap" end} #{@class} flex flex-row"}>
+      <%= for item <- @items do %>
+        <li>
+          <.avatar name={item[:name]} src={item[:src]} type={@type} size={@size} color={@color} class={"#{@avatar_class} atomic-avatar-grouped"} auto_generate_initials={Map.get(item, :auto_generate_initials, true)} />
+        </li>
+      <% end %>
+    </ul>
+    """
+  end
+
+  defp generate_avatar_classes(assigns) do
     [
       "atomic-avatar",
       assigns.src && "atomic-avatar--src",
@@ -66,4 +121,16 @@ defmodule AtomicWeb.Components.Avatar do
       assigns.class
     ]
   end
+
+  defp generate_avatar_group_spacing_class(spacing) do
+    %{
+      -3 => "-space-x-3",
+      -2 => "-space-x-2",
+      -1 => "-space-x-1",
+      0 => "space-x-0",
+      1 => "space-x-1",
+      2 => "space-x-2",
+      3 => "space-x-3"
+    }[spacing]
+  end
 end
diff --git a/lib/atomic_web/live/department_live/components/department_card.ex b/lib/atomic_web/live/department_live/components/department_card.ex
index f67f711f7..34c885c4f 100644
--- a/lib/atomic_web/live/department_live/components/department_card.ex
+++ b/lib/atomic_web/live/department_live/components/department_card.ex
@@ -24,18 +24,28 @@ defmodule AtomicWeb.DepartmentLive.Components.DepartmentCard do
             <p><%= gettext("Archived") %></p>
           </.badge>
         </div>
-        <ul class="min-h-8 mt-4 mb-2 flex flex-row -space-x-1">
-          <%= for person <- @collaborators |> Enum.take(4) do %>
-            <li>
-              <.avatar name={person.user.name} size={:xs} color={:light_gray} class="ring-1 ring-white" />
-            </li>
-          <% end %>
-          <%= if length(@collaborators) > 4 do %>
-            <li>
-              <.avatar name={"+#{length(@collaborators) - 4}"} size={:xs} auto_generate_initials={false} color={:light_gray} class="ring-1 ring-white" />
-            </li>
-          <% end %>
-        </ul>
+        <.avatar_group
+          size={:xs}
+          color={:light_gray}
+          spacing={-2}
+          class="min-h-8 mt-4 mb-2"
+          items={
+            @collaborators
+            |> Enum.take(4)
+            |> Enum.map(fn person ->
+              %{
+                name: person.user.name
+              }
+            end)
+            |> then(fn avatars ->
+              if length(@collaborators) > 4 do
+                Enum.concat(avatars, [%{name: "+#{length(@collaborators) - 4}", auto_generate_initials: false}])
+              else
+                avatars
+              end
+            end)
+          }
+        />
       </div>
     </div>
     """
diff --git a/lib/atomic_web/live/department_live/show.html.heex b/lib/atomic_web/live/department_live/show.html.heex
index 67b1a647d..2807cd7a1 100644
--- a/lib/atomic_web/live/department_live/show.html.heex
+++ b/lib/atomic_web/live/department_live/show.html.heex
@@ -165,12 +165,24 @@
             <!-- People -->
             <div class="w-full hidden sm:block">
               <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900"><%= gettext("People") %></h2>
-              <div class="mb-2 flex max-w-full flex-wrap gap-1">
-                <%= for collaborator <- @all_collaborators |> Enum.take(18) do %>
-                  <div class="h-12">
-                    <.avatar name={collaborator.user.name} size={:sm} color={:light_gray} />
-                  </div>
-                <% end %>
+              <div class="mb-2 flex max-w-full gap-1">
+                <!-- People listing -->
+                <.avatar_group
+                  size={:sm}
+                  color={:light_gray}
+                  spacing={0}
+                  wrap
+                  class="gap-1"
+                  items={
+                    @all_collaborators
+                    |> Enum.take(18)
+                    |> Enum.map(fn collaborator ->
+                      %{
+                        name: collaborator.user.name
+                      }
+                    end)
+                  }
+                />
                 <!-- People empty state -->
                 <%= if length(@all_collaborators) == 0 do %>
                   <.icon class="mx-32 text-gray-900" name={:users} />
diff --git a/storybook/components/avatar_group.story.exs b/storybook/components/avatar_group.story.exs
new file mode 100644
index 000000000..cc346b0ec
--- /dev/null
+++ b/storybook/components/avatar_group.story.exs
@@ -0,0 +1,196 @@
+defmodule AtomicWeb.Storybook.Components.AvatarGroup do
+  use PhoenixStorybook.Story, :component
+
+  alias AtomicWeb.Components.Avatar
+
+  def function, do: &Avatar.avatar_group/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          items:
+            Enum.reduce(1..4, [], fn _, acc ->
+              [generate_avatar_props() | acc]
+            end)
+        }
+      },
+      %VariationGroup{
+        id: :spacing,
+        description: "Different spacing",
+        variations: [
+          %Variation{
+            id: :minus_three,
+            attributes: %{
+              spacing: -3,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :minus_two,
+            attributes: %{
+              spacing: -2,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :minus_one,
+            attributes: %{
+              spacing: -1,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :zero,
+            attributes: %{
+              spacing: 0,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :one,
+            attributes: %{
+              spacing: 1,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :two,
+            attributes: %{
+              spacing: 2,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :three,
+            attributes: %{
+              spacing: 3,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          }
+        ]
+      },
+      %Variation{
+        id: :wrap,
+        attributes: %{
+          wrap: true,
+          spacing: 0,
+          avatar_class: "gap-2",
+          items:
+            Enum.reduce(1..32, [], fn _, acc ->
+              [generate_avatar_props() | acc]
+            end)
+        }
+      },
+      %VariationGroup{
+        id: :size,
+        description: "Avatar props",
+        variations: [
+          %Variation{
+            id: :size_extra_small,
+            attributes: %{
+              size: :xs,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :size_small,
+            attributes: %{
+              size: :sm,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :color_danger,
+            attributes: %{
+              color: :danger,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :color_info,
+            attributes: %{
+              color: :info,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :type_organization,
+            attributes: %{
+              type: :organization,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          },
+          %Variation{
+            id: :type_company,
+            attributes: %{
+              type: :company,
+              items: [
+                %{name: "John Doe"},
+                %{name: "Mike Smith"},
+                %{name: "Sara Johnson"}
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  end
+
+  def generate_avatar_props() do
+    %{
+      name: Faker.Person.name(),
+      src:
+        "https://randomuser.me/api/portraits/#{Enum.random(["men", "women"])}/#{:rand.uniform(50)}.jpg"
+    }
+  end
+end

From 045708f7ac3c91e8e7dd852916b26dd5615a61ef Mon Sep 17 00:00:00 2001
From: Rui Lopes <ruilopesm19@gmail.com>
Date: Fri, 13 Sep 2024 19:22:47 +0100
Subject: [PATCH 2/4] chore: migrate heroicons to new tailwind bundle (#532)

---
 assets/css/components/avatar.css              | 10 +--
 assets/tailwind.config.js                     | 75 +++++++++++++++----
 lib/atomic/schema.ex                          |  6 +-
 lib/atomic_web.ex                             |  9 ++-
 lib/atomic_web/components/activity.ex         |  6 +-
 lib/atomic_web/components/badge.ex            | 21 +++---
 lib/atomic_web/components/button.ex           | 10 +--
 .../components/calendar/calendar.ex           |  8 +-
 lib/atomic_web/components/calendar/month.ex   |  6 +-
 lib/atomic_web/components/dropdown.ex         |  9 +--
 lib/atomic_web/components/empty.ex            |  4 +-
 lib/atomic_web/components/icon.ex             | 20 +++--
 lib/atomic_web/components/image_uploader.ex   |  4 +-
 lib/atomic_web/components/modal.ex            |  4 +-
 lib/atomic_web/components/notification.ex     | 10 +--
 lib/atomic_web/components/pagination.ex       |  4 +-
 lib/atomic_web/components/sidebar.ex          | 10 +--
 lib/atomic_web/components/spinner.ex          |  2 +-
 lib/atomic_web/components/table.ex            | 10 +--
 lib/atomic_web/config.ex                      | 18 ++---
 lib/atomic_web/gettext.ex                     |  2 +-
 .../live/activity_live/index.html.heex        | 10 +--
 .../live/activity_live/show.html.heex         | 12 +--
 .../live/announcement_live/edit.html.heex     |  2 +-
 .../form_component.html.heex                  |  2 +-
 .../live/announcement_live/show.html.heex     |  2 +-
 .../live/collaborator_live/form_component.ex  | 12 +--
 .../live/department_live/edit.html.heex       | 12 +--
 .../live/department_live/form_component.ex    |  2 +-
 .../live/department_live/index.html.heex      |  2 +-
 .../live/department_live/show.html.heex       | 30 ++++----
 .../follow_suggestions/suggestion.ex          |  4 +-
 .../live/home_live/components/schedule.ex     |  4 +-
 .../live/organization_live/show.html.heex     |  6 +-
 .../live/partner_live/edit.html.heex          | 12 +--
 .../live/partner_live/form_component.ex       |  2 +-
 .../live/partner_live/index.html.heex         |  4 +-
 .../live/partner_live/show.html.heex          | 20 ++---
 .../profile_live/form_component.html.heex     |  6 +-
 lib/atomic_web/templates/layout/app.html.heex |  4 +-
 .../user_change_password/edit.html.heex       | 14 ++--
 .../templates/user_registration/new.html.heex | 10 +--
 .../user_reset_password/edit.html.heex        | 10 +--
 .../user_reset_password/new.html.heex         |  2 +-
 .../templates/user_session/new.html.heex      |  8 +-
 .../templates/user_setup/edit.html.heex       |  2 +-
 lib/atomic_web/views/helpers.ex               |  3 +-
 mix.exs                                       | 11 ++-
 mix.lock                                      | 24 +++---
 storybook/components/badge.story.exs          | 23 +++---
 storybook/components/button.story.exs         | 23 +++---
 storybook/components/dropdown.story.exs       | 14 ++--
 storybook/components/icon.story.exs           | 20 +++--
 storybook/components/tabs.story.exs           |  4 +-
 storybook/icons.story.exs                     | 27 -------
 55 files changed, 301 insertions(+), 290 deletions(-)
 delete mode 100644 storybook/icons.story.exs

diff --git a/assets/css/components/avatar.css b/assets/css/components/avatar.css
index 74e76cd17..8772c6a81 100644
--- a/assets/css/components/avatar.css
+++ b/assets/css/components/avatar.css
@@ -21,23 +21,23 @@
 /* Avatar - sizes */
 
 .atomic-avatar--xs {
-  @apply h-8 w-8 text-xs;
+  @apply size-8 text-xs;
 }
 
 .atomic-avatar--sm {
-  @apply h-12 w-12 text-lg;
+  @apply size-12 text-lg;
 }
 
 .atomic-avatar--md {
-  @apply h-16 w-16 text-lg;
+  @apply size-16 text-lg;
 }
 
 .atomic-avatar--lg {
-  @apply h-20 w-20 text-4xl;
+  @apply size-20 text-4xl;
 }
 
 .atomic-avatar--xl {
-  @apply h-24 w-24 text-4xl;
+  @apply size-24 text-4xl;
 }
 
 /* Avatar - colors */
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index a89824018..36902c3c6 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -1,6 +1,9 @@
 const colors = require("tailwindcss/colors");
 const plugin = require('tailwindcss/plugin');
 
+const fs = require("fs");
+const path = require("path");
+
 module.exports = {
   darkMode: 'selector',
   content: [
@@ -25,23 +28,23 @@ module.exports = {
       },
       keyframes: {
         wave: {
-            '0%': { transform: 'rotate(0.0deg)' },
-            '15%': { transform: 'rotate(14.0deg)' },
-            '30%': { transform: 'rotate(-8.0deg)' },
-            '40%': { transform: 'rotate(14.0deg)' },
-            '50%': { transform: 'rotate(-4.0deg)' },
-            '60%': { transform: 'rotate(10.0deg)' },
-            '70%': { transform: 'rotate(0.0deg)' },
-            '100%': { transform: 'rotate(0.0deg)' },
+          '0%': { transform: 'rotate(0.0deg)' },
+          '15%': { transform: 'rotate(14.0deg)' },
+          '30%': { transform: 'rotate(-8.0deg)' },
+          '40%': { transform: 'rotate(14.0deg)' },
+          '50%': { transform: 'rotate(-4.0deg)' },
+          '60%': { transform: 'rotate(10.0deg)' },
+          '70%': { transform: 'rotate(0.0deg)' },
+          '100%': { transform: 'rotate(0.0deg)' },
         },
         progress: {
-            '0%': { width: '0%' },
-            '100%': { width: '100%' },
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
         }
       },
       animation: {
-          wave: 'wave 1.5s infinite',
-          progress: 'progress 5s linear 1'
+        wave: 'wave 1.5s infinite',
+        progress: 'progress 5s linear 1'
       },
       backgroundSize: {
         '75': '75%'
@@ -50,9 +53,55 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
-    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+
+    // Embeds Heroicons (https://heroicons.com) into app.css bundle
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, {values})
+    })
   ]
 }
diff --git a/lib/atomic/schema.ex b/lib/atomic/schema.ex
index 068dc3aa6..9f890413a 100644
--- a/lib/atomic/schema.ex
+++ b/lib/atomic/schema.ex
@@ -2,16 +2,16 @@ defmodule Atomic.Schema do
   @moduledoc """
   The application Schema for all the modules, providing Ecto.UUIDs as default id.
   """
-  alias Atomic.Time
+  use Gettext, backend: AtomicWeb.Gettext
 
-  import AtomicWeb.Gettext
+  alias Atomic.Time
 
   defmacro __using__(_) do
     quote do
       use Ecto.Schema
       use Waffle.Ecto.Schema
+      use Gettext, backend: AtomicWeb.Gettext
 
-      import AtomicWeb.Gettext
       import Ecto.Changeset
       import Ecto.Query
 
diff --git a/lib/atomic_web.ex b/lib/atomic_web.ex
index 53f6c7367..58d46de71 100644
--- a/lib/atomic_web.ex
+++ b/lib/atomic_web.ex
@@ -20,9 +20,10 @@ defmodule AtomicWeb do
   def controller do
     quote do
       use Phoenix.Controller, namespace: AtomicWeb
+      use Gettext, backend: AtomicWeb.Gettext
 
       import Plug.Conn
-      import AtomicWeb.Gettext
+
       alias AtomicWeb.Router.Helpers, as: Routes
     end
   end
@@ -80,7 +81,7 @@ defmodule AtomicWeb do
   def channel do
     quote do
       use Phoenix.Channel
-      import AtomicWeb.Gettext
+      use Gettext, backend: AtomicWeb.Gettext
     end
   end
 
@@ -99,8 +100,10 @@ defmodule AtomicWeb do
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
+      # Custom imports
+      use Gettext, backend: AtomicWeb.Gettext
+
       import AtomicWeb.ErrorHelpers
-      import AtomicWeb.Gettext
       import AtomicWeb.Helpers
 
       alias Atomic.Uploaders
diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex
index 84ee53e61..cc0e88fc1 100644
--- a/lib/atomic_web/components/activity.ex
+++ b/lib/atomic_web/components/activity.ex
@@ -46,21 +46,21 @@ defmodule AtomicWeb.Components.Activity do
         <div class="flex space-x-4">
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:clock} solid class="h-5 w-5" />
+              <.icon name="hero-clock-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= relative_datetime(@activity.start) %></span>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:user_group} solid class="h-5 w-5" />
+              <.icon name="hero-user-group-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
               <span class="sr-only">enrollments</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:map_pin} solid class="h-5 w-5" />
+              <.icon name="hero-map-pin-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.location.name %></span>
               <span class="sr-only">location</span>
             </span>
diff --git a/lib/atomic_web/components/badge.ex b/lib/atomic_web/components/badge.ex
index 309d571fd..f188c3215 100644
--- a/lib/atomic_web/components/badge.ex
+++ b/lib/atomic_web/components/badge.ex
@@ -24,19 +24,18 @@ defmodule AtomicWeb.Components.Badge do
     default: :left,
     doc: "The position of the icon if applicable."
 
-  attr :icon, :atom, default: nil, doc: "The icon to display."
-
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
+  attr :icon, :string, default: nil, doc: "The icon to display."
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the badge."
   attr :label, :string, default: nil, doc: "Badge label."
-  attr :rest, :global
-  slot :inner_block, required: false
+
+  attr :rest, :global,
+    include:
+      ~w(csrf_token disabled download form href hreflang method name navigate patch referrerpolicy rel replace target type value autofocus tabindex),
+    doc: "Arbitrary HTML or phx attributes."
+
+  slot :inner_block, required: false, doc: "Slot for the content of the badge."
 
   def badge(assigns) do
     ~H"""
@@ -50,11 +49,11 @@ defmodule AtomicWeb.Components.Badge do
       ]}
     >
       <%= if @icon && @icon_position == :left do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
       <%= render_slot(@inner_block) || @label %>
       <%= if @icon && @icon_position == :right do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
     </div>
     """
diff --git a/lib/atomic_web/components/button.ex b/lib/atomic_web/components/button.ex
index 12d441854..b87705367 100644
--- a/lib/atomic_web/components/button.ex
+++ b/lib/atomic_web/components/button.ex
@@ -45,13 +45,7 @@ defmodule AtomicWeb.Components.Button do
     default: :left,
     doc: "The position of the icon if applicable."
 
-  attr :icon, :atom, default: nil, doc: "The icon to display."
-
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
+  attr :icon, :string, default: nil, doc: "The icon to display."
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
@@ -127,7 +121,7 @@ defmodule AtomicWeb.Components.Button do
 
   defp icon_content(assigns) do
     ~H"""
-    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
     """
   end
 
diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index 689b0a056..3f1c3cd49 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -69,7 +69,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <.link patch={"#{if @mode == "month" do @previous_month_path else @previous_week_path end}"}>
                   <button type="button" class="flex items-center justify-center py-2 pr-4 pl-3 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Previous month</span>
-                    <.icon name={:chevron_left} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <.icon name="hero-chevron-left-solid" class="size-3 sm:h-5 sm:w-5" />
                   </button>
                 </.link>
                 <.link patch={"#{if @mode == "month" do @present_month_path else @present_week_path end}"}>
@@ -80,7 +80,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <.link patch={"#{if @mode == "month" do @next_month_path else @next_week_path end}"}>
                   <button type="button" class="flex items-center justify-center py-2 pr-3 pl-4 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Next month</span>
-                    <.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <.icon name="hero-chevron-right-solid" class="size-3 sm:h-5 sm:w-5" />
                   </button>
                 </.link>
               </div>
@@ -95,7 +95,7 @@ defmodule AtomicWeb.Components.Calendar do
                     ]}
                   >
                     <:wrapper>
-                      <.button color={:white} icon={:chevron_down} icon_position={:right} icon_variant={:solid}>
+                      <.button color={:white} icon="hero-chevron-down-solid" icon_position={:right}>
                         <%= if @mode == "month" do %>
                           <%= gettext("Month view") %>
                         <% else %>
@@ -150,7 +150,7 @@ defmodule AtomicWeb.Components.Calendar do
               <div class="relative ml-6 md:hidden">
                 <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
                   <span class="sr-only">Open menu</span>
-                  <.icon name={:ellipsis_horizontal} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                  <.icon name="hero-ellipsis-horizontal-solid" class="size-3 sm:h-5 sm:w-5" />
                 </button>
                 <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <div class="py-1" role="none">
diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 6717e6ba5..f19675812 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -61,7 +61,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
                     <.badge variant={:outline} color={:primary} label="Activity" />
                   </.link>
                   <time datetime={activity.start} class="flex items-center text-zinc-700">
-                    <.icon name={:clock} solid class="mr-2 h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-clock-solid" class="size-5 mr-2 text-zinc-400" />
                     <%= Calendar.strftime(activity.start, "%Hh%M") %>
                   </time>
                 </div>
@@ -99,7 +99,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
     <div class={@class}>
       <time date-time={@date} class={
           "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
-            "flex h-6 w-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
+            "flex size-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
           end}"
         }>
         <%= @text %>
@@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
         date-time={@date}
         class={
           "ml-auto lg:ml-0 #{if current_from_params(@timezone, @params) == @date do
-            "ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
+            "ml-auto flex size-6 items-center justify-center rounded-full #{if @today? == 0 do
               "bg-orange-700"
             else
               "bg-zinc-900"
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 01c52222c..e000815cf 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -11,11 +11,6 @@ defmodule AtomicWeb.Components.Dropdown do
 
   attr :items, :list, default: [], doc: "The items to display in the dropdown."
 
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
   attr :orientation, :atom,
     default: :down,
     doc: "The orientation of the dropdown.",
@@ -51,14 +46,14 @@ defmodule AtomicWeb.Components.Dropdown do
                 method={Map.get(item, :method, "get")}
               >
                 <%= if item[:icon] do %>
-                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                  <.icon name={item.icon} class="size-5 ml-2 inline-block" />
                 <% end %>
                 <%= item.name %>
               </.link>
             <% else %>
               <div class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700"}>
                 <%= if item[:icon] do %>
-                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                  <.icon name={item.icon} class="size-5 ml-2 inline-block" />
                 <% end %>
                 <%= item.name %>
               </div>
diff --git a/lib/atomic_web/components/empty.ex b/lib/atomic_web/components/empty.ex
index ee073d6b4..5ccbf1f29 100644
--- a/lib/atomic_web/components/empty.ex
+++ b/lib/atomic_web/components/empty.ex
@@ -13,12 +13,12 @@ defmodule AtomicWeb.Components.Empty do
   def empty_state(assigns) do
     ~H"""
     <div id={@id} class="text-center">
-      <.icon name={:plus_circle} class="mx-auto h-12 w-12 text-zinc-400" />
+      <.icon name="hero-plus-circle" class="size-12 mx-auto text-zinc-400" />
       <h3 class="mt-2 text-sm font-semibold text-zinc-900">No <%= plural(@placeholder) %></h3>
       <p class="mt-1 text-sm text-zinc-500">Get started by creating a new <%= @placeholder %>.</p>
       <div class="mt-4">
         <.link navigate={@url} class="inline-flex items-center rounded-md bg-orange-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500">
-          <svg class="mr-1.5 -ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <svg class="size-5 mr-1.5 -ml-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
           </svg>
           New <%= @placeholder %>
diff --git a/lib/atomic_web/components/icon.ex b/lib/atomic_web/components/icon.ex
index 70e9037d3..ee97acc1a 100644
--- a/lib/atomic_web/components/icon.ex
+++ b/lib/atomic_web/components/icon.ex
@@ -1,19 +1,17 @@
 defmodule AtomicWeb.Components.Icon do
   @moduledoc """
-  A component for rendering an icon from the Heroicons package.
+  A component for rendering icons.
+
+  An icon can either be from the Heroicons or Tabler Icons set.
   """
   use Phoenix.Component
 
-  attr :rest, :global,
-    doc: "The arbitrary HTML attributes for the svg container",
-    include: ~w(fill stroke stroke-width)
-
-  attr :name, :atom, required: true
-  attr :outline, :boolean, default: true
-  attr :solid, :boolean, default: false
-  attr :mini, :boolean, default: false
+  attr :name, :string, required: true
+  attr :class, :string, default: nil
 
-  def icon(assigns) do
-    apply(Heroicons, assigns.name, [assigns])
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
   end
 end
diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex
index 740220120..977f3357d 100644
--- a/lib/atomic_web/components/image_uploader.ex
+++ b/lib/atomic_web/components/image_uploader.ex
@@ -23,7 +23,7 @@ defmodule AtomicWeb.Components.ImageUploader do
           <div class="mx-auto sm:col-span-6 lg:w-full">
             <div class="my-[140px] flex justify-center px-6">
               <div class="space-y-1 text-center">
-                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                <svg class="size-12 mx-auto text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                   <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                 </svg>
                 <div class="flex text-sm text-gray-600">
@@ -58,7 +58,7 @@ defmodule AtomicWeb.Components.ImageUploader do
                     <% end %>
                   </figcaption>
                   <button type="button" phx-click="cancel-image" phx-target={@target} phx-value-ref={entry.ref} aria-label="cancel" class="pl-4">
-                    <.icon name={:x_mark} solid class="h-5 w-5 text-gray-400" />
+                    <.icon name="hero-x-mark-solid" class="size-5 text-gray-400" />
                   </button>
                 </div>
               </figure>
diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 8990f8c3f..32b69dd38 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -3,9 +3,9 @@ defmodule AtomicWeb.Components.Modal do
   Reusable modal component.
   """
   use Phoenix.Component
+  use Gettext, backend: AtomicWeb.Gettext
 
   import AtomicWeb.Components.Icon
-  import AtomicWeb.Gettext
   import AtomicWeb.LiveHelpers
 
   alias Phoenix.LiveView.JS
@@ -42,7 +42,7 @@ defmodule AtomicWeb.Components.Modal do
             <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
               <div class="absolute top-6 right-5">
                 <button phx-click={JS.exec("phx-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 outline-none hover:opacity-40" aria-label={gettext("close")}>
-                  <.icon name={:x_mark} solid class="h-5 w-5" />
+                  <.icon name="hero-x-mark-solid" class="size-5" />
                 </button>
               </div>
               <div id={"#{@id}-content"}>
diff --git a/lib/atomic_web/components/notification.ex b/lib/atomic_web/components/notification.ex
index 22e02e2bb..0ba1b12bc 100644
--- a/lib/atomic_web/components/notification.ex
+++ b/lib/atomic_web/components/notification.ex
@@ -37,7 +37,7 @@ defmodule AtomicWeb.Components.Notification do
             <div class="ml-4 flex flex-shrink-0">
               <button phx-click="lv:clear-flash" phx-value-key={@type} class="inline-flex rounded-md bg-white text-zinc-400 hover:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2">
                 <span class="sr-only">Close</span>
-                <.icon name={:x_mark} solid class="h-5 w-5" />
+                <.icon name="hero-x-mark-solid" class="size-5" />
               </button>
             </div>
           </div>
@@ -53,22 +53,22 @@ defmodule AtomicWeb.Components.Notification do
     case type do
       "info" ->
         ~H"""
-        <.icon name={:information_circle} solid class="h-6 w-6 text-blue-400" />
+        <.icon name="hero-information-circle-solid" class="size-6 text-blue-400" />
         """
 
       "success" ->
         ~H"""
-        <.icon name={:check_circle} solid class="h-6 w-6 text-green-400" />
+        <.icon name="hero-check-circle-solid" class="size-6 text-green-400" />
         """
 
       "warning" ->
         ~H"""
-        <.icon name={:exclamation_circle} solid class="h-6 w-6 text-yellow-400" />
+        <.icon name="hero-exclamation-circle-solid" class="size-6 text-yellow-400" />
         """
 
       "error" ->
         ~H"""
-        <.icon name={:x_circle} solid class="h-6 w-6 text-red-400" />
+        <.icon name="hero-x-circle-solid" class="size-6 text-red-400" />
         """
     end
   end
diff --git a/lib/atomic_web/components/pagination.ex b/lib/atomic_web/components/pagination.ex
index c0082e74d..49a66498e 100644
--- a/lib/atomic_web/components/pagination.ex
+++ b/lib/atomic_web/components/pagination.ex
@@ -20,7 +20,7 @@ defmodule AtomicWeb.Components.Pagination do
           <div class="-mt-px flex w-0 flex-1">
             <%= if @meta.has_previous_page? do %>
               <.link patch={build_query(@meta.previous_page, @meta, @params)} class="inline-flex items-center pt-4 pr-1 text-sm font-medium text-zinc-500 hover:text-zinc-700">
-                <.icon name={:arrow_long_left} solid class="mr-3 h-5 w-5 text-zinc-400" />
+                <.icon name="hero-arrow-long-left-solid" class="size-5 mr-3 text-zinc-400" />
               </.link>
             <% end %>
           </div>
@@ -52,7 +52,7 @@ defmodule AtomicWeb.Components.Pagination do
           <div class="-mt-px flex w-0 flex-1 justify-end">
             <%= if @meta.has_next_page? do %>
               <.link patch={build_query(@meta.next_page, @meta, @params)} class="inline-flex items-center pt-4 pl-1 text-sm font-medium text-zinc-500 hover:text-zinc-700">
-                <.icon name={:arrow_long_right} solid class="ml-3 h-5 w-5 text-zinc-400" />
+                <.icon name="hero-arrow-long-right-solid" class="size-5 ml-3 text-zinc-400" />
               </.link>
             <% end %>
           </div>
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 083ac4b49..23277ee1b 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -36,7 +36,7 @@ defmodule AtomicWeb.Components.Sidebar do
       <div class="flex flex-row items-center justify-between">
         <button type="button" class="-m-2.5 pl-6 text-zinc-700 lg:hidden" phx-click={show_mobile_sidebar()}>
           <span class="sr-only">Open sidebar</span>
-          <.icon name={:bars_3} class="!h-6 !w-6" />
+          <.icon name="hero-bars-3" class="!h-6 !w-6" />
         </button>
         <div class="left-1/4 mt-auto -mb-2">
           <span class="sr-only">Open user menu</span>
@@ -53,7 +53,7 @@ defmodule AtomicWeb.Components.Sidebar do
 
               <button type="button" phx-click={hide_mobile_sidebar()} class="absolute top-0 right-0 p-4">
                 <span class="sr-only">Close sidebar</span>
-                <.icon name={:x_mark} class="h-6 w-6 text-zinc-700" />
+                <.icon name="hero-x-mark" class="size-6 text-zinc-700" />
               </button>
             </div>
 
@@ -106,7 +106,7 @@ defmodule AtomicWeb.Components.Sidebar do
                   "text-orange-500"
                 else
                   "text-zinc-400 group-hover:text-orange-500"
-                end} h-6 w-6 shrink-0"
+                end} size-6 shrink-0"
               } />
             <%= page.title %>
           </.link>
@@ -124,14 +124,14 @@ defmodule AtomicWeb.Components.Sidebar do
           <button class="flex w-full select-none flex-row items-center gap-x-2 px-4 py-3 text-sm font-semibold leading-6 text-zinc-700 lg:px-0">
             <AtomicWeb.Components.Avatar.avatar name={@current_user.name} src={user_image(@current_user)} size={:xs} color={:light_gray} class="!text-sm" />
             <span class="text-sm font-semibold leading-6" aria-hidden="true"><%= @current_user.name %></span>
-            <.icon name={:chevron_right} solid class="h-5 w-5" />
+            <.icon name="hero-chevron-right-solid" class="size-5" />
           </button>
         </:wrapper>
       </AtomicWeb.Components.Dropdown.dropdown>
     <% else %>
       <.link navigate={Routes.user_session_path(AtomicWeb.Endpoint, :new)} class="flex select-none items-center space-x-2 px-4 py-3 text-sm font-semibold leading-6 text-zinc-700 lg:px-0">
         <span class="text-sm font-semibold leading-6" aria-hidden="true">Sign in</span>
-        <.icon name={:arrow_right_end_on_rectangle} solid class="h-5 w-5" />
+        <.icon name="hero-arrow-right-end-on-rectangle-solid" class="size-5" />
       </.link>
     <% end %>
     """
diff --git a/lib/atomic_web/components/spinner.ex b/lib/atomic_web/components/spinner.ex
index 305a6ca14..73740f81f 100644
--- a/lib/atomic_web/components/spinner.ex
+++ b/lib/atomic_web/components/spinner.ex
@@ -9,7 +9,7 @@ defmodule AtomicWeb.Components.Spinner do
 
   attr :show, :boolean, default: true, doc: "Show or hide spinner."
 
-  attr :size_class, :string, default: nil, doc: "Custom CSS classes for size. eg: h-4 w-4"
+  attr :size_class, :string, default: nil, doc: "Custom CSS classes for size. eg: size-4"
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
 
diff --git a/lib/atomic_web/components/table.ex b/lib/atomic_web/components/table.ex
index f822ebae3..e3e23b60b 100644
--- a/lib/atomic_web/components/table.ex
+++ b/lib/atomic_web/components/table.ex
@@ -85,9 +85,9 @@ defmodule AtomicWeb.Components.Table do
   defp filter_input(assigns) do
     ~H"""
     <div x-data="{ open: false }">
-      <span @click="open = ! open" class="flex h-5 w-5 cursor-pointer justify-center self-center rounded p-1 hover:bg-zinc-200">
+      <span @click="open = ! open" class="size-5 flex cursor-pointer justify-center self-center rounded p-1 hover:bg-zinc-200">
         <span class="self-center">
-          <.icon name={:magnifying_glass} solid class="align-center h-4 w-4" />
+          <.icon name="hero-magnifying-glass-solid" class="align-center size-4" />
         </span>
       </span>
       <div x-show="open" class="absolute -translate-x-3/4 p-2">
@@ -123,17 +123,17 @@ defmodule AtomicWeb.Components.Table do
     ~H"""
     <%= if @direction in [:asc, :asc_nulls_first, :asc_nulls_last] do %>
       <span class="self-center">
-        <.icon name={:chevron_up} class="h-3 w-3" />
+        <.icon name="hero-chevron-up" class="size-3" />
       </span>
     <% end %>
     <%= if @direction in [:desc, :desc_nulls_first, :desc_nulls_last] do %>
       <span class="self-center">
-        <.icon name={:chevron_down} class="h-3 w-3" />
+        <.icon name="hero-chevron-down" class="size-3" />
       </span>
     <% end %>
     <%= if is_nil(@direction) do %>
       <span class="self-center">
-        <.icon name={:chevron_up_down} class="h-3 w-3" />
+        <.icon name="hero-chevron-up-down" class="size-3" />
       </span>
     <% end %>
     """
diff --git a/lib/atomic_web/config.ex b/lib/atomic_web/config.ex
index 46cfbe6d9..4b2f3dc34 100644
--- a/lib/atomic_web/config.ex
+++ b/lib/atomic_web/config.ex
@@ -25,7 +25,7 @@ defmodule AtomicWeb.Config do
         %{
           key: :scanner,
           title: "Scanner",
-          icon: :qr_code,
+          icon: "hero-qr-code",
           url: Routes.scanner_index_path(conn, :index),
           tabs: []
         }
@@ -38,21 +38,21 @@ defmodule AtomicWeb.Config do
         %{
           key: :departments,
           title: "Departments",
-          icon: :cube,
+          icon: "hero-cube",
           url: Routes.department_index_path(conn, :index, current_organization.id),
           tabs: []
         },
         %{
           key: :partners,
           title: "Partners",
-          icon: :user_group,
+          icon: "hero-user-group",
           url: Routes.partner_index_path(conn, :index, current_organization.id),
           tabs: []
         },
         %{
           key: :scanner,
           title: "Scanner",
-          icon: :qr_code,
+          icon: "hero-qr-code",
           url: Routes.scanner_index_path(conn, :index),
           tabs: []
         }
@@ -64,35 +64,35 @@ defmodule AtomicWeb.Config do
       %{
         key: :home,
         title: "Home",
-        icon: :home,
+        icon: "hero-home",
         url: Routes.home_index_path(conn, :index),
         tabs: []
       },
       %{
         key: :calendar,
         title: "Calendar",
-        icon: :calendar,
+        icon: "hero-calendar",
         url: Routes.calendar_show_path(conn, :show),
         tabs: []
       },
       %{
         key: :activities,
         title: "Activities",
-        icon: :academic_cap,
+        icon: "hero-academic-cap",
         url: Routes.activity_index_path(conn, :index),
         tabs: []
       },
       %{
         key: :announcements,
         title: "Announcements",
-        icon: :newspaper,
+        icon: "hero-newspaper",
         url: Routes.announcement_index_path(conn, :index),
         tabs: []
       },
       %{
         key: :organizations,
         title: "Organizations",
-        icon: :building_office,
+        icon: "hero-building-office",
         url: Routes.organization_index_path(conn, :index),
         tabs: []
       }
diff --git a/lib/atomic_web/gettext.ex b/lib/atomic_web/gettext.ex
index 492ca3a55..c2d639349 100644
--- a/lib/atomic_web/gettext.ex
+++ b/lib/atomic_web/gettext.ex
@@ -20,5 +20,5 @@ defmodule AtomicWeb.Gettext do
 
   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
   """
-  use Gettext, otp_app: :atomic
+  use Gettext.Backend, otp_app: :atomic
 end
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 174c4f853..d99d7663e 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -50,18 +50,18 @@
                 <div class="mt-2 lg:flex lg:justify-between">
                   <div class="lg:flex lg:space-x-3">
                     <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:users} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                      <.icon name="hero-users-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
                       <%= Enum.count(activity.enrollments) %> / <%= activity.maximum_entries %>
                     </p>
                     <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:calendar} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                      <.icon name="hero-calendar-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
                       <%= if activity.start do %>
                         <%= display_date(activity.start) %>
                       <% end %>
                     </p>
                     <%= if activity.location do %>
                       <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                        <.icon name={:map_pin} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                        <.icon name="hero-map-pin-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
                         <%= activity.location && activity.location.name %>
                       </p>
                     <% end %>
@@ -70,11 +70,11 @@
                 <div class="flex flex-col-reverse lg:flex-row-reverse lg:items-center lg:justify-between">
                   <%= if Activities.verify_maximum_enrollments?(activity.id) do %>
                     <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Open
+                      <.icon name="hero-bell-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Open
                     </div>
                   <% else %>
                     <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closed
+                      <.icon name="hero-bell-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closed
                     </div>
                   <% end %>
                 </div>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index e99933c41..7863c02c6 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -34,7 +34,7 @@
             </dt>
             <dd class="mt-1 flex text-sm text-zinc-900">
               <div class="flex w-full">
-                <.icon name={:users} solid class="h-5 w-5 text-zinc-400" />
+                <.icon name="hero-users-solid" class="size-5 text-zinc-400" />
                 <div class="pl-2.5">
                   <%= @enrolled %> / <%= @activity.maximum_entries %>
                 </div>
@@ -52,21 +52,21 @@
               <div class="flex flex-col gap-x-2 gap-y-2 md:flex-row">
                 <div class="flex gap-x-2">
                   <div class="text-zinc-900x inset-y-0 my-auto flex w-full gap-y-4 text-sm">
-                    <.icon name={:calendar} solid class="h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-calendar-solid" class="size-5 text-zinc-400" />
                     <p class="block pl-1.5 max-w-6xl">
                       <%= display_date(@activity.start) %>
                     </p>
                   </div>
                 </div>
                 <div class="inset-y-0 my-auto flex md:pl-3">
-                  <.icon name={:clock} solid class="h-5 w-5 text-zinc-400" />
+                  <.icon name="hero-clock-solid" class="size-5 text-zinc-400" />
                   <p class="block pl-1.5 max-w-6xl">
                     <%= display_time(@activity.start) %> - <%= display_time(@activity.finish) %>
                   </p>
                 </div>
                 <div class="flex text-sm md:pl-3">
                   <%= if @activity.location do %>
-                    <.icon name={:map_pin} solid class="h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-map-pin-solid" class="size-5 text-zinc-400" />
                     <.link navigate={@activity.location.url} data-confirm={gettext("Are you sure?")} class="pl-1.5 text-blue-500">
                       <%= @activity.location.name %>
                     </.link>
@@ -139,12 +139,12 @@
   <%= if @has_permissions? do %>
     <.link patch={Routes.activity_edit_path(@socket, :edit, @activity.organization_id, @activity)} class="button">
       <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-        <.icon name={:pencil} solid class="mr-3 w-5 h-5 text-zinc-400" /> Edit
+        <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Edit
       </div>
     </.link>
     <%= link to: "#", phx_click: "delete", phx_value_id: @activity.id, data: [confirm: "Are you sure?"] do %>
       <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-        <.icon name={:trash} solid class="mr-3 w-5 h-5 text-zinc-400" /> Delete
+        <.icon name="hero-trash-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Delete
       </div>
     <% end %>
   <% end %>
diff --git a/lib/atomic_web/live/announcement_live/edit.html.heex b/lib/atomic_web/live/announcement_live/edit.html.heex
index 7026edde4..190892171 100644
--- a/lib/atomic_web/live/announcement_live/edit.html.heex
+++ b/lib/atomic_web/live/announcement_live/edit.html.heex
@@ -1,6 +1,6 @@
 <.page title={gettext("Edit Announcement")}>
   <:actions>
-    <.button size={:md} icon={:trash} color={:white} type="delete" phx-click="delete">
+    <.button size={:md} icon="hero-trash" color={:white} type="delete" phx-click="delete">
       <%= gettext("Delete") %>
     </.button>
   </:actions>
diff --git a/lib/atomic_web/live/announcement_live/form_component.html.heex b/lib/atomic_web/live/announcement_live/form_component.html.heex
index 731989009..8f06c9546 100644
--- a/lib/atomic_web/live/announcement_live/form_component.html.heex
+++ b/lib/atomic_web/live/announcement_live/form_component.html.heex
@@ -5,7 +5,7 @@
     <.field field={f[:description]} help_text={gettext("Announcement description")} type="text" placeholder="Description" required />
 
     <div class="mt-8 flex w-full justify-end">
-      <.button size={:md} color={:white} icon={:cube} type="submit"><%= gettext("Save Changes") %></.button>
+      <.button size={:md} color={:white} icon="hero-cube" type="submit"><%= gettext("Save Changes") %></.button>
     </div>
   </.form>
 </div>
diff --git a/lib/atomic_web/live/announcement_live/show.html.heex b/lib/atomic_web/live/announcement_live/show.html.heex
index 4a0c03b56..e48df2ecb 100644
--- a/lib/atomic_web/live/announcement_live/show.html.heex
+++ b/lib/atomic_web/live/announcement_live/show.html.heex
@@ -16,7 +16,7 @@
 <%= if @has_permissions? do %>
   <.link patch={Routes.announcement_edit_path(@socket, :edit, @announcement.organization, @announcement)} class="px-2 button">
     <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-      <.icon name={:pencil} solid class="mr-3 w-5 h-5 text-zinc-400" /> Edit
+      <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Edit
     </div>
   </.link>
 <% end %>
diff --git a/lib/atomic_web/live/collaborator_live/form_component.ex b/lib/atomic_web/live/collaborator_live/form_component.ex
index 09082e9a9..2232c865f 100644
--- a/lib/atomic_web/live/collaborator_live/form_component.ex
+++ b/lib/atomic_web/live/collaborator_live/form_component.ex
@@ -38,17 +38,17 @@ defmodule AtomicWeb.CollaboratorLive.FormComponent do
       </div>
       <%= if !@collaborator.accepted do %>
         <div class="my-4 flex w-full select-none flex-row justify-center gap-2" aria-label={"#{display_date(@collaborator.inserted_at)} #{display_time(@collaborator.inserted_at)}"}>
-          <.icon class="my-auto h-5 w-5" name={:calendar} />
+          <.icon class="size-5 my-auto" name="hero-calendar" />
           <p><%= gettext("Requested %{requested_at}", requested_at: relative_datetime(@collaborator.inserted_at)) %></p>
         </div>
       <% end %>
       <!-- Action Buttons -->
       <div class="mt-8 flex space-x-2">
         <%= if @collaborator.accepted do %>
-          <.button phx-click="delete" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Delete") %></.button>
+          <.button phx-click="delete" phx-target={@myself} size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Delete") %></.button>
         <% else %>
-          <.button phx-click="deny" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Deny") %></.button>
-          <.button phx-click="allow" phx-target={@myself} size={:lg} icon={:check_circle} color={:white} full_width><%= gettext("Accept") %></.button>
+          <.button phx-click="deny" phx-target={@myself} size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Deny") %></.button>
+          <.button phx-click="allow" phx-target={@myself} size={:lg} icon="hero-check-circle" color={:white} full_width><%= gettext("Accept") %></.button>
         <% end %>
       </div>
       <!-- Action Confirm Modal -->
@@ -61,13 +61,13 @@ defmodule AtomicWeb.CollaboratorLive.FormComponent do
             <%= display_action_goal_confirm_description(@action_modal, @department) %>
           </p>
           <div class="mt-8 flex flex-row">
-            <.button phx-click="clear-action" class="mr-2" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Cancel") %></.button>
+            <.button phx-click="clear-action" class="mr-2" phx-target={@myself} size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Cancel") %></.button>
             <.button
               phx-click="confirm"
               class="ml-2"
               phx-target={@myself}
               size={:lg}
-              icon={:check_circle}
+              icon="hero-check-circle"
               color={
                 if @action_modal in [:delete_collaborator, :deny_request] do
                   :danger
diff --git a/lib/atomic_web/live/department_live/edit.html.heex b/lib/atomic_web/live/department_live/edit.html.heex
index 383119840..878fc3d73 100644
--- a/lib/atomic_web/live/department_live/edit.html.heex
+++ b/lib/atomic_web/live/department_live/edit.html.heex
@@ -9,17 +9,17 @@
     <%= if @live_action in [:edit] do %>
       <div class="flex space-x-4">
         <%= if !@department.archived do %>
-          <.button color={:white} icon={:archive_box} phx-click="set-action" phx-value-action={:archive}>
+          <.button color={:white} icon="hero-archive-box" phx-click="set-action" phx-value-action={:archive}>
             <%= gettext("Archive") %>
           </.button>
-          <.button color={:white} icon={:trash} disabled title={gettext("You can only delete a department after it has been archived.")}>
+          <.button color={:white} icon="hero-trash" disabled title={gettext("You can only delete a department after it has been archived.")}>
             <%= gettext("Delete") %>
           </.button>
         <% else %>
-          <.button color={:white} icon={:archive_box_x_mark} phx-click="set-action" phx-value-action={:unarchive}>
+          <.button color={:white} icon="hero-archive-box-x-mark" phx-click="set-action" phx-value-action={:unarchive}>
             <%= gettext("Unarchive") %>
           </.button>
-          <.button color={:white} icon={:trash} phx-click="set-action" phx-value-action={:delete}>
+          <.button color={:white} icon="hero-trash" phx-click="set-action" phx-value-action={:delete}>
             <%= gettext("Delete") %>
           </.button>
         <% end %>
@@ -53,12 +53,12 @@
       <%= display_action_goal_confirm_description(@action, @department) %>
     </p>
     <div class="mt-8 flex flex-row">
-      <.button phx-click="clear-action" class="mr-2" size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Cancel") %></.button>
+      <.button phx-click="clear-action" class="mr-2" size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Cancel") %></.button>
       <.button
         phx-click="confirm-action"
         class="mr-2"
         size={:lg}
-        icon={:check_circle}
+        icon="hero-check-circle"
         color={
           if @action == :delete do
             :danger
diff --git a/lib/atomic_web/live/department_live/form_component.ex b/lib/atomic_web/live/department_live/form_component.ex
index d23b6160b..d9b9216a0 100644
--- a/lib/atomic_web/live/department_live/form_component.ex
+++ b/lib/atomic_web/live/department_live/form_component.ex
@@ -29,7 +29,7 @@ defmodule AtomicWeb.DepartmentLive.FormComponent do
         </div>
 
         <div class="mt-8 flex w-full justify-end">
-          <.button size={:md} color={:white} icon={:cube} type="submit"><%= gettext("Save Changes") %></.button>
+          <.button size={:md} color={:white} icon="hero-cube" type="submit"><%= gettext("Save Changes") %></.button>
         </div>
       </.form>
     </div>
diff --git a/lib/atomic_web/live/department_live/index.html.heex b/lib/atomic_web/live/department_live/index.html.heex
index 30c532038..7fec888bf 100644
--- a/lib/atomic_web/live/department_live/index.html.heex
+++ b/lib/atomic_web/live/department_live/index.html.heex
@@ -1,7 +1,7 @@
 <.page title="Departments">
   <:actions>
     <%= if not @empty? and @has_permissions? do %>
-      <.button patch={Routes.department_edit_path(@socket, :new, @current_organization)} icon={:plus}>
+      <.button patch={Routes.department_edit_path(@socket, :new, @current_organization)} icon="hero-plus">
         <%= gettext("New") %>
       </.button>
     <% end %>
diff --git a/lib/atomic_web/live/department_live/show.html.heex b/lib/atomic_web/live/department_live/show.html.heex
index 2807cd7a1..70e19ab49 100644
--- a/lib/atomic_web/live/department_live/show.html.heex
+++ b/lib/atomic_web/live/department_live/show.html.heex
@@ -39,14 +39,13 @@
                           end}"
                         }
                       color={:white}
-                      icon={:user_plus}
-                      icon_variant={:solid}
+                      icon="hero-user-plus-solid"
                       title={gettext("Collaborate")}
                     />
                   <% end %>
                 <% else %>
                   <%= if ! @current_collaborator.accepted do %>
-                    <.button color={:white} icon={:user_plus} icon_variant={:solid} aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled />
+                    <.button color={:white} icon="hero-user-plus-solid" aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled />
                   <% end %>
                 <% end %>
                 <.dropdown
@@ -63,18 +62,18 @@
                             @department.id,
                             tab: "collaborators"
                           ),
-                        icon: :user_group
+                        icon: "hero-user-group"
                       }
                     ] ++
                       if @has_permissions? || (@current_collaborator && @current_collaborator.accepted) do
-                        [%{name: gettext("Edit"), navigate: Routes.department_edit_path(@socket, :edit, @organization, @department, @params), icon: :pencil}]
+                        [%{name: gettext("Edit"), navigate: Routes.department_edit_path(@socket, :edit, @organization, @department, @params), icon: "hero-pencil"}]
                       else
                         []
                       end
                   }
                 >
                   <:wrapper>
-                    <.button icon_variant={:solid} color={:white} icon={:ellipsis_horizontal} />
+                    <.button color={:white} icon="hero-ellipsis-horizontal-solid" />
                   </:wrapper>
                 </.dropdown>
               <% end %>
@@ -94,15 +93,14 @@
                           end}"
                         }
                       color={:white}
-                      icon={:user_plus}
-                      icon_variant={:solid}
+                      icon="hero-user-plus-solid"
                     >
                       <%= gettext("Collaborate") %>
                     </.button>
                   <% end %>
                 <% else %>
                   <%= if ! @current_collaborator.accepted do %>
-                    <.button color={:white} icon={:user_plus} icon_variant={:solid} aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled>
+                    <.button color={:white} icon="hero-user-plus-solid" aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled>
                       <%= gettext("Collaborate") %>
                     </.button>
                   <% end %>
@@ -110,8 +108,7 @@
                 <%= if @has_permissions? || (@current_collaborator && @current_collaborator.accepted) do %>
                   <!-- Collaborators view -->
                   <.button
-                    icon={:user_group}
-                    icon_variant={:solid}
+                    icon="hero-user-group-solid"
                     color={:white}
                     patch={
                       Routes.department_show_path(
@@ -126,13 +123,12 @@
                 <% end %>
                 <!-- Edit department -->
                 <%= if @has_permissions? do %>
-                  <.button icon={:pencil} icon_variant={:solid} color={:white} patch={Routes.department_edit_path(@socket, :edit, @organization, @department, @params)} />
+                  <.button icon="hero-pencil-solid" color={:white} patch={Routes.department_edit_path(@socket, :edit, @organization, @department, @params)} />
                 <% end %>
               <% else %>
                 <!-- Exit collaborators view -->
                 <.button
-                  icon={:arrow_left}
-                  icon_variant={:solid}
+                  icon="hero-arrow-left-solid"
                   color={:white}
                   patch={
                     Routes.department_show_path(
@@ -185,7 +181,7 @@
                 />
                 <!-- People empty state -->
                 <%= if length(@all_collaborators) == 0 do %>
-                  <.icon class="mx-32 text-gray-900" name={:users} />
+                  <.icon class="mx-32 text-gray-900" name="hero-users" />
                   <p class="mb-4 select-none text-center text-gray-900"><%= gettext("This department doesn't have any collaborators yet!") %></p>
                 <% end %>
               </div>
@@ -223,9 +219,9 @@
                     </:col>
                     <:col :let={collaborator}>
                       <%= if collaborator.accepted do %>
-                        <.button icon={:pencil} icon_variant={:solid} color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Edit</.button>
+                        <.button icon="hero-pencil-solid" color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Edit</.button>
                       <% else %>
-                        <.button icon={:envelope} icon_variant={:solid} color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Review</.button>
+                        <.button icon="hero-envelope-solid" color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Review</.button>
                       <% end %>
                     </:col>
                   </.table>
diff --git a/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex b/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex
index b29697dc2..569489e22 100644
--- a/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex
+++ b/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex
@@ -39,14 +39,14 @@ defmodule AtomicWeb.HomeLive.Components.FollowSuggestions.Suggestion do
       <div class="flex-shrink-0">
         <%= if @is_following do %>
           <button type="button" phx-value-organization_id={@organization.id} phx-click="unfollow" phx-target={@myself} class="z-100 inline-flex items-center gap-x-1.5 text-sm font-semibold leading-6 text-gray-900">
-            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <svg class="size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
             </svg>
             <span>Unfollow</span>
           </button>
         <% else %>
           <button type="button" phx-value-organization_id={@organization.id} phx-click="follow" phx-target={@myself} class="z-100 inline-flex items-center gap-x-1.5 text-sm font-semibold leading-6 text-gray-900">
-            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <svg class="size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
             </svg>
             <span>Follow</span>
diff --git a/lib/atomic_web/live/home_live/components/schedule.ex b/lib/atomic_web/live/home_live/components/schedule.ex
index 7cac3ecdb..43e7a0bc5 100644
--- a/lib/atomic_web/live/home_live/components/schedule.ex
+++ b/lib/atomic_web/live/home_live/components/schedule.ex
@@ -20,7 +20,7 @@ defmodule AtomicWeb.HomeLive.Components.Schedule do
                     <%= entry.title %>
                   </p>
                   <div class="w-[110px] flex h-6 items-center justify-center space-x-1 rounded-md bg-orange-100 text-orange-500 opacity-70">
-                    <.icon name={:clock} solid class="h-4 w-4" />
+                    <.icon name="hero-clock-solid" class="size-4" />
                     <p class="text-xs font-semibold">
                       <%= display_time(entry.start) %> - <%= display_time(entry.finish) %>
                     </p>
@@ -47,7 +47,7 @@ defmodule AtomicWeb.HomeLive.Components.Schedule do
                     <%= entry.title %>
                   </p>
                   <div class="w-[110px] flex h-6 items-center justify-center space-x-1 rounded-md bg-orange-100 text-orange-500 opacity-70">
-                    <.icon name={:clock} solid class="h-4 w-4" />
+                    <.icon name="hero-clock-solid" class="size-4" />
                     <p class="text-xs font-semibold">
                       <%= pretty_display_date(entry.start) %>
                     </p>
diff --git a/lib/atomic_web/live/organization_live/show.html.heex b/lib/atomic_web/live/organization_live/show.html.heex
index 44e8a5c73..f56835293 100644
--- a/lib/atomic_web/live/organization_live/show.html.heex
+++ b/lib/atomic_web/live/organization_live/show.html.heex
@@ -42,7 +42,7 @@
                                 aria-labelledby="listbox-label"
                               >
                                 <span class="sr-only">Change published status</span>
-                                <svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <svg class="size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                   <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                                 </svg>
                               </button>
@@ -73,12 +73,12 @@
                     <%= if @has_permissions? do %>
                       <.link patch={Routes.organization_edit_path(@socket, :edit, @organization)} class="button">
                         <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-                          <.icon name={:pencil} solid class="mr-3 w-5 h-5 text-gray-400" /> Edit
+                          <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-gray-400" /> Edit
                         </div>
                       </.link>
                       <%= link to: "#", phx_click: "delete", phx_value_id: @organization.id, data: [confirm: "Are you sure?"] do %>
                         <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-                          <.icon name={:trash} solid class="mr-3 w-5 h-5 text-gray-400" /> Delete
+                          <.icon name="hero-trash-solid" class="mr-3 w-5 h-5 text-gray-400" /> Delete
                         </div>
                       <% end %>
                     <% end %>
diff --git a/lib/atomic_web/live/partner_live/edit.html.heex b/lib/atomic_web/live/partner_live/edit.html.heex
index 0f8a76911..fc63e6ad5 100644
--- a/lib/atomic_web/live/partner_live/edit.html.heex
+++ b/lib/atomic_web/live/partner_live/edit.html.heex
@@ -9,17 +9,17 @@
     <%= if @live_action in [:edit] do %>
       <div class="flex space-x-4">
         <%= if !@partner.archived do %>
-          <.button color={:white} icon={:archive_box} phx-click="set-action" phx-value-action={:archive}>
+          <.button color={:white} icon="hero-archive-box" phx-click="set-action" phx-value-action={:archive}>
             <%= gettext("Archive") %>
           </.button>
-          <.button color={:white} icon={:trash} disabled title={gettext("You can only delete a department after it has been archived.")}>
+          <.button color={:white} icon="hero-trash" disabled title={gettext("You can only delete a department after it has been archived.")}>
             <%= gettext("Delete") %>
           </.button>
         <% else %>
-          <.button color={:white} icon={:archive_box_x_mark} phx-click="set-action" phx-value-action={:unarchive}>
+          <.button color={:white} icon="hero-archive-box-x-mark" phx-click="set-action" phx-value-action={:unarchive}>
             <%= gettext("Unarchive") %>
           </.button>
-          <.button color={:white} icon={:trash} phx-click="set-action" phx-value-action={:delete}>
+          <.button color={:white} icon="hero-trash" phx-click="set-action" phx-value-action={:delete}>
             <%= gettext("Delete") %>
           </.button>
         <% end %>
@@ -40,12 +40,12 @@
       <%= display_action_goal_confirm_description(@action, @partner) %>
     </p>
     <div class="mt-8 flex flex-row">
-      <.button phx-click="clear-action" class="mr-2" size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Cancel") %></.button>
+      <.button phx-click="clear-action" class="mr-2" size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Cancel") %></.button>
       <.button
         phx-click="confirm-action"
         class="mr-2"
         size={:lg}
-        icon={:check_circle}
+        icon="hero-check-circle"
         color={
           if @action == :delete do
             :danger
diff --git a/lib/atomic_web/live/partner_live/form_component.ex b/lib/atomic_web/live/partner_live/form_component.ex
index 1e9402213..bd6ec775f 100644
--- a/lib/atomic_web/live/partner_live/form_component.ex
+++ b/lib/atomic_web/live/partner_live/form_component.ex
@@ -45,7 +45,7 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
           <.field type="textarea" field={f[:notes]} placeholder="Notes" />
         </div>
         <div class="mt-8 flex w-full justify-end">
-          <.button size={:md} color={:white} icon={:cube}>Save Changes</.button>
+          <.button size={:md} color={:white} icon="hero-cube">Save Changes</.button>
         </div>
       </.form>
     </div>
diff --git a/lib/atomic_web/live/partner_live/index.html.heex b/lib/atomic_web/live/partner_live/index.html.heex
index 73d31306b..4e7b7e895 100644
--- a/lib/atomic_web/live/partner_live/index.html.heex
+++ b/lib/atomic_web/live/partner_live/index.html.heex
@@ -1,7 +1,7 @@
 <.page title="Partners">
   <:actions>
     <%= if not @empty? and @has_permissions? do %>
-      <.button navigate={Routes.partner_edit_path(@socket, :new, @current_organization)} icon={:plus}>
+      <.button navigate={Routes.partner_edit_path(@socket, :new, @current_organization)} icon="hero-plus">
         New Partner
       </.button>
     <% end %>
@@ -45,7 +45,7 @@
                 <p class="text-md font-semibold leading-6 text-zinc-900"><%= partner.name %></p>
                 <%= if partner.location do %>
                   <div class="flex flex-row items-center gap-x-1 text-sm leading-6 z-1">
-                    <.icon name={:map_pin} class="h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
                     <p class="text-blue-500"><%= partner.location.name %></p>
                   </div>
                 <% end %>
diff --git a/lib/atomic_web/live/partner_live/show.html.heex b/lib/atomic_web/live/partner_live/show.html.heex
index 1f3815899..b585f556e 100644
--- a/lib/atomic_web/live/partner_live/show.html.heex
+++ b/lib/atomic_web/live/partner_live/show.html.heex
@@ -2,7 +2,7 @@
   <:actions>
     <%= if @has_permissions? do %>
       <div class="lg:border-orange-500 lg:block">
-        <.button navigate={Routes.partner_edit_path(@socket, :edit, @organization, @partner)} icon={:pencil}>
+        <.button navigate={Routes.partner_edit_path(@socket, :edit, @organization, @partner)} icon="hero-pencil">
           <%= gettext("Edit Partner") %>
         </.button>
       </div>
@@ -22,7 +22,7 @@
           </div>
           <%= if @partner.location do %>
             <div class="flex flex-row items-center gap-x-1 text-md leading-6">
-              <.icon name={:map_pin} class="h-5 w-5 text-zinc-400" />
+              <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
               <.link class="text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}><%= @partner.location.name %></.link>
             </div>
           <% end %>
@@ -30,25 +30,25 @@
             <div class="grid grid-cols-2 grid-rows-3 lg:flex lg:flex-row lg:gap-x-4">
               <%= if @partner.socials.website do %>
                 <div class="flex flex-row items-center gap-x-1 ">
-                  <.icon name={:globe_alt} class="h-5 w-5 text-zinc-400" />
+                  <.icon name="hero-globe-alt" class="size-5 text-zinc-400" />
                   <.link class="text-blue-500" href={@partner.socials.website}>Website</.link>
                 </div>
               <% end %>
               <%= if @partner.socials.instagram do %>
                 <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/instagram.svg" class="h-5 w-5" alt="Instagram" />
+                  <img src="/images/instagram.svg" class="size-5" alt="Instagram" />
                   <.link class="text-blue-500" href={"https://instagram.com/" <> @partner.socials.instagram}>Instagram</.link>
                 </div>
               <% end %>
               <%= if @partner.socials.facebook do %>
                 <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/facebook.svg" class="h-5 w-5" alt="Facebook" />
+                  <img src="/images/facebook.svg" class="size-5" alt="Facebook" />
                   <.link class="text-blue-500" href={"https://facebook.com/" <> @partner.socials.facebook}>Facebook</.link>
                 </div>
               <% end %>
               <%= if @partner.socials.x do %>
                 <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/x.svg" class="h-5 w-5" alt="X" />
+                  <img src="/images/x.svg" class="size-5" alt="X" />
                   <.link class="text-blue-500" href={"https://x.com/" <> @partner.socials.x}>X</.link>
                 </div>
               <% end %>
@@ -59,7 +59,7 @@
       <div>
         <div class="mt-1 text-zinc-800 py-4 px-2">
           <div class="flex flex-row items-center gap-x-2">
-            <.icon name={:clock} class="h-5 w-5 mb-2" />
+            <.icon name="hero-clock" class="size-5 mb-2" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-gray-900">Overview</h2>
           </div>
           <span class="py-4">
@@ -70,7 +70,7 @@
         </div>
         <div class="text-zinc-800 py-4 px-2">
           <div class="flex flex-row items-center gap-x-2 text-zinc-800">
-            <.icon name={:signal} class="h-5 w-5 mb-2" />
+            <.icon name="hero-signal" class="size-5 mb-2" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-gray-900">Benefits</h2>
           </div>
           <span>
@@ -86,7 +86,7 @@
         <%= if @partners do %>
           <div class="flex flex-col gap-x-2 text-zinc-800">
             <div class="flex flex-row items-center gap-x-2 px-2">
-              <.icon name={:star} class="h-5 w-5 mb-2" />
+              <.icon name="hero-star" class="size-5 mb-2" />
               <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900 py-2">Related Partners</h2>
             </div>
             <div class="sm:grid sm:grid-cols-2 sm:gap-px">
@@ -99,7 +99,7 @@
                     </div>
                     <%= if partner.location do %>
                       <div class="flex flex-row items-center gap-x-1">
-                        <.icon name={:map_pin} class="h-5 w-5 text-zinc-400" />
+                        <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
                         <span class="text-blue-500"><%= partner.location.name %></span>
                       </div>
                     <% end %>
diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex
index d0f208a26..6e0705012 100644
--- a/lib/atomic_web/live/profile_live/form_component.html.heex
+++ b/lib/atomic_web/live/profile_live/form_component.html.heex
@@ -55,7 +55,7 @@
           end} relative w-40 h-40 ring-2 ring-zinc-300 rounded-full cursor-pointer bg-zinc-400 sm:w-48 group sm:h-48 hover:bg-tertiary"
         }>
           <div class="flex absolute justify-center items-center w-full h-full">
-            <.icon name={:camera} class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" />
+            <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" />
           </div>
         </div>
         <section>
@@ -65,7 +65,7 @@
             <% end %>
             <article class="flex relative items-center w-40 h-40 sm:w-48 sm:h-48 bg-white rounded-full cursor-pointer upload-entry group">
               <div class="flex absolute z-10 justify-center items-center w-full h-full rounded-full">
-                <.icon name={:camera} class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" />
+                <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" />
               </div>
               <figure class="flex justify-center items-center w-full h-full rounded-full group-hover:opacity-80">
                 <.live_img_preview entry={entry} class="object-cover object-center rounded-full w-40 h-40 sm:w-48 sm:h-48 border-4 border-white" />
@@ -78,7 +78,7 @@
     <div class="w-full flex flex-row-reverse mt-8">
       <%= submit do %>
         <div class="inline-flex px-6 py-2 text-sm font-medium text-orange-500 bg-white border-2 border-orange-500 rounded-md shadow-sm hover:bg-orange-600 hover:text-white">
-          <.icon name={:archive_box} solid class="mr-2 -ml-1 w-5 h-5" /> Save
+          <.icon name="hero-archive-box-solid" class="mr-2 -ml-1 w-5 h-5" /> Save
         </div>
       <% end %>
     </div>
diff --git a/lib/atomic_web/templates/layout/app.html.heex b/lib/atomic_web/templates/layout/app.html.heex
index f51c0300f..14b4e0d25 100644
--- a/lib/atomic_web/templates/layout/app.html.heex
+++ b/lib/atomic_web/templates/layout/app.html.heex
@@ -6,7 +6,7 @@
         <div class="p-4">
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <.icon name={:information_circle} solid class="w-6 h-6 text-blue-400" />
+              <.icon name="hero-information-circle-solid" class="w-6 h-6 text-blue-400" />
             </div>
             <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
               <%= Phoenix.Flash.get(@flash, :info) %>
@@ -24,7 +24,7 @@
         <div class="p-4">
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <.icon name={:x_circle} solid class="w-6 h-6 text-red-400" />
+              <.icon name="hero-x-circle-solid" class="w-6 h-6 text-red-400" />
             </div>
             <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
               <%= Phoenix.Flash.get(@flash, :error) %>
diff --git a/lib/atomic_web/templates/user_change_password/edit.html.heex b/lib/atomic_web/templates/user_change_password/edit.html.heex
index 1875039eb..983425f86 100644
--- a/lib/atomic_web/templates/user_change_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_change_password/edit.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -22,10 +22,10 @@
           <%= label(f, :current_password, "Current password", class: "sr-only") %>
           <%= password_input(f, :current_password, required: true, placeholder: gettext("Current password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_current_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_current_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :current_password) %></span>
@@ -36,10 +36,10 @@
           <%= label(f, :password, "New password", class: "sr-only") %>
           <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
@@ -54,10 +54,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('update_password_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('update_password_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
diff --git a/lib/atomic_web/templates/user_registration/new.html.heex b/lib/atomic_web/templates/user_registration/new.html.heex
index f86626955..1ffbf4d0a 100644
--- a/lib/atomic_web/templates/user_registration/new.html.heex
+++ b/lib/atomic_web/templates/user_registration/new.html.heex
@@ -6,7 +6,7 @@
     <%= if @changeset.action do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
@@ -34,10 +34,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
@@ -52,10 +52,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
diff --git a/lib/atomic_web/templates/user_reset_password/edit.html.heex b/lib/atomic_web/templates/user_reset_password/edit.html.heex
index cfab89f5f..9b6ddc621 100644
--- a/lib/atomic_web/templates/user_reset_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/edit.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation_circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -20,10 +20,10 @@
           <%= label(f, :password, "New password", class: "sr-only") %>
           <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
@@ -38,10 +38,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
diff --git a/lib/atomic_web/templates/user_reset_password/new.html.heex b/lib/atomic_web/templates/user_reset_password/new.html.heex
index 0cecf5d94..47cf1f5e5 100644
--- a/lib/atomic_web/templates/user_reset_password/new.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/new.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
diff --git a/lib/atomic_web/templates/user_session/new.html.heex b/lib/atomic_web/templates/user_session/new.html.heex
index 2d6bb6f58..19c6f5377 100644
--- a/lib/atomic_web/templates/user_session/new.html.heex
+++ b/lib/atomic_web/templates/user_session/new.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -32,10 +32,10 @@
           class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
         ) %>
         <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-          <.icon name={:eye} solid class="w-5 h-auto fill-zinc-900 hover:fill-black" />
+          <.icon name="hero-eye-solid" class="w-5 h-auto fill-zinc-900 hover:fill-black" />
         </div>
         <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-          <.icon name={:eye_slash} solid class="w-5 h-auto fill-zinc-900 hover:fill-black" />
+          <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-zinc-900 hover:fill-black" />
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@
     <div class="flex flex-row mx-4 w-full sm:w-96 justify-between">
       <div class="ml-4 sm:ml-0 flex flex-col space-y-2">
         <div class="flex items-center">
-          <%= checkbox(f, :remember_me, class: "h-4 w-4 rounded border-zinc-300 text-orange-500 fill-orange-500 focus:ring-orange-500") %>
+          <%= checkbox(f, :remember_me, class: "size-4 rounded border-zinc-300 text-orange-500 fill-orange-500 focus:ring-orange-500") %>
           <%= label(f, :remember_me, gettext("Remember me"), class: "ml-2 block text-sm text-zinc-900") %>
         </div>
       </div>
diff --git a/lib/atomic_web/templates/user_setup/edit.html.heex b/lib/atomic_web/templates/user_setup/edit.html.heex
index df4dbf5d1..686b451fd 100644
--- a/lib/atomic_web/templates/user_setup/edit.html.heex
+++ b/lib/atomic_web/templates/user_setup/edit.html.heex
@@ -12,7 +12,7 @@
     <%= if @changeset.action do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
diff --git a/lib/atomic_web/views/helpers.ex b/lib/atomic_web/views/helpers.ex
index 75bdce693..5fca71f43 100644
--- a/lib/atomic_web/views/helpers.ex
+++ b/lib/atomic_web/views/helpers.ex
@@ -3,8 +3,7 @@ defmodule AtomicWeb.Helpers do
   A module with helper functions to display data in views
   """
   use Phoenix.HTML
-
-  import AtomicWeb.Gettext
+  use Gettext, backend: AtomicWeb.Gettext
 
   alias Timex.Format.DateTime.Formatters.Relative
 
diff --git a/mix.exs b/mix.exs
index 338e8792a..5101de7e2 100644
--- a/mix.exs
+++ b/mix.exs
@@ -62,11 +62,20 @@ defmodule Atomic.MixProject do
       # frontend
       {:tailwind, "~> 0.1", runtime: Mix.env() == :dev},
       {:tailwind_formatter, "~> 0.3.7", only: [:dev, :test], runtime: false},
-      {:heroicons, "~> 0.5.3"},
       {:esbuild, "~> 0.4", runtime: Mix.env() == :dev},
       {:flop_phoenix, "~> 0.20.0"},
       {:phoenix_storybook, "~> 0.5.6"},
 
+      # icons
+      {:heroicons,
+       github: "tailwindlabs/heroicons",
+       tag: "v2.1.5",
+       sparse: "optimized",
+       app: false,
+       compile: false,
+       depth: 1,
+       override: true},
+
       # monitoring
       {:telemetry_metrics, "~> 0.6"},
       {:telemetry_poller, "~> 1.0"},
diff --git a/mix.lock b/mix.lock
index 2d2480764..70db7f132 100644
--- a/mix.lock
+++ b/mix.lock
@@ -14,22 +14,22 @@
   "decimal": {:hex, :decimal, "2.1.1", "5611dca5d4b2c3dd497dec8f68751f1f1a54755e8ed2a966c2633cf885973ad6", [:mix], [], "hexpm", "53cfe5f497ed0e7771ae1a475575603d77425099ba5faef9394932b35020ffcc"},
   "doctest_formatter": {:hex, :doctest_formatter, "0.2.1", "61d5674463ae0bf3249f58ae965c33f24e304662b03e7ebc1d46ceab584b545c", [:mix], [], "hexpm", "b2dad6d81b36800a4fd22888adcfdd97c955d9acf20d57cedc92c638125925a6"},
   "earmark": {:hex, :earmark, "1.4.47", "7e7596b84fe4ebeb8751e14cbaeaf4d7a0237708f2ce43630cfd9065551f94ca", [:mix], [], "hexpm", "3e96bebea2c2d95f3b346a7ff22285bc68a99fbabdad9b655aa9c6be06c698f8"},
-  "ecto": {:hex, :ecto, "3.11.2", "e1d26be989db350a633667c5cda9c3d115ae779b66da567c68c80cfb26a8c9ee", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3c38bca2c6f8d8023f2145326cc8a80100c3ffe4dcbd9842ff867f7fc6156c65"},
-  "ecto_sql": {:hex, :ecto_sql, "3.11.3", "4eb7348ff8101fbc4e6bbc5a4404a24fecbe73a3372d16569526b0cf34ebc195", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.11.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.6", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.16 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e5f36e3d736b99c7fee3e631333b8394ade4bafe9d96d35669fca2d81c2be928"},
+  "ecto": {:hex, :ecto, "3.12.3", "1a9111560731f6c3606924c81c870a68a34c819f6d4f03822f370ea31a582208", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9efd91506ae722f95e48dc49e70d0cb632ede3b7a23896252a60a14ac6d59165"},
+  "ecto_sql": {:hex, :ecto_sql, "3.12.0", "73cea17edfa54bde76ee8561b30d29ea08f630959685006d9c6e7d1e59113b7d", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.12", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.7", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.19 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "dc9e4d206f274f3947e96142a8fdc5f69a2a6a9abb4649ef5c882323b6d512f0"},
   "elixir_make": {:hex, :elixir_make, "0.8.4", "4960a03ce79081dee8fe119d80ad372c4e7badb84c493cc75983f9d3bc8bde0f", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.0", [hex: :certifi, repo: "hexpm", optional: true]}], "hexpm", "6e7f1d619b5f61dfabd0a20aa268e575572b542ac31723293a4c1a567d5ef040"},
   "elixlsx": {:hex, :elixlsx, "0.5.1", "3b4129c7059c7bd2ed4e2ff5f6c485410ab125058bee2e9de6e0eb8417176803", [:mix], [], "hexpm", "25d778d43ea1ae86df8dd20170842d324086c0cab40503eb484a3779a6e2254c"},
   "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"},
   "ex_machina": {:hex, :ex_machina, "2.7.0", "b792cc3127fd0680fecdb6299235b4727a4944a09ff0fa904cc639272cd92dc7", [:mix], [{:ecto, "~> 2.2 or ~> 3.0", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_sql, "~> 3.0", [hex: :ecto_sql, repo: "hexpm", optional: true]}], "hexpm", "419aa7a39bde11894c87a615c4ecaa52d8f107bbdd81d810465186f783245bf8"},
-  "expo": {:hex, :expo, "1.0.0", "647639267e088717232f4d4451526e7a9de31a3402af7fcbda09b27e9a10395a", [:mix], [], "hexpm", "18d2093d344d97678e8a331ca0391e85d29816f9664a25653fd7e6166827827c"},
+  "expo": {:hex, :expo, "1.1.0", "f7b9ed7fb5745ebe1eeedf3d6f29226c5dd52897ac67c0f8af62a07e661e5c75", [:mix], [], "hexpm", "fbadf93f4700fb44c331362177bdca9eeb8097e8b0ef525c9cc501cb9917c960"},
   "faker": {:hex, :faker, "0.18.0", "943e479319a22ea4e8e39e8e076b81c02827d9302f3d32726c5bf82f430e6e14", [:mix], [], "hexpm", "bfbdd83958d78e2788e99ec9317c4816e651ad05e24cfd1196ce5db5b3e81797"},
-  "file_system": {:hex, :file_system, "1.0.0", "b689cc7dcee665f774de94b5a832e578bd7963c8e637ef940cd44327db7de2cd", [:mix], [], "hexpm", "6752092d66aec5a10e662aefeed8ddb9531d79db0bc145bb8c40325ca1d8536d"},
+  "file_system": {:hex, :file_system, "1.0.1", "79e8ceaddb0416f8b8cd02a0127bdbababe7bf4a23d2a395b983c1f8b3f73edd", [:mix], [], "hexpm", "4414d1f38863ddf9120720cd976fce5bdde8e91d8283353f0e31850fa89feb9e"},
   "floki": {:hex, :floki, "0.36.2", "a7da0193538c93f937714a6704369711998a51a6164a222d710ebd54020aa7a3", [:mix], [], "hexpm", "a8766c0bc92f074e5cb36c4f9961982eda84c5d2b8e979ca67f5c268ec8ed580"},
   "flop": {:hex, :flop, "0.17.2", "9408f71a91350f8904e221a6b82e4429acee5aba5c1abbfd7901d2465b7aa44c", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}], "hexpm", "8bd987e353bffff3687cc7203bfdeb83942d8de6172dc833d651438d477115fc"},
   "flop_phoenix": {:hex, :flop_phoenix, "0.20.0", "acb2d94c79a2184a6c78c542fc552b0a14565a06f4e48479ded9dced398277dc", [:mix], [{:flop, ">= 0.17.1 and < 0.22.0", [hex: :flop, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.6.0 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "b7a328e2aa634278560973bdaac4eebcb326f945a5832c02413730c1cbc4417f"},
   "gen_stage": {:hex, :gen_stage, "1.2.1", "19d8b5e9a5996d813b8245338a28246307fd8b9c99d1237de199d21efc4c76a1", [:mix], [], "hexpm", "83e8be657fa05b992ffa6ac1e3af6d57aa50aace8f691fcf696ff02f8335b001"},
-  "gettext": {:hex, :gettext, "0.25.0", "98a95a862a94e2d55d24520dd79256a15c87ea75b49673a2e2f206e6ebc42e5d", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "38e5d754e66af37980a94fb93bb20dcde1d2361f664b0a19f01e87296634051f"},
+  "gettext": {:hex, :gettext, "0.26.1", "38e14ea5dcf962d1fc9f361b63ea07c0ce715a8ef1f9e82d3dfb8e67e0416715", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "01ce56f188b9dc28780a52783d6529ad2bc7124f9744e571e1ee4ea88bf08734"},
   "hackney": {:hex, :hackney, "1.20.1", "8d97aec62ddddd757d128bfd1df6c5861093419f8f7a4223823537bad5d064e2", [:rebar3], [{:certifi, "~> 2.12.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.4.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "fe9094e5f1a2a2c0a7d10918fee36bfec0ec2a979994cff8cfe8058cd9af38e3"},
-  "heroicons": {:hex, :heroicons, "0.5.5", "c2bcb05a90f010df246a5a2a2b54cac15483b5de137b2ef0bead77fcdf06e21a", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:phoenix_live_view, ">= 0.18.2", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "2f4bf929440fecd5191ba9f40e5009b0f75dc993d765c0e4d068fcb7026d6da1"},
+  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "ad0ad1f6d51bd64dcd67e363d2b2833a8de25154", [tag: "v2.1.5", sparse: "optimized"]},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
   "inflex": {:hex, :inflex, "2.0.0", "db69d542b8fdb23ac667f9bc0c2395a3983fa2da6ae2efa7ab5dc541928f7a75", [:mix], [], "hexpm", "c018852409bd48b03ad96ed53594186bc074bdd1519043a0ad1fa5697aac4399"},
   "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
@@ -56,25 +56,25 @@
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
   "phoenix_view": {:hex, :phoenix_view, "2.0.4", "b45c9d9cf15b3a1af5fb555c674b525391b6a1fe975f040fb4d913397b31abf4", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "4e992022ce14f31fe57335db27a28154afcc94e9983266835bb3040243eb620b"},
   "plug": {:hex, :plug, "1.16.1", "40c74619c12f82736d2214557dedec2e9762029b2438d6d175c5074c933edc9d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a13ff6b9006b03d7e33874945b2755253841b238c34071ed85b0e86057f8cddc"},
-  "plug_cowboy": {:hex, :plug_cowboy, "2.7.1", "87677ffe3b765bc96a89be7960f81703223fe2e21efa42c125fcd0127dd9d6b2", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "02dbd5f9ab571b864ae39418db7811618506256f6d13b4a45037e5fe78dc5de3"},
+  "plug_cowboy": {:hex, :plug_cowboy, "2.7.2", "fdadb973799ae691bf9ecad99125b16625b1c6039999da5fe544d99218e662e4", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "245d8a11ee2306094840c000e8816f0cbed69a23fc0ac2bcf8d7835ae019bb2f"},
   "plug_crypto": {:hex, :plug_crypto, "1.2.5", "918772575e48e81e455818229bf719d4ab4181fcbf7f85b68a35620f78d89ced", [:mix], [], "hexpm", "26549a1d6345e2172eb1c233866756ae44a9609bd33ee6f99147ab3fd87fd842"},
-  "postgrex": {:hex, :postgrex, "0.19.0", "f7d50e50cb42e0a185f5b9a6095125a9ab7e4abccfbe2ab820ab9aa92b71dbab", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "dba2d2a0a8637defbf2307e8629cb2526388ba7348f67d04ec77a5d6a72ecfae"},
+  "postgrex": {:hex, :postgrex, "0.19.1", "73b498508b69aded53907fe48a1fee811be34cc720e69ef4ccd568c8715495ea", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "8bac7885a18f381e091ec6caf41bda7bb8c77912bb0e9285212829afe5d8a8f8"},
   "qrcode_ex": {:hex, :qrcode_ex, "0.1.1", "8907a7558325babd30f7f43ff85a0169ef65c30820d68e90d792802318f9a062", [:mix], [], "hexpm", "9eb0b397fb3a1c3b16e55b6de6f845a0b4e7b7100ade39eb59fad98fb62455a7"},
   "quantum": {:hex, :quantum, "3.5.3", "ee38838a07761663468145f489ad93e16a79440bebd7c0f90dc1ec9850776d99", [:mix], [{:crontab, "~> 1.1", [hex: :crontab, repo: "hexpm", optional: false]}, {:gen_stage, "~> 0.14 or ~> 1.0", [hex: :gen_stage, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:telemetry_registry, "~> 0.2", [hex: :telemetry_registry, repo: "hexpm", optional: false]}], "hexpm", "500fd3fa77dcd723ed9f766d4a175b684919ff7b6b8cfd9d7d0564d58eba8734"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
-  "swoosh": {:hex, :swoosh, "1.16.10", "04be6e2eb1a31aa0aa21a731175c81cc3998189456a92daf13d44a5c754afcf5", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "756be04db173c0cbe318f1dfe2bcc88aa63aed78cf5a4b02b61b36ee11fc716a"},
+  "swoosh": {:hex, :swoosh, "1.17.0", "4a082a6ce4d60b1f48ffa725c8da0e2304504569ff550f4ed2d088c923039cb0", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "659b8bc25f7483b872d051a7f0731fb8d5312165be0d0302a3c783b566b0a290"},
   "tailwind": {:hex, :tailwind, "0.2.3", "277f08145d407de49650d0a4685dc062174bdd1ae7731c5f1da86163a24dfcdb", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "8e45e7a34a676a7747d04f7913a96c770c85e6be810a1d7f91e713d3a3655b5d"},
   "tailwind_formatter": {:hex, :tailwind_formatter, "0.3.7", "2728d031e6803dfddf63f1dd7c64b5b9fd70ffdf635709c50f47589f4fb48861", [:mix], [{:phoenix_live_view, ">= 0.17.6", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "3d91ac4d4622505b09c0f4678512281515b4fbe7644f012da1bd2722f5880185"},
-  "telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"},
+  "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
   "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.2", "2caabe9344ec17eafe5403304771c3539f3b6e2f7fb6a6f602558c825d0d0bfb", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9b43db0dc33863930b9ef9d27137e78974756f5f198cae18409970ed6fa5b561"},
   "telemetry_poller": {:hex, :telemetry_poller, "1.1.0", "58fa7c216257291caaf8d05678c8d01bd45f4bdbc1286838a28c4bb62ef32999", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9eb9d9cbfd81cbd7cdd24682f8711b6e2b691289a0de6826e58452f28c103c8f"},
   "telemetry_registry": {:hex, :telemetry_registry, "0.3.2", "701576890320be6428189bff963e865e8f23e0ff3615eade8f78662be0fc003c", [:mix, :rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e7ed191eb1d115a3034af8e1e35e4e63d5348851d556646d46ca3d1b4e16bab9"},
   "timex": {:hex, :timex, "3.7.11", "bb95cb4eb1d06e27346325de506bcc6c30f9c6dea40d1ebe390b262fad1862d1", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:gettext, "~> 0.20", [hex: :gettext, repo: "hexpm", optional: false]}, {:tzdata, "~> 1.1", [hex: :tzdata, repo: "hexpm", optional: false]}], "hexpm", "8b9024f7efbabaf9bd7aa04f65cf8dcd7c9818ca5737677c7b76acbc6a94d1aa"},
-  "tzdata": {:hex, :tzdata, "1.1.1", "20c8043476dfda8504952d00adac41c6eda23912278add38edc140ae0c5bcc46", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "a69cec8352eafcd2e198dea28a34113b60fdc6cb57eb5ad65c10292a6ba89787"},
+  "tzdata": {:hex, :tzdata, "1.1.2", "45e5f1fcf8729525ec27c65e163be5b3d247ab1702581a94674e008413eef50b", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "cec7b286e608371602318c414f344941d5eb0375e14cfdab605cca2fe66cba8b"},
   "unicode_util_compat": {:hex, :unicode_util_compat, "0.7.0", "bc84380c9ab48177092f43ac89e4dfa2c6d62b40b8bd132b1059ecc7232f9a78", [:rebar3], [], "hexpm", "25eee6d67df61960cf6a794239566599b09e17e668d3700247bc498638152521"},
   "waffle": {:hex, :waffle, "1.1.9", "8ce5ca9e59fa5491da67a2df57b8711d93223df3c3e5c21ad2acdedc41a0f51a", [:mix], [{:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:ex_aws_s3, "~> 2.1", [hex: :ex_aws_s3, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: false]}, {:sweet_xml, "~> 0.6", [hex: :sweet_xml, repo: "hexpm", optional: true]}], "hexpm", "307c63cfdfb4624e7c423868a128ccfcb0e5291ae73a9deecb3a10b7a3eb277c"},
   "waffle_ecto": {:hex, :waffle_ecto, "0.0.12", "e5c17c49b071b903df71861c642093281123142dc4e9908c930db3e06795b040", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:waffle, "~> 1.0", [hex: :waffle, repo: "hexpm", optional: false]}], "hexpm", "585fe6371057066d2e8e3383ddd7a2437ff0668caf3f4cbf5a041e0de9837168"},
   "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
-  "websock_adapter": {:hex, :websock_adapter, "0.5.6", "0437fe56e093fd4ac422de33bf8fc89f7bc1416a3f2d732d8b2c8fd54792fe60", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "e04378d26b0af627817ae84c92083b7e97aca3121196679b73c73b99d0d133ea"},
+  "websock_adapter": {:hex, :websock_adapter, "0.5.7", "65fa74042530064ef0570b75b43f5c49bb8b235d6515671b3d250022cb8a1f9e", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "d0f478ee64deddfec64b800673fd6e0c8888b079d9f3444dd96d2a98383bdbd1"},
 }
diff --git a/storybook/components/badge.story.exs b/storybook/components/badge.story.exs
index 458e228a0..bc1cdf8e9 100644
--- a/storybook/components/badge.story.exs
+++ b/storybook/components/badge.story.exs
@@ -294,7 +294,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :xs,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xs
             },
             slots: [
@@ -306,7 +306,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :sm,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :sm
             },
             slots: [
@@ -318,7 +318,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :md,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :md
             },
             slots: [
@@ -330,7 +330,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :lg,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :lg
             },
             slots: [
@@ -342,7 +342,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :xl,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xl
             },
             slots: [
@@ -422,7 +422,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :icon_left,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :left
             },
             slots: [
@@ -435,7 +435,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :icon_right,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :right
             },
             slots: [
@@ -454,8 +454,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :mini,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :mini
+              icon: "hero-radio-mini"
             },
             slots: [
               """
@@ -467,8 +466,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :solid,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :solid
+              icon: "hero-radio-solid"
             },
             slots: [
               """
@@ -480,8 +478,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :outline,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :outline
+              icon: "hero-radio"
             },
             slots: [
               """
diff --git a/storybook/components/button.story.exs b/storybook/components/button.story.exs
index 1b4f1cbc5..ec7dc08b0 100644
--- a/storybook/components/button.story.exs
+++ b/storybook/components/button.story.exs
@@ -699,7 +699,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :xs,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xs
             },
             slots: [
@@ -711,7 +711,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :sm,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :sm
             },
             slots: [
@@ -723,7 +723,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :md,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :md
             },
             slots: [
@@ -735,7 +735,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :lg,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :lg
             },
             slots: [
@@ -747,7 +747,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :xl,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xl
             },
             slots: [
@@ -766,7 +766,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :icon_left,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :left
             },
             slots: [
@@ -779,7 +779,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :icon_right,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :right
             },
             slots: [
@@ -798,8 +798,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :mini,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :mini
+              icon: "hero-radio-mini"
             },
             slots: [
               """
@@ -811,8 +810,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :solid,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :solid
+              icon: "hero-radio-solid"
             },
             slots: [
               """
@@ -824,8 +822,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :outline,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :outline
+              icon: "hero-radio"
             },
             slots: [
               """
diff --git a/storybook/components/dropdown.story.exs b/storybook/components/dropdown.story.exs
index 919383a56..0136bfca0 100644
--- a/storybook/components/dropdown.story.exs
+++ b/storybook/components/dropdown.story.exs
@@ -78,11 +78,10 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
             id: :button,
             attributes: %{
               id: "dropdown-solid-icons",
-              icon_variant: :solid,
               items: [
-                %{name: "Profile", navigate: "#", icon: :user},
-                %{name: "Settings", navigate: "#", icon: :cog},
-                %{name: "Logout", navigate: "#", icon: :arrow_left_on_rectangle}
+                %{name: "Profile", navigate: "#", icon: "hero-users-solid"},
+                %{name: "Settings", navigate: "#", icon: "hero-cog-solid"},
+                %{name: "Logout", navigate: "#", icon: "hero-arrow-left-on-rectangle-solid"}
               ],
               orientation: :down
             },
@@ -98,11 +97,10 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
             id: :top,
             attributes: %{
               id: "dropdown-outline-icons",
-              icon_variant: :outline,
               items: [
-                %{name: "Profile", navigate: "#", icon: :user},
-                %{name: "Settings", navigate: "#", icon: :cog},
-                %{name: "Logout", navigate: "#", icon: :arrow_left_on_rectangle}
+                %{name: "Profile", navigate: "#", icon: "hero-user"},
+                %{name: "Settings", navigate: "#", icon: "hero-cog"},
+                %{name: "Logout", navigate: "#", icon: "hero-arrow-left-on-rectangle"}
               ],
               orientation: :top
             },
diff --git a/storybook/components/icon.story.exs b/storybook/components/icon.story.exs
index 364c37b08..3a3924dbb 100644
--- a/storybook/components/icon.story.exs
+++ b/storybook/components/icon.story.exs
@@ -7,7 +7,7 @@ defmodule AtomicWeb.Storybook.Components.Icon do
 
   def template do
     """
-    <span class="h-8 w-8">
+    <span class="size-8">
       <.lsb-variation />
     </span>
     """
@@ -18,31 +18,35 @@ defmodule AtomicWeb.Storybook.Components.Icon do
       %Variation{
         id: :default,
         attributes: %{
-          name: :academic_cap
+          name: "hero-academic-cap"
         }
       },
       %Variation{
         id: :outline,
         description: "Outline",
         attributes: %{
-          name: :academic_cap,
-          outline: true
+          name: "hero-academic-cap"
         }
       },
       %Variation{
         id: :solid,
         description: "Solid",
         attributes: %{
-          name: :academic_cap,
-          solid: true
+          name: "hero-academic-cap-solid"
         }
       },
       %Variation{
         id: :mini,
         description: "Mini",
         attributes: %{
-          name: :academic_cap,
-          mini: true
+          name: "hero-academic-cap-mini"
+        }
+      },
+      %Variation{
+        id: :micro,
+        description: "Micro",
+        attributes: %{
+          name: "hero-academic-cap-micro"
         }
       }
     ]
diff --git a/storybook/components/tabs.story.exs b/storybook/components/tabs.story.exs
index 81224f96c..0d941a43d 100644
--- a/storybook/components/tabs.story.exs
+++ b/storybook/components/tabs.story.exs
@@ -67,11 +67,11 @@ defmodule AtomicWeb.Storybook.Components.Tabs do
         slots: [
           """
           <.tab active={true}>
-            <.icon name={:home} class="h-5 w-5 mr-2" />
+            <.icon name="hero-home" class="size-5 mr-2" />
             All
           </.tab>
           <.tab>
-            <.icon name={:star} class="h-5 w-5 mr-2" />
+            <.icon name="hero-star" class="size-5 mr-2" />
             Following
           </.tab>
           """
diff --git a/storybook/icons.story.exs b/storybook/icons.story.exs
deleted file mode 100644
index 6ff438190..000000000
--- a/storybook/icons.story.exs
+++ /dev/null
@@ -1,27 +0,0 @@
-defmodule Storybook.Icons do
-  use PhoenixStorybook.Story, :page
-
-  import AtomicWeb.Components.Icon
-
-  def doc, do: "Icons available to use in the application."
-
-  def render(assigns) do
-    ~H"""
-    <div>
-      <div class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-x-6 gap-y-4 pb-16 pt-10 sm:pt-11 md:pt-12">
-        <%= for {name, _} <- Heroicons.__info__(:functions) |> Enum.drop(2) do %>
-          <div class="text-center">
-            <div onclick={"navigator.clipboard.writeText(':#{name}');"} title={"Click to copy :#{name}"} class="flex flex-col items-center justify-center rounded-lg border px-4 py-6 text-center hover:cursor-pointer hover:bg-gray-50">
-              <span class="block h-12 w-12">
-                <.icon name={name} />
-              </span>
-              <p class="mx-2 max-w-full truncate py-2 text-xs text-gray-500">:<%= name %></p>
-            </div>
-            <p class="py-2 text-sm"><%= name |> to_string() |> String.replace("_", " ") |> String.capitalize() %></p>
-          </div>
-        <% end %>
-      </div>
-    </div>
-    """
-  end
-end

From 464b4bdb1b8ddd2aadc5c41175e3e2e5ac2bca88 Mon Sep 17 00:00:00 2001
From: Rui Lopes <ruilopesm19@gmail.com>
Date: Wed, 18 Sep 2024 14:17:40 +0100
Subject: [PATCH 3/4] feat: support for tabler icons (#534)

---
 assets/css/components/button.css    | 100 ++--------------------------
 assets/tailwind.config.js           |  39 ++++++++++-
 lib/atomic_web/components/icon.ex   |   8 ++-
 lib/atomic_web/config.ex            |   2 +-
 mix.exs                             |   2 +
 mix.lock                            |   1 +
 storybook/components/icon.story.exs |  34 ++++++----
 7 files changed, 75 insertions(+), 111 deletions(-)

diff --git a/assets/css/components/button.css b/assets/css/components/button.css
index afe6bc3ab..73abda247 100644
--- a/assets/css/components/button.css
+++ b/assets/css/components/button.css
@@ -159,19 +159,19 @@
 }
 
 .atomic-button__icon--xs {
-  @apply w-3 h-3;
+  @apply !size-3
 }
 .atomic-button__icon--sm {
-  @apply w-4 h-4;
+  @apply !size-4
 }
 .atomic-button__icon--md {
-  @apply w-5 h-5;
+  @apply !size-5
 }
 .atomic-button__icon--lg {
-  @apply w-5 h-5;
+  @apply !size-5
 }
 .atomic-button__icon--xl {
-  @apply w-6 h-6;
+  @apply !size-6
 }
 
 /* Buttons - with full width */
@@ -185,96 +185,6 @@
   @apply flex items-center gap-2 whitespace-nowrap;
 }
 
-/* Icon Button */
-
-.atomic-icon-button {
-  @apply inline-block p-2 rounded-full;
-}
-
-/* Icon Buttons - colors */
-
-.atomic-icon-button--primary {
-  @apply text-primary-600 dark:text-primary-500;
-}
-.atomic-icon-button--secondary {
-  @apply text-secondary-600 dark:text-secondary-500;
-}
-.atomic-icon-button--gray {
-  @apply text-gray-600 dark:text-gray-500;
-}
-.atomic-icon-button--info {
-  @apply text-info-600 dark:text-info-500;
-}
-.atomic-icon-button--success {
-  @apply text-success-600 dark:text-success-500;
-}
-.atomic-icon-button--warning {
-  @apply text-warning-600 dark:text-warning-500;
-}
-.atomic-icon-button--danger {
-  @apply text-danger-600 dark:text-danger-500;
-}
-
-/* Icon Buttons - background colors */
-
-.atomic-icon-button-bg--primary {
-  @apply hover:bg-primary-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--secondary {
-  @apply hover:bg-secondary-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--gray {
-  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--info {
-  @apply hover:bg-info-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--success {
-  @apply hover:bg-success-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--warning {
-  @apply hover:bg-warning-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--danger {
-  @apply hover:bg-danger-50 dark:hover:bg-gray-800;
-}
-
-/* Icon Button - sizes */
-
-.atomic-icon-button--xs {
-  @apply w-9 h-9;
-}
-.atomic-icon-button--sm {
-  @apply w-10 h-10;
-}
-.atomic-icon-button--md {
-  @apply w-11 h-11;
-}
-.atomic-icon-button--lg {
-  @apply w-12 h-12;
-}
-.atomic-icon-button--xl {
-  @apply w-14 h-14;
-}
-
-/* Icon Button - spinner */
-
-.atomic-icon-button-spinner--xs {
-  @apply w-5 h-5;
-}
-.atomic-icon-button-spinner--sm {
-  @apply w-6 h-6;
-}
-.atomic-icon-button-spinner--md {
-  @apply w-7 h-7;
-}
-.atomic-icon-button-spinner--lg {
-  @apply w-8 h-8;
-}
-.atomic-icon-button-spinner--xl {
-  @apply w-10 h-10;
-}
-
 /* Button - disabled */
 
 .atomic-button--disabled {
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 36902c3c6..201fc0ee5 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -89,6 +89,7 @@ module.exports = {
           } else if (name.endsWith("-micro")) {
             size = theme("spacing.4")
           }
+
           return {
             [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
             "-webkit-mask": `var(--hero-${name})`,
@@ -101,7 +102,43 @@ module.exports = {
             "height": size
           }
         }
-      }, {values})
+      }, { values })
+    }),
+
+    // Embeds Tabler icons (https://tablericons.com) into app.css bundle
+    plugin(function ({ matchComponents, theme }) {
+      let iconsDir = path.join(__dirname, "../deps/tabler_icons/icons")
+      let values = {}
+      let icons = [
+        ["", "/outline"],
+        ["-filled", "/filled"],
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
+        })
+      })
+      matchComponents({
+        "tabler": ({ name, fullPath }) => {
+          let content = fs.readFileSync(fullPath).toString()
+            .replace(/\r?\n|\r/g, "")
+            .replace(/width="[^"]*"/, "")
+            .replace(/height="[^"]*"/, "");
+
+          return {
+            [`--tabler-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--tabler-${name})`,
+            "mask": `var(--tabler-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": theme("spacing.5"),
+            "height": theme("spacing.5")
+          }
+        }
+      }, { values })
     })
   ]
 }
diff --git a/lib/atomic_web/components/icon.ex b/lib/atomic_web/components/icon.ex
index ee97acc1a..124270b59 100644
--- a/lib/atomic_web/components/icon.ex
+++ b/lib/atomic_web/components/icon.ex
@@ -2,7 +2,7 @@ defmodule AtomicWeb.Components.Icon do
   @moduledoc """
   A component for rendering icons.
 
-  An icon can either be from the Heroicons or Tabler Icons set.
+  An icon can either be from the [Heroicons](https://heroicons.com) or [Tabler Icons](https://tablericons.com) set.
   """
   use Phoenix.Component
 
@@ -14,4 +14,10 @@ defmodule AtomicWeb.Components.Icon do
     <span class={[@name, @class]} />
     """
   end
+
+  def icon(%{name: "tabler-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
 end
diff --git a/lib/atomic_web/config.ex b/lib/atomic_web/config.ex
index 4b2f3dc34..949f8b9c0 100644
--- a/lib/atomic_web/config.ex
+++ b/lib/atomic_web/config.ex
@@ -92,7 +92,7 @@ defmodule AtomicWeb.Config do
       %{
         key: :organizations,
         title: "Organizations",
-        icon: "hero-building-office",
+        icon: "tabler-affiliate",
         url: Routes.organization_index_path(conn, :index),
         tabs: []
       }
diff --git a/mix.exs b/mix.exs
index 5101de7e2..1b692ebf3 100644
--- a/mix.exs
+++ b/mix.exs
@@ -75,6 +75,8 @@ defmodule Atomic.MixProject do
        compile: false,
        depth: 1,
        override: true},
+      {:tabler_icons,
+       github: "tabler/tabler-icons", sparse: "icons", app: false, compile: false, depth: 1},
 
       # monitoring
       {:telemetry_metrics, "~> 0.6"},
diff --git a/mix.lock b/mix.lock
index 70db7f132..da0d37fd4 100644
--- a/mix.lock
+++ b/mix.lock
@@ -64,6 +64,7 @@
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "swoosh": {:hex, :swoosh, "1.17.0", "4a082a6ce4d60b1f48ffa725c8da0e2304504569ff550f4ed2d088c923039cb0", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "659b8bc25f7483b872d051a7f0731fb8d5312165be0d0302a3c783b566b0a290"},
+  "tabler_icons": {:git, "https://github.com/tabler/tabler-icons.git", "405bcfffba9cecf08e686145367dcdc9cc44eb5c", [sparse: "icons"]},
   "tailwind": {:hex, :tailwind, "0.2.3", "277f08145d407de49650d0a4685dc062174bdd1ae7731c5f1da86163a24dfcdb", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "8e45e7a34a676a7747d04f7913a96c770c85e6be810a1d7f91e713d3a3655b5d"},
   "tailwind_formatter": {:hex, :tailwind_formatter, "0.3.7", "2728d031e6803dfddf63f1dd7c64b5b9fd70ffdf635709c50f47589f4fb48861", [:mix], [{:phoenix_live_view, ">= 0.17.6", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "3d91ac4d4622505b09c0f4678512281515b4fbe7644f012da1bd2722f5880185"},
   "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
diff --git a/storybook/components/icon.story.exs b/storybook/components/icon.story.exs
index 3a3924dbb..d89ddf180 100644
--- a/storybook/components/icon.story.exs
+++ b/storybook/components/icon.story.exs
@@ -16,37 +16,45 @@ defmodule AtomicWeb.Storybook.Components.Icon do
   def variations do
     [
       %Variation{
-        id: :default,
+        id: :hero_outline,
+        description: "Heroicon outline",
         attributes: %{
           name: "hero-academic-cap"
         }
       },
       %Variation{
-        id: :outline,
-        description: "Outline",
+        id: :hero_solid,
+        description: "Heroicon solid",
         attributes: %{
-          name: "hero-academic-cap"
+          name: "hero-academic-cap-solid"
         }
       },
       %Variation{
-        id: :solid,
-        description: "Solid",
+        id: :hero_mini,
+        description: "Heroicon mini",
         attributes: %{
-          name: "hero-academic-cap-solid"
+          name: "hero-academic-cap-mini"
         }
       },
       %Variation{
-        id: :mini,
-        description: "Mini",
+        id: :hero_micro,
+        description: "Heroicon micro",
         attributes: %{
-          name: "hero-academic-cap-mini"
+          name: "hero-academic-cap-micro"
         }
       },
       %Variation{
-        id: :micro,
-        description: "Micro",
+        id: :tabler_outline,
+        description: "Tabler outline",
         attributes: %{
-          name: "hero-academic-cap-micro"
+          name: "tabler-affiliate"
+        }
+      },
+      %Variation{
+        id: :tabler_filled,
+        description: "Tabler filled",
+        attributes: %{
+          name: "tabler-affiliate-filled"
         }
       }
     ]

From 783805fca80c72802bd621f7b66366c527b87072 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <30806591+nunom27@users.noreply.github.com>
Date: Thu, 19 Sep 2024 19:11:16 +0100
Subject: [PATCH 4/4] refactor: improve calendar performance and style (#518)

---
 .../components/calendar/calendar.ex           | 383 ------------------
 lib/atomic_web/components/calendar/month.ex   | 152 -------
 lib/atomic_web/components/calendar/week.ex    | 175 --------
 .../components}/calendar_utils.ex             |  22 +-
 .../live/calendar_live/components/month.ex    | 195 +++++++++
 .../live/calendar_live/components/week.ex     | 264 ++++++++++++
 lib/atomic_web/live/calendar_live/show.ex     | 294 +++++++++++++-
 .../live/calendar_live/show.html.heex         |  82 +++-
 storybook/components/calendar.story.exs       |  32 --
 9 files changed, 833 insertions(+), 766 deletions(-)
 delete mode 100644 lib/atomic_web/components/calendar/calendar.ex
 delete mode 100644 lib/atomic_web/components/calendar/month.ex
 delete mode 100644 lib/atomic_web/components/calendar/week.ex
 rename lib/atomic_web/{views => live/calendar_live/components}/calendar_utils.ex (68%)
 create mode 100644 lib/atomic_web/live/calendar_live/components/month.ex
 create mode 100644 lib/atomic_web/live/calendar_live/components/week.ex
 delete mode 100644 storybook/components/calendar.story.exs

diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
deleted file mode 100644
index 3f1c3cd49..000000000
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ /dev/null
@@ -1,383 +0,0 @@
-defmodule AtomicWeb.Components.Calendar do
-  @moduledoc false
-  use AtomicWeb, :component
-
-  import AtomicWeb.CalendarUtils
-  import AtomicWeb.Components.CalendarMonth
-  import AtomicWeb.Components.CalendarWeek
-  import AtomicWeb.Components.Dropdown
-
-  alias Timex.Duration
-
-  attr :id, :string, default: "calendar", required: false
-  attr :current_path, :string, required: true
-  attr :activities, :list, required: true
-  attr :mode, :string, required: true
-  attr :timezone, :string, required: true
-  attr :params, :map, required: true
-
-  def calendar(
-        %{
-          current_path: current_path,
-          params: params,
-          mode: mode,
-          timezone: timezone
-        } = assigns
-      ) do
-    assigns =
-      assigns
-      |> assign_date(current_path, params, timezone)
-
-    assigns =
-      case mode do
-        "week" ->
-          assigns
-          |> assigns_week(current_path, timezone, params)
-
-        "month" ->
-          assigns
-          |> assigns_month(current_path, timezone, params)
-
-        _ ->
-          assigns
-          |> assigns_month(current_path, timezone, params)
-      end
-
-    ~H"""
-    <div id={@id} x-data="{ mode_view: false }" class="flex-col lg:flex lg:h-full">
-      <header class="my-4 flex flex-col sm:flex-row">
-        <div class="flex-1">
-          <div class="relative z-20 flex w-full items-end justify-between lg:flex-none">
-            <span class="font-base pl-2 text-base text-zinc-900">
-              <%= if @mode == "month" do %>
-                <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
-              <% else %>
-                <%= case date_to_month(@beginning_of_week) == date_to_month(@end_of_week) do %>
-                  <% true -> %>
-                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %></time>
-                  <% _ -> %>
-                    <%= if date_to_year(@beginning_of_week) == date_to_year(@end_of_week) do %>
-                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
-                    <% else %>
-                      <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
-                    <% end %>
-                <% end %>
-              <% end %>
-            </span>
-            <div class="flex items-center">
-              <div class="flex items-center md:items-stretch">
-                <.link patch={"#{if @mode == "month" do @previous_month_path else @previous_week_path end}"}>
-                  <button type="button" class="flex items-center justify-center py-2 pr-4 pl-3 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
-                    <span class="sr-only">Previous month</span>
-                    <.icon name="hero-chevron-left-solid" class="size-3 sm:h-5 sm:w-5" />
-                  </button>
-                </.link>
-                <.link patch={"#{if @mode == "month" do @present_month_path else @present_week_path end}"}>
-                  <button type="button" class="hidden h-full px-3.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 hover:text-zinc-900 focus:relative md:block">
-                    <%= gettext("Today") %>
-                  </button>
-                </.link>
-                <.link patch={"#{if @mode == "month" do @next_month_path else @next_week_path end}"}>
-                  <button type="button" class="flex items-center justify-center py-2 pr-3 pl-4 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
-                    <span class="sr-only">Next month</span>
-                    <.icon name="hero-chevron-right-solid" class="size-3 sm:h-5 sm:w-5" />
-                  </button>
-                </.link>
-              </div>
-              <div class="hidden md:ml-4 md:flex md:items-center">
-                <div class="relative">
-                  <.dropdown
-                    id="calendar-dropdown"
-                    orientation={:down}
-                    items={[
-                      %{name: gettext("Week view"), patch: @current_week_path},
-                      %{name: gettext("Month view"), patch: @current_month_path}
-                    ]}
-                  >
-                    <:wrapper>
-                      <.button color={:white} icon="hero-chevron-down-solid" icon_position={:right}>
-                        <%= if @mode == "month" do %>
-                          <%= gettext("Month view") %>
-                        <% else %>
-                          <%= gettext("Week view") %>
-                        <% end %>
-                      </.button>
-                    </:wrapper>
-                  </.dropdown>
-
-                  <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
-                    <div class="py-1" role="none">
-                      <.link patch={@current_week_path}>
-                        <button
-                          type="button"
-                          @click="mode_view = false"
-                          class={
-                            "block px-4 w-full py-2 text-sm #{if @mode == "week" do
-                              "hidden"
-                            else
-                              "block"
-                            end}"
-                          }
-                          role="menuitem"
-                          tabindex="-1"
-                          id="menu-0-item-2"
-                        >
-                          <%= gettext("Week view") %>
-                        </button>
-                      </.link>
-                      <.link patch={@current_month_path}>
-                        <button
-                          type="button"
-                          @click="mode_view = false"
-                          class={
-                            "block px-4 w-full py-2 text-sm #{if @mode == "month" do
-                              "hidden"
-                            else
-                              "block"
-                            end}"
-                          }
-                          role="menuitem"
-                          tabindex="-1"
-                          id="menu-0-item-3"
-                        >
-                          <%= gettext("Month view") %>
-                        </button>
-                      </.link>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="relative ml-6 md:hidden">
-                <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
-                  <span class="sr-only">Open menu</span>
-                  <.icon name="hero-ellipsis-horizontal-solid" class="size-3 sm:h-5 sm:w-5" />
-                </button>
-                <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <div class="py-1" role="none">
-                    <.link patch={"#{if @mode == "month" do @present_month_path else @present_week_path end}"}>
-                      <button type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
-                        <%= gettext("Today") %>
-                      </button>
-                    </.link>
-                    <div class="mx-4 border-b border-zinc-200" />
-                    <.link patch={@present_week_path}>
-                      <button
-                        type="button"
-                        @click="mode_view = false"
-                        class={
-                          "block px-4 w-full py-2 text-sm #{if @mode == "week" do
-                            "hidden"
-                          else
-                            "block"
-                          end}"
-                        }
-                        role="menuitem"
-                        tabindex="-1"
-                        id="menu-1-item-2"
-                      >
-                        <%= gettext("Week view") %>
-                      </button>
-                    </.link>
-                    <.link patch={@present_month_path}>
-                      <button
-                        type="button"
-                        @click="mode_view = false"
-                        class={
-                          "block px-4 w-full py-2 text-sm #{if @mode == "month" do
-                            "hidden"
-                          else
-                            "block"
-                          end}"
-                        }
-                        role="menuitem"
-                        tabindex="-1"
-                        id="menu-1-item-3"
-                      >
-                        <%= gettext("Month view") %>
-                      </button>
-                    </.link>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <%= if @mode == "month" do %>
-        <.calendar_month current_path={@current_path} params={@params} activities={@activities} beginning_of_month={@beginning_of_month} end_of_month={@end_of_month} timezone={@timezone} />
-      <% else %>
-        <.calendar_week current_path={@current_path} current={@current} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
-      <% end %>
-    </div>
-    """
-  end
-
-  defp assign_date(assigns, current_path, params, timezone) do
-    current = current_from_params(timezone, params)
-
-    current_year =
-      current
-      |> date_to_year()
-
-    current_month =
-      current
-      |> date_to_month()
-
-    current_day =
-      current
-      |> date_to_day()
-
-    present_year =
-      Timex.today(timezone)
-      |> date_to_year()
-
-    present_month =
-      Timex.today(timezone)
-      |> date_to_month()
-
-    present_day =
-      Timex.today(timezone)
-      |> date_to_day()
-
-    present_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: present_day,
-        month: present_month,
-        year: present_year
-      })
-
-    current_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: current_day,
-        month: current_month,
-        year: current_year
-      })
-
-    present_month_path =
-      build_path(current_path, %{
-        mode: "month",
-        day: present_day,
-        month: present_month,
-        year: present_year
-      })
-
-    current_month_path =
-      build_path(current_path, %{
-        mode: "month",
-        day: current_day,
-        month: current_month,
-        year: current_year
-      })
-
-    assigns
-    |> assign(present_month_path: present_month_path)
-    |> assign(present_week_path: present_week_path)
-    |> assign(current_month_path: current_month_path)
-    |> assign(current_week_path: current_week_path)
-    |> assign(current: current)
-  end
-
-  defp assigns_week(assigns, current_path, timezone, params) do
-    current = current_from_params(timezone, params)
-    beginning_of_week = Timex.beginning_of_week(current)
-    end_of_week = Timex.end_of_week(current)
-
-    previous_week_date =
-      current
-      |> Timex.add(Duration.from_days(-7))
-
-    next_week_date =
-      current
-      |> Timex.add(Duration.from_days(7))
-
-    previous_week_day =
-      previous_week_date
-      |> date_to_day()
-
-    previous_week_month =
-      previous_week_date
-      |> date_to_month()
-
-    previous_week_year =
-      previous_week_date
-      |> date_to_year()
-
-    next_week_day =
-      next_week_date
-      |> date_to_day()
-
-    next_week_month =
-      next_week_date
-      |> date_to_month()
-
-    next_week_year =
-      next_week_date
-      |> date_to_year()
-
-    previous_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: previous_week_day,
-        month: previous_week_month,
-        year: previous_week_year
-      })
-
-    next_week_path =
-      build_path(current_path, %{
-        mode: "week",
-        day: next_week_day,
-        month: next_week_month,
-        year: next_week_year
-      })
-
-    assigns
-    |> assign(beginning_of_week: beginning_of_week)
-    |> assign(end_of_week: end_of_week)
-    |> assign(previous_week_path: previous_week_path)
-    |> assign(next_week_path: next_week_path)
-  end
-
-  defp assigns_month(assigns, current_path, timezone, params) do
-    current = current_from_params(timezone, params)
-    beginning_of_month = Timex.beginning_of_month(current)
-    end_of_month = Timex.end_of_month(current)
-
-    last_day_previous_month =
-      beginning_of_month
-      |> Timex.add(Duration.from_days(-1))
-
-    first_day_next_month =
-      end_of_month
-      |> Timex.add(Duration.from_days(1))
-
-    previous_month =
-      last_day_previous_month
-      |> date_to_month()
-
-    next_month =
-      first_day_next_month
-      |> date_to_month()
-
-    previous_month_year =
-      last_day_previous_month
-      |> date_to_year()
-
-    next_month_year =
-      first_day_next_month
-      |> date_to_year()
-
-    previous_month_path =
-      build_path(current_path, %{mode: "month", month: previous_month, year: previous_month_year})
-
-    next_month_path =
-      build_path(current_path, %{mode: "month", month: next_month, year: next_month_year})
-
-    assigns
-    |> assign(beginning_of_month: beginning_of_month)
-    |> assign(end_of_month: end_of_month)
-    |> assign(previous_month_path: previous_month_path)
-    |> assign(next_month_path: next_month_path)
-  end
-end
diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
deleted file mode 100644
index f19675812..000000000
--- a/lib/atomic_web/components/calendar/month.ex
+++ /dev/null
@@ -1,152 +0,0 @@
-defmodule AtomicWeb.Components.CalendarMonth do
-  @moduledoc false
-  use AtomicWeb, :component
-
-  import AtomicWeb.CalendarUtils
-  import AtomicWeb.Components.Badge
-
-  attr :id, :string, default: "calendar-month", required: false
-  attr :current_path, :string, required: true
-  attr :activities, :list, required: true
-  attr :timezone, :string, required: true
-  attr :beginning_of_month, :string, required: true
-  attr :end_of_month, :string, required: true
-  attr :params, :map, required: true
-
-  def calendar_month(assigns) do
-    ~H"""
-    <div id={@id} class="rounded-lg shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
-      <div class="grid grid-cols-7 gap-px rounded-t-lg border-b border-zinc-300 bg-zinc-200 text-center text-xs font-semibold leading-6 text-zinc-700 lg:flex-none">
-        <div class="rounded-tl-lg bg-white py-2">
-          M<span class="sr-only sm:not-sr-only">on</span>
-        </div>
-        <div class="bg-white py-2">
-          T<span class="sr-only sm:not-sr-only">ue</span>
-        </div>
-        <div class="bg-white py-2">
-          W<span class="sr-only sm:not-sr-only">ed</span>
-        </div>
-        <div class="bg-white py-2">
-          T<span class="sr-only sm:not-sr-only">hu</span>
-        </div>
-        <div class="bg-white py-2">
-          F<span class="sr-only sm:not-sr-only">ri</span>
-        </div>
-        <div class="bg-white py-2">
-          S<span class="sr-only sm:not-sr-only">at</span>
-        </div>
-        <div class="rounded-tr-lg bg-white py-2">
-          S<span class="sr-only sm:not-sr-only">un</span>
-        </div>
-      </div>
-      <div class="flex bg-zinc-200 text-xs leading-6 text-zinc-700 lg:flex-auto">
-        <div class="grid w-full grid-cols-7 gap-px overflow-hidden rounded-b-lg">
-          <%= for i <- 0..@end_of_month.day - 1 do %>
-            <.day index={i} params={@params} current_path={@current_path} activities={@activities} date={Timex.shift(@beginning_of_month, days: i)} timezone={@timezone} />
-          <% end %>
-        </div>
-      </div>
-    </div>
-    <div class="py-4 lg:hidden">
-      <ol class="divide-y divide-zinc-200 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
-        <%= for activity <- get_date_activities(@activities, current_from_params(@timezone, @params)) do %>
-          <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-            <li class="group flex p-4 pr-6 focus-within:bg-zinc-50 hover:bg-zinc-50">
-              <div class="flex-auto">
-                <p class="font-semibold text-zinc-900">
-                  <%= activity.title %>
-                </p>
-                <div class="flex flex-row items-center gap-x-2 pt-2">
-                  <.link navigate={Routes.activity_index_path(AtomicWeb.Endpoint, :index)}>
-                    <.badge variant={:outline} color={:primary} label="Activity" />
-                  </.link>
-                  <time datetime={activity.start} class="flex items-center text-zinc-700">
-                    <.icon name="hero-clock-solid" class="size-5 mr-2 text-zinc-400" />
-                    <%= Calendar.strftime(activity.start, "%Hh%M") %>
-                  </time>
-                </div>
-              </div>
-            </li>
-          </.link>
-        <% end %>
-      </ol>
-    </div>
-    """
-  end
-
-  defp day(%{index: index, date: date, timezone: timezone} = assigns) do
-    weekday = Timex.weekday(date, :monday)
-    today? = Timex.compare(date, Timex.today(timezone))
-
-    class =
-      class_list([
-        {"relative py-2 px-3 lg:min-h-[110px] lg:flex hidden", true},
-        {col_start(weekday), index == 0},
-        {"bg-white", today? >= 0},
-        {"bg-zinc-50 text-zinc-500", today? < 0}
-      ])
-
-    assigns =
-      assigns
-      |> assign(disabled: today? < 0)
-      |> assign(:text, Timex.format!(date, "{D}"))
-      |> assign(:class, class)
-      |> assign(:date, date)
-      |> assign(:today?, today?)
-      |> assign(:weekday, weekday)
-
-    ~H"""
-    <div class={@class}>
-      <time date-time={@date} class={
-          "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
-            "flex size-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
-          end}"
-        }>
-        <%= @text %>
-      </time>
-      <ol class="mt-3 w-full">
-        <%= for activity <- get_date_activities(@activities, @date) do %>
-          <li>
-            <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex">
-              <p class="flex-auto truncate font-medium text-zinc-600 group-hover:text-zinc-800">
-                <%= activity.title %>
-              </p>
-              <time datetime={activity.start} class="mx-2 hidden flex-none text-zinc-600 group-hover:text-zinc-800 xl:block"><%= Calendar.strftime(activity.start, "%Hh") %></time>
-            </.link>
-          </li>
-        <% end %>
-      </ol>
-    </div>
-    <.link patch={build_path(@current_path, %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)})} class={"#{if @index == 0 do col_start(@weekday) end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden"}>
-      <time
-        date-time={@date}
-        class={
-          "ml-auto lg:ml-0 #{if current_from_params(@timezone, @params) == @date do
-            "ml-auto flex size-6 items-center justify-center rounded-full #{if @today? == 0 do
-              "bg-orange-700"
-            else
-              "bg-zinc-900"
-            end} text-white shirk-0"
-          else
-            if @today? == 0 do
-              "text-orange-700"
-            end
-          end}"
-        }
-      >
-        <%= @text %>
-      </time>
-      <%= if (activities = get_date_activities(@activities, @date)) != [] do %>
-        <span class="sr-only"><%= Enum.count(activities) %> events</span>
-        <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
-          <%= for activity <- activities do %>
-            <%= if activity do %>
-              <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-zinc-700"></span>
-            <% end %>
-          <% end %>
-        </span>
-      <% end %>
-    </.link>
-    """
-  end
-end
diff --git a/lib/atomic_web/components/calendar/week.ex b/lib/atomic_web/components/calendar/week.ex
deleted file mode 100644
index 2362b81eb..000000000
--- a/lib/atomic_web/components/calendar/week.ex
+++ /dev/null
@@ -1,175 +0,0 @@
-defmodule AtomicWeb.Components.CalendarWeek do
-  @moduledoc false
-  use AtomicWeb, :component
-
-  alias Timex.Duration
-
-  import AtomicWeb.CalendarUtils
-
-  attr :id, :string, default: "calendar-week", required: false
-  attr :current_path, :string, required: true
-  attr :activities, :list, required: true
-  attr :timezone, :string, required: true
-  attr :current, :string, required: true
-  attr :beginning_of_week, :string, required: true
-  attr :end_of_week, :string, required: true
-  attr :params, :map, required: true
-
-  def calendar_week(%{timezone: timezone} = assigns) do
-    assigns =
-      assigns
-      |> assign(week_mobile: ["M", "T", "W", "T", "F", "S", "S"])
-      |> assign(week: ["Mon ", "Tue ", "Wed ", "Thu ", "Fri ", "Sat ", "Sun "])
-      |> assign(today: Timex.today(timezone))
-
-    ~H"""
-    <div id={@id} class="flex flex-auto flex-col overflow-auto rounded-lg bg-white">
-      <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
-        <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
-          <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
-            <%= for idx <- 0..6 do %>
-              <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
-              <.link patch={build_path(@current_path, %{"mode" => "week", "day" => day_of_week |> date_to_day(), "month" => @params["month"], "year" => @params["year"]})} class="flex flex-col items-center py-2">
-                <%= Enum.at(@week_mobile, idx) %>
-                <span class={
-                  "#{if @today == day_of_week do
-                    "bg-orange-700 rounded-full text-white"
-                  else
-                    if day_of_week |> date_to_day() == @params["day"] do
-                      "bg-zinc-900 rounded-full text-white"
-                    else
-                      "text-zinc-900"
-                    end
-                  end} flex items-center justify-center w-8 h-8 mt-1 font-semibold"
-                }>
-                  <%= day_of_week |> date_to_day() %>
-                </span>
-              </.link>
-            <% end %>
-          </div>
-          <div class="-mr-px hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
-            <div class="col-end-1 w-12"></div>
-            <%= for idx <- 0..6 do %>
-              <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
-              <div id={"day-of-week-#{idx}"} class="flex h-12 items-center justify-center">
-                <span class={
-                  if @today == day_of_week do
-                    "flex items-baseline"
-                  else
-                    ""
-                  end
-                }>
-                  <%= Enum.at(@week, idx) %>
-                  <span class={
-                    "#{if @today == day_of_week do
-                      "flex ml-1.5 w-8 h-8 text-white bg-orange-700 rounded-full"
-                    else
-                      "text-zinc-900"
-                    end} items-center justify-center font-semibold"
-                  }>
-                    <%= day_of_week |> date_to_day() %>
-                  </span>
-                </span>
-              </div>
-            <% end %>
-          </div>
-        </div>
-        <div class="flex flex-auto">
-          <div class="left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
-          <div class="grid flex-auto grid-cols-1 grid-rows-1">
-            <!-- Horizontal lines -->
-            <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(30, minmax(2.5rem, 1fr))">
-              <div class="row-end-1 h-6"></div>
-              <%= for hour <- hours() do %>
-                <div>
-                  <div class="left-0 -mt-2.5 -ml-14 w-12 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
-                </div>
-                <div></div>
-              <% end %>
-            </div>
-            <!-- Vertical lines -->
-            <div class="col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-zinc-100 sm:grid sm:grid-cols-7">
-              <div class="col-start-1 row-span-full"></div>
-              <div class="col-start-2 row-span-full"></div>
-              <div class="col-start-3 row-span-full"></div>
-              <div class="col-start-4 row-span-full"></div>
-              <div class="col-start-5 row-span-full"></div>
-              <div class="col-start-6 row-span-full"></div>
-              <div class="col-start-7 row-span-full"></div>
-            </div>
-            <!-- Events -->
-            <ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:hidden" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
-              <.day date={@current} idx={0} activities={@activities} />
-            </ol>
-            <ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
-              <%= for idx <- 0..6 do %>
-                <.day date={Timex.shift(@beginning_of_week, days: idx)} idx={idx} activities={@activities} />
-              <% end %>
-            </ol>
-          </div>
-        </div>
-      </div>
-    </div>
-    """
-  end
-
-  defp day(assigns) do
-    ~H"""
-    <%= for activity <- get_date_activities(@activities, @date) do %>
-      <li class={"#{col_start(@idx + 1)} relative mt-px flex"} style={"grid-row: #{calc_row_start(activity.start)} / span #{calc_time(activity.start, activity.finish)}"}>
-        <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
-          <div class="group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100">
-            <p class="order-1 font-semibold text-orange-500">
-              <%= activity.title %>
-            </p>
-            <p class="text-orange-500 group-hover:text-orange-800">
-              <time datetime={activity.start}><%= Calendar.strftime(activity.start, "%Hh%M") %></time>
-            </p>
-          </div>
-        </.link>
-      </li>
-    <% end %>
-    """
-  end
-
-  defp calc_row_start(start) do
-    hours =
-      start
-      |> Timex.format!("{h24}")
-      |> String.to_integer()
-
-    minutes =
-      start
-      |> Timex.format!("{m}")
-      |> String.to_integer()
-
-    minutes = (minutes * 20 / 60) |> trunc()
-
-    2 + (hours - 8) * 20 + minutes
-  end
-
-  defp calc_time(start, finish) do
-    time_diff = (NaiveDateTime.diff(finish, start) / 3600) |> trunc()
-
-    2 + 20 * time_diff
-  end
-
-  defp hours,
-    do: [
-      "8H",
-      "9H",
-      "10H",
-      "11H",
-      "12H",
-      "13H",
-      "14H",
-      "15H",
-      "16H",
-      "17H",
-      "18H",
-      "19H",
-      "20H",
-      "21H",
-      "22H"
-    ]
-end
diff --git a/lib/atomic_web/views/calendar_utils.ex b/lib/atomic_web/live/calendar_live/components/calendar_utils.ex
similarity index 68%
rename from lib/atomic_web/views/calendar_utils.ex
rename to lib/atomic_web/live/calendar_live/components/calendar_utils.ex
index f75ea4035..3c56e7c9e 100644
--- a/lib/atomic_web/views/calendar_utils.ex
+++ b/lib/atomic_web/live/calendar_live/components/calendar_utils.ex
@@ -1,28 +1,24 @@
-defmodule AtomicWeb.CalendarUtils do
+defmodule AtomicWeb.CalendarLive.Components.CalendarUtils do
   @moduledoc """
   Calendar utils functions to be used on all views.
   """
   use Phoenix.HTML
   use Timex
 
-  def build_beggining_date(timezone, "month", params) do
-    current = current_from_params(timezone, params)
-    Timex.beginning_of_month(current) |> Timex.to_naive_datetime()
+  def build_beggining_date(_timezone, "month", current_date) do
+    Timex.beginning_of_month(current_date) |> Timex.to_naive_datetime()
   end
 
-  def build_beggining_date(timezone, "week", params) do
-    current = current_from_params(timezone, params)
-    Timex.beginning_of_week(current) |> Timex.to_naive_datetime()
+  def build_beggining_date(_timezone, "week", current_date) do
+    Timex.beginning_of_week(current_date) |> Timex.to_naive_datetime()
   end
 
-  def build_ending_date(timezone, "month", params) do
-    current = current_from_params(timezone, params)
-    Timex.end_of_month(current) |> Timex.to_naive_datetime()
+  def build_ending_date(_timezone, "month", current_date) do
+    Timex.end_of_month(current_date) |> Timex.to_naive_datetime()
   end
 
-  def build_ending_date(timezone, "week", params) do
-    current = current_from_params(timezone, params)
-    Timex.end_of_week(current) |> Timex.to_naive_datetime()
+  def build_ending_date(_timezone, "week", current_date) do
+    Timex.end_of_week(current_date) |> Timex.to_naive_datetime()
   end
 
   def current_from_params(timezone, %{"day" => day, "month" => month, "year" => year}) do
diff --git a/lib/atomic_web/live/calendar_live/components/month.ex b/lib/atomic_web/live/calendar_live/components/month.ex
new file mode 100644
index 000000000..7ef4b728f
--- /dev/null
+++ b/lib/atomic_web/live/calendar_live/components/month.ex
@@ -0,0 +1,195 @@
+defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
+  @moduledoc false
+  use AtomicWeb, :component
+
+  import AtomicWeb.CalendarLive.Components.CalendarUtils
+
+  attr :id, :string, default: "calendar-month", required: false
+  attr :current_date, :string, required: true
+  attr :activities, :list, required: true
+  attr :timezone, :string, required: true
+  attr :beginning_of_month, :string, required: true
+  attr :end_of_month, :string, required: true
+  attr :params, :map, required: true
+
+  def calendar_month(assigns) do
+    ~H"""
+    <div id={@id} class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+      <div class="grid grid-cols-7 gap-px border-b border-zinc-300 bg-zinc-200 text-center text-xs font-semibold leading-6 text-zinc-700 lg:flex-none">
+        <div class="bg-white py-2">
+          M<span class="sr-only sm:not-sr-only">on</span>
+        </div>
+        <div class="bg-white py-2">
+          T<span class="sr-only sm:not-sr-only">ue</span>
+        </div>
+        <div class="bg-white py-2">
+          W<span class="sr-only sm:not-sr-only">ed</span>
+        </div>
+        <div class="bg-white py-2">
+          T<span class="sr-only sm:not-sr-only">hu</span>
+        </div>
+        <div class="bg-white py-2">
+          F<span class="sr-only sm:not-sr-only">ri</span>
+        </div>
+        <div class="bg-white py-2">
+          S<span class="sr-only sm:not-sr-only">at</span>
+        </div>
+        <div class="bg-white py-2">
+          S<span class="sr-only sm:not-sr-only">un</span>
+        </div>
+      </div>
+      <div class="flex bg-zinc-200 text-xs leading-6 text-zinc-700 lg:flex-auto">
+        <div class="grid w-full grid-cols-7 grid-rows-6 gap-px overflow-hidden">
+          <.day :for={date <- generate_days_list(@beginning_of_month, @end_of_month)} params={@params} date={date} current_date={@current_date} activities={@activities} timezone={@timezone} />
+        </div>
+      </div>
+    </div>
+    <%= if length(get_date_activities(@activities, @current_date)) > 0 do %>
+      <div class="px-4 py-10 sm:px-6 lg:hidden">
+        <ol class="divide-y divide-zinc-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
+          <li :for={activity <- get_date_activities(@activities, @current_date)}>
+            <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
+              <div class="flex-auto">
+                <p class="font-semibold text-zinc-900">
+                  <%= activity.title %>
+                </p>
+                <div class="flex flex-row items-center gap-x-2 pt-2">
+                  <time datetime={activity.start} class="mt-2 flex items-center text-zinc-700">
+                    <.icon name="hero-clock-solid" class="size-5 mr-2 text-zinc-400" />
+                    <%= Calendar.strftime(activity.start, "%Hh%M") %>
+                  </time>
+                </div>
+              </div>
+            </.link>
+          </li>
+        </ol>
+      </div>
+    <% end %>
+    """
+  end
+
+  # Generates a list of days for the calendar month,
+  # including days from the previous and next months to fill the 6x7 grid.
+  #
+  # Example
+  #
+  # iex> generate_days_list(~D[2024-09-01], ~D[2024-09-30])
+  # [
+  # ~D[2024-08-26],
+  # ~D[2024-08-27],
+  # ~D[2024-08-28],
+  # ~D[2024-08-29],
+  # ~D[2024-08-30],
+  # ~D[2024-08-31],
+  # ~D[2024-09-01],
+  # ~D[2024-09-02],
+  # ...,
+  # ~D[2024-09-29],
+  # ~D[2024-09-30],
+  # ~D[2024-10-01],
+  # ~D[2024-10-02],
+  # ~D[2024-10-03],
+  # ~D[2024-10-04],
+  # ~D[2024-10-05],
+  # ~D[2024-10-06]
+  # ]
+
+  defp generate_days_list(beginning_of_month, end_of_month) do
+    days_from_last_month = Timex.weekday(beginning_of_month, :monday)
+
+    past_month =
+      for i <- 1..(days_from_last_month - 1) do
+        Timex.shift(Timex.shift(beginning_of_month, days: -days_from_last_month), days: i)
+      end
+
+    current_month =
+      for i <- 0..(end_of_month.day - 1) do
+        Timex.shift(beginning_of_month, days: i)
+      end
+
+    next_month =
+      for i <- 1..(42 - Timex.days_in_month(beginning_of_month) - days_from_last_month + 1) do
+        Timex.shift(end_of_month, days: i)
+      end
+
+    if days_from_last_month == 1 do
+      current_month ++ next_month
+    else
+      past_month ++ current_month ++ next_month
+    end
+  end
+
+  defp day(%{date: date, timezone: timezone} = assigns) do
+    today? = Timex.compare(date, Timex.today(timezone))
+
+    assigns =
+      assigns
+      |> assign(:text, Timex.format!(date, "{D}"))
+      |> assign(:date, date)
+      |> assign(:today?, today?)
+
+    ~H"""
+    <div class={[
+      "relative py-2 px-3 lg:h-28 lg:flex flex-col hidden",
+      @current_date.month == @date.month && "bg-white",
+      @current_date.month != @date.month && "bg-zinc-50 text-zinc-500"
+    ]}>
+      <time date-time={@date} class={
+          "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
+            "flex size-6 items-center justify-center rounded-full bg-primary-600 font-semibold text-white"
+          end}"
+        }>
+        <%= @text %>
+      </time>
+      <ol class="mt-2 -space-y-1">
+        <li :for={activity <- get_date_activities(@activities, @date) |> Enum.take(2)}>
+          <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)} class="group flex">
+            <p class="flex-auto truncate font-medium text-zinc-900 group-hover:text-primary-600">
+              <%= activity.title %>
+            </p>
+            <time datetime={activity.start} class="ml-3 hidden flex-none text-zinc-500 group-hover:text-primary-600 xl:block"><%= Calendar.strftime(activity.start, "%Hh") %></time>
+          </.link>
+        </li>
+        <li :if={Enum.count(get_date_activities(@activities, @date)) > 2} class="text-zinc-500 hover:text-primary-600">
+          <button type="button" phx-click="show-more" phx-value-date={@date}>
+            +<%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
+          </button>
+        </li>
+      </ol>
+    </div>
+    <.link
+      phx-click="set-current-date"
+      phx-value-date={@date}
+      class={[
+        "min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 focus:z-10 lg:hidden",
+        @current_date.month == @date.month && "hover:bg-zinc-100",
+        @current_date.month != @date.month && "bg-zinc-50"
+      ]}
+    >
+      <time
+        date-time={@date}
+        class={[
+          "ml-auto lg:ml-0",
+          @current_date == @date && "flex size-6 items-center justify-center rounded-full text-white shrink-0",
+          @current_date == @date && @today? == 0 && "bg-primary-600",
+          @current_date == @date && @today? != 0 && "bg-zinc-900",
+          @current_date != @date && @today? == 0 && "text-primary-700",
+          @current_date != @date && @date.month != @current_date.month && "text-zinc-500"
+        ]}
+      >
+        <%= @text %>
+      </time>
+      <%= if (activities = get_date_activities(@activities, @date)) != [] do %>
+        <span class="sr-only"><%= Enum.count(activities) %> events</span>
+        <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
+          <%= for activity <- Enum.take(activities, 3) do %>
+            <%= if activity do %>
+              <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-zinc-400"></span>
+            <% end %>
+          <% end %>
+        </span>
+      <% end %>
+    </.link>
+    """
+  end
+end
diff --git a/lib/atomic_web/live/calendar_live/components/week.ex b/lib/atomic_web/live/calendar_live/components/week.ex
new file mode 100644
index 000000000..692c59fce
--- /dev/null
+++ b/lib/atomic_web/live/calendar_live/components/week.ex
@@ -0,0 +1,264 @@
+defmodule AtomicWeb.CalendarLive.Components.CalendarWeek do
+  @moduledoc false
+  use AtomicWeb, :component
+
+  alias Timex.Duration
+
+  import AtomicWeb.CalendarLive.Components.CalendarUtils
+
+  attr :id, :string, default: "calendar-week", required: false
+  attr :current_date, :string, required: true
+  attr :activities, :list, required: true
+  attr :timezone, :string, required: true
+  attr :beginning_of_week, :string, required: true
+  attr :end_of_week, :string, required: true
+  attr :params, :map, required: true
+
+  def calendar_week(%{timezone: timezone} = assigns) do
+    days_of_week =
+      for idx <- 0..6 do
+        day_of_week = assigns.beginning_of_week |> Timex.add(Duration.from_days(idx))
+        day_of_week_mobile = Enum.at(["M", "T", "W", "T", "F", "S", "S"], idx)
+        {day_of_week, day_of_week_mobile}
+      end
+
+    assigns =
+      assigns
+      |> assign(week: ["Mon ", "Tue ", "Wed ", "Thu ", "Fri ", "Sat ", "Sun "])
+      |> assign(today: Timex.today(timezone))
+      |> assign(days_of_week: days_of_week)
+
+    ~H"""
+    <div id={@id} class="isolate flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
+      <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
+        <div class="sticky top-0 z-30 flex-none bg-white shadow ring-1 ring-black ring-opacity-5 sm:pr-8">
+          <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
+            <%= for {day_of_week, day_of_week_mobile} <- @days_of_week do %>
+              <.link phx-click="set-current-date" phx-value-date={day_of_week} class="flex flex-col items-center py-2">
+                <%= day_of_week_mobile %>
+                <span class={[
+                  "flex items-center justify-center w-8 h-8 mt-1 font-semibold",
+                  @today == day_of_week && "bg-primary-700 rounded-full text-white",
+                  @today != day_of_week && day_of_week == @current_date && "bg-zinc-900 rounded-full text-white",
+                  @today != day_of_week && day_of_week != @current_date && "text-zinc-900"
+                ]}>
+                  <%= day_of_week |> date_to_day() %>
+                </span>
+              </.link>
+            <% end %>
+          </div>
+          <div class="-mr-px hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
+            <div class="col-end-1 w-14"></div>
+            <%= for idx <- 0..6 do %>
+              <% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
+              <div id={"day-of-week-#{idx}"} class="flex h-12 items-center justify-center">
+                <span class={@today == day_of_week && "flex items-baseline"}>
+                  <%= Enum.at(@week, idx) %>
+                  <span class={[
+                    "items-center justify-center font-semibold",
+                    @today == day_of_week && "flex ml-1.5 w-8 h-8 text-white bg-primary-600 rounded-full",
+                    @today != day_of_week && "text-zinc-900"
+                  ]}>
+                    <%= day_of_week |> date_to_day() %>
+                  </span>
+                </span>
+              </div>
+            <% end %>
+          </div>
+        </div>
+        <div class="flex flex-auto">
+          <div class="sticky left-0 z-20 w-14 flex-none bg-white ring-1 ring-zinc-100"></div>
+          <div class="grid flex-auto grid-cols-1 grid-rows-1">
+            <!-- Horizontal lines -->
+            <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))">
+              <div class="row-end-1 h-7"></div>
+              <%= for hour <- hours() do %>
+                <div>
+                  <div class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
+                </div>
+                <div></div>
+              <% end %>
+            </div>
+            <!-- Vertical lines -->
+            <div class="col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-zinc-100 sm:grid sm:grid-cols-7">
+              <div class="col-start-1 row-span-full"></div>
+              <div class="col-start-2 row-span-full"></div>
+              <div class="col-start-3 row-span-full"></div>
+              <div class="col-start-4 row-span-full"></div>
+              <div class="col-start-5 row-span-full"></div>
+              <div class="col-start-6 row-span-full"></div>
+              <div class="col-start-7 row-span-full"></div>
+              <div class="col-start-8 row-span-full w-8"></div>
+            </div>
+            <!-- Events -->
+            <ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:hidden" style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr))">
+              <.day date={@current_date} idx={0} activities={@activities} />
+            </ol>
+            <ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7 sm:pr-8" style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto">
+              <%= for idx <- 0..6 do %>
+                <.day date={Timex.shift(@beginning_of_week, days: idx)} idx={idx} activities={@activities} />
+              <% end %>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  defp day(assigns) do
+    assigns =
+      assigns
+      |> assign_activities_positions(get_date_activities(assigns.activities, assigns.date))
+
+    ~H"""
+    <%= for {activity, width, left} <- @activities_with_positions do %>
+      <li class={"#{col_start(@idx + 1)} relative mt-px flex"} style={"
+            grid-row: #{calc_row_start(activity.start)} / span #{calc_time(activity.start, activity.finish)};
+            width: #{width}%;
+            left: #{left}%"}>
+        <.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
+          <div class={[
+            "group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-primary-50 p-2 text-xs leading-5 hover:bg-primary-100 sm:overflow-y-hidden sm:hover:overflow-y-auto",
+            width != 100 && "sm:hover:z-10 sm:hover:w-max sm:max-w-[117px]"
+          ]}>
+            <p class="text-primary-500 order-1 font-semibold">
+              <%= activity.title %>
+            </p>
+            <p class="text-primary-500 group-hover:text-primary-800">
+              <time datetime={activity.start}><%= Calendar.strftime(activity.start, "%Hh%M") %></time>
+            </p>
+          </div>
+        </.link>
+      </li>
+    <% end %>
+    """
+  end
+
+  defp assign_activities_positions(assigns, day_activities) do
+    activities_with_positions =
+      Enum.map(day_activities, fn activity ->
+        # Calculate the width of the activity in percentage
+        width = 1 / (calc_total_overlaps(activity, day_activities) + 1) * 100
+
+        # Calculate the left position of the activity in percentage
+        left =
+          calc_left_amount(
+            activity,
+            day_activities,
+            calc_total_overlaps(activity, day_activities) + 1
+          )
+
+        {activity, width, left}
+      end)
+
+    assign(assigns, :activities_with_positions, activities_with_positions)
+  end
+
+  defp calc_row_start(start) do
+    hours =
+      start
+      |> Timex.format!("{h24}")
+      |> String.to_integer()
+
+    minutes =
+      start
+      |> Timex.format!("{m}")
+      |> String.to_integer()
+
+    hours * 12 + div(minutes, 5) + 2
+  end
+
+  # Each row spans a 5-minute interval.
+  # Calculates the number of grid rows the activity should
+  # span based on the time difference between the start and finish.
+  #
+  # Example
+  #
+  # iex> calc_time(~N[2024-09-11 09:00:00], ~N[2024-09-11 10:00:00])
+  # 12
+
+  defp calc_time(start, finish) do
+    time_diff = (NaiveDateTime.diff(finish, start) / 60) |> trunc()
+
+    if time_diff == 0 do
+      1
+    else
+      div(time_diff, 5)
+    end
+  end
+
+  # Calculates the total number of overlapping activities with the current activity on the same day.
+  #
+  # Example
+  #
+  # iex> activities = [
+  # ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+  # ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
+  # ...> ]
+  # ...>
+  # ...> calc_total_overlaps(
+  # ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+  # ...>   activities
+  # ...> )
+  # 1
+
+  def calc_total_overlaps(current_activity, activities) do
+    current_interval =
+      Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
+
+    activities
+    |> Enum.filter(fn activity ->
+      activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
+
+      activity != current_activity && activity.start.day == current_activity.start.day and
+        Timex.Interval.overlaps?(current_interval, activity_interval)
+    end)
+    |> length()
+  end
+
+  # Calculates the left offset percentage for positioning an activity on the calendar grid.
+  #
+  # The left offset is determined by the number of overlapping activities prior to the current one.
+  #
+  #
+  # Example
+  #
+  # iex> activities = [
+  # ...>   %{start: ~N[2024-09-11 09:00:00], finish: ~N[2024-09-11 10:00:00]},
+  # ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]}
+  # ...> ]
+  # ...>
+  # ...> calc_left_amount(
+  # ...>   %{start: ~N[2024-09-11 09:30:00], finish: ~N[2024-09-11 10:30:00]},
+  # ...>   activities,
+  # ...>   2
+  # ...> )
+  # 50.0
+  defp calc_left_amount(current_activity, activities, activity_total_overlaps) do
+    current_interval =
+      Timex.Interval.new(from: current_activity.start, until: current_activity.finish)
+
+    # Total number of overlaps prior to the current activity
+    total_overlaps =
+      activities
+      |> Enum.take_while(fn activity -> activity != current_activity end)
+      |> Enum.filter(fn activity ->
+        activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
+
+        activity != current_activity && activity.start.day == current_activity.start.day and
+          Timex.Interval.overlaps?(current_interval, activity_interval)
+      end)
+      |> length()
+
+    if total_overlaps > 0 do
+      total_overlaps / activity_total_overlaps * 100
+    else
+      0
+    end
+  end
+
+  defp hours do
+    0..23 |> Enum.map(fn n -> "#{n}H" end)
+  end
+end
diff --git a/lib/atomic_web/live/calendar_live/show.ex b/lib/atomic_web/live/calendar_live/show.ex
index 706b3dc6e..9167d4bfb 100644
--- a/lib/atomic_web/live/calendar_live/show.ex
+++ b/lib/atomic_web/live/calendar_live/show.ex
@@ -2,10 +2,14 @@ defmodule AtomicWeb.CalendarLive.Show do
   @moduledoc false
   use AtomicWeb, :live_view
 
-  import AtomicWeb.CalendarUtils
-  import AtomicWeb.Components.Calendar
+  import AtomicWeb.CalendarLive.Components.CalendarUtils
+  import AtomicWeb.CalendarLive.Components.CalendarMonth
+  import AtomicWeb.CalendarLive.Components.CalendarWeek
+  import AtomicWeb.Components.Dropdown
 
   alias Atomic.Activities
+  alias Atomic.Organizations
+  alias Timex.Duration
 
   @impl true
   def mount(_params, _session, socket) do
@@ -14,7 +18,8 @@ defmodule AtomicWeb.CalendarLive.Show do
 
   @impl true
   def handle_params(params, _, socket) do
-    mode = default_mode(params)
+    mode = Map.get(params, "mode", "month")
+    current_date = Map.get(socket.assigns, :current_date, Timex.today(socket.assigns.timezone))
 
     {:noreply,
      socket
@@ -22,17 +27,286 @@ defmodule AtomicWeb.CalendarLive.Show do
      |> assign(:current_page, :calendar)
      |> assign(:params, params)
      |> assign(:mode, mode)
-     |> assign(:activities, list_activities(socket.assigns.timezone, mode, params))}
+     |> assign(
+       :activities,
+       list_activities(socket.assigns.timezone, mode, current_date, socket.assigns.current_user)
+     )
+     |> assign(:current_path, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+     |> assign(:current_date, current_date)
+     |> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+     |> assigns_week(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
   end
 
-  defp list_activities(timezone, mode, params) do
-    start = build_beggining_date(timezone, mode, params)
-    finish = build_ending_date(timezone, mode, params)
+  @impl true
+  def handle_event("previous", _, socket) do
+    new_date =
+      if socket.assigns.mode == "week" do
+        socket.assigns.current_date |> Timex.add(Duration.from_days(-7))
+      else
+        socket.assigns.beginning_of_month |> Timex.add(Duration.from_days(-1))
+      end
+
+    {:noreply,
+     socket
+     |> assign(
+       :current_date,
+       new_date
+     )
+     |> assign(
+       :activities,
+       list_activities(
+         socket.assigns.timezone,
+         socket.assigns.mode,
+         new_date,
+         socket.assigns.current_user
+       )
+     )
+     |> assigns_dates()}
+  end
+
+  @impl true
+  def handle_event("present", _, socket) do
+    new_date = Timex.today(socket.assigns.timezone)
+
+    {:noreply,
+     socket
+     |> assign(:current_date, new_date)
+     |> assign(
+       :activities,
+       list_activities(
+         socket.assigns.timezone,
+         socket.assigns.mode,
+         new_date,
+         socket.assigns.current_user
+       )
+     )
+     |> assigns_dates()}
+  end
+
+  @impl true
+  def handle_event("next", _, socket) do
+    new_date =
+      if socket.assigns.mode == "week" do
+        socket.assigns.current_date |> Timex.add(Duration.from_days(7))
+      else
+        socket.assigns.end_of_month |> Timex.add(Duration.from_days(1))
+      end
+
+    {:noreply,
+     socket
+     |> assign(:current_date, new_date)
+     |> assign(
+       :activities,
+       list_activities(
+         socket.assigns.timezone,
+         socket.assigns.mode,
+         new_date,
+         socket.assigns.current_user
+       )
+     )
+     |> assigns_dates()}
+  end
+
+  @impl true
+  def handle_event("show-more", %{"date" => date}, socket) do
+    case Timex.parse(date, "{YYYY}-{0M}-{0D}") do
+      {:ok, naive_date} ->
+        date = Timex.to_date(naive_date)
+
+        {:noreply,
+         socket
+         |> assign(:current_date, date)
+         |> push_patch(to: Routes.calendar_show_path(socket, :show, mode: "week"), replace: true)}
+
+      {:error, _reason} ->
+        {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_event("set-current-date", %{"date" => date}, socket) do
+    case Timex.parse(date, "{YYYY}-{0M}-{0D}") do
+      {:ok, naive_date} ->
+        date = Timex.to_date(naive_date)
 
-    Activities.list_activities_from_to(start, finish)
+        date =
+          if date.month != socket.assigns.current_date.month && socket.assigns.mode == "month" do
+            socket.assigns.current_date
+          else
+            date
+          end
+
+        {:noreply,
+         socket
+         |> assign(:current_date, date)}
+
+      {:error, _reason} ->
+        {:noreply, socket}
+    end
+  end
+
+  defp assigns_dates(socket) do
+    if socket.assigns.mode == "week" do
+      assigns_week(socket, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+    else
+      assigns_month(socket, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
+    end
   end
 
-  defp default_mode(params) when is_map_key(params, "mode"), do: params["mode"]
+  defp assigns_month(socket, current_path) do
+    current = socket.assigns.current_date
+    beginning_of_month = Timex.beginning_of_month(current)
+    end_of_month = Timex.end_of_month(current)
+
+    last_day_previous_month =
+      beginning_of_month
+      |> Timex.add(Duration.from_days(-1))
+
+    first_day_next_month =
+      end_of_month
+      |> Timex.add(Duration.from_days(1))
+
+    previous_month =
+      last_day_previous_month
+      |> date_to_month()
+
+    next_month =
+      first_day_next_month
+      |> date_to_month()
 
-  defp default_mode(_params), do: "month"
+    previous_month_year =
+      last_day_previous_month
+      |> date_to_year()
+
+    next_month_year =
+      first_day_next_month
+      |> date_to_year()
+
+    previous_month_path =
+      build_path(current_path, %{mode: "month", month: previous_month, year: previous_month_year})
+
+    next_month_path =
+      build_path(current_path, %{mode: "month", month: next_month, year: next_month_year})
+
+    socket
+    |> assign(beginning_of_month: beginning_of_month)
+    |> assign(end_of_month: end_of_month)
+    |> assign(previous_month_path: previous_month_path)
+    |> assign(next_month_path: next_month_path)
+  end
+
+  defp assigns_week(socket, current_path) do
+    current = socket.assigns.current_date
+    beginning_of_week = Timex.beginning_of_week(current)
+    end_of_week = Timex.end_of_week(current)
+
+    previous_week_date =
+      current
+      |> Timex.add(Duration.from_days(-7))
+
+    next_week_date =
+      current
+      |> Timex.add(Duration.from_days(7))
+
+    previous_week_day =
+      previous_week_date
+      |> date_to_day()
+
+    previous_week_month =
+      previous_week_date
+      |> date_to_month()
+
+    previous_week_year =
+      previous_week_date
+      |> date_to_year()
+
+    next_week_day =
+      next_week_date
+      |> date_to_day()
+
+    next_week_month =
+      next_week_date
+      |> date_to_month()
+
+    next_week_year =
+      next_week_date
+      |> date_to_year()
+
+    previous_week_path =
+      build_path(current_path, %{
+        mode: "week",
+        day: previous_week_day,
+        month: previous_week_month,
+        year: previous_week_year
+      })
+
+    next_week_path =
+      build_path(current_path, %{
+        mode: "week",
+        day: next_week_day,
+        month: next_week_month,
+        year: next_week_year
+      })
+
+    socket
+    |> assign(beginning_of_week: beginning_of_week)
+    |> assign(end_of_week: end_of_week)
+    |> assign(previous_week_path: previous_week_path)
+    |> assign(next_week_path: next_week_path)
+  end
+
+  defp multi_day_activity?(activity) do
+    Timex.diff(activity.finish, activity.start, :days) > 0
+  end
+
+  defp split_activity_by_day(activity) do
+    start_date = Timex.to_date(activity.start)
+    end_date = Timex.to_date(activity.finish)
+
+    Enum.map(0..Timex.diff(end_date, start_date, :days), fn offset ->
+      day_start =
+        if offset > 0 do
+          Timex.shift(activity.start, days: offset) |> Timex.beginning_of_day()
+        else
+          activity.start
+        end
+
+      day_end =
+        if offset == Timex.diff(end_date, start_date, :days) do
+          activity.finish
+        else
+          Timex.end_of_day(day_start)
+        end
+
+      %{activity | start: day_start, finish: day_end}
+    end)
+  end
+
+  defp split_all_activities_by_day(activities) do
+    Enum.map(activities, fn activity ->
+      if multi_day_activity?(activity) do
+        split_activity_by_day(activity)
+      else
+        [activity]
+      end
+    end)
+    |> List.flatten()
+  end
+
+  defp list_activities(timezone, mode, current_date, current_user) do
+    if current_user do
+      organizations_id =
+        Organizations.list_organizations_followed_by_user(current_user.id)
+        |> Enum.map(fn org -> org.id end)
+
+      start = Timex.shift(build_beggining_date(timezone, mode, current_date), days: -7)
+      finish = Timex.shift(build_ending_date(timezone, mode, current_date), days: 7)
+
+      Activities.list_activities_from_to(start, finish)
+      |> Enum.filter(fn activity -> activity.organization_id in organizations_id end)
+      |> split_all_activities_by_day()
+    else
+      []
+    end
+  end
 end
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 4af43197f..8b706aaea 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,3 +1,83 @@
 <.page title="Calendar">
-  <.calendar current_path={Routes.calendar_show_path(@socket, :show)} activities={@activities} params={@params} mode={@mode} timezone={@timezone} />
+  <div class="ring-zinc-900/10 mx-4 overflow-hidden rounded-lg bg-gray-50 ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
+    <div class="lg:flex lg:h-full lg:flex-col">
+      <header class="flex flex-none items-center justify-between border-b border-gray-200 px-6 py-4">
+        <div class="flex-1">
+          <div class="relative flex w-full items-center justify-between lg:flex-none">
+            <span class="text-base font-semibold text-zinc-900">
+              <%= if @mode == "month" do %>
+                <time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
+              <% else %>
+                <%= if date_to_month(@beginning_of_week) == date_to_month(@end_of_week) do %>
+                  <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %></time>
+                <% else %>
+                  <%= if date_to_year(@beginning_of_week) == date_to_year(@end_of_week) do %>
+                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
+                  <% else %>
+                    <time datetime={@beginning_of_week}><%= Timex.format!(@beginning_of_week, "{Mshort} {YYYY}") %> - <%= Timex.format!(@end_of_week, "{Mshort} {YYYY}") %></time>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </span>
+            <div class="flex items-center">
+              <div class="flex items-center rounded-md bg-white shadow-sm md:items-stretch">
+                <button type="button" phx-click="previous" class="flex h-9 w-12 items-center justify-center rounded-l-md border-y border-l border-zinc-300 pr-1 text-zinc-400 hover:text-zinc-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
+                  <span class="sr-only">Previous month</span>
+                  <.icon name="hero-chevron-left-solid" class="size-3 sm:size-5" />
+                </button>
+                <button type="button" phx-click="present" class="hidden border-y border-zinc-300 px-3.5 text-sm font-semibold text-zinc-900 hover:bg-gray-50 focus:relative md:block">
+                  <span><%= gettext("Today") %></span>
+                </button>
+                <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden"></span>
+                <button type="button" phx-click="next" class="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-zinc-300 pl-1 text-zinc-400 hover:text-zinc-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
+                  <span class="sr-only">Next month</span>
+                  <.icon name="hero-chevron-right-solid" class="size-3 sm:size-5" />
+                </button>
+              </div>
+              <div class="relative">
+                <.dropdown
+                  id="calendar-dropdown"
+                  orientation={:down}
+                  items={
+                    [
+                      %{name: gettext("Go to today"), phx_click: "present", class: "md:hidden border-b border-zinc-100"},
+                      # Link that switches mode
+                      %{name: gettext("Week view"), patch: "?mode=week"},
+                      %{name: gettext("Month view"), patch: "?mode=month"}
+                    ]
+                  }
+                >
+                  <:wrapper>
+                    <button class="hidden items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50 md:ml-4 md:flex">
+                      <%= if @mode == "month" do %>
+                        <%= gettext("Month view") %>
+                      <% else %>
+                        <%= gettext("Week view") %>
+                      <% end %>
+                      <span class="size-5 text-zinc-400">
+                        <.icon name="hero-chevron-down-solid" />
+                      </span>
+                    </button>
+                    <button type="button" class="ml-5 md:hidden flex items-center rounded-full border border-transparent py-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
+                      <span class="sr-only">Open menu</span>
+                      <.icon name="hero-ellipsis-horizontal-solid" class="size-5" />
+                    </button>
+                  </:wrapper>
+                </.dropdown>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <%= if @mode == "month" do %>
+        <.calendar_month current_date={@current_date} params={@params} activities={@activities} beginning_of_month={@beginning_of_month} end_of_month={@end_of_month} timezone={@timezone} />
+      <% else %>
+        <.calendar_week current_date={@current_date} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
+      <% end %>
+    </div>
+  </div>
+  <div class="mx-4 mt-3 flex gap-1 text-sm text-zinc-400 lg:mx-8">
+    <.icon name="hero-information-circle" class="size-5" />
+    <p><%= gettext("See here the activities of the organizations you follow.") %></p>
+  </div>
 </.page>
diff --git a/storybook/components/calendar.story.exs b/storybook/components/calendar.story.exs
deleted file mode 100644
index f4e6679ed..000000000
--- a/storybook/components/calendar.story.exs
+++ /dev/null
@@ -1,32 +0,0 @@
-defmodule AtomicWeb.Storybook.Components.Calendar do
-  use PhoenixStorybook.Story, :component
-
-  alias AtomicWeb.Components.Calendar
-
-  def function, do: &Calendar.calendar/1
-
-  def variations do
-    [
-      %Variation{
-        id: :default,
-        attributes: %{
-          current_path: "/storybook/components/calendar",
-          activities: [],
-          mode: "month",
-          timezone: "Europe/Lisbon",
-          params: %{}
-        }
-      },
-      %Variation{
-        id: :weekly,
-        attributes: %{
-          current_path: "/storybook/components/calendar",
-          activities: [],
-          mode: "week",
-          timezone: "Europe/Lisbon",
-          params: %{}
-        }
-      }
-    ]
-  end
-end