From 805354d724fd1242d0133478ef9a86a0279fde37 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 20 Mar 2025 11:02:41 +0000
Subject: [PATCH 1/2] feat: improve sidebar

---
 lib/atomic/organizations.ex                |  4 +-
 lib/atomic_web/components/accordion.ex     | 86 ++++++++++++++++++++++
 lib/atomic_web/components/organizations.ex | 74 +++++++++++++------
 lib/atomic_web/components/sidebar.ex       | 29 ++++++--
 lib/atomic_web/config.ex                   |  9 +++
 5 files changed, 169 insertions(+), 33 deletions(-)
 create mode 100644 lib/atomic_web/components/accordion.ex

diff --git a/lib/atomic/organizations.ex b/lib/atomic/organizations.ex
index e2c58e8ae..511c906aa 100644
--- a/lib/atomic/organizations.ex
+++ b/lib/atomic/organizations.ex
@@ -19,7 +19,9 @@ defmodule Atomic.Organizations do
       [%Organization{}, ...]
 
   """
-  def list_organizations(params \\ %{})
+  def list_organizations do
+    Organization |> Repo.all()
+  end
 
   def list_organizations(opts) when is_list(opts) do
     Organization
diff --git a/lib/atomic_web/components/accordion.ex b/lib/atomic_web/components/accordion.ex
new file mode 100644
index 000000000..5d75d11d7
--- /dev/null
+++ b/lib/atomic_web/components/accordion.ex
@@ -0,0 +1,86 @@
+defmodule AtomicWeb.Components.Accordion do
+  @moduledoc """
+  Provides accordion-related components and helper functions.
+  """
+  use AtomicWeb, :component
+
+  alias Phoenix.LiveView.JS
+  import AtomicWeb.Components.Icon
+
+  @doc """
+  Accordion components allows users to show and hide sections of related panel on a page.
+
+  ## Examples
+
+  ```heex
+  <.accordion>
+    <:trigger>Accordion</:trigger>
+    <:panel>Content</:panel>
+  </.accordion>
+  ```
+  """
+
+  attr :class, :any, doc: "Extend existing component styles"
+  attr :controlled, :boolean, default: false
+  attr :id, :string, required: true
+  attr :rest, :global
+
+  slot :trigger, validate_attrs: false
+  slot :panel, validate_attrs: false
+
+  @spec accordion(Socket.assigns()) :: Rendered.t()
+  def accordion(assigns) do
+    ~H"""
+    <div class={["accordion", assigns[:class]]} id={@id} {@rest}>
+      <%= for {{trigger, panel}, idx} <- @trigger |> Enum.zip(@panel) |> Enum.with_index() do %>
+        <h3>
+          <button
+            aria-controls={panel_id(@id, idx)}
+            aria-expanded={to_string(panel[:default_expanded] == true)}
+            class={[
+              "accordion-trigger relative w-full [&_.accordion-trigger-icon]:aria-expanded:rotate-180",
+              trigger[:class]
+            ]}
+            id={trigger_id(@id, idx)}
+            phx-click={handle_click(assigns, idx)}
+            type="button"
+            {assigns_to_attributes(trigger, [:class, :icon_name])}
+          >
+            {render_slot(trigger)}
+            <.icon class="accordion-trigger-icon absolute top-1/2 right-4 h-5 w-5 -translate-y-1/2 transition-all duration-300 ease-in-out" name={trigger[:icon_name] || "hero-chevron-down"} />
+          </button>
+        </h3>
+        <div class="accordion-panel grid-rows-[0fr] grid transform transition-all duration-200 ease-in data-[expanded]:grid-rows-[1fr]" data-expanded={panel[:default_expanded]} id={panel_id(@id, idx)} role="region">
+          <div class="overflow-hidden">
+            <div class={["accordion-panel-content", panel[:class]]} {assigns_to_attributes(panel, [:class, :default_expanded ])}>
+              {render_slot(panel)}
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  defp trigger_id(id, idx), do: "#{id}_trigger#{idx}"
+  defp panel_id(id, idx), do: "#{id}_panel#{idx}"
+
+  defp handle_click(%{controlled: controlled, id: id}, idx) do
+    op =
+      {"aria-expanded", "true", "false"}
+      |> JS.toggle_attribute(to: "##{trigger_id(id, idx)}")
+      |> JS.toggle_attribute({"data-expanded", ""}, to: "##{panel_id(id, idx)}")
+
+    if controlled do
+      op
+      |> JS.set_attribute({"aria-expanded", "false"},
+        to: "##{id} .accordion-trigger:not(##{trigger_id(id, idx)})"
+      )
+      |> JS.remove_attribute("data-expanded",
+        to: "##{id} .accordion-panel:not(##{panel_id(id, idx)})"
+      )
+    else
+      op
+    end
+  end
+end
diff --git a/lib/atomic_web/components/organizations.ex b/lib/atomic_web/components/organizations.ex
index 9a575a8ce..bc39b7d93 100644
--- a/lib/atomic_web/components/organizations.ex
+++ b/lib/atomic_web/components/organizations.ex
@@ -2,7 +2,7 @@ defmodule AtomicWeb.Components.Organizations do
   @moduledoc false
   use AtomicWeb, :live_component
 
-  import AtomicWeb.Components.Avatar
+  import AtomicWeb.Components.{Avatar, Accordion}
 
   alias Atomic.Accounts
   alias Atomic.Organizations
@@ -10,35 +10,61 @@ defmodule AtomicWeb.Components.Organizations do
   @impl true
   def render(assigns) do
     ~H"""
-    <ul role="list" class="-mx-2 mt-2 max-h-72 max-h-72 space-y-1 overflow-y-auto">
-      <%= for organization <- @organizations do %>
-        <li>
-          <div
-            phx-target={@myself}
-            phx-click="select-organization"
-            phx-value-organization_id={organization.id}
-            class={
+    <div id={@id}>
+      <.accordion id={"#{@id}-accordion"} class="flex-grow rounded-md border" controlled={true}>
+        <:trigger>
+          <%= if @current_organization do %>
+            <div class="group flex cursor-pointer gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-zinc-700 hover:text-primary-500">
+              <.avatar
+                class={"#{if @current_organization && @current_organization.id == @current_organization.id do "border-primary-600" else "border-zinc-200" end} #{(@current_organization && @current_organization.id == @current_organization.id) && "text-primary-600"} border group-hover:border-primary-600 group-hover:text-primary-500"}
+                src={Uploaders.Logo.url({@current_organization.logo, @current_organization}, :original)}
+                name={@current_organization.name}
+                size={:xs}
+                type={:organization}
+                color={:white}
+              />
+              <span class="mt-1 truncate">{@current_organization.name}</span>
+            </div>
+          <% else %>
+            <div class="group cursor-pointer gap-x-3 rounded-md p-2 text-left text-sm leading-6 text-zinc-600 hover:text-primary-500">
+              <.icon name="hero-pencil-solid" class="size-5 shrink-0 text-zinc-400 group-hover:text-primary-500" />
+              <span class="mt-1 truncate">{gettext("Pick an organization")}</span>
+            </div>
+          <% end %>
+        </:trigger>
+        <:panel>
+          <ul role="list" class="mt-2 max-h-72 space-y-0.5 overflow-y-auto overscroll-contain p-1">
+            <%= for organization <- @organizations do %>
+              <li>
+                <div
+                  phx-target={@myself}
+                  phx-click="select-organization"
+                  phx-value-organization_id={organization.id}
+                  class={
               "#{if @current_organization && organization.id == @current_organization.id do
                 "bg-zinc-50 text-primary-500"
               else
                 "text-zinc-700 hover:text-primary-500 hover:bg-zinc-50"
               end} group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold cursor-pointer"
             }
-            type="button"
-          >
-            <.avatar
-              class={"#{if @current_organization && organization.id == @current_organization.id do "border-primary-600" else "border-zinc-200" end} #{(@current_organization && organization.id == @current_organization.id) && "text-primary-600"} border group-hover:border-primary-600 group-hover:text-primary-500"}
-              src={Uploaders.Logo.url({organization.logo, organization}, :original)}
-              name={organization.name}
-              size={:xs}
-              type={:organization}
-              color={:white}
-            />
-            <span class="mt-1 truncate">{organization.name}</span>
-          </div>
-        </li>
-      <% end %>
-    </ul>
+                  type="button"
+                >
+                  <.avatar
+                    class={"#{if @current_organization && organization.id == @current_organization.id do "border-primary-600" else "border-zinc-200" end} #{(@current_organization && organization.id == @current_organization.id) && "text-primary-600"} border group-hover:border-primary-600 group-hover:text-primary-500"}
+                    src={Uploaders.Logo.url({organization.logo, organization}, :original)}
+                    name={organization.name}
+                    size={:xs}
+                    type={:organization}
+                    color={:white}
+                  />
+                  <span class="mt-1 truncate">{organization.name}</span>
+                </div>
+              </li>
+            <% end %>
+          </ul>
+        </:panel>
+      </.accordion>
+    </div>
     """
   end
 
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 510b30c42..6faa56b89 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -44,11 +44,11 @@ defmodule AtomicWeb.Components.Sidebar do
           <.sidebar_dropdown current_user={@current_user} orientation={:down} />
         </div>
       </div>
