diff --git a/lib/atomic/accounts.ex b/lib/atomic/accounts.ex
index 97b67564c..9bd128519 100644
--- a/lib/atomic/accounts.ex
+++ b/lib/atomic/accounts.ex
@@ -500,10 +500,11 @@ defmodule Atomic.Accounts do
       {:error, %Ecto.Changeset{}}
 
   """
-  def update_user(%User{} = user, attrs \\ %{}, _after_save \\ &{:ok, &1}) do
+  def update_user(%User{} = user, attrs \\ %{}, after_save \\ &{:ok, &1}) do
     user
     |> User.changeset(attrs)
     |> Repo.update()
+    |> after_save(after_save)
   end
 
   @doc """
diff --git a/lib/atomic/accounts/user.ex b/lib/atomic/accounts/user.ex
index f4dcba537..a8ded2443 100644
--- a/lib/atomic/accounts/user.ex
+++ b/lib/atomic/accounts/user.ex
@@ -32,6 +32,7 @@ defmodule Atomic.Accounts.User do
     field :confirmed_at, :naive_datetime
     field :phone_number, :string
     field :profile_picture, Uploaders.ProfilePicture.Type
+    field :cover_image, Uploaders.ProfilePicture.Type
 
     belongs_to :course, Course
     belongs_to :current_organization, Organization
@@ -70,7 +71,6 @@ defmodule Atomic.Accounts.User do
 
   def picture_changeset(user, attrs) do
     user
-    |> cast(attrs, @required_fields ++ @optional_fields)
     |> cast_attachments(attrs, [:profile_picture])
   end
 
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 083ac4b49..31dc86f70 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.Sidebar do
       <AtomicWeb.Components.Dropdown.dropdown orientation={@orientation} items={dropdown_items(@current_user)} id="user-menu-button">
         <:wrapper>
           <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" />
+            <AtomicWeb.Components.Avatar.avatar name={@current_user.name} src={Uploaders.ProfilePicture.url({@current_user.profile_picture, @current_user}, :original)} 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" />
           </button>
@@ -188,14 +188,6 @@ defmodule AtomicWeb.Components.Sidebar do
     |> JS.dispatch("focus", to: "#mobile-sidebar")
   end
 
-  defp user_image(user) do
-    if user.profile_picture do
-      Uploaders.ProfilePicture.url({user, user.profile_picture}, :original)
-    else
-      nil
-    end
-  end
-
   defp get_organizations(nil), do: []
   defp get_organizations(user), do: Organizations.list_user_organizations(user.id)
 end
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 6ba98a7b4..916509026 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -1,6 +1,6 @@
 <div>
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
-    <div class="relative py-5 border-b border-gray-200 sm:py-6">
+    <div class="relative border-b border-gray-200 py-5 sm:py-6">
       <div class="flex flex-col gap-y-3 lg:self-end">
         <div class="w-full">
           <.field type="text" field={@form[:title]} placeholder="Choose a title" required />
@@ -14,45 +14,45 @@
       </div>
 
       <div class="flex flex-col">
-        <div class="flex pt-6 flex-col md:flex-row justify-center md:justify-start">
+        <div class="flex flex-col justify-center pt-6 md:flex-row md:justify-start">
           <div class="flex flex-col gap-y-1">
             <.field type="datetime-local" field={@form[:start]} label="Starting date" required />
           </div>
 
-          <div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
+          <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
             <.field type="datetime-local" field={@form[:finish]} label="Ending date" required />
           </div>
         </div>
 
-        <div class="flex mt-4 flex-col md:flex-row justify-center md:justify-start">
+        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
           <div class="flex flex-col gap-y-1">
             <.field type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
           </div>
 
-          <div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
+          <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
             <.field type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
           </div>
         </div>
 
-        <div class="flex mt-4 flex-col md:flex-row justify-center md:justify-start">
+        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
           <.inputs_for :let={fl} field={@form[:location]}>
             <div class="flex flex-col gap-y-1">
               <.field type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
 
-            <div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
+            <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
               <.field type="url" field={fl[:url]} label="URL" placeholder="Choose an URL" />
             </div>
           </.inputs_for>
         </div>
 
-        <div class="flex-grow mt-4">
+        <div class="mt-4 flex-grow">
           <.field type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
         </div>
       </div>
     </div>
 
-    <div class="flex-grow mt-4">
+    <div class="mt-4 flex-grow">
       <div class="flex justify-center lg:justify-end">
         <.button type="submit" phx-disable-with="Saving...">Save</.button>
       </div>
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 174c4f853..9bccd823d 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={:users} solid class="mr-1.5 h-5 w-5 flex-shrink-0 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={:calendar} solid class="mr-1.5 h-5 w-5 flex-shrink-0 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={:map_pin} solid class="mr-1.5 h-5 w-5 flex-shrink-0 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={:bell} solid class="mr-1.5 h-5 w-5 flex-shrink-0 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={:bell} solid class="mr-1.5 h-5 w-5 flex-shrink-0 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..5ec530bb0 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -53,14 +53,14 @@
                 <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" />
-                    <p class="block pl-1.5 max-w-6xl">
+                    <p class="block max-w-6xl pl-1.5">
                       <%= 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" />
-                  <p class="block pl-1.5 max-w-6xl">
+                  <p class="block max-w-6xl pl-1.5">
                     <%= display_time(@activity.start) %> - <%= display_time(@activity.finish) %>
                   </p>
                 </div>
@@ -97,7 +97,7 @@
               <dd class="mt-1 flex text-sm text-zinc-900">
                 <%= draw_qr_code(@activity, @current_user, @socket) |> raw %>
               </dd>
-              <dd class="mt-1 flex text-sm text-zinc-900 flex-row space-x-1">
+              <dd class="mt-1 flex flex-row space-x-1 text-sm text-zinc-900">
                 <span>
                   <%= gettext("If you can't go please") %>
                 </span>
@@ -116,12 +116,12 @@
                       phx-click="enroll"
                       phx-disable-with={gettext("Enrolling...")}
                       phx-throttle="0"
-                      class="w-fit mt-1 rounded-md bg-orange-500 py-2 px-3.5 text-sm font-medium 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"
+                      class="mt-1 w-fit rounded-md bg-orange-500 px-3.5 py-2 text-sm font-medium 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"
                     >
                       <%= gettext("Enroll") %>
                     </button>
                   <% else %>
-                    <button phx-click="must-login" class="w-fit mt-1 rounded-md bg-orange-500 py-2 px-3.5 text-sm font-medium 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">
+                    <button phx-click="must-login" class="mt-1 w-fit rounded-md bg-orange-500 px-3.5 py-2 text-sm font-medium 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">
                       <%= gettext("Enroll") %>
                     </button>
                   <% end %>
@@ -138,13 +138,13 @@
 <div class="flex flex-row space-x-1">
   <%= 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
+      <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+        <.icon name={:pencil} solid class="mr-3 h-5 w-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
+      <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+        <.icon name={:trash} solid class="mr-3 h-5 w-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..10780348c 100644
--- a/lib/atomic_web/live/announcement_live/edit.html.heex
+++ b/lib/atomic_web/live/announcement_live/edit.html.heex
@@ -4,7 +4,7 @@
       <%= gettext("Delete") %>
     </.button>
   </:actions>
-  <div class="pt-4 px-4">
+  <div class="px-4 pt-4">
     <.live_component module={AtomicWeb.AnnouncementLive.FormComponent} id={@announcement.id} organization={@current_organization} title={@page_title} action={@live_action} announcement={@announcement} return_to={Routes.announcement_show_path(@socket, :show, @announcement)} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/announcement_live/new.html.heex b/lib/atomic_web/live/announcement_live/new.html.heex
index 961cf1a41..13c415a74 100644
--- a/lib/atomic_web/live/announcement_live/new.html.heex
+++ b/lib/atomic_web/live/announcement_live/new.html.heex
@@ -1,5 +1,5 @@
 <.page title={gettext("New Announcement")}>
-  <div class="pt-4 px-4">
+  <div class="px-4 pt-4">
     <.live_component module={AtomicWeb.AnnouncementLive.FormComponent} id={:new} organization={@current_organization} title={@page_title} action={@live_action} announcement={@announcement} return_to={Routes.announcement_index_path(@socket, :index)} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/announcement_live/show.html.heex b/lib/atomic_web/live/announcement_live/show.html.heex