-      <div id="sidebar-overlay" class="fixed inset-0 z-40 hidden cursor-pointer bg-black bg-opacity-50" phx-click={hide_mobile_sidebar()}></div>
+      <div id="sidebar-overlay" class="fixed inset-0 z-40 hidden cursor-pointer bg-black bg-opacity-50 backdrop-blur-sm" phx-click={hide_mobile_sidebar()}></div>
       <!-- Sidebar Panel -->
       <div id="mobile-sidebar" class="fixed inset-0 z-50 hidden w-64" role="dialog" aria-modal="true">
         <div class="fixed inset-0 flex w-fit">
-          <div class="relative flex w-64 max-w-xs flex-col border-r bg-white">
+          <div class="relative flex w-72 max-w-xs flex-col rounded-r-md border-r bg-white">
             <div class="flex justify-between p-4">
               <.sidebar_header />
 
@@ -103,14 +103,17 @@ defmodule AtomicWeb.Components.Sidebar do
     <ul role="list" class="-mx-2 space-y-1">
       <%= for page <- AtomicWeb.Config.pages(@current_user, @current_organization) do %>
         <li class="select-none">
-          <.link navigate={page.url} class={"#{if @current_page == page.key do "bg-zinc-50 text-primary-500" else "text-zinc-700 hover:text-primary-500 hover:bg-zinc-50" end} group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6"}>
-            <.icon name={page.icon} class={
+          <.link navigate={page.url} class={"#{if @current_page == page.key do "font-extrabold text-primary-500" else "text-zinc-700 hover:text-primary-500 hover:bg-zinc-50 font-medium" end} group flex gap-x-3 rounded-md p-2 leading-6"}>
+            <.icon
+              name={if @current_page == page.key, do: page.icon_selected, else: page.icon}
+              class={
                 "#{if @current_page == page.key do
                   "text-primary-500"
                 else
                   "text-zinc-400 group-hover:text-primary-500"
-                end} size-6 shrink-0"
-              } />
+                end} size-7 shrink-0"
+              }
+            />
             {page.title}
           </.link>
         </li>
@@ -173,7 +176,10 @@ defmodule AtomicWeb.Components.Sidebar do
       transition:
         {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}
     )
-    |> JS.show(to: "#sidebar-overlay")
+    |> JS.show(
+      to: "#sidebar-overlay",
+      transition: {"ease-in duration-300", "opacity-0", "opacity-100"}
+    )
     |> JS.dispatch("focus", to: "#mobile-sidebar")
   end
 
@@ -200,5 +206,12 @@ defmodule AtomicWeb.Components.Sidebar do
   end
 
   defp get_organizations(nil), do: []
-  defp get_organizations(user), do: Organizations.list_user_organizations(user.id)
+
+  defp get_organizations(user) do
+    if user.role == :master do
+      Organizations.list_organizations()
+    else
+      Organizations.list_user_organizations(user.id)
+    end
+  end
 end
diff --git a/lib/atomic_web/config.ex b/lib/atomic_web/config.ex
index ef36a0edf..5fa822a0d 100644
--- a/lib/atomic_web/config.ex
+++ b/lib/atomic_web/config.ex
@@ -27,6 +27,7 @@ defmodule AtomicWeb.Config do
           key: :scanner,
           title: "Scanner",
           icon: "hero-qr-code",
+          icon_selected: "hero-qr-code-solid",
           url: ~p"/scanner",
           tabs: []
         }
@@ -40,6 +41,7 @@ defmodule AtomicWeb.Config do
           key: :departments,
           title: "Departments",
           icon: "hero-cube",
+          icon_selected: "hero-cube-solid",
           url: ~p"/organizations/#{current_organization}/departments",
           tabs: []
         },
@@ -47,6 +49,7 @@ defmodule AtomicWeb.Config do
           key: :announcements,
           title: "Announcements",
           icon: "hero-newspaper",
+          icon_selected: "hero-newspaper-solid",
           url: ~p"/organizations/#{current_organization}/announcements",
           tabs: []
         },
@@ -54,6 +57,7 @@ defmodule AtomicWeb.Config do
           key: :partners,
           title: "Partners",
           icon: "hero-user-group",
+          icon_selected: "hero-user-group-solid",
           url: ~p"/organizations/#{current_organization}/partners",
           tabs: []
         },
@@ -61,6 +65,7 @@ defmodule AtomicWeb.Config do
           key: :scanner,
           title: "Scanner",
           icon: "hero-qr-code",
+          icon_selected: "hero-qr-code-solid",
           url: ~p"/scanner",
           tabs: []
         }
@@ -73,6 +78,7 @@ defmodule AtomicWeb.Config do
         key: :home,
         title: "Home",
         icon: "hero-home",
+        icon_selected: "hero-home-solid",
         url: ~p"/",
         tabs: []
       },
@@ -80,6 +86,7 @@ defmodule AtomicWeb.Config do
         key: :calendar,
         title: "Calendar",
         icon: "hero-calendar",
+        icon_selected: "hero-calendar-solid",
         url: ~p"/calendar",
         tabs: []
       },
@@ -87,6 +94,7 @@ defmodule AtomicWeb.Config do
         key: :activities,
         title: "Activities",
         icon: "hero-academic-cap",
+        icon_selected: "hero-academic-cap-solid",
         url: ~p"/activities",
         tabs: []
       },
@@ -94,6 +102,7 @@ defmodule AtomicWeb.Config do
         key: :organizations,
         title: "Organizations",
         icon: "tabler-affiliate",
+        icon_selected: "tabler-affiliate-filled",
         url: ~p"/organizations",
         tabs: []
       }

From 52ff273b6cd4b24d8c9272f4a6f48a53b11df055 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Thu, 1 May 2025 02:55:48 +0100
Subject: [PATCH 2/2] feat: add new logo