index 4a0c03b56..696f4a397 100644
--- a/lib/atomic_web/live/announcement_live/show.html.heex
+++ b/lib/atomic_web/live/announcement_live/show.html.heex
@@ -1,7 +1,7 @@
-<div class="py-4 px-4 sm:px-0">
-  <div class="px-4 flex flex-col gap-2 mt-6 sm:flex-row sm:items-center">
+<div class="px-4 py-4 sm:px-0">
+  <div class="mt-6 flex flex-col gap-2 px-4 sm:flex-row sm:items-center">
     <div>
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <h4 class="text-2xl font-bold text-zinc-800">
           <%= @announcement.title %>
         </h4>
@@ -14,9 +14,9 @@
 </div>
 
 <%= 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
+  <.link patch={Routes.announcement_edit_path(@socket, :edit, @announcement.organization, @announcement)} class="button px-2">
+    <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+      <.icon name={:pencil} solid class="mr-3 h-5 w-5 text-zinc-400" /> Edit
     </div>
   </.link>
 <% end %>
diff --git a/lib/atomic_web/live/department_live/edit.html.heex b/lib/atomic_web/live/department_live/edit.html.heex
index 383119840..c60ef0955 100644
--- a/lib/atomic_web/live/department_live/edit.html.heex
+++ b/lib/atomic_web/live/department_live/edit.html.heex
@@ -26,7 +26,7 @@
       </div>
     <% end %>
   </:actions>
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component
       module={AtomicWeb.DepartmentLive.FormComponent}
       id="department-edit"
diff --git a/lib/atomic_web/live/department_live/index.html.heex b/lib/atomic_web/live/department_live/index.html.heex
index 30c532038..667f138db 100644
--- a/lib/atomic_web/live/department_live/index.html.heex
+++ b/lib/atomic_web/live/department_live/index.html.heex
@@ -12,7 +12,7 @@
       <.empty_state url={Routes.department_edit_path(@socket, :new, @current_organization)} placeholder="department" />
     </div>
   <% else %>
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-4 px-4 mx-auto max-w-5xl sm:px-6 lg:px-8">
+    <div class="mx-auto grid max-w-5xl grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-6 md:grid-cols-2 lg:px-8">
       <%= for {department, collaborators} <- @departments do %>
         <.link navigate={Routes.department_show_path(@socket, :show, @organization, department)}>
           <.department_card department={department} collaborators={collaborators} />
diff --git a/lib/atomic_web/live/department_live/show.html.heex b/lib/atomic_web/live/department_live/show.html.heex
index 67b1a647d..5e499e458 100644
--- a/lib/atomic_web/live/department_live/show.html.heex
+++ b/lib/atomic_web/live/department_live/show.html.heex
@@ -2,7 +2,7 @@
   <!-- Department Header -->
   <div class="h-32 w-full select-none">
     <%= if @department.banner do %>
-      <img class="w-full h-32 object-cover" src={Uploaders.Banner.url({@department.banner, @department}, :original)} />
+      <img class="h-32 w-full object-cover" src={Uploaders.Banner.url({@department.banner, @department}, :original)} />
     <% else %>
       <.gradient seed={@department.id} class="object-cover" />
     <% end %>
@@ -11,10 +11,10 @@
     <div class="flex w-full flex-col bg-white lg:flex-row">
       <main class="relative z-0 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
         <div class="mx-4 max-w-5xl sm:mx-6 lg:mx-8">
-          <div class="my-6 flex min-w-0 sm:flex-row items-center justify-between">
+          <div class="my-6 flex min-w-0 items-center justify-between sm:flex-row">
             <!-- Department info -->
             <div>
-              <h1 class="flex-1 select-none truncate text-wrap text-xl sm:text-2xl font-bold pr-4 text-gray-900">
+              <h1 class="text-wrap flex-1 select-none truncate pr-4 text-xl font-bold text-gray-900 sm:text-2xl">
                 <%= @department.name %>
               </h1>
               <.link navigate={Routes.organization_show_path(@socket, :show, @organization)}>
@@ -80,7 +80,7 @@
               <% end %>
             </div>
             <!-- Large screens -->
-            <div class="flex-row gap-4 hidden sm:flex">
+            <div class="hidden flex-row gap-4 sm:flex">
               <%= if @current_view == "show" do %>
                 <!-- Collaborate -->
                 <%= if !@current_collaborator do %>
@@ -156,14 +156,14 @@
             <div class="col-span-3 sm:col-span-2">
               <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900"><%= gettext("Recent Activity") %></h2>
               <!-- Recent activity empty state -->
-              <.link class="flex flex-col items-center justify-center mt-4" navigate={Routes.organization_show_path(@socket, :show, @organization)}>
+              <.link class="mt-4 flex flex-col items-center justify-center" navigate={Routes.organization_show_path(@socket, :show, @organization)}>
                 <.avatar class="mb-4 p-1" type={:organization} color={:white} size={:lg} name={@organization.name} src={Uploaders.Logo.url({@organization.logo, @organization}, :original)} />
                 <p class="select-none text-center text-gray-900"><%= gettext("This department doesn't have any recent activity.") %></p>
                 <p class="select-none text-center text-gray-900"><%= gettext("In the meantime, check out %{organization_name}.", organization_name: @organization.name) %></p>
               </.link>
             </div>
             <!-- People -->
-            <div class="w-full hidden sm:block">
+            <div class="hidden w-full 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 %>
diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex
index aba4aed0b..14bbf479f 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -1,29 +1,29 @@
 <div class="flex min-h-full flex-col items-stretch justify-between lg:flex-row">
-  <div class="flex flex-col w-full bg-white lg:border-r lg:flex-row">
-    <main class="relative z-0 flex-1 mb-10 xl:order-last focus:outline-none">
+  <div class="flex w-full flex-col bg-white lg:flex-row lg:border-r">
+    <main class="relative z-0 mb-10 flex-1 focus:outline-none xl:order-last">
       <article class="sticky top-0">
         <!-- Header -->
         <div class="hidden lg:block">
-          <div class="px-4 mx-auto max-w-5xl sm:px-6 lg:px-8">
-            <div class="flex flex-row my-6 min-w-0 select-none gap-x-2">
+          <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="text-2xl font-bold text-gray-900 truncate">
+                <h1 class="truncate text-2xl font-bold text-gray-900">
                   Welcome, <%= @current_user.name %>
                 </h1>
               <% else %>
-                <h1 class="text-2xl font-bold text-gray-900 truncate">
+                <h1 class="truncate text-2xl font-bold text-gray-900">
                   Welcome to Atomic
                 </h1>
               <% end %>
-              <span class="text-2xl animate-wave">
+              <span class="animate-wave text-2xl">
                 👋
               </span>
             </div>
           </div>
         </div>
         <!-- Tabs -->
-        <div x-data="{ option: 'all' }" class="sticky top-10 lg:top-0 z-10 bg-white block">
-          <.tabs class="max-w-5xl mx-auto pt-1 px-4 sm:px-6 lg:px-8">
+        <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">
             <.tab id="tab-all" active={@current_tab == "all"} phx-click="load-all" phx-hook="ScrollToTop">
               <%= gettext("All") %>
             </.tab>
@@ -40,7 +40,7 @@
         <!-- Feed -->
         <%= if @current_tab != "schedule" do %>
           <ul id="feed" role="list" phx-update="stream" phx-viewport-bottom="load-more">
-            <li :for={{id, post} <- @streams.posts} id={id} class="py-4 px-4 mx-auto max-w-5xl border-b border-gray-200 sm:px-6 lg:px-8">
+            <li :for={{id, post} <- @streams.posts} id={id} class="mx-auto max-w-5xl border-b border-gray-200 px-4 py-4 sm:px-6 lg:px-8">
               <%= if post.type == :activity do %>
                 <.link navigate={Routes.activity_show_path(@socket, :show, post.activity)}>
                   <.activity activity={post.activity} />
@@ -58,7 +58,7 @@
       </article>
     </main>
   </div>
-  <div id="scroll-panel" phx-hook="StickyScroll" class="hidden h-fit pr-4 pb-6 pl-6 w-full border-t border-gray-200 sm:pr-6 lg:block lg:flex-shrink-0 lg:pb-0 lg:w-72 lg:border-t-0 xl:pr-0 sticky top-0">
+  <div id="scroll-panel" phx-hook="StickyScroll" class="sticky top-0 hidden h-fit w-full border-t border-gray-200 pr-4 pb-6 pl-6 sm:pr-6 lg:block lg:w-72 lg:flex-shrink-0 lg:border-t-0 lg:pb-0 xl:pr-0">
     <!-- Schedule -->
     <section aria-labelledby="schedule">
       <.schedule schedule={@schedule} />
diff --git a/lib/atomic_web/live/organization_live/index.html.heex b/lib/atomic_web/live/organization_live/index.html.heex
index 1f46ca745..b9609245b 100644
--- a/lib/atomic_web/live/organization_live/index.html.heex
+++ b/lib/atomic_web/live/organization_live/index.html.heex
@@ -12,19 +12,19 @@
       <.empty_state url={Routes.organization_index_path(@socket, :new)} placeholder="organization" />
     </div>
   <% else %>
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 px-4 mx-auto max-w-5xl sm:px-6 lg:px-8">
+    <div class="mx-auto grid max-w-5xl grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-6 md:grid-cols-3 lg:px-8">
       <%= for organization <- @organizations do %>
         <.link navigate={Routes.organization_show_path(@socket, :show, organization)}>
-          <div class="flex items-center space-x-4 px-4 py-4 border border-zinc-200 hover:bg-zinc-50 hover:cursor-pointer rounded-lg">
+          <div class="flex items-center space-x-4 rounded-lg border border-zinc-200 px-4 py-4 hover:cursor-pointer hover:bg-zinc-50">
             <.avatar name={organization.name} src={Uploaders.Logo.url({organization.logo, organization}, :original)} type={:organization} size={:lg} color={:light_gray} />
             <div class="ml-4">
-              <h4 class="font-medium text-lg text-zinc-900">
+              <h4 class="text-lg font-medium text-zinc-900">
                 <%= organization.name %>
               </h4>
-              <p class="hidden md:block xl:hidden text-xs text-zinc-900">
+              <p class="hidden text-xs text-zinc-900 md:block xl:hidden">
                 <%= maybe_slice_string(organization.long_name, 35) %>
               </p>
-              <p class="sm:block md:hidden xl:block text-xs text-zinc-900">
+              <p class="text-xs text-zinc-900 sm:block md:hidden xl:block">
                 <%= maybe_slice_string(organization.long_name, 85) %>
               </p>
             </div>
diff --git a/lib/atomic_web/live/organization_live/show.html.heex b/lib/atomic_web/live/organization_live/show.html.heex
index 44e8a5c73..13293db01 100644
--- a/lib/atomic_web/live/organization_live/show.html.heex
+++ b/lib/atomic_web/live/organization_live/show.html.heex
@@ -3,29 +3,29 @@
     <div class="bg-white">
       <div class="flex justify-between py-4">
         <div class="w-full gap-x-4 lg:flex lg:flex-col">
-          <div class="flex flex-col items-center lg:flex-row space-x-2 lg:space-x-8">
+          <div class="flex flex-col items-center space-x-2 lg:flex-row lg:space-x-8">
             <.avatar name={@organization.name} type={:organization} src={Logo.url({@organization.logo, @organization}, :original)} size={:xl} color={:light_gray} />
             <div class="flex-1 space-x-2">
-              <div class="flex flex-col lg:flex-row items-center lg:items-start lg:justify-start justify-center lg:space-x-2">
-                <div x-data="{ open: false }" class="flex flex-col items-center lg:items-start lg:justify-start justify-center space-y-2">
-                  <h2 class="font-medium text-zinc-900 text-2xl">
+              <div class="flex flex-col items-center justify-center lg:flex-row lg:items-start lg:justify-start lg:space-x-2">
+                <div x-data="{ open: false }" class="flex flex-col items-center justify-center space-y-2 lg:items-start lg:justify-start">
+                  <h2 class="text-2xl font-medium text-zinc-900">
                     <%= @organization.name %>
                   </h2>
                   <p class="text-xs text-gray-900">
                     <%= @organization.long_name %>
                   </p>
                   <div class="flex flex-row items-center space-x-2 text-sm">
-                    <span class="text-zinc-900 font-bold inline-flex items-center"><%= @followers_count %></span>
-                    <span class="text-zinc-900 w-full inline-flex items-center">Followers</span>
+                    <span class="inline-flex items-center font-bold text-zinc-900"><%= @followers_count %></span>
+                    <span class="inline-flex w-full items-center text-zinc-900">Followers</span>
                   </div>
                   <div class="flex space-x-2">
                     <%= if not @following? do %>
-                      <button phx-click="follow" type="button" class="w-32 text-center rounded-md bg-orange-500 px-3.5 py-2.5 text-sm font-medium 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">
+                      <button phx-click="follow" type="button" class="w-32 rounded-md bg-orange-500 px-3.5 py-2.5 text-center text-sm font-medium 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">
                         Follow
                       </button>
                     <% else %>
                       <%= if @organization.name == "CeSIUM" do %>
-                        <div class="lg:my-0 w-32 rounded-md bg-orange-400 py-2 text-center text-sm font-medium text-white shadow-sm inline">Following</div>
+                        <div class="inline w-32 rounded-md bg-orange-400 py-2 text-center text-sm font-medium text-white shadow-sm lg:my-0">Following</div>
                       <% else %>
                         <div class="relative">
                           <div class="inline-flex rounded-md shadow-sm">
@@ -36,7 +36,7 @@
                               <button
                                 type="button"
                                 @click="open = true"
-                                class="inline-flex items-center rounded-l-none rounded-r-md bg-orange-400 px-2 py-2.5 hover:bg-orange-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50"
+                                class="inline-flex items-center rounded-r-md rounded-l-none bg-orange-400 px-2 py-2.5 hover:bg-orange-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50"
                                 aria-haspopup="listbox"
                                 aria-expanded="true"
                                 aria-labelledby="listbox-label"
@@ -53,13 +53,13 @@
                             phx-click="unfollow"
                             @click.away="open = false"
                             @click="open = false"
-                            class="absolute left-0 z-10 -mr-1 mt-2 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-auto sm:left-0"
+                            class="absolute left-0 z-10 mt-2 -mr-1 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-0 sm:left-auto"
                             tabindex="-1"
                             role="listbox"
                             aria-labelledby="listbox-label"
                             aria-activedescendant="listbox-option-0"
                           >
-                            <li class="text-gray-900 cursor-default select-none p-4 text-sm hover:cursor-pointer hover:bg-zinc-50">
+                            <li class="cursor-default select-none p-4 text-sm text-gray-900 hover:cursor-pointer hover:bg-zinc-50">
                               <div class="flex flex-col">
                                 <div class="flex justify-between">
                                   <p class="font-normal">Unfollow</p>
@@ -72,13 +72,13 @@
                     <% end %>
                     <%= 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
+                        <div type="button" class="inline-flex w-fit justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+                          <.icon name={:pencil} solid class="mr-3 h-5 w-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
+                        <div type="button" class="inline-flex w-fit justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+                          <.icon name={:trash} solid class="mr-3 h-5 w-5 text-gray-400" /> Delete
                         </div>
                       <% end %>
                     <% end %>
@@ -94,7 +94,7 @@
   </div>
 </div>
 
-<div class="flex space-x-20 w-full">
+<div class="flex w-full space-x-20">
   <div class="sm:w-3/4"></div>
   <div class="sm:w-1/4">
     <p class="text-md text-zinc-900">
diff --git a/lib/atomic_web/live/partner_live/edit.html.heex b/lib/atomic_web/live/partner_live/edit.html.heex
index 0f8a76911..4b4ef18ce 100644
--- a/lib/atomic_web/live/partner_live/edit.html.heex
+++ b/lib/atomic_web/live/partner_live/edit.html.heex
@@ -26,7 +26,7 @@
       </div>
     <% end %>
   </:actions>
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component module={AtomicWeb.PartnerLive.FormComponent} organization={@current_organization} id={@partner.id || :new} title={@page_title} action={@live_action} partner={@partner} return_to={Routes.partner_index_path(@socket, :index, @current_organization)} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/partner_live/index.html.heex b/lib/atomic_web/live/partner_live/index.html.heex
index 73d31306b..1a98cd57f 100644
--- a/lib/atomic_web/live/partner_live/index.html.heex
+++ b/lib/atomic_web/live/partner_live/index.html.heex
@@ -36,20 +36,20 @@
     <ul role="list" class="">
       <%= for partner <- @partners do %>
         <.link navigate={Routes.partner_show_path(@socket, :show, @organization, partner)} class="block hover:bg-zinc-50">
-          <li class="px-4 flex flex-col md:flex-row justify-between border-b border-zinc-200 gap-x-6 py-5">
-            <div class="flex flex-col md:flex-row gap-x-4 w-full">
+          <li class="flex flex-col justify-between gap-x-6 border-b border-zinc-200 px-4 py-5 md:flex-row">
+            <div class="flex w-full flex-col gap-x-4 md:flex-row">
               <div class="flex-shrink-0">
                 <.avatar color={:light_gray} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:sm} />
               </div>
               <div class="flex-grow">
                 <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">
+                  <div class="z-1 flex flex-row items-center gap-x-1 text-sm leading-6">
                     <.icon name={:map_pin} class="h-5 w-5 text-zinc-400" />
                     <p class="text-blue-500"><%= partner.location.name %></p>
                   </div>
                 <% end %>