---
 lib/atomic_web/components/accordion.ex        |  2 +-
 lib/atomic_web/components/dropdown.ex         |  8 +++----
 lib/atomic_web/components/organizations.ex    |  4 ++--
 lib/atomic_web/live/auth/user_login_live.ex   |  3 +--
 .../live/auth/user_register_live.ex           |  3 +--
 .../live/calendar_live/show.html.heex         | 22 ++++++++---------
 lib/atomic_web/live/home_live/index.html.heex | 24 +++++--------------
 .../legal_terms_live/components/header.ex     |  4 ++--
 priv/static/images/atomic.svg                 |  9 -------
 priv/static/images/logo_atomic.svg            | 17 +++++++++++++
 priv/static/images/logo_atomic_extended.svg   | 24 +++++++++++++++++++
 storybook/begin.story.exs                     |  2 +-
 12 files changed, 70 insertions(+), 52 deletions(-)
 delete mode 100644 priv/static/images/atomic.svg
 create mode 100644 priv/static/images/logo_atomic.svg
 create mode 100644 priv/static/images/logo_atomic_extended.svg

diff --git a/lib/atomic_web/components/accordion.ex b/lib/atomic_web/components/accordion.ex
index 5d75d11d7..ae63c761a 100644
--- a/lib/atomic_web/components/accordion.ex
+++ b/lib/atomic_web/components/accordion.ex
@@ -47,7 +47,7 @@ defmodule AtomicWeb.Components.Accordion do
             {assigns_to_attributes(trigger, [:class, :icon_name])}
           >
             {render_slot(trigger)}
-            <.icon class="accordion-trigger-icon absolute top-1/2 right-4 h-5 w-5 -translate-y-1/2 transition-all duration-300 ease-in-out" name={trigger[:icon_name] || "hero-chevron-down"} />
+            <.icon class="accordion-trigger-icon size-5 absolute top-1/2 right-4 -translate-y-1/2 transition-all duration-300 ease-in-out" name={trigger[:icon_name] || "hero-chevron-down"} />
           </button>
         </h3>
         <div class="accordion-panel grid-rows-[0fr] grid transform transition-all duration-200 ease-in data-[expanded]:grid-rows-[1fr]" data-expanded={panel[:default_expanded]} id={panel_id(@id, idx)} role="region">
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 449ecbf25..f04544d0f 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -26,8 +26,8 @@ defmodule AtomicWeb.Components.Dropdown do
       <div phx-click={JS.toggle(to: "##{@id}", in: {"ease-out duration-100", "transform opacity-0 scale-95", "transform opacity-100 scale-100"}, out: {"ease-in duration-75", "transform opacity-100 scale-100", "transform opacity-0 scale-95"}, display: "block")}>
         {render_slot(@wrapper)}
       </div>
-      <div id={@id} class={"#{if @orientation == :down, do: "top-full mt-3 origin-top-right", else: "bottom-full mb-3 origin-bottom-right"} absolute right-0 z-10 hidden w-56 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"}>
-        <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+      <div id={@id} class={"#{if @orientation == :down, do: "top-full mt-2 origin-top", else: "bottom-full mb-2 origin-bottom"} shadow-zinc-400/50 absolute right-0 z-10 hidden w-full min-w-fit rounded-md bg-white shadow-lg ring-1 ring-zinc-300"}>
+        <div class="p-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
           <%= for item <- @items do %>
             <%= if item[:patch] || item[:navigate] || item[:href] || item[:phx_click] do %>
               <.link
@@ -41,12 +41,12 @@ defmodule AtomicWeb.Components.Dropdown do
                     JS.hide(to: "##{@id}", transition: {"ease-in duration-75", "transform opacity-100 scale-100", "transform opacity-0 scale-95"})
                   end
                 }
-                class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900"}
+                class={"#{item[:class]} flex items-center gap-x-2 rounded-sm p-2 text-sm text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900"}
                 role="menuitem"
                 method={Map.get(item, :method, "get")}
               >
                 <%= if item[:icon] do %>
-                  <.icon name={item.icon} class="size-5 ml-2 inline-block" />
+                  <.icon name={item.icon} class={"#{item[:icon_class]} size-5 inline-block"} />
                 <% end %>
                 {item.name}
               </.link>
diff --git a/lib/atomic_web/components/organizations.ex b/lib/atomic_web/components/organizations.ex
index bc39b7d93..2fe60f490 100644
--- a/lib/atomic_web/components/organizations.ex
+++ b/lib/atomic_web/components/organizations.ex
@@ -16,7 +16,7 @@ defmodule AtomicWeb.Components.Organizations do
           <%= if @current_organization do %>
             <div class="group flex cursor-pointer gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-zinc-700 hover:text-primary-500">
               <.avatar
-                class={"#{if @current_organization && @current_organization.id == @current_organization.id do "border-primary-600" else "border-zinc-200" end} #{(@current_organization && @current_organization.id == @current_organization.id) && "text-primary-600"} border group-hover:border-primary-600 group-hover:text-primary-500"}
+                class={"#{(@current_organization && @current_organization.id == @current_organization.id) && "text-primary-600"} border border-zinc-200 group-hover:text-primary-500"}
                 src={Uploaders.Logo.url({@current_organization.logo, @current_organization}, :original)}
                 name={@current_organization.name}
                 size={:xs}
@@ -50,7 +50,7 @@ defmodule AtomicWeb.Components.Organizations do
                   type="button"
                 >
                   <.avatar
-                    class={"#{if @current_organization && organization.id == @current_organization.id do "border-primary-600" else "border-zinc-200" end} #{(@current_organization && organization.id == @current_organization.id) && "text-primary-600"} border group-hover:border-primary-600 group-hover:text-primary-500"}
+                    class={"#{(@current_organization && organization.id == @current_organization.id) && "text-primary-600"} border border-zinc-200 group-hover:text-primary-500"}
                     src={Uploaders.Logo.url({organization.logo, organization}, :original)}
                     name={organization.name}
                     size={:xs}
diff --git a/lib/atomic_web/live/auth/user_login_live.ex b/lib/atomic_web/live/auth/user_login_live.ex
index c2ab9f670..7ff9e37b0 100644
--- a/lib/atomic_web/live/auth/user_login_live.ex
+++ b/lib/atomic_web/live/auth/user_login_live.ex
@@ -15,8 +15,7 @@ defmodule AtomicWeb.Auth.UserLoginLive do
         <div class="mx-auto w-full max-w-sm lg:w-96">
           <div>
             <div class="flex h-16 shrink-0 select-none items-center gap-x-4 pt-4">
-              <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
-              <p class="text-2xl font-semibold text-zinc-400">Atomic</p>
+              <img src={~p"/images/logo_atomic_extended.svg"} class="pointer-events-none h-12 w-auto" />
             </div>
             <h2 class="text-2xl/9 mt-8 font-semibold tracking-tight text-gray-900">{gettext("Sign in to your account")}</h2>
             <p class="text-sm/6 mt-2 text-gray-500">
diff --git a/lib/atomic_web/live/auth/user_register_live.ex b/lib/atomic_web/live/auth/user_register_live.ex
index 1885d9440..6ca2f7746 100644
--- a/lib/atomic_web/live/auth/user_register_live.ex
+++ b/lib/atomic_web/live/auth/user_register_live.ex
@@ -19,8 +19,7 @@ defmodule AtomicWeb.Auth.UserRegisterLive do
         <div class="mx-auto w-full max-w-sm lg:w-96">
           <div>
             <div class="flex h-16 shrink-0 select-none items-center gap-x-4 pt-4">