-                <p class="mt-1 truncate text-xs leading-5 text-zinc-500 overflow-hidden overflow-ellipsis whitespace-normal">
+                <p class="mt-1 overflow-hidden truncate overflow-ellipsis whitespace-normal text-xs leading-5 text-zinc-500">
                   <%= Enum.map(String.split(partner.benefits, "\n"), fn phrase -> %>
                     <%= if String.length(phrase) < 150 do %>
                       <%= phrase %><br />
diff --git a/lib/atomic_web/live/partner_live/show.html.heex b/lib/atomic_web/live/partner_live/show.html.heex
index 1f3815899..50a3c544a 100644
--- a/lib/atomic_web/live/partner_live/show.html.heex
+++ b/lib/atomic_web/live/partner_live/show.html.heex
@@ -1,27 +1,27 @@
 <.page title="Partners">
   <:actions>
     <%= if @has_permissions? do %>
-      <div class="lg:border-orange-500 lg:block">
+      <div class="lg:block lg:border-orange-500">
         <.button navigate={Routes.partner_edit_path(@socket, :edit, @organization, @partner)} icon={:pencil}>
           <%= gettext("Edit Partner") %>
         </.button>
       </div>
     <% end %>
   </:actions>
-  <div class="lg:px-8 sm:px-0 min-h-fit border-t-100 select-none lg:mx-0 max-w-5xl sm:mx-6 ">
-    <div class="flex flex-col gap-2 mt-6 sm:justify-center">
+  <div class="border-t-100 min-h-fit max-w-5xl select-none sm:mx-6 sm:px-0 lg:mx-0 lg:px-8">
+    <div class="mt-6 flex flex-col gap-2 sm:justify-center">
       <div class="flex flex-row">
-        <div class="flex flex-col lg:justify-none items-center px-2">
+        <div class="flex flex-col items-center px-2 lg:justify-none">
           <.avatar color={:light_gray} name={@partner.name} src={Uploaders.PartnerImage.url({@partner.image, @partner}, :original)} type={:company} size={:xl} />
         </div>
         <div>
           <div class="flex items-center justify-between">
-            <h1 class="flex-1 select-none truncate text-wrap text-xl sm:text-2xl font-bold pr-4 text-gray-900 ml-2">
+            <h1 class="text-wrap ml-2 flex-1 select-none truncate pr-4 text-xl font-bold text-gray-900 sm:text-2xl">
               <%= @partner.name %>
             </h1>
           </div>
           <%= if @partner.location do %>
-            <div class="flex flex-row items-center gap-x-1 text-md leading-6">
+            <div class="text-md flex flex-row items-center gap-x-1 leading-6">
               <.icon name={:map_pin} class="h-5 w-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>
@@ -29,7 +29,7 @@
           <%= if @partner.socials do %>
             <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 ">
+                <div class="flex flex-row items-center gap-x-1">
                   <.icon name={:globe_alt} class="h-5 w-5 text-zinc-400" />
                   <.link class="text-blue-500" href={@partner.socials.website}>Website</.link>
                 </div>
@@ -57,9 +57,9 @@
         </div>
       </div>
       <div>
-        <div class="mt-1 text-zinc-800 py-4 px-2">
+        <div class="mt-1 px-2 py-4 text-zinc-800">
           <div class="flex flex-row items-center gap-x-2">
-            <.icon name={:clock} class="h-5 w-5 mb-2" />
+            <.icon name={:clock} class="mb-2 h-5 w-5" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-gray-900">Overview</h2>
           </div>
           <span class="py-4">
@@ -68,9 +68,9 @@
             <% end) %>
           </span>
         </div>
-        <div class="text-zinc-800 py-4 px-2">
+        <div class="px-2 py-4 text-zinc-800">
           <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={:signal} class="mb-2 h-5 w-5" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-gray-900">Benefits</h2>
           </div>
           <span>
@@ -86,12 +86,12 @@
         <%= 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" />
-              <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900 py-2">Related Partners</h2>
+              <.icon name={:star} class="mb-2 h-5 w-5" />
+              <h2 class="mb-2 flex-1 select-none truncate py-2 text-lg font-semibold text-gray-900">Related Partners</h2>
             </div>
             <div class="sm:grid sm:grid-cols-2 sm:gap-px">
               <%= for partner <- @partners |> Enum.filter(fn partner -> partner.id != @partner.id end) do %>
-                <div class="rounded-lg group relative border border-zinc-200 bg-white p-4 hover:bg-zinc-50 m-2">
+                <div class="group relative m-2 rounded-lg border border-zinc-200 bg-white p-4 hover:bg-zinc-50">
                   <.link href={Routes.partner_show_path(@socket, :show, @organization, partner)}>
                     <div class="flex flex-row items-center space-x-2">
                       <.avatar color={:light_gray} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:xs} />
diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex
index 82fe062f4..3482433e1 100644
--- a/lib/atomic_web/live/profile_live/form_component.ex
+++ b/lib/atomic_web/live/profile_live/form_component.ex
@@ -2,14 +2,140 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
   use AtomicWeb, :live_component
 
   alias Atomic.Accounts