-              <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
-              <p class="text-2xl font-semibold text-zinc-400">{gettext("Atomic")}</p>
+              <img src={~p"/images/logo_atomic_extended.svg"} class="pointer-events-none h-12 w-auto" />
             </div>
             <h2 class="text-2xl/9 mt-8 font-semibold tracking-tight text-gray-900">{gettext("Register for an account")}</h2>
             <p class="text-sm/6 mt-2 text-gray-500">
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 363245697..39d473508 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,7 +1,7 @@
 <.page title="Calendar">
-  <div class="ring-zinc-900/10 bg-zincf-50 mx-4 overflow-hidden rounded-lg ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
+  <div class="ring-zinc-900/10 mx-4 overflow-hidden rounded-lg bg-zinc-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="border-zincf-200 flex flex-none items-center justify-between border-b px-6 py-4">
+      <header class="flex flex-none items-center justify-between border-b border-zinc-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">
@@ -21,34 +21,34 @@
             </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-zincf-50">
+                <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-zinc-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-zincf-50 focus:relative md:block">
+                <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-zinc-50 focus:relative md:block">
                   <span>{gettext("Today")}</span>
                 </button>
-                <span class="bg-zincf-300 relative -mx-px h-5 w-px 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-zincf-50">
+                <span class="relative -mx-px h-5 w-px bg-zinc-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-zinc-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">
+              <div class="md:ml-4">
                 <.dropdown
                   id="calendar-dropdown"
                   orientation={:down}
                   items={
                     [
-                      %{name: gettext("Go to today"), phx_click: "present", class: "border-b border-zinc-100 md:hidden"},
+                      %{name: gettext("Go to today"), phx_click: "present", class: "border-b border-zinc-100 font-medium md:hidden"},
                       # Link that switches mode
-                      %{name: gettext("Week view"), patch: "?mode=week"},
-                      %{name: gettext("Month view"), patch: "?mode=month"}
+                      %{name: gettext("Week view"), patch: "?mode=week", class: "font-medium"},
+                      %{name: gettext("Month view"), patch: "?mode=month", class: "font-medium"}
                     ]
                   }
                 >
                   <: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-zincf-50 md:ml-4 md:flex">
+                    <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-zinc-50 md:flex">
                       <%= if @mode == "month" do %>
                         {gettext("Month view")}
                       <% else %>
diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex
index 8425f9b94..4857d6356 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -4,26 +4,13 @@
       <article class="sticky top-0">
         <!-- Header -->
         <div class="hidden lg:block">
-          <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
-            <div class="my-6 flex min-w-0 select-none flex-row gap-x-2">
-              <%= if @is_authenticated? do %>
-                <h1 class="truncate text-2xl font-bold text-zinc-900">
-                  Welcome, {@current_user.name}
-                </h1>
-              <% else %>
-                <h1 class="truncate text-2xl font-bold text-zinc-900">
-                  Welcome to Atomic
-                </h1>
-              <% end %>
-              <span class="animate-wave text-2xl">
-                👋
-              </span>
-            </div>
+          <div class="mx-auto w-max px-4 pt-3 sm:px-6 lg:px-8">
+            <img src={~p"/images/logo_atomic.svg"} class="h-10 w-auto fill-slate-400" />
           </div>
         </div>
         <!-- Tabs -->
         <div x-data="{ option: 'all' }" class="sticky top-10 z-10 block bg-white lg:top-0">
-          <.tabs class="mx-auto max-w-5xl px-4 pt-1 sm:px-6 lg:px-8">
+          <.tabs class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
             <.tab id="tab-all" active={@current_tab == "all"} phx-click="load-all" phx-hook="ScrollToTop">
               {gettext("All")}
             </.tab>
@@ -72,7 +59,7 @@
     <!-- Schedule -->
     <section aria-labelledby="schedule" class="pr-4 pl-6">
       <div class="flex items-center justify-between pt-4">
-        <h1 class="text-zinc-90 text-xl font-bold">Schedule</h1>
+        <h1 class="text-zinc-90 text-xl font-bold">{gettext("Schedule")}</h1>
         <.dropdown
           :if={@current_user}
           id="schedule-dropdown"
@@ -84,7 +71,8 @@
             },
             %{
               name: gettext("My schedule"),
-              phx_click: "show-schedule-user"
+              phx_click: "show-schedule-user",
+              class: "text-nowrap"
             }
           ]}
         >
diff --git a/lib/atomic_web/live/legal_terms_live/components/header.ex b/lib/atomic_web/live/legal_terms_live/components/header.ex
index f71c85bd8..684048eb3 100644
--- a/lib/atomic_web/live/legal_terms_live/components/header.ex
+++ b/lib/atomic_web/live/legal_terms_live/components/header.ex
@@ -28,10 +28,10 @@ defmodule AtomicWeb.LegalTermsLive.Components.Header do
         <div class="flex place-items-center gap-x-4">
           <!-- Atomic Logo -->
           <.link navigate={~p"/"}>
-            <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+            <img src={~p"/images/logo_atomic.svg"} class="h-14 w-auto" />
           </.link>
         </div>
-        <div class="flex hidden place-items-center gap-x-2 text-sm font-semibold text-zinc-300 sm:block sm:gap-x-4 sm:space-x-2 md:space-x-4">
+        <div class="flex place-items-center gap-x-2 text-sm font-semibold text-zinc-300 sm:block sm:gap-x-4 sm:space-x-2 md:space-x-4">
           <%= for {type, title, path} <- link_pages(@page_name) do %>
             <%= case type do %>
               <% :current -> %>