+  alias Atomic.Socials
+  alias AtomicWeb.Components.ImageUploader
 
   @extensions_whitelist ~w(.jpg .jpeg .gif .png)
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="px-4 pt-4">
+      <.form :let={f} for={@changeset} id="profile-form" phx-target={@myself} phx-change="validate" phx-submit="save">
+        <!-- Upload de Foto -->
+        <div class="flex flex-wrap justify-between">
+          <!-- Secção para a imagem de capa -->
+          <div class="flex-1 max-w-[70%] pr-4">
+            <%= label(f, :cover_image, "Cover Image", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %>
+          </div>
+          <!-- Secção para a imagem de perfil -->
+          <div class="flex flex-shrink-0 flex-col items-center">
+            <%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %>
+            <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} />
+          </div>
+        </div>
+        <!-- Linha de separação -->
+        <hr class="mb-6 h-full w-full border-gray-200" />
+        <!-- Campos do formulário em duas colunas -->
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          <div>
+            <%= label(f, :name, "Full name", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= text_input(f, :name,
+              required: true,
+              placeholder: gettext("John Doe"),
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :name) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :email, "Email", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= text_input(f, :email,
+              required: true,
+              placeholder: gettext("john_doe@mail.com"),
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :email) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :username, "Username", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <div class="relative flex w-full appearance-none rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:outline-none focus-within:ring-orange-400 sm:text-sm">
+              <span class="select-none self-center">@</span>
+              <%= text_input(f, :slug,
+                required: true,
+                spellcheck: false,
+                placeholder: gettext("john_doe"),
+                class: "w-full appearance-none border-none pl-0 text-zinc-900 placeholder-zinc-500 focus:outline-none focus:ring-transparent sm:text-sm"
+              ) %>
+            </div>
+            <div class="text-sm text-red-600"><%= error_tag(f, :slug) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :phone_number, "Phone number", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= text_input(f, :phone_number,
+              required: true,
+              placeholder: gettext("912345678"),
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :phone_number) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :bio, "Bio", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= textarea(f, :bio,
+              placeholder: "Tell us about yourself",
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :bio) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :instagram, "Instagram Username", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= text_input(f, :instagram,
+              placeholder: "your_username",
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :instagram) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :facebook, "Facebook Username", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= text_input(f, :facebook,
+              placeholder: "your_username",
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :facebook) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :twitter, "X Username", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= text_input(f, :twitter,
+              placeholder: "your_username",
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :twitter) %></div>
+          </div>
+
+          <div>
+            <%= label(f, :tiktok, "TikTok Username", class: "mb-1 text-sm font-medium text-gray-700") %>
+            <%= text_input(f, :tiktok,
+              placeholder: "your_username",
+              class: "w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
+            ) %>
+            <div class="text-sm text-red-600"><%= error_tag(f, :tiktok) %></div>
+          </div>
+        </div>
+        <!-- Botões -->
+        <div class="mt-8 flex w-full justify-end">
+          <button type="submit" class="inline-flex rounded-md border-2 border-orange-500 bg-white px-6 py-2 text-sm font-medium text-orange-500 shadow-sm hover:bg-orange-600 hover:text-white">
+            Save
+          </button>
+        </div>
+      </.form>
+    </div>
+    """
+  end
+
   @impl true
   def mount(socket) do
     {:ok,
      socket
-     |> allow_upload(:picture, accept: @extensions_whitelist, max_entries: 1)}
+     |> allow_upload(:image,
+       accept: Uploaders.ProfilePicture.extension_whitelist(),
+       max_entries: 1
+     )}
   end
 
   @impl true
@@ -32,6 +158,7 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
     {:noreply, assign(socket, :changeset, changeset)}
   end
 
+  @impl true
   def handle_event("save", %{"user" => user_params}, socket) do
     user = socket.assigns.user
 
@@ -69,8 +196,8 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
 
   defp consume_image_data(socket, user) do
     consume_uploaded_entries(socket, :image, fn %{path: path}, entry ->
-      Accounts.update_user(user, %{
-        "image" => %Plug.Upload{
+      Accounts.update_user_picture(user, %{
+        "profile_picture" => %Plug.Upload{
           content_type: entry.client_type,
           filename: entry.client_name,
           path: path
diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex
deleted file mode 100644
index d0f208a26..000000000
--- a/lib/atomic_web/live/profile_live/form_component.html.heex
+++ /dev/null
@@ -1,86 +0,0 @@
-<div class="pt-4 px-4">
-  <.form :let={f} for={@changeset} id="profile-form" phx-target={@myself} phx-change="validate" phx-submit="save">
-    <div class="flex flex-col-reverse sm:flex-row items-center sm:justify-between mt-4 border-b pb-10 border-gray-200">
-      <div class="space-y-4 w-full">
-        <h2 class="hidden sm:block text-xl pb-4 font-bold leading-7 text-zinc-900 sm:text-4xl">
-          <%= gettext("Your Profile") %>
-        </h2>
-
-        <div class="flex flex-col justify-center">
-          <%= label(f, :name, class: "mb-1 text-sm font-medium text-gray-700") %>
-          <%= text_input(f, :name,
-            required: true,
-            placeholder: gettext("John Doe"),
-            class: "relative w-full sm:w-96 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
-          ) %>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :name) %></div>
-        </div>
-        <div class="flex flex-col justify-center">
-          <%= label(f, :email, class: "mb-1 text-sm font-medium text-gray-700") %>
-          <%= text_input(f, :email,
-            required: true,
-            placeholder: gettext("john_doe@mail.com"),
-            class: "relative w-full sm:w-96 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
-          ) %>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :email) %></div>
-        </div>
-        <div class="flex flex-col justify-center">
-          <%= label(f, :username, class: "mb-1 text-sm font-medium text-gray-700") %>
-          <div class="flex flex-row relative w-full sm:w-96  appearance-none rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:outline-none sm:text-sm">
-            <span class="self-center select-none">@</span>
-            <%= text_input(f, :slug,
-              required: true,
-              spellcheck: false,
-              placeholder: gettext("john_doe"),
-              class: "pl-0 appearance-none text-zinc-900 placeholder-zinc-500 sm:text-sm border-none w-full focus:outline-none focus:ring-transparent"
-            ) %>
-          </div>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :slug) %></div>
-        </div>
-        <div class="flex flex-col justify-center">
-          <%= label(f, :phone_number, class: "mb-1 text-sm font-medium text-gray-700") %>
-          <%= text_input(f, :phone_number,
-            required: true,
-            placeholder: gettext("912345678"),
-            class: "relative w-full sm:w-96 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
-          ) %>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :phone_number) %></div>
-        </div>
-      </div>
-      <.live_file_input upload={@uploads.picture} class="hidden" />
-      <a onclick={"document.getElementById('#{@uploads.picture.ref}').click()"}>
-        <div class={
-          "#{if length(@uploads.picture.entries) != 0 do
-            "hidden"
-          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" />
-          </div>
-        </div>
-        <section>
-          <%= for entry <- @uploads.picture.entries do %>
-            <%= for err <- upload_errors(@uploads.picture, entry) do %>
-              <p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
-            <% 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" />
-              </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" />
-              </figure>
-            </article>
-          <% end %>
-        </section>
-      </a>
-    </div>
-    <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
-        </div>
-      <% end %>
-    </div>
-  </.form>
-</div>
diff --git a/lib/atomic_web/live/profile_live/show.ex b/lib/atomic_web/live/profile_live/show.ex
index 2ac05c311..a04e74d7d 100644
--- a/lib/atomic_web/live/profile_live/show.ex
+++ b/lib/atomic_web/live/profile_live/show.ex
@@ -1,8 +1,7 @@
 defmodule AtomicWeb.ProfileLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.Button
-  import AtomicWeb.Components.Avatar
+  import AtomicWeb.Components.{Button, Avatar, Gradient}
 
   alias Atomic.Accounts
   alias Atomic.Organizations
diff --git a/lib/atomic_web/live/profile_live/show.html.heex b/lib/atomic_web/live/profile_live/show.html.heex
index 60dde0ff6..617395e4d 100644
--- a/lib/atomic_web/live/profile_live/show.html.heex
+++ b/lib/atomic_web/live/profile_live/show.html.heex
@@ -1,14 +1,62 @@
-<div>
-  <div class="pt-4 px-4">
-    <div class="flex items-center justify-between">
-      <div class="min-w-0 flex-1 space-y-2">
-        <div class="flex flex-row">
-          <h2 class="text-xl font-bold leading-7 text-zinc-900 sm:text-4xl">
-            <%= @user.name %>
-          </h2>
+<div class="relative">
+  <div class="h-64 w-full border-b-2 bg-cover">
+    <%= if @user.cover_image < 0  do %>
+      <div class="relative">
+        <.avatar name={@user.name} color={:light_gray} class="h-36 w-36 text-4xl rounded-full border-4 border-white" type={:user} src={Uploaders.ProfilePicture.url({@user.profile_picture, @user}, :original)} />
+      </div>
+    <% else %>
+      <.gradient class="h-64 w-full bg-cover bg-center" seed={@user.id} />
+    <% end %>
+  </div>
+  <!-- Profile Info Container -->
+  <div class="relative px-4 pt-4">
+    <div class="flex items-start">
+      <!-- Profile Picture -->
+      <div class="relative -mt-16 flex-shrink-0">
+        <div class="relative">
+          <.avatar name={@user.name} color={:light_gray} class="h-36 w-36 text-4xl rounded-full border-4 border-white" type={:user} src={Uploaders.ProfilePicture.url({@user.profile_picture, @user}, :original)} />
         </div>
-        <p class="text-zinc-500">@<%= @user.slug %></p>
-        <div class="grid grid-cols-1 gap-4 py-6 mb-2 sm:grid-cols-2 lg:grid-cols-3">
+      </div>
+      <div class="flex-1 pl-6">
+        <!-- User Info -->
+        <h2 class="text-xl font-bold leading-7 text-zinc-900 sm:text-4xl">
+          <%= @user.name %>
+        </h2>
+
+        <div class="mt-2">
+          <%= if length(@organizations) > 0 do %>
+            <div class="mt-2">
+              <%= for organization <- @organizations do %>
+                <p class="text-lg font-semibold text-zinc-600 md:text-md lg:text-sm">
+                  <%= organization.name %> - <%= Atomic.Organizations.get_role(@user.id, organization.id) %>
+                </p>
+              <% end %>
+            </div>
+          <% else %>
+            <p class="py-2">No organizations found.</p>
+          <% end %>
+        </div>
+        <!-- Social Media Links -->
+        <div class="mt-4 flex gap-4">
+          <div class="flex flex-row items-center gap-x-1">
+            <img src="/images/tiktok.svg" class="h-5 w-5" alt="TikTok" />
+            <.link class="text-blue-500">Tik Tok</.link>
+          </div>
+          <div class="flex flex-row items-center gap-x-1">
+            <img src="/images/instagram.svg" class="h-5 w-5" alt="Instagram" />
+            <.link class="text-blue-500">Instagram</.link>
+          </div>
+          <div class="flex flex-row items-center gap-x-1">
+            <img src="/images/facebook.svg" class="h-5 w-5" alt="Facebook" />
+            <.link class="text-blue-500">Facebook</.link>
+          </div>
+          <div class="flex flex-row items-center gap-x-1">
+            <img src="/images/x.svg" class="h-5 w-5" alt="X" />
+            <.link class="text-blue-500">X</.link>
+          </div>
+        </div>
+
+        <div class="fllex-row mt-4 flex gap-8">
           <%= if @user.email do %>
             <div class="sm:col-span-1">
               <dt class="text-sm font-medium text-gray-500">Email</dt>
@@ -31,18 +79,15 @@
             </div>
           <% end %>
         </div>
+        <!-- Edit Button for Current User -->
+        <%= if @is_current_user do %>
+          <div class="mt-4 flex justify-start">
+            <.button patch={Routes.profile_edit_path(@socket, :edit, @user)}>
+              <%= gettext("Edit") %>
+            </.button>
+          </div>
+        <% end %>
       </div>
-      <.avatar class="sm:w-44 sm:h-44 sm:text-6xl" name={@user.name} size={:xl} color={:light_gray} />
     </div>
-    <!-- Divider -->
-    <div class="py-6 mb-2 border-b border-zinc-200"></div>
-
-    <%= if @is_current_user do %>
-      <div class="w-24 flex justify-end">
-        <.button patch={Routes.profile_edit_path(@socket, :edit, @user)}>
-          <%= gettext("Edit") %>
-        </.button>
-      </div>
-    <% end %>
   </div>
 </div>
diff --git a/lib/atomic_web/live/scanner_live/index.html.heex b/lib/atomic_web/live/scanner_live/index.html.heex
index b06604cf8..4aec0db39 100644
--- a/lib/atomic_web/live/scanner_live/index.html.heex
+++ b/lib/atomic_web/live/scanner_live/index.html.heex
@@ -3,14 +3,14 @@
     Scan a QR code
   </h2>
 
-  <div class="my-8 w-full lg:px-6 lg:mx-16">
+  <div class="my-8 w-full lg:mx-16 lg:px-6">
     <div id="qr-scanner" phx-hook="QrScanner" data-ask_perm="perm_button" data-open_on_mount data-on_start="document.getElementById('request').style.display = 'none'" data-on_success="hook.pushEvent('scan', pathname)" class="relative"></div>
 
-    <div id="request" class="flex justify-between items-center h-10">
+    <div id="request" class="flex h-10 items-center justify-between">
       <div id="loadingMessage" class="inline-flex justify-center py-2 text-base font-medium text-zinc-900">
         Unable to access camera. Make sure you allow the use of the camera and that the camera isn't being used elsewhere.
       </div>
-      <button id="perm_button" type="button" class="inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-white rounded-md border border-transparent shadow-sm bg-secondary hover:bg-orange-600">Request Permission</button>
+      <button id="perm_button" type="button" class="bg-secondary inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-600">Request Permission</button>
     </div>
   </div>
 </div>
diff --git a/lib/atomic_web/templates/error/404.html.heex b/lib/atomic_web/templates/error/404.html.heex
index 6ff1b92f9..2307ce2d1 100644
--- a/lib/atomic_web/templates/error/404.html.heex
+++ b/lib/atomic_web/templates/error/404.html.heex
@@ -12,14 +12,14 @@
     <link rel="manifest" href={Routes.static_path(@conn, "/favicon/site.webmanifest")} />
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} />
   </head>
-  <div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat bg-opacity-25 bg-center">
+  <div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
     <div class="flex flex-col items-center">
-      <div class="flex flex-row gap-4 items-center">
-        <span class="text-5xl font-bold text-gray-900 uppercase">Error</span>
-        <span class="text-6xl font-bold text-gray-900 pb-2">404</span>
+      <div class="flex flex-row items-center gap-4">
+        <span class="text-5xl font-bold uppercase text-gray-900">Error</span>
+        <span class="pb-2 text-6xl font-bold text-gray-900">404</span>
       </div>
       <h2 class="text-lg font-semibold text-gray-900">Page not found</h2>
-      <.link href="/" class="inline-flex items-center rounded-md bg-orange-500 px-3 py-2 my-4 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">
+      <.link href="/" class="my-4 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">
         <%= gettext("Go back home") %>
       </.link>
     </div>
diff --git a/lib/atomic_web/templates/error/500.html.heex b/lib/atomic_web/templates/error/500.html.heex
index ae5c8411b..72c20bd8d 100644
--- a/lib/atomic_web/templates/error/500.html.heex
+++ b/lib/atomic_web/templates/error/500.html.heex
@@ -12,7 +12,7 @@
     <link rel="manifest" href={Routes.static_path(@conn, "/favicon/site.webmanifest")} />
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} />
   </head>
-  <body class="flex flex-row justify-center items-center overflow-x-hidden bg-white bg-hero-pattern bg-cover lg:bg-75 bg-no-repeat bg-center h-full w-full">
+  <body class="bg-hero-pattern flex h-full w-full flex-row items-center justify-center overflow-x-hidden bg-white bg-cover bg-center bg-no-repeat lg:bg-75">
     <main class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
       <div class="text-center">
         <p class="text-base font-semibold text-orange-500">500</p>
diff --git a/lib/atomic_web/templates/layout/app.html.heex b/lib/atomic_web/templates/layout/app.html.heex
index f51c0300f..c631f0ae9 100644
--- a/lib/atomic_web/templates/layout/app.html.heex
+++ b/lib/atomic_web/templates/layout/app.html.heex
@@ -1,14 +1,14 @@
 <main>
   <%= if Phoenix.Flash.get(@flash, :info) do %>
-    <div id="info-flash" x-init="setTimeout(function() { document.getElementById('info-flash').remove(); }, 5000);" class="absolute top-0 right-0 w-full flex justify-end mr-2 mt-2">
-      <div class="overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto">
-        <div class="bg-blue-400 opacity-100 h-[0.30rem] animate-progress"></div>
+    <div id="info-flash" x-init="setTimeout(function() { document.getElementById('info-flash').remove(); }, 5000);" class="absolute top-0 right-0 mt-2 mr-2 flex w-full justify-end">
+      <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div class="h-[0.30rem] animate-progress bg-blue-400 opacity-100"></div>
         <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={:information_circle} solid class="h-6 w-6 text-blue-400" />
             </div>
-            <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
+            <div class="mt-1 ml-3 w-0 flex-1 text-sm font-medium text-zinc-900">
               <%= Phoenix.Flash.get(@flash, :info) %>
             </div>
           </div>
@@ -18,15 +18,15 @@
   <% end %>
 
   <%= if Phoenix.Flash.get(@flash, :error) do %>
-    <div id="error-flash" x-init="setTimeout(function() { document.getElementById('error-flash').remove(); }, 5000);" class="absolute top-0 right-0 w-full flex justify-end mr-2 mt-2">
-      <div class="overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto">
-        <div class="bg-red-400 opacity-100 h-[0.30rem] animate-progress"></div>
+    <div id="error-flash" x-init="setTimeout(function() { document.getElementById('error-flash').remove(); }, 5000);" class="absolute top-0 right-0 mt-2 mr-2 flex w-full justify-end">
+      <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div class="h-[0.30rem] animate-progress bg-red-400 opacity-100"></div>
         <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={:x_circle} solid class="h-6 w-6 text-red-400" />
             </div>
-            <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
+            <div class="mt-1 ml-3 w-0 flex-1 text-sm font-medium text-zinc-900">
               <%= Phoenix.Flash.get(@flash, :error) %>
             </div>
           </div>
diff --git a/lib/atomic_web/templates/layout/live.html.heex b/lib/atomic_web/templates/layout/live.html.heex
index f9f56cce8..6070853db 100644
--- a/lib/atomic_web/templates/layout/live.html.heex
+++ b/lib/atomic_web/templates/layout/live.html.heex
@@ -1,18 +1,18 @@
 <!-- Notifications -->
-<div aria-live="assertive" class="flex fixed inset-0 z-50 flex-col gap-y-2 items-end py-4 px-4 pointer-events-none sm:items-start sm:px-6">
+<div aria-live="assertive" class="pointer-events-none fixed inset-0 z-50 flex flex-col items-end gap-y-2 px-4 py-4 sm:items-start sm:px-6">
   <%= for {key, message} <- @flash do %>
     <.live_component id={key} module={AtomicWeb.Components.Notification} type={key} message={message} flash={@flash} />
   <% end %>
 </div>
 <!-- Layout -->
-<div class="flex relative flex-col min-h-screen">
-  <div class="flex flex-col mx-auto w-full lg:flex-row xl:px-8 max-w-[1380px]">
+<div class="relative flex min-h-screen flex-col">
+  <div class="max-w-[1380px] mx-auto flex w-full flex-col lg:flex-row xl:px-8">
     <!-- Navbar -->
-    <div class="relative flex-shrink-0 lg:w-72 lg:flex lg:max-w-[400px] sticky top-0 z-10 bg-white">
+    <div class="relative sticky top-0 z-10 flex-shrink-0 bg-white lg:max-w-[400px] lg:flex lg:w-72">
       <%= render("_live_navbar.html", assigns) %>
     </div>
     <!-- Central content -->
-    <div class="w-full content-height">
+    <div class="content-height w-full">
       <%= @inner_content %>
     </div>
   </div>
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..68ce7c6e7 100644
--- a/lib/atomic_web/templates/user_change_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_change_password/edit.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={Routes.user_change_password_path(@conn, :update)} id="update_password" class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mx-4 mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={Routes.user_change_password_path(@conn, :update)} id="update_password" class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mx-4 mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <span><%= gettext("Change Password") %></span>
     </h2>
     <%= 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" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name={:exclamation_circle} solid class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -16,57 +16,57 @@
 
     <%= hidden_input(f, :action, value: "update_password") %>
 
-    <div class="space-y-3 rounded-md w-full flex-col mt-6">
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+    <div class="mt-6 w-full flex-col space-y-3 rounded-md">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= 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" />
+          <%= password_input(f, :current_password, required: true, placeholder: gettext("Current password"), class: "relative w-full appearance-none rounded border-0 text-zinc-900 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="w-fit cursor-pointer px-2">
+            <.icon name={:eye} solid class="h-auto w-5 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" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_current_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye_slash} solid class="h-auto w-5 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>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :current_password) %></span>
       </div>
 
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= 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" />
+          <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full appearance-none rounded border-0 text-zinc-900 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="w-fit cursor-pointer px-2">
+            <.icon name={:eye} solid class="h-auto w-5 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" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye_slash} solid class="h-auto w-5 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>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password) %></span>
       </div>
 
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide_confirm: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide_confirm: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= label(f, :password_confirmation, "Confirm new password", class: "sr-only") %>
           <%= password_input(f, :password_confirmation,
             required: true,
             placeholder: gettext("Confirm new password"),
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 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" />
+          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('update_password_password_confirmation').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye} solid class="h-auto w-5 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" />
+          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('update_password_password_confirmation').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye_slash} solid class="h-auto w-5 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>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password_confirmation) %></span>
       </div>
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit("Change Password", class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96") %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit("Change Password", class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96") %>
       </div>
     </div>
   </.form>
diff --git a/lib/atomic_web/templates/user_registration/new.html.heex b/lib/atomic_web/templates/user_registration/new.html.heex
index f86626955..e50a28425 100644
--- a/lib/atomic_web/templates/user_registration/new.html.heex
+++ b/lib/atomic_web/templates/user_registration/new.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={Routes.user_registration_path(@conn, :create)} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 sm:mx-0">
-    <h2 class="mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={Routes.user_registration_path(@conn, :create)} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
+    <h2 class="mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <span><%= gettext("Register") %></span>
     </h2>
     <%= 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" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name={:exclamation_circle} solid class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
@@ -14,51 +14,51 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-md flex-col w-full justify-center items-center mt-6 px-3.5 mx-4 sm:w-96 sm:mx-0 sm:px-0">
+    <div class="mx-4 mt-6 w-full flex-col items-center justify-center space-y-3 rounded-md px-3.5 sm:mx-0 sm:w-96 sm:px-0">
       <div class="flex flex-col items-center justify-center">
         <%= label(f, :email, class: "sr-only") %>
         <%= email_input(f, :email,
           required: true,
           placeholder: gettext("Email address"),
-          class: "relative w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+          class: "relative w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
         ) %>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :email) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :email) %></span>
       </div>
       <div class="flex flex-col items-center justify-center">
-        <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:text-sm">
           <%= label(f, :password, class: "sr-only") %>
           <%= password_input(f, :password,
             required: true,
             placeholder: gettext("Password"),
             autocomplete: "current-password",
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 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" />
+          <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye} solid class="h-auto w-5 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" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye_slash} solid class="h-auto w-5 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>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password) %></span>
       </div>
       <div class="flex flex-col items-center justify-center">
-        <div x-data="{ hide_confirm: true }" class="flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1  sm:text-sm">
+        <div x-data="{ hide_confirm: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:text-sm">
           <%= label(f, :password_confirmation, class: "sr-only") %>
           <%= password_input(f, :password_confirmation,
             required: true,
             placeholder: gettext("Confirm password"),
             autocomplete: "current-password",
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 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" />
+          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye} solid class="h-auto w-5 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" />
+          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye_slash} solid class="h-auto w-5 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>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password_confirmation) %></span>
       </div>
     </div>
 
@@ -70,8 +70,8 @@
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit("Register", class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96 sm:mx-0 sm:px-0") %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit("Register", class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:mx-0 sm:w-96 sm:px-0") %>
       </div>
     </div>
   </.form>
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..54fd7285c 100644
--- a/lib/atomic_web/templates/user_reset_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/edit.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={Routes.user_reset_password_path(@conn, :update, @token)} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mx-4 mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={Routes.user_reset_password_path(@conn, :update, @token)} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mx-4 mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <span><%= gettext("Reset Password") %></span>
     </h2>
     <%= 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" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name={:exclamation_circle} solid class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -14,43 +14,43 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-md w-full flex-col mt-6">
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+    <div class="mt-6 w-full flex-col space-y-3 rounded-md">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= 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" />
+          <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:ring-0 sm:text-sm") %>
+          <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye} solid class="h-auto w-5 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" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye_slash} solid class="h-auto w-5 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>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password) %></span>
       </div>
 
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide_confirm: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide_confirm: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= label(f, :password_confirmation, "Confirm new password", class: "sr-only") %>
           <%= password_input(f, :password_confirmation,
             required: true,
             placeholder: gettext("Confirm new password"),
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 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" />
+          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye} solid class="h-auto w-5 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" />
+          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name={:eye_slash} solid class="h-auto w-5 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>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password_confirmation) %></span>
       </div>
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96" do %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96" do %>
           <%= gettext("Change Password") %>
         <% end %>
       </div>
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..d88d57786 100644
--- a/lib/atomic_web/templates/user_reset_password/new.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/new.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <.form :let={f} for={%{}} as={:user} action={Routes.user_reset_password_path(@conn, :create)} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mx-4 mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={%{}} as={:user} action={Routes.user_reset_password_path(@conn, :create)} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mx-4 mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <%= gettext("Recover Account") %>
     </h2>
     <%= 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" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name={:exclamation_circle} solid class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -18,20 +18,20 @@
       <p class="px-4 text-center text-zinc-900"><%= gettext("Enter your email or username and we'll send you an email with a link to get back into your account.") %></p>
     </div>
 
-    <div class="space-y-3 rounded-md w-full flex-col">
+    <div class="w-full flex-col space-y-3 rounded-md">
       <div class="flex justify-center">
         <%= label(f, :input, class: "sr-only") %>
         <%= text_input(f, :input,
           required: true,
           placeholder: gettext("Email address or username"),
-          class: "relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+          class: "relative mx-4 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:w-96 sm:text-sm"
         ) %>
       </div>
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96" do %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96" do %>
           <%= gettext("Reset password") %>
         <% end %>
       </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..f275af9fd 100644
--- a/lib/atomic_web/templates/user_session/new.html.heex
+++ b/lib/atomic_web/templates/user_session/new.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat  bg-opacity-25 bg-center">
-  <.form :let={f} for={@conn} action={Routes.user_session_path(@conn, :create)} as={:user} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@conn} action={Routes.user_session_path(@conn, :create)} as={:user} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <%= gettext("Log") %><span class="text-orange-500"><%= gettext("in") %></span>
     </h2>
     <%= 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" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name={:exclamation_circle} solid class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -14,41 +14,41 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-sm w-full flex-col justify-center items-center mt-6 mx-4 px-3.5 sm:w-96 sm:mx-0 sm:px-0">
-      <div class="flex justify-center w-full">
+    <div class="mx-4 mt-6 w-full flex-col items-center justify-center space-y-3 rounded-sm px-3.5 sm:mx-0 sm:w-96 sm:px-0">
+      <div class="flex w-full justify-center">
         <%= label(f, :email, class: "sr-only") %>
         <%= email_input(f, :email,
           required: true,
           placeholder: gettext("Email address"),
-          class: "relative w-full appearance-none rounded border border-zinc-300 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+          class: "relative w-full appearance-none rounded border border-zinc-300 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
         ) %>
       </div>
-      <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:text-sm">
         <%= label(f, :password, class: "sr-only") %>
         <%= password_input(f, :password,
           required: true,
           placeholder: gettext("Password"),
           autocomplete: "current-password",
-          class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
+          class: "relative w-full appearance-none rounded border-0 text-zinc-900 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" />
+        <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="w-fit cursor-pointer px-2">
+          <.icon name={:eye} solid class="h-auto w-5 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" />
+        <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="w-fit cursor-pointer px-2">
+          <.icon name={:eye_slash} solid class="h-auto w-5 fill-zinc-900 hover:fill-black" />
         </div>
       </div>
     </div>
 
-    <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="mx-4 flex w-full flex-row justify-between sm:w-96">
+      <div class="ml-4 flex flex-col space-y-2 sm:ml-0">
         <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: "h-4 w-4 rounded border-zinc-300 fill-orange-500 text-orange-500 focus:ring-orange-500") %>
           <%= label(f, :remember_me, gettext("Remember me"), class: "ml-2 block text-sm text-zinc-900") %>
         </div>
       </div>
 
-      <div class="mr-4 sm:mr-0 text-sm">
+      <div class="mr-4 text-sm sm:mr-0">
         <span>
           New here?
         </span>
@@ -57,8 +57,8 @@
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit class: "w-full flex justify-center border-2 rounded-sm bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96 sm:mx-0 sm:px-0" do %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit class: "flex w-full justify-center rounded-sm border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:mx-0 sm:w-96 sm:px-0" do %>
           <%= gettext("Log in") %>
         <% end %>
       </div>
diff --git a/lib/atomic_web/templates/user_settings/edit.html.heex b/lib/atomic_web/templates/user_settings/edit.html.heex
index 86e9b2fa4..ae5003b79 100644
--- a/lib/atomic_web/templates/user_settings/edit.html.heex
+++ b/lib/atomic_web/templates/user_settings/edit.html.heex
@@ -1,10 +1,10 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <div class="flex flex-col lg:flex-row items-center justify-center lg:space-x-16">
-    <div class="py-8 px-4 lg:py-0 lg:px-0  flex flex-col items-center justify-center">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <div class="flex flex-col items-center justify-center lg:flex-row lg:space-x-16">
+    <div class="flex flex-col items-center justify-center px-4 py-8 lg:px-0 lg:py-0">
       <h2 class="mb-6 text-center text-5xl font-extrabold text-zinc-900">
         <span><%= gettext("Change Email") %></span>
       </h2>
-      <.form :let={f} for={@email_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_email" class="flex flex-col items-center justify-center w-full h-full mx-8 sm:mx-0">
+      <.form :let={f} for={@email_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_email" class="mx-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
         <%= if @email_changeset.action do %>
           <div class="alert alert-danger">
             <p>Oops, something went wrong! Please check the errors below.</p>
@@ -14,7 +14,7 @@
         <%= hidden_input(f, :action, value: "update_email") %>
 
         <%= label(f, :email, class: "sr-only") %>
-        <%= email_input(f, :email, placeholder: gettext("New Email"), required: true, class: "relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm") %>
+        <%= email_input(f, :email, placeholder: gettext("New Email"), required: true, class: "relative block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96") %>
         <%= error_tag(f, :email) %>
 
         <%= label(f, :current_password, for: "current_password_for_email", class: "sr-only") %>
@@ -23,21 +23,21 @@
           required: true,
           name: "current_password",
           id: "current_password_for_email",
-          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96"
         ) %>
         <%= error_tag(f, :current_password) %>
 
         <div>
-          <%= submit("Change Email", class: "mt-6 w-64 border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm") %>
+          <%= submit("Change Email", class: "mt-6 w-64 rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm") %>
         </div>
       </.form>
     </div>
 
-    <div class="px-4 lg:px-0  flex flex-col items-center justify-center">
+    <div class="flex flex-col items-center justify-center px-4 lg:px-0">
       <h2 class="mb-6 text-center text-5xl font-extrabold text-zinc-900">
         <span><%= gettext("Change Password") %></span>
       </h2>
-      <.form :let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_password" class="flex flex-col items-center justify-center w-full h-full mx-8 sm:mx-0">
+      <.form :let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_password" class="mx-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
         <%= if @password_changeset.action do %>
           <div class="alert alert-danger">
             <p>Oops, something went wrong! Please check the errors below.</p>
@@ -47,14 +47,14 @@
         <%= hidden_input(f, :action, value: "update_password") %>
 
         <%= label(f, :password, "New password", class: "sr-only") %>
-        <%= password_input(f, :password, placeholder: gettext("New Password"), required: true, class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm") %>
+        <%= password_input(f, :password, placeholder: gettext("New Password"), required: true, class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96") %>
         <%= error_tag(f, :password) %>
 
         <%= label(f, :password_confirmation, "Confirm new password", class: "sr-only") %>
         <%= password_input(f, :password_confirmation,
           required: true,
           placeholder: gettext("Confirm new Password"),
-          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96"
         ) %>
         <%= error_tag(f, :password_confirmation) %>
 
@@ -64,12 +64,12 @@
           name: "current_password",
           placeholder: gettext("Current Password"),
           id: "current_password_for_password",
-          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96"
         ) %>
         <%= error_tag(f, :current_password) %>
 
-        <div class="flex justify-center mt-5">
-          <%= submit("Change Password", class: "mt-6 w-64 border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm") %>
+        <div class="mt-5 flex justify-center">
+          <%= submit("Change Password", class: "mt-6 w-64 rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm") %>
         </div>
       </.form>
     </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..53ebb1b5a 100644
--- a/lib/atomic_web/templates/user_setup/edit.html.heex
+++ b/lib/atomic_web/templates/user_setup/edit.html.heex
@@ -1,18 +1,18 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={Routes.user_setup_path(@conn, :finish)} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 sm:mx-0">
-    <div class="flex-row flex select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={Routes.user_setup_path(@conn, :finish)} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
+    <div class="flex select-none flex-row">
       <p class="mt-6 uppercase tracking-widest"><%= gettext("Welcome to Atomic!") %></p>
-      <p class="ml-2 animate-wave text-2xl self-end">👋</p>
+      <p class="animate-wave ml-2 self-end text-2xl">👋</p>
     </div>
-    <div class="sm:w-96 mx-4">
-      <h2 class="mt-1 text-center text-xl font-bold text-zinc-900 select-none">
+    <div class="mx-4 sm:w-96">
+      <h2 class="mt-1 select-none text-center text-xl font-bold text-zinc-900">
         <%= gettext("Please finish setting up your account") %>
       </h2>
     </div>
     <%= 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" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name={:exclamation_circle} solid class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
@@ -20,43 +20,43 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-md w-full flex-col mt-6">
-      <div class="flex flex-col items-center justify-center mx-4">
+    <div class="mt-6 w-full flex-col space-y-3 rounded-md">
+      <div class="mx-4 flex flex-col items-center justify-center">
         <%= label(f, :name, class: "sr-only") %>
         <%= text_input(f, :name,
           required: true,
           placeholder: gettext("Name"),
-          class: "relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:ring-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mx-4 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none focus:ring-orange-500 sm:w-96 sm:text-sm"
         ) %>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :name) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :name) %></span>
       </div>
-      <div class="flex flex-col items-center justify-center mx-4">
+      <div class="mx-4 flex flex-col items-center justify-center">
         <%= label(f, :slug, class: "sr-only") %>
-        <div class="flex flex-row relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:outline-none sm:text-sm">
-          <span class="self-center select-none">@</span>
+        <div class="relative mx-4 flex w-full appearance-none flex-row rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:outline-none focus-within:ring-orange-400 sm:w-96 sm:text-sm">
+          <span class="select-none self-center">@</span>
           <%= text_input(f, :slug,
             required: true,
             placeholder: gettext("username"),
-            class: "pl-0 appearance-none text-zinc-900 placeholder-zinc-500 sm:text-sm border-none w-full focus:outline-none focus:ring-transparent"
+            class: "w-full appearance-none border-none pl-0 text-zinc-900 placeholder-zinc-500 focus:outline-none focus:ring-transparent sm:text-sm"
           ) %>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :slug) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :slug) %></span>
       </div>
-      <div class="flex flex-col items-center justify-center mx-4">
+      <div class="mx-4 flex flex-col items-center justify-center">
         <%= label(f, :course_id, class: "sr-only") %>
         <%= select(f, :course_id, Enum.map(@courses, &{&1.name, &1.id}),
           required: true,
           placeholder: gettext("Course"),
           prompt: gettext("Select a course"),
-          class: "relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:ring-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mx-4 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none focus:ring-orange-500 sm:w-96 sm:text-sm"
         ) %>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :course_id) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :course_id) %></span>
       </div>
     </div>
 
     <div class="mt-6 w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit("Next Step", class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96") %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit("Next Step", class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96") %>
       </div>
     </div>
   </.form>
diff --git a/priv/repo/migrations/20221014155230_create_users_auth_tables.exs b/priv/repo/migrations/20221014155230_create_users_auth_tables.exs
index dc00ab854..6916bb9ba 100644
--- a/priv/repo/migrations/20221014155230_create_users_auth_tables.exs
+++ b/priv/repo/migrations/20221014155230_create_users_auth_tables.exs
@@ -17,6 +17,7 @@ defmodule Atomic.Repo.Migrations.CreateUsersAuthTables do
       add :confirmed_at, :naive_datetime
       add :phone_number, :string
       add :profile_picture, :string
+      add :cover_image, :string
 
       add :current_organization_id,
           references(:organizations, type: :binary_id, on_delete: :delete_all)