diff --git a/priv/static/images/atomic.svg b/priv/static/images/atomic.svg
deleted file mode 100644
index c8f53d79f..000000000
--- a/priv/static/images/atomic.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="78" height="77" viewBox="0 0 78 77" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M20.8127 32.174C20.8139 32.1824 20.8163 32.1896 20.8175 32.198C21.3599 31.5678 21.9084 30.9435 22.4665 30.3265C22.5062 30.282 22.5471 30.2387 22.588 30.1942C22.44 29.3318 22.3041 28.4682 22.1851 27.6022C21.9914 26.2009 21.8387 24.7949 21.7184 23.3876C21.4862 20.5731 21.4213 17.7465 21.6041 14.9476C21.7003 13.5488 21.8591 12.1572 22.1165 10.7908C22.3715 9.42562 22.7167 8.0809 23.2134 6.80955C23.4612 6.17448 23.7499 5.56105 24.0807 4.9789C24.4138 4.39916 24.7891 3.84828 25.2257 3.36596C26.0905 2.39531 27.2043 1.69047 28.4576 1.45834C29.7061 1.21297 31.0508 1.42225 32.3089 1.91299C32.9404 2.15716 33.5562 2.46026 34.1528 2.80666C34.7458 3.16149 35.3255 3.54758 35.8824 3.96976C37.001 4.80931 38.039 5.77154 39.0277 6.78429C40.0176 7.79824 40.9378 8.88316 41.8242 9.99935C42.5447 10.9135 43.2351 11.8541 43.9002 12.8139C44.0085 12.7525 44.1179 12.6912 44.2262 12.6299C43.6176 11.6159 42.9777 10.6188 42.2981 9.64693C41.473 8.46459 40.5938 7.31472 39.6387 6.22259C39.3958 5.95316 39.1612 5.67532 38.9086 5.41431L38.5346 5.01739L38.1485 4.63009C37.8947 4.36909 37.6229 4.12372 37.357 3.87354C37.2247 3.74725 37.0828 3.63057 36.9469 3.50909C36.8086 3.39002 36.6739 3.26493 36.5295 3.15186L36.1013 2.80426C35.9582 2.68879 35.8067 2.58294 35.6599 2.47109L35.4374 2.3063C35.3628 2.25218 35.2846 2.20166 35.2089 2.14874C35.0549 2.0453 34.9034 1.93825 34.7482 1.83721C34.1227 1.43669 33.4648 1.07585 32.772 0.772746C32.0804 0.467237 31.3431 0.237504 30.5745 0.108805C29.8083 -0.0198931 29.0073 -0.0415433 28.2183 0.0823441C28.1196 0.0991831 28.0198 0.1064 27.9224 0.131658L27.6301 0.20142C27.5327 0.226679 27.434 0.245924 27.339 0.27479L27.0527 0.367405C26.6751 0.499712 26.3046 0.659683 25.9582 0.858144C25.2558 1.24304 24.6375 1.75302 24.0951 2.31472C23.5514 2.87883 23.0956 3.50548 22.6938 4.15499C22.2933 4.8057 21.9565 5.48528 21.6642 6.17808C21.0809 7.5637 20.6744 8.99742 20.3652 10.4408C20.2113 11.1624 20.0862 11.8889 19.9839 12.6154C19.8817 13.3431 19.7963 14.0708 19.7338 14.7997C19.4764 17.7165 19.5125 20.638 19.7061 23.538C19.9082 26.4379 20.2943 29.3186 20.8091 32.1716L20.8127 32.174Z" fill="#CED4DA"/>
-    <path d="M76.8505 44.7298C76.6556 43.9708 76.361 43.254 76.0194 42.572C75.6754 41.89 75.2736 41.2465 74.8382 40.6343C73.965 39.4111 72.9583 38.3117 71.8914 37.2917C71.3573 36.7818 70.8053 36.2946 70.2399 35.8255C69.6746 35.3577 69.0997 34.9018 68.5115 34.4664C66.1637 32.7163 63.6583 31.2141 61.0879 29.8573C58.5127 28.5078 55.8594 27.3242 53.1603 26.2646C50.4589 25.2109 47.7081 24.2944 44.9248 23.4921C42.4928 22.8005 40.0367 22.1931 37.5577 21.6855C36.8361 22.2448 36.1228 22.815 35.418 23.3959C35.6369 23.438 35.857 23.4813 36.0759 23.5246C38.8567 24.0755 41.6147 24.7454 44.3403 25.5309C47.067 26.3103 49.7612 27.1991 52.4038 28.2179C53.7268 28.7231 55.0379 29.2595 56.3321 29.8296C57.6263 30.401 58.9036 31.0084 60.1642 31.6434C62.6816 32.922 65.1209 34.3509 67.4086 35.9759C68.5488 36.7914 69.6494 37.6574 70.6778 38.5932C71.7061 39.5265 72.6696 40.5273 73.4911 41.617C73.9012 42.1618 74.2729 42.7284 74.594 43.3153C74.9128 43.9023 75.1846 44.5109 75.365 45.1363C75.7379 46.3824 75.7535 47.6995 75.2929 48.8878C74.8466 50.0798 73.9626 51.1142 72.8849 51.9273C72.346 52.3362 71.7651 52.7019 71.1565 53.0279C70.543 53.3454 69.9104 53.6365 69.2585 53.889C67.9571 54.4002 66.5919 54.7791 65.2111 55.0882C63.8291 55.3986 62.4218 55.6126 61.0073 55.781C59.5916 55.9446 58.1675 56.0517 56.7386 56.1106C55.3097 56.1756 53.8772 56.184 52.4435 56.1671C55.2977 56.4366 58.1784 56.534 61.059 56.3704C62.4988 56.2886 63.9385 56.1443 65.3698 55.9049C65.7271 55.84 66.0855 55.7858 66.4403 55.7077L66.9744 55.597L67.506 55.4719C67.862 55.3925 68.212 55.2903 68.5657 55.1953C68.7425 55.1496 68.9157 55.0894 69.0913 55.0377C69.2657 54.9824 69.4425 54.9331 69.6145 54.8705L70.1353 54.6877C70.3085 54.6264 70.4781 54.5542 70.6501 54.4868L70.9075 54.3846C70.9929 54.3497 71.0771 54.31 71.1613 54.2727C71.3297 54.197 71.5005 54.1236 71.6677 54.0442C72.3376 53.7219 72.9895 53.3514 73.6114 52.9208C74.2344 52.4926 74.8166 51.985 75.3302 51.3993C75.8425 50.8147 76.2804 50.1436 76.5895 49.4075C76.6268 49.3148 76.6725 49.2258 76.7025 49.1308L76.7964 48.8457C76.8264 48.7507 76.8613 48.6557 76.8866 48.5595L76.9575 48.2672C77.0429 47.8763 77.1007 47.477 77.1139 47.0776C77.1548 46.2778 77.0453 45.484 76.8517 44.7274L76.8505 44.7298Z" fill="#CED4DA"/>
-    <path d="M23.0135 66.1323C22.3291 66.3236 21.6423 66.5016 20.9507 66.6447C20.2591 66.789 19.5639 66.9117 18.865 66.9863C18.1674 67.0633 17.4698 67.109 16.7758 67.103C16.0818 67.097 15.3938 67.0344 14.7262 66.9069C14.0599 66.777 13.4128 66.5822 12.8162 66.2983C12.2208 66.0144 11.6808 65.6392 11.2249 65.1845L11.0541 65.0137L10.8966 64.8309L10.8184 64.7395L10.7462 64.6433C10.6981 64.5783 10.6476 64.5158 10.6007 64.4508C10.5141 64.3149 10.4178 64.1862 10.3421 64.0443C10.3024 63.9745 10.2591 63.906 10.223 63.8338L10.1147 63.6173C9.83329 63.0351 9.65287 62.4001 9.53861 61.7493C9.32571 60.4395 9.39066 59.0647 9.61318 57.7116C9.8369 56.3548 10.2194 55.0149 10.6776 53.6991C10.9074 53.0411 11.166 52.3904 11.4378 51.7445C11.7096 51.0986 12.0019 50.4612 12.3098 49.8297C12.4614 49.5134 12.6226 49.2006 12.7789 48.8855C12.9425 48.574 13.1013 48.2601 13.2697 47.9509C13.6016 47.3303 13.9504 46.7181 14.3077 46.1095C14.6637 45.5009 15.0366 44.9019 15.413 44.3041C15.7955 43.7099 16.1792 43.1169 16.5773 42.5336C17.3688 41.3633 18.1987 40.2158 19.0575 39.0912C20.7739 36.8408 22.5997 34.6697 24.5218 32.5853C26.439 30.4973 28.4465 28.4898 30.5345 26.5713C32.6177 24.6481 34.7792 22.8102 37.0248 21.083C38.1446 20.217 39.2836 19.3751 40.4443 18.5668C41.605 17.7585 42.7885 16.9839 43.9877 16.2382C46.3897 14.7539 48.8795 13.4128 51.4558 12.305C52.7452 11.7554 54.0575 11.2658 55.3914 10.8749C56.7241 10.4816 58.0796 10.1797 59.4364 10.045C60.1147 9.97765 60.7931 9.956 61.4607 9.98607C62.1282 10.0197 62.7885 10.1039 63.4176 10.2747C64.6757 10.6043 65.8087 11.2767 66.5833 12.2882C67.3688 13.2889 67.7921 14.5819 67.9257 15.9267C67.9942 16.6002 68.005 17.2858 67.9665 17.9762C67.9184 18.6654 67.8378 19.357 67.7152 20.045C67.4746 21.4234 67.0885 22.785 66.6351 24.1249C66.1804 25.4672 65.6319 26.7806 65.039 28.076C64.6408 28.9372 64.2199 29.79 63.7784 30.632C63.8999 30.6993 64.0202 30.7679 64.1405 30.8364C64.6384 30.0185 65.1159 29.1862 65.5682 28.3394C66.2478 27.0669 66.8732 25.7619 67.4133 24.4159C67.5432 24.078 67.6839 23.7424 67.8018 23.3984L67.9858 22.8848L68.1554 22.3652C68.2721 22.02 68.3683 21.6676 68.4705 21.3164C68.5234 21.1419 68.5619 20.9627 68.6088 20.7847C68.6521 20.6067 68.7027 20.4311 68.7375 20.2507L68.853 19.7118C68.8915 19.5314 68.9168 19.3486 68.9492 19.1682L68.9961 18.8951C69.0106 18.8037 69.0202 18.7123 69.0334 18.6197C69.0563 18.4357 69.0815 18.2528 69.102 18.0676C69.1754 17.3279 69.1982 16.5786 69.1537 15.8232C69.1116 15.0679 68.9817 14.3065 68.7484 13.5644C68.515 12.8222 68.171 12.1006 67.7019 11.4535C67.643 11.3729 67.5901 11.2875 67.5239 11.2129L67.3291 10.9844C67.2629 10.9098 67.2016 10.8304 67.1306 10.7583L66.9189 10.5454C66.629 10.2687 66.3187 10.0113 65.9843 9.79362C65.3216 9.34258 64.5879 9.02384 63.8398 8.79531C63.0904 8.56678 62.3255 8.4453 61.5641 8.38275C60.8027 8.32141 60.0438 8.32983 59.2944 8.38275C57.7946 8.49221 56.3332 8.78087 54.9079 9.16096C54.1946 9.351 53.491 9.5699 52.797 9.80806C52.1029 10.0474 51.4149 10.3012 50.7366 10.5766C48.0207 11.6712 45.4347 13.0291 42.9389 14.5182C40.4467 16.0145 38.0556 17.6659 35.7474 19.4196C33.4429 21.1792 31.2285 23.052 29.096 25.0113C26.9706 26.9779 24.9235 29.0286 22.9762 31.1744C21.0349 33.3238 19.1754 35.5514 17.4518 37.8848C16.5882 39.0503 15.7546 40.2386 14.9584 41.4535C14.1585 42.6659 13.4044 43.9096 12.6899 45.1785C11.2646 47.7164 10.0113 50.3673 9.10199 53.1662C8.65095 54.5663 8.29372 56.006 8.09646 57.4855C7.90281 58.9625 7.86673 60.4924 8.17585 62.0055C8.33702 62.7585 8.57878 63.5078 8.94804 64.2042L9.08997 64.4628C9.13808 64.5482 9.19341 64.6312 9.24513 64.7154C9.34616 64.885 9.46764 65.0414 9.58191 65.2026C9.64205 65.2807 9.707 65.3565 9.76954 65.4323L9.86456 65.5466L9.9656 65.6548L10.1689 65.8701L10.3866 66.071C10.9699 66.6026 11.6435 67.026 12.3555 67.3279C13.0688 67.6286 13.8133 67.821 14.5591 67.9269C16.0541 68.1398 17.5432 68.0399 18.9841 67.8018C19.707 67.6839 20.4166 67.5191 21.1191 67.3339C21.8227 67.1511 22.5119 66.9262 23.1951 66.6904C25.9266 65.733 28.5066 64.4352 30.9735 62.975C29.6841 63.6028 28.3815 64.1994 27.0536 64.7287C25.7294 65.2663 24.381 65.7354 23.0159 66.1287L23.0135 66.1323Z" fill="#CED4DA"/>
-    <path d="M57.4166 57.6406C57.3818 58.592 57.3264 59.5422 57.2398 60.4888C57.1171 61.9117 56.9235 63.3274 56.6553 64.7226C56.5157 65.419 56.363 66.1118 56.1742 66.7938C55.9877 67.4758 55.782 68.1505 55.5319 68.8073C55.2841 69.464 55.0074 70.1063 54.6875 70.7221C54.3676 71.3367 53.9995 71.9225 53.5821 72.4589C53.1636 72.9942 52.6969 73.4825 52.1737 73.8842C51.6505 74.286 51.0707 74.5963 50.4597 74.7972L50.23 74.8717L49.9954 74.9295L49.8788 74.9583L49.7597 74.9788C49.6803 74.992 49.6021 75.0089 49.5227 75.0209C49.3628 75.0365 49.204 75.063 49.0428 75.0666C48.9622 75.0702 48.8828 75.0774 48.8011 75.0774L48.5593 75.075C47.9134 75.0618 47.2651 74.9331 46.6324 74.7406C45.3683 74.3365 44.1739 73.6533 43.0686 72.8414C41.9608 72.0271 40.9408 71.0769 39.9762 70.0714C39.4939 69.5686 39.0308 69.043 38.5797 68.5078C38.1275 67.9725 37.6921 67.4229 37.2687 66.8624C37.0546 66.5833 36.8501 66.2982 36.6408 66.0156C36.4376 65.7281 36.2295 65.4443 36.031 65.1532C35.6281 64.5758 35.2408 63.9865 34.8607 63.3923C34.4806 62.7981 34.115 62.1943 33.7541 61.5881C33.3981 60.9783 33.0445 60.3673 32.7053 59.7467C32.0221 58.5102 31.3762 57.2509 30.764 55.9747C29.5372 53.4236 28.4318 50.8111 27.4479 48.153C26.4568 45.4972 25.58 42.7969 24.8186 40.0654C24.3183 38.2853 23.8648 36.4919 23.4655 34.6865C22.8857 35.3372 22.3144 35.994 21.7539 36.6603C22.0666 37.993 22.4082 39.3197 22.7751 40.6379C23.5629 43.4248 24.4602 46.1792 25.4886 48.8879C26.5218 51.5941 27.6644 54.2607 28.961 56.8563C29.6081 58.1554 30.2889 59.4375 31.0094 60.6981C31.7262 61.961 32.4924 63.1975 33.2983 64.4099C34.9124 66.8311 36.7058 69.1513 38.7878 71.2333C39.8306 72.2701 40.9516 73.2432 42.1797 74.0899C43.4077 74.9331 44.7549 75.6596 46.2427 76.0721C46.9872 76.2706 47.7642 76.3945 48.5521 76.3824L48.8468 76.374C48.9454 76.3704 49.044 76.3584 49.1414 76.35C49.3387 76.3367 49.5335 76.2994 49.7284 76.2706C49.8258 76.2525 49.9221 76.2297 50.0183 76.208L50.1626 76.1756L50.3057 76.1347L50.5896 76.0517L50.8674 75.9494C51.606 75.6716 52.2891 75.2626 52.8809 74.7659C53.4727 74.2667 53.9815 73.6906 54.4145 73.0748C55.2829 71.8395 55.8698 70.4671 56.3113 69.0755C56.535 68.3791 56.7094 67.6706 56.8634 66.961C57.0197 66.2513 57.1328 65.5357 57.2326 64.8188C57.555 62.4313 57.6187 60.0293 57.5261 57.6406C57.4888 57.6406 57.4515 57.6406 57.4142 57.6406H57.4166Z" fill="#CED4DA"/>
-    <path d="M23.5293 19.9714C23.023 19.9534 22.5154 19.9438 22.0078 19.939C22.0283 20.5801 22.0583 21.2223 22.098 21.8634C22.5479 21.8767 22.9989 21.8923 23.4488 21.9151C24.8608 21.9825 26.2717 22.0944 27.679 22.2423C28.5762 22.3361 29.4711 22.4456 30.366 22.5671C31.0528 21.9657 31.748 21.3727 32.4504 20.7905C30.9313 20.5668 29.405 20.3816 27.8738 20.2445C26.4293 20.1134 24.9799 20.0196 23.5281 19.9726L23.5293 19.9714Z" fill="#CED4DA"/>
-    <path d="M18.5923 19.9956C15.8752 20.1183 13.1533 20.4286 10.4783 21.0636C9.04818 21.4064 7.63249 21.8503 6.26612 22.4517C4.90456 23.0555 3.57909 23.8204 2.44726 24.8705C1.88797 25.3997 1.37438 25.9963 0.971441 26.6735L0.823497 26.9297C0.775386 27.0151 0.733288 27.1053 0.688785 27.1931C0.59617 27.3675 0.526408 27.5527 0.448227 27.7343C0.413346 27.8269 0.382073 27.9208 0.348395 28.0134L0.300284 28.1529L0.260592 28.296L0.18241 28.5823L0.124676 28.8722C-0.0268754 29.6468 -0.0364977 30.443 0.0753618 31.208C0.189627 31.973 0.413346 32.7091 0.710435 33.4007C1.30582 34.7887 2.16581 36.0083 3.11962 37.1149C3.59593 37.6706 4.10591 38.1914 4.63033 38.6941C5.15234 39.1993 5.70322 39.672 6.25891 40.1327C8.13766 41.6723 10.1668 42.9965 12.2668 44.1789C12.2849 44.1476 12.3029 44.1163 12.321 44.085C11.5127 43.5462 10.7164 42.9893 9.94185 42.4072C8.79439 41.5556 7.69143 40.6487 6.645 39.6876C6.1254 39.2029 5.61662 38.7098 5.1343 38.1914C4.65198 37.6754 4.1853 37.145 3.7571 36.5881C3.32891 36.0324 2.92597 35.4598 2.56995 34.8645C2.21392 34.2691 1.90962 33.6484 1.67146 33.0122C1.43572 32.3759 1.26492 31.7216 1.19757 31.0648C1.13021 30.4081 1.1699 29.7526 1.32025 29.1259L1.37678 28.8914L1.45135 28.6617L1.48864 28.5474L1.53314 28.4355C1.56321 28.361 1.59088 28.2852 1.62215 28.2118C1.69311 28.0675 1.75325 27.9183 1.83504 27.7788C1.87474 27.7091 1.90962 27.6369 1.95292 27.5683L2.08162 27.3639C2.43283 26.8214 2.88147 26.3367 3.37702 25.9001C4.38496 25.0365 5.59256 24.3773 6.86391 23.8625C8.13887 23.3477 9.48238 22.9773 10.8451 22.6838C11.5271 22.5371 12.2163 22.4192 12.9091 22.3158C13.6019 22.2123 14.2984 22.1293 14.9984 22.0632C15.3472 22.0271 15.6984 22.003 16.0484 21.973C16.3996 21.9501 16.7496 21.9224 17.1021 21.9068C17.6108 21.8779 18.1196 21.8599 18.6296 21.8467C18.608 21.2296 18.5959 20.6114 18.5923 19.9932V19.9956Z" fill="#CED4DA"/>
-    <circle cx="39" cy="38" r="2" fill="#D9D9D9"/>
-</svg>
diff --git a/priv/static/images/logo_atomic.svg b/priv/static/images/logo_atomic.svg
new file mode 100644
index 000000000..9b3924d88
--- /dev/null
+++ b/priv/static/images/logo_atomic.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1148.33">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M473.48,901.26c30.22,0,55.97-10.63,77.23-31.89,21.26-21.26,31.88-46.99,31.88-77.23s-10.63-55.97-31.88-77.23c-21.26-21.26-47.01-31.89-77.23-31.89s-55.75,10.63-76.52,31.89c-20.79,21.25-31.18,47-31.18,77.23s10.38,55.97,31.18,77.23c20.77,21.25,46.27,31.89,76.52,31.89Z"/>
+      <path class="cls-1" d="M876.77,828.54c89.26-75.98,142.19-151.08,116.91-201.91-20.95-42.13-89.55-54.64-195.13-36.37-3.75-11.38-7.43-22.67-11.19-34.06-54.34-164.84-107.94-328.51-160.84-491.01-6.62-12.26-16.3-24.55-29.05-36.84-12.75-12.27-25.75-19.35-38.97-21.26-16.08-1.88-31.67-3.54-46.77-4.96-15.12-1.42-26.92-2.12-35.43-2.12s-20.33.71-35.42,2.12c-15.12,1.42-30.71,3.54-46.77,6.38-16.07,1.9-30,8.03-41.8,18.42-11.82,10.41-20.08,23.16-24.8,38.26L4.43,1047.21c-14.17,43.46,5.67,73.69,59.52,90.7h-1.42c7.55,1.88,14.88,3.54,21.96,4.96,5.07,1.02,10.3,1.54,15.61,1.83,13.29,2.44,28.08,3.64,44.19,3.64,108.38,0,274.82-52.82,423.98-124.78,6.29-3.02,12.6-6.1,18.88-9.23l12.71-6.38c6.11-3.1,12.17-6.21,17.91-9.2l.78-.38c39.24-20.45,78.09-42.77,115.17-66.13l54.35,166.01v-1.42c4.72,14.18,12.51,25.75,23.38,34.72,10.85,8.97,22.89,13.46,36.14,13.46,7.55,0,14.39-.71,20.55-2.13,6.13-1.41,12.98-3.08,20.55-4.96,52.9-17,72.73-47.23,59.52-90.7-23.65-72.62-47.49-145.57-71.42-218.67ZM847.85,740.34c-11.61-35.41-23.28-70.9-34.96-106.42,35.34.75,58.79,9.12,66.44,24.49,8.77,17.64-2.25,46.58-31.48,81.93ZM476.31,145.96l233.38,712.85c-33.92,23-72.55,46.46-115.77,69.65-6.14,3.28-12.33,6.54-18.59,9.79-7.17,3.71-14.44,7.41-22.24,11.28l-6.82,3.37c-6.29,3.09-12.58,6.12-18.85,9.09-150.45,71.17-278.25,100.72-348.12,95.34L476.31,145.96Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/priv/static/images/logo_atomic_extended.svg b/priv/static/images/logo_atomic_extended.svg
new file mode 100644
index 000000000..1f06dc6d4
--- /dev/null
+++ b/priv/static/images/logo_atomic_extended.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 350.7">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M444.08,328.48c0,13.85-8.66,20.77-25.97,20.77s-25.53-6.92-25.53-20.77V45.87h-75.74c-10.39,0-15.87-7.36-16.45-22.07,0-14.42,5.48-21.64,16.45-21.64h202.97c10.96,0,16.16,7.21,15.58,21.64,0,14.71-5.19,22.07-15.58,22.07h-75.74v282.6Z"/>
+      <path class="cls-1" d="M737.49,2.16c7.5,0,15.29,1.59,23.37,4.76,8.07,3.18,15.86,7.22,23.37,12.12h-.43c7.5,5.48,13.27,12.62,17.31,21.42,4.04,8.81,6.06,18.97,6.06,30.51v205.57c0,23.37-7.79,40.83-23.37,52.37-7.51,5.49-15.22,9.74-23.15,12.77-7.94,3.03-15.65,4.54-23.15,4.54h-94.35c-7.51,0-15.22-1.51-23.15-4.54-7.94-3.03-15.65-7.28-23.15-12.77-7.51-5.77-13.27-12.91-17.31-21.42-4.04-8.51-6.06-18.83-6.06-30.94V70.97c0-11.54,2.02-21.71,6.06-30.51,4.04-8.8,9.81-15.94,17.31-21.42h-.43c7.5-4.9,15.29-8.94,23.37-12.12,8.07-3.17,15.86-4.76,23.37-4.76h94.35ZM726.67,302.51c10.67,0,18.18-3.03,22.5-9.09,4.33-6.06,6.49-12.83,6.49-20.34V74.87c0-7.21-2.16-13.85-6.49-19.91-4.33-6.06-11.83-9.09-22.5-9.09h-72.71c-10.68,0-18.18,3.03-22.5,9.09s-6.49,12.7-6.49,19.91v198.21c0,7.51,2.16,14.28,6.49,20.34,4.33,6.06,11.83,9.09,22.5,9.09h72.71Z"/>
+      <path class="cls-1" d="M1137.8,0c9.23,0,19.33,2.16,30.3,6.49,10.1,4.04,15.15,11.69,15.15,22.94v298.18c0,13.85-8.51,20.77-25.53,20.77s-25.53-6.92-25.53-20.77V105.16l-12.55-1.3-17.31,56.26-51.93,173.11c-3.18,10.1-10.97,15-23.37,14.72-5.49-.29-10.24-1.73-14.28-4.33-4.04-2.6-6.78-6.34-8.22-11.25l-31.16-100.84c-6.35-19.91-12.7-40.17-19.04-60.81-6.35-20.63-13.27-43.49-20.77-68.59l-12.55,1.73v223.75c0,13.85-8.51,20.77-25.53,20.77s-25.53-6.92-25.53-20.77V29.43c0-10.96,5.04-18.61,15.15-22.94,10.67-4.33,20.92-6.34,30.73-6.06,4.33,0,8.8.58,13.42,1.73,4.61,1.16,8.94,2.81,12.98,4.98,4.04,2.16,7.64,4.91,10.82,8.22,3.17,3.32,5.63,7.14,7.36,11.47l67.95,231.54c4.9-17.02,10.1-35.49,15.58-55.4,5.48-19.91,11.1-40.1,16.88-60.59,5.77-20.48,11.47-40.75,17.09-60.81,5.62-20.05,10.89-38.73,15.79-56.04,1.73-4.04,4.18-7.64,7.36-10.82,3.17-3.17,6.78-5.84,10.82-8.01,4.04-2.16,8.29-3.82,12.77-4.98,4.47-1.15,8.87-1.73,13.2-1.73Z"/>
+      <path class="cls-1" d="M1297.5,327.61c0,13.85-8.66,20.77-25.97,20.77s-25.53-6.92-25.53-20.77V20.77c0-13.85,8.51-20.77,25.53-20.77s25.97,6.92,25.97,20.77v306.84Z"/>
+      <path class="cls-1" d="M1600,276.54c0,23.37-7.79,40.83-23.37,52.37-7.51,5.49-15.22,9.74-23.15,12.77-7.94,3.03-15.66,4.54-23.15,4.54h-94.34c-7.51,0-15.22-1.51-23.15-4.54-7.94-3.03-15.66-7.28-23.16-12.77-7.51-5.77-13.27-12.91-17.31-21.42-4.04-8.51-6.06-18.83-6.06-30.94V70.97c0-11.54,2.01-21.71,6.06-30.51,4.04-8.8,9.81-15.94,17.31-21.42h-.43c7.5-4.9,15.29-8.94,23.37-12.12,8.08-3.17,15.86-4.76,23.37-4.76h94.34c7.5,0,15.29,1.59,23.37,4.76,8.07,3.18,15.86,7.22,23.37,12.12h-.43c7.5,5.48,13.27,12.62,17.31,21.42,4.04,8.81,6.06,18.97,6.06,30.51v29.86c0,13.85-8.65,20.77-25.96,20.77s-25.53-6.92-25.53-20.77v-25.97c0-7.21-2.16-13.85-6.49-19.91-4.33-6.06-11.83-9.09-22.51-9.09h-72.7c-10.68,0-18.18,3.03-22.51,9.09-4.33,6.06-6.49,12.7-6.49,19.91v198.21c0,7.51,2.16,14.28,6.49,20.34s11.83,9.09,22.51,9.09h72.7c10.67,0,18.18-3.03,22.51-9.09,4.33-6.06,6.49-12.83,6.49-20.34v-25.1c0-13.56,8.51-20.34,25.53-20.34s25.96,6.78,25.96,20.34v28.56Z"/>
+      <g>
+        <path class="cls-1" d="M144.6,275.25c9.23,0,17.09-3.25,23.59-9.74,6.49-6.49,9.74-14.35,9.74-23.59s-3.25-17.09-9.74-23.58c-6.49-6.49-14.36-9.74-23.59-9.74s-17.03,3.25-23.37,9.74c-6.35,6.49-9.52,14.36-9.52,23.58s3.17,17.09,9.52,23.59c6.34,6.49,14.13,9.74,23.37,9.74Z"/>
+        <path class="cls-1" d="M267.77,253.04c27.26-23.21,43.43-46.14,35.7-61.66-6.4-12.87-27.35-16.69-59.59-11.11-1.14-3.48-2.27-6.92-3.42-10.4-16.59-50.34-32.97-100.33-49.12-149.96-2.02-3.75-4.98-7.5-8.87-11.25-3.89-3.75-7.86-5.91-11.9-6.49-4.91-.57-9.67-1.08-14.28-1.51-4.62-.43-8.22-.65-10.82-.65s-6.21.22-10.82.65c-4.62.43-9.38,1.08-14.28,1.95-4.91.58-9.16,2.45-12.77,5.63-3.61,3.18-6.13,7.07-7.57,11.68L1.35,319.82c-4.33,13.27,1.73,22.51,18.18,27.7h-.43c2.31.57,4.54,1.08,6.71,1.51,1.55.31,3.15.47,4.77.56,4.06.75,8.58,1.11,13.5,1.11,33.1,0,83.93-16.13,129.48-38.11,1.92-.92,3.85-1.86,5.77-2.82l3.88-1.95c1.86-.95,3.72-1.9,5.47-2.81l.24-.12c11.98-6.25,23.85-13.06,35.17-20.2l16.6,50.7v-.43c1.44,4.33,3.82,7.86,7.14,10.6,3.31,2.74,6.99,4.11,11.04,4.11,2.31,0,4.4-.22,6.27-.65,1.87-.43,3.96-.94,6.28-1.51,16.15-5.19,22.21-14.42,18.18-27.7-7.22-22.18-14.5-44.46-21.81-66.78ZM258.93,226.1c-3.55-10.81-7.11-21.65-10.68-32.5,10.79.23,17.95,2.78,20.29,7.48,2.68,5.39-.69,14.23-9.61,25.02ZM145.47,44.58l71.27,217.71c-10.36,7.03-22.16,14.19-35.36,21.27-1.87,1-3.76,2-5.68,2.99-2.19,1.13-4.41,2.26-6.79,3.44l-2.08,1.03c-1.92.94-3.84,1.87-5.76,2.78-45.95,21.74-84.98,30.76-106.32,29.12L145.47,44.58Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/storybook/begin.story.exs b/storybook/begin.story.exs
index 513a172d4..fe33cea31 100644
--- a/storybook/begin.story.exs
+++ b/storybook/begin.story.exs
@@ -7,7 +7,7 @@ defmodule Storybook.Begin do
     ~H"""
     <div class="mt-8 select-none">
       <div class="flex items-center justify-center gap-8">
-        <img class="w-48" src="/images/atomic.svg" />
+        <img class="w-48" src="/images/logo_atomic.svg" />
         <p class="text-5xl font-semibold text-zinc-400 sm:text-7xl">Atomic</p>
       </div>
     </div>