diff --git a/assets/css/app.css b/assets/css/app.css
index e5bc31aca..8430f46b9 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -26,3 +26,15 @@ input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
index 835747ba8..984b92b96 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -24,14 +24,15 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import "../vendor/alpine.js";
 import topbar from "../vendor/topbar"
-import { QrScanner, InitSorting, StickyScroll, ScrollToTop } from "./hooks";
+import { QrScanner, InitSorting, StickyScroll, ScrollToTop, AutoFocus } from "./hooks";
 import phxFeedbackDom from "./shims/phx_feedback_dom.js"
 
 let Hooks = {
   QrScanner: QrScanner,
   InitSorting: InitSorting,
   StickyScroll: StickyScroll,
-  ScrollToTop: ScrollToTop
+  ScrollToTop: ScrollToTop,
+  AutoFocus: AutoFocus,
 };
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
diff --git a/assets/js/hooks/auto_focus.js b/assets/js/hooks/auto_focus.js
new file mode 100644
index 000000000..42d3b1ffa
--- /dev/null
+++ b/assets/js/hooks/auto_focus.js
@@ -0,0 +1,5 @@
+export const AutoFocus = {
+    mounted() {
+      this.el.focus()
+    }
+}
\ No newline at end of file
diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index f6e5704c6..265a035fa 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -9,6 +9,8 @@ defmodule Atomic.Activities do
   alias Atomic.Activities.Enrollment
   alias Atomic.Feed.Post
 
+  @pubsub Atomic.PubSub
+
   @doc """
   Returns the list of activities.
 
@@ -222,7 +224,7 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Updates a activity.
+  Updates an activity and broadcasts the changes to all subscribed clients.
 
   ## Examples
 
@@ -234,10 +236,14 @@ defmodule Atomic.Activities do
 
   """
   def update_activity(%Activity{} = activity, attrs, after_save \\ &{:ok, &1}) do
-    activity
-    |> Activity.changeset(attrs)
-    |> Repo.update()
-    |> after_save(after_save)
+    result =
+      activity
+      |> Activity.changeset(attrs)
+      |> Repo.update()
+      |> after_save(after_save)
+
+    broadcast_activity_update(activity.id)
+    result
   end
 
   @doc """
@@ -322,27 +328,6 @@ defmodule Atomic.Activities do
     |> Repo.one()
   end
 
-  @doc """
-   Gets the user enrolled in an given activity.
-
-    ## Examples
-
-        iex> get_user_enrolled(user, activity_id)
-        %Enrollment{}
-
-        iex> get_user_enrolled(user, activity_id)
-        ** (Ecto.NoResultsError)
-  """
-  def get_user_enrolled(user, activity_id) do
-    Enrollment
-    |> where(user_id: ^user.id, activity_id: ^activity_id)
-    |> Repo.one()
-    |> case do
-      nil -> create_enrollment(activity_id, user)
-      enrollment -> enrollment
-    end
-  end
-
   @doc """
    Gets all user enrollments.
 
@@ -360,6 +345,27 @@ defmodule Atomic.Activities do
     |> Repo.all()
   end
 
+  @doc """
+  Returns the list of participants in an activity.
+
+  ## Examples
+
+      iex> list_activity_participants(activity_id)
+      [%Enrollment{}, ...]
+  """
+  def list_activity_participants(id) do
+    from(u in User,
+      join: e in assoc(u, :enrollments),
+      where: e.activity_id == ^id,
+      preload: [enrollments: e]
+    )
+  end
+
+  def list_display_participants(id, %{} = flop, opts \\ []) do
+    list_activity_participants(id)
+    |> Flop.validate_and_run(flop, opts)
+  end
+
   @doc """
   Returns the list of activities a user has enrolled in.
 
@@ -397,7 +403,136 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Creates an enrollment.
+  Returns the list of upcoming activities a user has enrolled in.
+
+  ## Examples
+
+      iex> list_upcoming_user_activities(user_id)
+      [%Activity{}, ...]
+  """
+  def list_upcoming_user_activities(user_id, params \\ %{})
+
+  def list_upcoming_user_activities(user_id, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? > now()", a.start))
+    |> apply_filters(opts)
+    |> Repo.all()
+  end
+
+  def list_upcoming_user_activities(user_id, flop) do
+    from(a in Activity,
+      join: e in assoc(a, :enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? > now()", a.start))
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  def list_upcoming_user_activities(user_id, %{} = flop, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? > now()", a.start))
+    |> apply_filters(opts)
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  @doc """
+  Returns the list of past activities a user has enrolled in.
+
+  ## Examples
+
+      iex> list_past_user_activities(user_id)
+      [%Activity{}, ...]
+  """
+  def list_past_user_activities(user_id, params \\ %{})
+
+  def list_past_user_activities(user_id, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? < now()", a.start))
+    |> apply_filters(opts)
+    |> Repo.all()
+  end
+
+  def list_past_user_activities(user_id, flop) do
+    from(a in Activity,
+      join: e in assoc(a, :enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? < now()", a.start))
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  def list_past_user_activities(user_id, %{} = flop, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? < now()", a.start))
+    |> apply_filters(opts)
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  @doc """
+  Returns the list of activities a user has enrolled in.
+
+  ## Examples
+
+      iex> list_user_activities(user_id)
+      [%Activity{}, ...]
+  """
+
+  def list_organization_activities(organization_id, params \\ %{})
+
+  def list_organization_activities(organization_id, opts) when is_list(opts) do
+    from(a in Activity,
+      where: a.organization_id == ^organization_id
+    )
+    |> apply_filters(opts)
+    |> Repo.all()
+  end
+
+  def list_organization_activities(organization_id, flop) do
+    from(a in Activity,
+      where: a.organization_id == ^organization_id
+    )
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  def list_organization_activities(organization_id, %{} = flop, opts) when is_list(opts) do
+    from(a in Activity,
+      where: a.organization_id == ^organization_id
+    )
+    |> apply_filters(opts)
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  @doc """
+  Returns the count of upcoming activities a user has enrolled in.
+
+  ## Examples
+
+      iex> user_upcoming_activities_count(user_id)
+      1
+  """
+  def user_upcoming_activities_count(user_id) do
+    from(a in Activity,
+      join: e in assoc(a, :enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? > now()", a.start))
+    |> Repo.aggregate(:count, :id)
+  end
+
+  @doc """
+  Creates an enrollment and broadcasts the activity change to all subscribed clients.
 
   ## Examples
 
@@ -409,23 +544,15 @@ defmodule Atomic.Activities do
 
   """
   def create_enrollment(activity_id, %User{} = user) do
-    Ecto.Multi.new()
-    |> Ecto.Multi.insert(:enrollments, %Enrollment{
-      activity_id: activity_id,
-      user_id: user.id
-    })
-    |> Multi.update(:activity, fn %{enrollments: enrollment} ->
-      activity = get_activity!(enrollment.activity_id)
-
-      Activity.changeset(activity, %{enrolled: activity.enrolled + 1})
-    end)
-    |> Repo.transaction()
+    %Enrollment{}
+    |> Enrollment.changeset(%{activity_id: activity_id, user_id: user.id})
+    |> Repo.insert()
     |> case do
-      {:ok, %{enrollments: enrollment, activity: _activity}} ->
-        broadcast({:ok, enrollment}, :new_enrollment)
+      {:ok, enrollment} ->
+        broadcast_activity_update(activity_id)
         {:ok, enrollment}
 
-      {:error, _reason, changeset, _actions} ->
+      {:error, changeset} ->
         {:error, changeset}
     end
   end
@@ -449,7 +576,7 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Deletes a enrollment.
+  Deletes a enrollment and broadcasts the activity change to all subscribed clients.
 
   ## Examples
 
@@ -461,20 +588,15 @@ defmodule Atomic.Activities do
 
   """
   def delete_enrollment(activity_id, %User{} = user) do
-    Ecto.Multi.new()
-    |> Ecto.Multi.delete(:enrollments, get_user_enrolled(user, activity_id))
-    |> Multi.update(:activity, fn %{enrollments: _enrollment} ->
-      activity = get_activity!(activity_id)
-
-      Activity.changeset(activity, %{enrolled: activity.enrolled - 1})
-    end)
-    |> Repo.transaction()
+    get_enrollment!(activity_id, user.id)
+    |> Enrollment.delete_changeset()
+    |> Repo.delete()
     |> case do
-      {:ok, %{enrollments: _enrollment, activity: _activity}} ->
-        broadcast({1, nil}, :deleted_enrollment)
-        {1, nil}
+      {:ok, _} ->
+        broadcast_activity_update(activity_id)
+        {:ok, nil}
 
-      {:error, _reason, changeset, _actions} ->
+      {:error, changeset} ->
         {:error, changeset}
     end
   end
@@ -493,32 +615,21 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Broadcasts an event to the pubsub.
+  Subscribes the caller to the specific activity's updates.
 
   ## Examples
 
-      iex> broadcast(:new_enrollment, enrollment)
-      {:ok, %Enrollment{}}
-
-      iex> broadcast(:deleted_enrollment, nil)
-      {:ok, nil}
-
+      iex> subscribe_to_activity_update(activity_id)
+      :ok
   """
-  def subscribe(topic) when topic in ["new_enrollment", "deleted_enrollment"] do
-    Phoenix.PubSub.subscribe(Atomic.PubSub, topic)
+  def subscribe_to_activity_update(activity_id) do
+    Phoenix.PubSub.subscribe(@pubsub, topic(activity_id))
   end
 
-  defp broadcast({:error, _reason} = error, _event), do: error
-
-  defp broadcast({:ok, %Enrollment{} = enrollment}, event)
-       when event in [:new_enrollment] do
-    Phoenix.PubSub.broadcast!(Atomic.PubSub, "new_enrollment", {event, enrollment})
-    {:ok, enrollment}
-  end
+  defp topic(activity_id), do: "activity:#{activity_id}"
 
-  defp broadcast({number, nil}, event)
-       when event in [:deleted_enrollment] do
-    Phoenix.PubSub.broadcast!(Atomic.PubSub, "deleted_enrollment", {event, nil})
-    {number, nil}
+  defp broadcast_activity_update(activity_id) do
+    activity = get_activity!(activity_id)
+    Phoenix.PubSub.broadcast(@pubsub, topic(activity_id), activity)
   end
 end
diff --git a/lib/atomic/activities/activity.ex b/lib/atomic/activities/activity.ex
index 4735f2e2a..48e921595 100644
--- a/lib/atomic/activities/activity.ex
+++ b/lib/atomic/activities/activity.ex
@@ -9,8 +9,8 @@ defmodule Atomic.Activities.Activity do
   alias Atomic.Location
   alias Atomic.Organizations.Organization
 
-  @required_fields ~w(title description start finish minimum_entries maximum_entries enrolled organization_id)a
-  @optional_fields ~w()a
+  @required_fields ~w(title description start finish enrolled organization_id)a
+  @optional_fields ~w(maximum_entries)a
 
   @derive {
     Flop.Schema,
@@ -29,11 +29,10 @@ defmodule Atomic.Activities.Activity do
     field :start, :naive_datetime
     field :finish, :naive_datetime
 
-    field :maximum_entries, :integer
-    field :minimum_entries, :integer
+    field :maximum_entries, :integer, default: nil
     field :enrolled, :integer, default: 0
 
-    field :image, Uploaders.Post.Type
+    field :card, Uploaders.Post.Type
     embeds_one :location, Location, on_replace: :update
 
     belongs_to :organization, Organization
@@ -50,50 +49,13 @@ defmodule Atomic.Activities.Activity do
     |> cast_embed(:location, with: &Location.changeset/2)
     |> validate_required(@required_fields)
     |> validate_dates()
-    |> validate_entries()
     |> validate_enrollments()
-    |> check_constraint(:enrolled, name: :enrolled_less_than_max)
     |> maybe_mark_for_deletion()
   end
 
   def image_changeset(activity, attrs) do
     activity
-    |> cast_attachments(attrs, [:image])
-  end
-
-  defp validate_entries(changeset) do
-    minimum_entries = get_change(changeset, :minimum_entries)
-    maximum_entries = get_change(changeset, :maximum_entries)
-
-    case {minimum_entries, maximum_entries} do
-      {nil, nil} ->
-        validate_entries_values(
-          changeset.data.minimum_entries,
-          changeset.data.maximum_entries,
-          changeset
-        )
-
-      {nil, maximum} ->
-        validate_entries_values(changeset.data.minimum_entries, maximum, changeset)
-
-      {minimum, nil} ->
-        validate_entries_values(minimum, changeset.data.maximum_entries, changeset)
-
-      {min, max} ->
-        validate_entries_values(min, max, changeset)
-    end
-  end
-
-  def validate_entries_values(min_value, max_value, changeset) do
-    if min_value > max_value do
-      add_error(
-        changeset,
-        :maximum_entries,
-        gettext("must be greater than minimum entries")
-      )
-    else
-      changeset
-    end
+    |> cast_attachments(attrs, [:card])
   end
 
   defp validate_dates(changeset) do
@@ -140,6 +102,8 @@ defmodule Atomic.Activities.Activity do
     end
   end
 
+  def validate_enrollments_values(_enrolled, nil, changeset), do: changeset
+
   def validate_enrollments_values(enrolled, maximum_entries, changeset) do
     if enrolled > maximum_entries do
       add_error(changeset, :maximum_entries, gettext("maximum number of enrollments reached"))
diff --git a/lib/atomic/activities/enrollment.ex b/lib/atomic/activities/enrollment.ex
index 4284f7f94..46640d87d 100644
--- a/lib/atomic/activities/enrollment.ex
+++ b/lib/atomic/activities/enrollment.ex
@@ -25,6 +25,8 @@ defmodule Atomic.Activities.Enrollment do
     |> cast(attrs, @required_fields ++ @optional_fields)
     |> validate_maximum_entries()
     |> validate_required(@required_fields)
+    |> unique_constraint([:activity_id, :user_id], name: :unique_enrollments)
+    |> prepare_changes(&update_activity_enrolled/1)
   end
 
   def update_changeset(enrollment, attrs) do
@@ -33,6 +35,12 @@ defmodule Atomic.Activities.Enrollment do
     |> validate_required(@required_fields)
   end
 
+  def delete_changeset(enrollment, attrs \\ %{}) do
+    enrollment
+    |> cast(attrs, @required_fields ++ @optional_fields)
+    |> prepare_changes(&update_activity_enrolled/1)
+  end
+
   defp validate_maximum_entries(changeset) do
     activity_id = get_field(changeset, :activity_id)
     activity = Activities.get_activity!(activity_id)
@@ -43,4 +51,21 @@ defmodule Atomic.Activities.Enrollment do
       changeset
     end
   end
+
+  defp update_activity_enrolled(changeset) do
+    if activity_id = get_field(changeset, :activity_id) do
+      query = from Activity, where: [id: ^activity_id]
+      value = if changeset.action == :insert, do: 1, else: -1
+
+      case changeset.action do
+        action when action in [:insert, :delete] ->
+          changeset.repo.update_all(query, inc: [enrolled: value])
+
+        _ ->
+          changeset
+      end
+    end
+
+    changeset
+  end
 end
diff --git a/lib/atomic/location/location.ex b/lib/atomic/location/location.ex
index 3b6234f43..ec6d229ee 100644
--- a/lib/atomic/location/location.ex
+++ b/lib/atomic/location/location.ex
@@ -4,14 +4,14 @@ defmodule Atomic.Location do
   """
   use Atomic.Schema
 
-  @required_fields ~w(name)a
-  @optional_fields ~w(url)a
+  @required_fields ~w(name address)a
+  @optional_fields ~w()a
 
   @derive Jason.Encoder
   @primary_key false
   embedded_schema do
     field :name, :string
-    field :url, :string
+    field :address, :string
   end
 
   def changeset(location, attrs) do
diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex
index 15cd7db89..c85bea9fb 100644
--- a/lib/atomic_web/components/activity.ex
+++ b/lib/atomic_web/components/activity.ex
@@ -36,9 +36,9 @@ defmodule AtomicWeb.Components.Activity do
         <p>{maybe_slice_string(@activity.description, 300)}</p>
       </div>
       <!-- Image -->
-      <%= if @activity.image do %>
+      <%= if @activity.card do %>
         <div class="mt-4">
-          <img class="max-w-screen max-h-[32rem] rounded-md object-cover sm:max-w-xl" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+          <img class="max-w-screen max-h-[32rem] rounded-md object-cover sm:max-w-xl" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
         </div>
       <% end %>
       <!-- Footer -->
@@ -47,14 +47,20 @@ defmodule AtomicWeb.Components.Activity do
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-calendar-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
-              <span class="font-medium text-zinc-900">{pretty_display_date(@activity.start)}</span>
+              <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
+                <span class="font-medium text-zinc-900">{pretty_display_date(@activity.start)}</span>
+              <% else %>
+                <span class="font-medium text-zinc-900">{pretty_display_date(@activity.start)}</span>
+                <.icon name="hero-arrow-right" class="size-4 mt-[3px]" />
+                <span class="font-medium text-zinc-900">{pretty_display_date(@activity.finish)}</span>
+              <% end %>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-user-group-solid" class="size-5" />
-              <span class="font-medium text-zinc-900">{@activity.enrolled}/{@activity.maximum_entries}</span>
+              <span class="font-medium text-zinc-900">{@activity.enrolled} {if @activity.maximum_entries, do: "/"} {@activity.maximum_entries}</span>
               <span class="sr-only text-zinc-400">enrollments</span>
             </span>
           </span>
@@ -72,7 +78,7 @@ defmodule AtomicWeb.Components.Activity do
   end
 
   defp footer_margin_top_class(%Activity{} = activity) do
-    if activity.image do
+    if activity.card do
       "mt-4"
     else
       "mt-2"
diff --git a/lib/atomic_web/components/button.ex b/lib/atomic_web/components/button.ex
index 997a28a0b..c3aa7a169 100644
--- a/lib/atomic_web/components/button.ex
+++ b/lib/atomic_web/components/button.ex
@@ -52,7 +52,7 @@ defmodule AtomicWeb.Components.Button do
 
   attr :rest, :global,
     include:
-      ~w(csrf_token disabled download form href hreflang method name navigate patch referrerpolicy rel replace target type value autofocus tabindex),
+      ~w(csrf_token download form href hreflang method name navigate patch referrerpolicy rel replace target type value autofocus tabindex),
     doc: "Arbitrary HTML or phx attributes."
 
   slot :inner_block, required: false, doc: "Slot for the content of the button."
@@ -121,7 +121,7 @@ defmodule AtomicWeb.Components.Button do
 
   defp icon_content(assigns) do
     ~H"""
-    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
+    <.icon name={@icon <> ""} class={"#{generate_icon_classes(assigns)}"} />
     """
   end
 
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 449ecbf25..f568e919d 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -46,14 +46,14 @@ defmodule AtomicWeb.Components.Dropdown do
                 method={Map.get(item, :method, "get")}
               >
                 <%= if item[:icon] do %>
-                  <.icon name={item.icon} class="size-5 ml-2 inline-block" />
+                  <.icon name={"hero-" <> item.icon} class="size-5 ml-2 inline-block" />
                 <% end %>
                 {item.name}
               </.link>
             <% else %>
               <div class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-zinc-700"}>
                 <%= if item[:icon] do %>
-                  <.icon name={item.icon} class="size-5 ml-2 inline-block" />
+                  <.icon name={"hero-" <> item.icon} class="size-5 ml-2 inline-block" />
                 <% end %>
                 {item.name}
               </div>
diff --git a/lib/atomic_web/components/forms.ex b/lib/atomic_web/components/forms.ex
index a6020ea07..02b43ff65 100644
--- a/lib/atomic_web/components/forms.ex
+++ b/lib/atomic_web/components/forms.ex
@@ -52,7 +52,7 @@ defmodule AtomicWeb.Components.Forms do
 
   attr :errors, :list,
     default: [],
-    doc: "A list of erros to be displayed. If not provided, it will be generated."
+    doc: "A list of errors to be displayed. If not provided, it will be generated."
 
   attr :checked, :any, doc: "The checked flag for checkboxes and checkboxes groups."
 
@@ -82,6 +82,8 @@ defmodule AtomicWeb.Components.Forms do
   attr :class, :string, default: nil, doc: "The class to be added to the input."
   attr :wrapper_class, :string, default: nil, doc: "The wrapper div class."
   attr :label_class, :string, default: nil, doc: "Extra class for the label."
+  attr :error_class, :string, default: nil, doc: "Extra error class for the input."
+  attr :error_label_class, :string, default: nil, doc: "Extra class for the error message."
   attr :help_text, :string, default: nil, doc: "Context/help for the input."
 
   attr :required, :boolean,
@@ -113,10 +115,10 @@ defmodule AtomicWeb.Components.Forms do
       assign_new(assigns, :checked, fn -> HTML.Form.normalize_value("checkbox", value) end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <label class={["atomic-checkbox-label", @label_class]}>
         <input type="hidden" name={@name} value="false" />
-        <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} required={@required} class={["atomic-checkbox", @class]} {@rest} />
+        <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} required={@required} class={["atomic-checkbox", @class, @errors != [] && @error_class]} {@rest} />
         <div class={[@required && "atomic-label--required"]}>
           {@label}
         </div>
@@ -130,7 +132,7 @@ defmodule AtomicWeb.Components.Forms do
 
   def field(%{type: "select"} = assigns) do
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         {@label}
       </.field_label>
@@ -153,7 +155,7 @@ defmodule AtomicWeb.Components.Forms do
         {@label}
       </.field_label>
 
-      <textarea id={@id} name={@name} class={["atomic-text-input", @class]} rows={@rows} required={@required} {@rest}><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
+      <textarea id={@id} name={@name} class={["atomic-text-input", @class, @errors != [] && @error_class]} rows={@rows} required={@required} autofocus {@rest}><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
 
       <.field_error :for={msg <- @errors}>{msg}</.field_error>
       <.field_help_text help_text={@help_text} />
@@ -166,7 +168,7 @@ defmodule AtomicWeb.Components.Forms do
       assign_new(assigns, :checked, fn -> HTML.Form.normalize_value("checkbox", value) end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <label class={["atomic-switch-label", @label_class]}>
         <input type="hidden" name={@name} value="false" />
         <label class="atomic-switch">
@@ -199,7 +201,7 @@ defmodule AtomicWeb.Components.Forms do
       end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         {@label}
       </.field_label>
@@ -232,7 +234,7 @@ defmodule AtomicWeb.Components.Forms do
     assigns = assign_new(assigns, :checked, fn -> nil end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         {@label}
       </.field_label>
@@ -269,10 +271,17 @@ defmodule AtomicWeb.Components.Forms do
 
   # All other inputs: text, datetime-local, url, password, etc.
   def field(assigns) do
-    assigns = assign(assigns, class: [assigns.class, get_class_for_type(assigns.type)])
+    assigns =
+      assign(assigns,
+        class: [
+          assigns.class,
+          get_class_for_type(assigns.type),
+          assigns.errors != [] && assigns.error_class
+        ]
+      )
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         {@label}
       </.field_label>
@@ -287,6 +296,7 @@ defmodule AtomicWeb.Components.Forms do
 
   attr :class, :string, default: nil
   attr :errors, :list, default: []
+  attr :error_class, :string, default: nil
   attr :name, :string
   attr :rest, :global
   slot :inner_block, required: true
@@ -313,6 +323,7 @@ defmodule AtomicWeb.Components.Forms do
     """
   end
 
+  attr :class, :string, default: nil
   slot :inner_block, required: true
 
   defp field_error(assigns) do
diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex
index 602c89bfd..8cd7d968e 100644
--- a/lib/atomic_web/components/image_uploader.ex
+++ b/lib/atomic_web/components/image_uploader.ex
@@ -22,7 +22,7 @@ defmodule AtomicWeb.Components.ImageUploader do
     assigns = update(assigns, %{})
 
     ~H"""
-    <div id={@id}>
+    <div id={@id} class="w-full">
       <%= if @editable do %>
         <.live_file_input upload={@upload} class="hidden" />
       <% end %>
diff --git a/lib/atomic_web/components/map.ex b/lib/atomic_web/components/map.ex
index a88c037d4..8256335dc 100644
--- a/lib/atomic_web/components/map.ex
+++ b/lib/atomic_web/components/map.ex
@@ -23,6 +23,8 @@ defmodule AtomicWeb.Components.Map do
     default: false,
     doc: "If true, the map will be interactive and show controls"
 
+  attr :class, :string, doc: "Additional classes to be added to the map"
+
   def map(assigns) do
     if assigns[:controls] do
       map_interactive(assigns)
@@ -33,15 +35,15 @@ defmodule AtomicWeb.Components.Map do
 
   defp map_static(assigns) do
     ~H"""
-    <.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class="select-none overflow-hidden" style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
-      <iframe width={generate_width(assigns)} height={@height + 300} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" class="pointer-events-none"></iframe>
+    <.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class={"#{@class} flex select-none overflow-hidden"} style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
+      <iframe width={generate_width(assigns)} height={@height + 300} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" class="pointer-events-none" tabindex="-1"></iframe>
     </.link>
     """
   end
 
   defp map_interactive(assigns) do
     ~H"""
-    <iframe width={generate_width(assigns)} height={@height} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
+    <iframe width={generate_width(assigns)} height={@height} src={generate_request(assigns)} class={@class} frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
     """
   end
 
diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 8c8419ba1..91725830f 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -29,6 +29,7 @@ defmodule AtomicWeb.Components.Modal do
   """
   attr :id, :string, required: true
   attr :show, :boolean, default: false
+  attr :class, :string, default: ""
   attr :on_cancel, JS, default: %JS{}
   slot :inner_block, required: true
 
@@ -38,8 +39,8 @@ defmodule AtomicWeb.Components.Modal do
       <div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
       <div class="fixed inset-0 overflow-y-auto" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
         <div class="flex min-h-full items-center justify-center">
-          <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
-            <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
+          <div class={"#{@class} w-full max-w-3xl p-4 sm:p-6 lg:py-8"}>
+            <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white px-6 py-14 shadow-lg ring-1 transition sm:px-8 md:px-14">
               <div class="absolute top-6 right-5">
                 <button phx-click={JS.exec("phx-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 outline-none hover:opacity-40" aria-label={gettext("close")}>
                   <.icon name="hero-x-mark-solid" class="size-5" />
diff --git a/lib/atomic_web/components/page.ex b/lib/atomic_web/components/page.ex
index b39ebe303..4ea28e39c 100644
--- a/lib/atomic_web/components/page.ex
+++ b/lib/atomic_web/components/page.ex
@@ -10,6 +10,7 @@ defmodule AtomicWeb.Components.Page do
     default: false,
     doc: "Whether to show a bottom border after the page header."
 
+  slot :title_wrapper, required: false
   slot :actions, required: false, doc: "Slot for actions to be rendered in the page header."
   slot :inner_block, required: false, doc: "Slot for the body content of the page."
 
@@ -20,13 +21,15 @@ defmodule AtomicWeb.Components.Page do
         <main class="relative z-0 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
           <div class={["mx-auto max-w-5xl px-4 sm:px-6 lg:px-8", @bottom_border && "border-b"]}>
             <div class="my-6 flex min-w-0 flex-row items-center justify-between">
-              <h1 class="flex-1 select-none truncate text-2xl font-bold text-zinc-900">
-                {@title}
-              </h1>
+              <div class="flex flex-col items-start">
+                <h1 class="flex-1 select-none truncate text-2xl font-bold text-zinc-900">
+                  {@title}
+                </h1>
+                {render_slot(@title_wrapper)}
+              </div>
               {render_slot(@actions)}
             </div>
           </div>
-
           {render_slot(@inner_block)}
         </main>
       </div>
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 3d5585d9f..fa6a45fb1 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -44,7 +44,7 @@ defmodule AtomicWeb.Components.Sidebar do
           <.sidebar_dropdown current_user={@current_user} orientation={:down} />
         </div>
       </div>
-      <div id="sidebar-overlay" class="fixed inset-0 z-40 hidden cursor-pointer bg-black bg-opacity-50" phx-click={hide_mobile_sidebar()}></div>
+      <div id="sidebar-overlay" class="fixed inset-0 z-50 hidden cursor-pointer bg-black bg-opacity-50" phx-click={hide_mobile_sidebar()}></div>
       <!-- Sidebar Panel -->
       <div id="mobile-sidebar" class="fixed inset-0 z-50 hidden w-64" role="dialog" aria-modal="true">
         <div class="fixed inset-0 flex w-fit">
diff --git a/lib/atomic_web/components/tabs.ex b/lib/atomic_web/components/tabs.ex
index 001cf4d9d..db049274f 100644
--- a/lib/atomic_web/components/tabs.ex
+++ b/lib/atomic_web/components/tabs.ex
@@ -77,7 +77,7 @@ defmodule AtomicWeb.Components.Tabs do
     underline_classes =
       if active,
         do: "bg-primary-100 text-primary-600",
-        else: "text-zinc-500 bg-zinc-100"
+        else: "text-white bg-zinc-100"
 
     [base_classes, active_classes, underline_classes]
   end
diff --git a/lib/atomic_web/live/activity_live/components/activity_card.ex b/lib/atomic_web/live/activity_live/components/activity_card.ex
new file mode 100644
index 000000000..8fe4b769f
--- /dev/null
+++ b/lib/atomic_web/live/activity_live/components/activity_card.ex
@@ -0,0 +1,60 @@
+defmodule AtomicWeb.ActivityLive.Components.ActivityCard do
+  @moduledoc false
+  use AtomicWeb, :component
+
+  import AtomicWeb.Components.Gradient
+
+  attr :activity, :map, required: true, doc: "The activity to display."
+
+  def activity_card(assigns) do
+    ~H"""
+    <div class="flex flex-col justify-center rounded-lg border border-zinc-200 hover:bg-zinc-50">
+      <!-- TODO: Add almost full! Indicator -->
+      <.link navigate={~p"/activities/#{@activity}"}>
+        <div class="grid grid-cols-3">
+          <!-- Activity information -->
+          <div class="col-span-2 px-4 py-4 lg:px-6">
+            <div class="flex items-center justify-between">
+              <p class="text-md truncate font-medium text-zinc-900" title={@activity.title}>
+                {@activity.title}
+              </p>
+            </div>
+            <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="hero-calendar" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
+                  <%= if @activity.start do %>
+                    {pretty_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="hero-map-pin" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
+                    {@activity.location && @activity.location.name}
+                  </p>
+                <% end %>
+              </div>
+            </div>
+            <object>
+              <.link navigate={~p"/organizations/#{@activity.organization.id}"} class="group flex max-w-min pt-2">
+                <.icon name="hero-building-office" class="mr-1.5 h-5 w-5 text-zinc-400" />
+                <span class="text-sm text-zinc-500 focus:outline-none group-hover:underline">
+                  {@activity.organization.name}
+                </span>
+              </.link>
+            </object>
+          </div>
+          <!-- Activity image -->
+          <div class="h-48 object-cover">
+            <%= if @activity.card do %>
+              <img class="h-full w-full rounded-r-lg object-cover" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
+            <% else %>
+              <.gradient seed={@activity.id} class="rounded-r-lg" />
+            <% end %>
+          </div>
+        </div>
+      </.link>
+    </div>
+    """
+  end
+end
diff --git a/lib/atomic_web/live/activity_live/edit.html.heex b/lib/atomic_web/live/activity_live/edit.html.heex
index db054f563..99ed60cbe 100644
--- a/lib/atomic_web/live/activity_live/edit.html.heex
+++ b/lib/atomic_web/live/activity_live/edit.html.heex
@@ -1,3 +1,5 @@
-<div id="atomic-edit">
-  <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={@activity.id} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={~p"/activities/#{@activity}"} />
-</div>
+<.page title="Edit Activity">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+    <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={@activity.id} title={@page_title} action={@live_action} activity={@activity} current_organization={@activity.organization} return_to={~p"/activities/#{@activity.id}"} />
+  </div>
+</.page>
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index ec6eb3176..c921f8e31 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -2,29 +2,59 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   use AtomicWeb, :live_component
 
   alias Atomic.Activities
-  alias AtomicWeb.Components.ImageUploader
 
-  import AtomicWeb.Components.Forms
+  import AtomicWeb.Components.{Forms, ImageUploader}
+
+  alias Phoenix.LiveView.JS
 
   @impl true
-  def update(%{activity: activity} = assigns, socket) do
+  def mount(socket) do
+    {:ok,
+     socket
+     |> allow_upload(:card,
+       accept: Uploaders.Post.extension_whitelist(),
+       max_entries: 1,
+       max_file_size: 10_000_000
+     )}
+  end
+
+  @impl true
+  def update(%{activity: activity, action: action} = assigns, socket) do
     changeset = Activities.change_activity(activity)
 
+    initial_description =
+      case action do
+        :new -> false
+        _ -> true
+      end
+
     {:ok,
      socket
      |> assign(assigns)
      |> assign_form(changeset)
-     |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
+     |> assign(:description_modal, false)
+     |> assign(:maximum_entries_modal, false)
+     |> assign(:has_max_capacity?, activity.maximum_entries)
+     |> assign(:has_description?, initial_description)}
   end
 
   @impl true
   def handle_event("validate", %{"activity" => activity_params}, socket) do
+    description = Map.get(activity_params, "description", "")
+    capacity = Map.get(activity_params, "maximum_entries", "")
+    has_description = is_nil(description) || String.trim(description) == ""
+    capacity_field_empty = is_nil(capacity) || String.trim(capacity) == ""
+
     changeset =
       socket.assigns.activity
       |> Activities.change_activity(activity_params)
       |> Map.put(:action, :validate)
 
-    {:noreply, assign_form(socket, changeset)}
+    {:noreply,
+     socket
+     |> assign(:has_description?, not has_description)
+     |> assign(:has_max_capacity?, not capacity_field_empty)
+     |> assign_form(changeset)}
   end
 
   @impl true
@@ -38,7 +68,29 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
 
   @impl true
   def handle_event("cancel-image", %{"ref" => ref}, socket) do
-    {:noreply, cancel_upload(socket, :image, ref)}
+    {:noreply, cancel_upload(socket, :card, ref)}
+  end
+
+  @impl true
+  def handle_event("toggle_description_modal", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:description_modal, not socket.assigns.description_modal)}
+  end
+
+  @impl true
+  def handle_event("toggle_maximum_entries_modal", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
+  end
+
+  @impl true
+  def handle_event("remove_max_capacity", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:has_max_capacity?, false)
+     |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
   end
 
   defp save_activity(socket, :new, activity_params) do
@@ -72,24 +124,36 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   end
 
   defp consume_image_data(socket, activity) do
-    consume_uploaded_entries(socket, :image, fn %{path: path}, entry ->
-      Activities.update_activity_image(activity, %{
-        "image" => %Plug.Upload{
-          content_type: entry.client_type,
-          filename: entry.client_name,
-          path: path
-        }
-      })
-    end)
-    |> case do
-      [{:ok, activity}] ->
-        {:ok, activity}
-
-      _errors ->
-        {:ok, activity}
+    results =
+      [:card]
+      |> Enum.map(&consume_image_entry(socket, activity, &1))
+      |> List.flatten()
+
+    if Enum.any?(results, fn result -> match?({:error, _}, result) end) do
+      {:error, results}
+    else
+      {:ok, activity}
     end
   end
 
+  defp consume_image_entry(socker, activity, field) do
+    consume_uploaded_entries(socker, field, fn %{path: path}, entry ->
+      case Activities.update_activity_image(activity, %{
+             "#{field}" => %Plug.Upload{
+               content_type: entry.client_type,
+               filename: entry.client_name,
+               path: path
+             }
+           }) do
+        {:ok, updated_activity} ->
+          {:ok, updated_activity}
+
+        {:error, _changeset} ->
+          {:error, field}
+      end
+    end)
+  end
+
   defp assign_form(socket, %Ecto.Changeset{} = changeset) do
     assign(socket, :form, to_form(changeset))
   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 a763cadb2..3344850a7 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -1,61 +1,172 @@
-<div>
+<div class="mt-16">
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
-    <div class="relative border-b border-zinc-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 />
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-col-reverse xl:flex-row">
-      <div class="w-full xl:w-1/3">
-        <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
+    <div class="flex flex-col justify-evenly gap-8 xl:flex-row">
+      <div class="flex w-full xl:w-1/3">
+        <%= if @activity.card do %>
+          <div class="flex rounded-xl">
+            <.image_uploader id="activity-image" class="h-full items-center justify-center rounded-xl" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full rounded-xl object-cover" image={Uploaders.Post.url({@activity.card, @activity}, :original)} />
+          </div>
+        <% else %>
+          <div class="border-primary-500 flex h-full w-full justify-center rounded-xl border-4 border-dashed">
+            <.image_uploader id="activity-image" class="h-full w-full" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full object-cover" />
+          </div>
+        <% end %>
       </div>
 
       <div class="flex flex-col">
-        <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="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 class="flex flex-col">
+          <div class="w-full">
+            <.field type="text" field={@form[:title]} label_class="hidden" wrapper_class="!bg-white text-3xl" autocomplete="off" class="border-none focus:ring-0 shadow-none font-bold text-4xl !bg-white p-0" placeholder="Activity Title" required />
           </div>
         </div>
-
-        <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 class="flex w-full">
+          <div class="justify-top hidden flex-col items-center pt-3 sm:flex">
+            <div class="size-3 bg-primary-600 m-1 rounded-full" />
+            <div class="flex justify-center">
+              <div class="border-l-primary-600 h-[3.25rem] w-[3px] border-l border-dashed" />
+            </div>
+            <div class="size-3 border-primary-600 m-1 rounded-full border" />
           </div>
-
-          <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 class="flex w-full flex-col">
+            <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
+              <span>Start</span>
+              <div class="w-full sm:w-56">
+                <.field class="w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
+              </div>
+            </div>
+            <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
+              <span>End</span>
+              <div class="w-full sm:w-56">
+                <.field class="w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
+              </div>
+            </div>
           </div>
         </div>
 
-        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
+        <label for="description_button" class="atomic-label atomic-label--required">
+          Description
+        </label>
+        <.button
+          id="description_button"
+          class="group atomic-button atomic-button--primary-outline py-[10px] flex flex-col items-start rounded-md border-gray-300 bg-white px-3 text-gray-300 focus-within:bg-white hover:bg-white sm:py-[8px] lg:w-full"
+          type="button"
+          phx-click="toggle_description_modal"
+          phx-target={@myself}
+        >
+          <%= if not @has_description? do %>
+            <label class="cursor-pointer text-left text-gray-500">
+              Add description
+            </label>
+          <% end %>
+          <div class="w-full">
+            <.field
+              :if={@has_description?}
+              type="text"
+              field={@form[:description]}
+              label=""
+              readonly
+              label_class="hidden"
+              wrapper_class="m-0"
+              autocomplete="off"
+              class="atomic-button pointer-events-none cursor-pointer select-none border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+            />
+          </div>
+        </.button>
+
+        <div class="flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
           <.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 class="mt-3 flex flex-col gap-y-1 sm:mt-4">
+              <.field class="text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
-
-            <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 class="-mt-2 flex flex-col gap-y-1 sm:-mt-2 md:mt-4 md:ml-8">
+              <.field class="text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
         </div>
 
+        <label for="capacity_button" class="atomic-label atomic-label--required -mt-2">
+          Capacity
+        </label>
+        <.button
+          id="capacity_button"
+          type="button"
+          class="group atomic-button atomic-button--primary-outline py-[10px] flex flex-col items-start rounded-md border-gray-300 bg-white px-3 text-gray-300 focus-within:bg-white hover:bg-white sm:py-2 lg:w-full"
+          phx-click="toggle_maximum_entries_modal"
+          phx-target={@myself}
+        >
+          <%= if @has_max_capacity? do %>
+            <.field
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              type="number"
+              field={@form[:maximum_entries]}
+              label="Maximum entries"
+              placeholder="Choose maximum capacity"
+              readonly
+              required
+              label_class="hidden"
+              wrapper_class="m-0"
+              error_class="text-danger-600 placeholder-danger-700"
+              error_label_class="text-danger-700"
+            />
+          <% else %>
+            <.field
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              type="number"
+              field={@form[:maximum_entries]}
+              label="Maximum entries"
+              placeholder="∞ Unlimited"
+              value=" "
+              readonly
+              required
+              label_class="hidden"
+              wrapper_class="m-0"
+              error_class="text-danger-600 placeholder-danger-700"
+              error_label_class="text-danger-700"
+            />
+          <% end %>
+        </.button>
+
         <div class="mt-4 flex-grow">
-          <.field type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+          <div class="flex justify-center lg:justify-end">
+            <.button class="w-full p-4 lg:p-3" type="submit" phx-disable-with="Saving...">
+              <%= if @action == :new do %>
+                <span>{gettext("Create Activity")}</span>
+              <% else %>
+                <span>{gettext("Save")}</span>
+              <% end %>
+            </.button>
+          </div>
         </div>
       </div>
     </div>
-
-    <div class="mt-4 flex-grow">
-      <div class="flex justify-center lg:justify-end">
-        <.button type="submit" phx-disable-with="Saving...">Save</.button>
+    <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
+      <div class="mt-4 flex-grow">
+        <.field class="\-h-10 resize-none" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+        <div class="flex w-full justify-end">
+          <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+            <span>{gettext("Done")}</span>
+          </.button>
+        </div>
       </div>
-    </div>
+    </.modal>
+    <.modal :if={@maximum_entries_modal} id="maximum_entries_modal" show on_cancel={JS.push("toggle_maximum_entries_modal", target: @myself)}>
+      <div class="h-full w-full">
+        <div class="">
+          <%= if @has_max_capacity? do %>
+            <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
+          <% else %>
+            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
+          <% end %>
+        </div>
+        <div class="flex gap-3">
+          <.button type="button" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
+            {gettext("Close")}
+          </.button>
+          <.button type="button" phx-target={@myself} phx-click="remove_max_capacity">
+            {gettext("Remove limit")}
+          </.button>
+        </div>
+      </div>
+    </.modal>
   </.form>
 </div>
diff --git a/lib/atomic_web/live/activity_live/index.ex b/lib/atomic_web/live/activity_live/index.ex
index 013167da3..e877a31cf 100644
--- a/lib/atomic_web/live/activity_live/index.ex
+++ b/lib/atomic_web/live/activity_live/index.ex
@@ -2,6 +2,7 @@ defmodule AtomicWeb.ActivityLive.Index do
   use AtomicWeb, :live_view
 
   import AtomicWeb.Components.{Button, Empty, Pagination, Tabs}
+  import AtomicWeb.ActivityLive.Components.ActivityCard
   import AtomicWeb.LiveHelpers
 
   alias Atomic.Accounts
@@ -23,6 +24,8 @@ defmodule AtomicWeb.ActivityLive.Index do
      |> assign(:current_tab, current_tab(socket, params))
      |> assign(:params, params)
      |> assign(:has_permissions?, has_permissions?(socket))
+     |> assign(:has_current_organization?, has_current_organization?(socket))
+     |> assign(:upcoming_enrolled_count, user_activities_count(socket))
      |> assign(list_activities(socket, params))
      |> then(fn complete_socket ->
        assign(complete_socket, :empty?, Enum.empty?(complete_socket.assigns.activities))
@@ -33,15 +36,30 @@ defmodule AtomicWeb.ActivityLive.Index do
     params = Map.put(params, "page_size", 6)
 
     case current_tab(socket, params) do
-      "all" -> list_all_activities(socket, params)
+      "organization" -> list_organization_activities(socket, params)
+      "discover" -> list_discover_activities(socket, params)
       "following" -> list_following_activities(socket, params)
-      "upcoming" -> list_upcoming_activities(socket, params)
       "enrolled" -> list_enrolled_activities(socket, params)
+      "past" -> list_past_activities(socket, params)
     end
   end
 
-  defp list_all_activities(_socket, params) do
-    case Activities.list_activities(params, preloads: [:enrollments]) do
+  defp list_organization_activities(socket, params) do
+    case Activities.list_organization_activities(socket.assigns.current_organization.id, params,
+           preloads: [:enrollments, :organization]
+         ) do
+      {:ok, {activities, meta}} ->
+        %{activities: activities, meta: meta}
+
+      {:error, flop} ->
+        %{activities: [], meta: flop}
+    end
+  end
+
+  defp list_discover_activities(_socket, params) do
+    case Activities.list_upcoming_activities(params,
+           preloads: [:enrollments, :organization]
+         ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
 
@@ -54,7 +72,9 @@ defmodule AtomicWeb.ActivityLive.Index do
     organizations =
       Organizations.list_organizations_followed_by_user(socket.assigns.current_user.id)
 
-    case Activities.list_organizations_activities(organizations, params, preloads: [:enrollments]) do
+    case Activities.list_organizations_activities(organizations, params,
+           preloads: [:enrollments, :organization]
+         ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
 
@@ -63,8 +83,10 @@ defmodule AtomicWeb.ActivityLive.Index do
     end
   end
 
-  defp list_upcoming_activities(_socket, params) do
-    case Activities.list_upcoming_activities(params, preloads: [:enrollments]) do
+  defp list_enrolled_activities(socket, params) do
+    case Activities.list_upcoming_user_activities(socket.assigns.current_user.id, params,
+           preloads: [:enrollments, :organization]
+         ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
 
@@ -73,9 +95,9 @@ defmodule AtomicWeb.ActivityLive.Index do
     end
   end
 
-  defp list_enrolled_activities(socket, params) do
-    case Activities.list_user_activities(socket.assigns.current_user.id, params,
-           preloads: [:enrollments]
+  defp list_past_activities(socket, params) do
+    case Activities.list_past_user_activities(socket.assigns.current_user.id, params,
+           preloads: [:enrollments, :organization]
          ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
@@ -86,7 +108,10 @@ defmodule AtomicWeb.ActivityLive.Index do
   end
 
   defp current_tab(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
-  defp current_tab(_socket, _params), do: "all"
+
+  defp current_tab(socket, _params) do
+    if has_current_organization?(socket), do: "organization", else: "discover"
+  end
 
   defp has_permissions?(socket) when not socket.assigns.is_authenticated?, do: false
 
@@ -102,4 +127,22 @@ defmodule AtomicWeb.ActivityLive.Index do
     is_map_key(socket.assigns, :current_organization) and
       not is_nil(socket.assigns.current_organization)
   end
+
+  defp user_activities_count(socket) do
+    if socket.assigns.is_authenticated? do
+      Activities.user_upcoming_activities_count(socket.assigns.current_user.id)
+    else
+      0
+    end
+  end
+
+  defp activities_empty_state_description(tab) do
+    case tab do
+      "following" -> gettext("The organizations you follow haven't created any activities yet.")
+      "upcoming" -> gettext("There are no upcoming activities registered.")
+      "enrolled" -> gettext("When you enroll in new activities they will show up here!")
+      "past" -> gettext("You haven't participated in any activities yet.")
+      _ -> ""
+    end
+  end
 end
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 0f2e31841..ffc6feb2d 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -3,86 +3,73 @@
 
 <.page title="Activities">
   <:actions>
-    <.button navigate={~p"/organizations/#{@organization}/activities/new"}>
-      {gettext("New")}
-    </.button>
+    <%= if @has_permissions? do %>
+      <.button navigate={~p"/organizations/#{@current_organization}/activities/new"} icon="hero-plus">
+        {gettext("New")}
+      </.button>
+    <% end %>
   </:actions>
   <!-- Tabs -->
-  <.tabs class="max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
-    <.link patch="?tab=all" replace={false}>
-      <.tab active={@current_tab == "all"}>
-        {gettext("All")}
-      </.tab>
-    </.link>
+  <.tabs class="scrollbar-hide max-w-5-xl mx-auto overflow-scroll px-4 sm:px-6 lg:px-8">
+    <%= if @is_authenticated? and @has_current_organization? do %>
+      <.link patch="?tab=organization" replace={false}>
+        <.tab active={@current_tab == "organization"}>
+          <.icon name="hero-globe-alt" class="mr-1 h-5 w-5" />
+          {@current_user.current_organization.name <> gettext("'s activities")}
+        </.tab>
+      </.link>
+    <% end %>
 
-    <.link patch="?tab=following" replace={false}>
-      <.tab active={@current_tab == "following"}>
-        {gettext("Following")}
+    <.link patch="?tab=discover" replace={false}>
+      <.tab active={@current_tab == "discover"}>
+        <.icon name="hero-globe-alt" class="mr-1 h-5 w-5" />
+        {gettext("Discover")}
       </.tab>
     </.link>
 
-    <.link patch="?tab=upcoming" replace={false}>
-      <.tab active={@current_tab == "upcoming"}>
-        {gettext("Upcoming")}
-      </.tab>
-    </.link>
+    <%= if @is_authenticated? do %>
+      <.link patch="?tab=following" replace={false}>
+        <.tab active={@current_tab == "following"}>
+          <.icon name="hero-eye" class="mr-1 h-5 w-5" />
+          {gettext("Following")}
+        </.tab>
+      </.link>
+    <% end %>
 
-    <.link patch="?tab=enrolled" replace={false}>
-      <.tab active={@current_tab == "enrolled"}>
-        {gettext("Enrolled")}
-      </.tab>
-    </.link>
+    <%= if @is_authenticated? do %>
+      <.link patch="?tab=enrolled" replace={false}>
+        <.tab active={@current_tab == "enrolled"} number={@upcoming_enrolled_count}>
+          <.icon name="hero-ticket" class="mr-1 h-5 w-5" />
+          {gettext("Upcoming")}
+        </.tab>
+      </.link>
+      <.link patch="?tab=past" replace={false}>
+        <.tab active={@current_tab == "past"}>
+          <.icon name="hero-clock" class="mr-1 h-5 w-5" />
+          {gettext("Past")}
+        </.tab>
+      </.link>
+    <% end %>
   </.tabs>
   <!-- Activities index -->
-  <%= if @empty? and @has_permissions? do %>
-    <div class="mt-32">
-      <.empty_state url={~p"/organizations/#{@organization}/activities/new"} placeholder="activity" />
-    </div>
+  <%= if @empty? do %>
+    <%= if @has_permissions? do %>
+      <div class="mt-32">
+        <.empty_state url={~p"/organizations/#{@current_organization}/activities/new"} placeholder="activity" />
+      </div>
+    <% else %>
+      <div class="mt-32 flex w-full flex-col items-center justify-center text-zinc-600">
+        <.icon class="w-24" name="hero-megaphone" />
+        <p class="pt-4">{gettext("No activities to show.")}</p>
+        <p>{activities_empty_state_description(@current_tab)}</p>
+      </div>
+    <% end %>
   <% else %>
     <div class="overflow-hidden bg-white">
-      <ul role="list" class="divide-y divide-zinc-200 overflow-auto">
+      <ul role="list" class="grid gap-4 overflow-auto p-4 sm:grid-cols-2">
         <%= for activity <- @activities do %>
-          <li id={activity.id}>
-            <.link navigate={~p"/activities/#{activity}"} class="block hover:bg-zinc-50">
-              <div class="px-4 py-4 lg:px-6">
-                <div class="flex items-center justify-between">
-                  <p class="truncate text-sm font-medium text-zinc-900">
-                    {activity.title}
-                  </p>
-                </div>
-                <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="hero-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="hero-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="hero-map-pin-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
-                        {activity.location && activity.location.name}
-                      </p>
-                    <% end %>
-                  </div>
-                </div>
-                <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="hero-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="hero-bell-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" /> Closed
-                    </div>
-                  <% end %>
-                </div>
-              </div>
-            </.link>
+          <li id={activity.id} class={@current_tab == "past" && "opacity-70"}>
+            <.activity_card activity={activity} />
           </li>
         <% end %>
       </ul>
diff --git a/lib/atomic_web/live/activity_live/new.html.heex b/lib/atomic_web/live/activity_live/new.html.heex
index 962236f15..0fd88a39a 100644
--- a/lib/atomic_web/live/activity_live/new.html.heex
+++ b/lib/atomic_web/live/activity_live/new.html.heex
@@ -1,3 +1,5 @@
-<div id="atomic-new">
-  <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={:new} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={~p"/activities"} />
-</div>
+<.page title="New Activity">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+    <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={:new} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={~p"/activities/"} />
+  </div>
+</.page>
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index c3b72ac47..c0e1f9bcc 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -1,99 +1,150 @@
 defmodule AtomicWeb.ActivityLive.Show do
   use AtomicWeb, :live_view
 
+  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Table, Map, Pagination}
+
   alias Atomic.Accounts
   alias Atomic.Activities
   alias Atomic.Activities.Enrollment
+  alias Phoenix.LiveView.JS
 
   import AtomicWeb.LiveHelpers
 
   @impl true
   def mount(%{"id" => id}, _session, socket) do
     if connected?(socket) do
-      Activities.subscribe("new_enrollment")
-      Activities.subscribe("deleted_enrollment")
+      Activities.subscribe_to_activity_update(id)
     end
 
     {:ok, socket |> assign(:id, id)}
   end
 
   @impl true
-  def handle_params(%{"id" => id}, _, socket) do
+  def handle_params(%{"id" => id} = params, _, socket) do
     activity = Activities.get_activity!(id, [:organization])
 
     {:noreply,
      socket
+     |> assign(:participants_modal, false)
+     |> apply_action(socket.assigns.live_action, params)
      |> assign(:page_title, activity.title)
      |> assign_page_metadata(:activity)
      |> assign(:current_page, :activities)
+     |> assign(:params, params)
      |> assign(:activity, activity)
-     |> assign(:enrolled, activity.enrolled)
+     |> assign(list_participants_paginated(id, params))
+     |> assign(:current_view, current_view(socket, params))
      |> assign(:enrolled?, maybe_put_enrolled(socket))
+     |> assign(:enrollment_id, maybe_put_enrollment_id(socket))
      |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(id))
      |> then(fn complete_socket ->
        assign(complete_socket, :has_permissions?, has_permissions?(complete_socket))
      end)}
   end
 
+  defp apply_action(socket, :show, params) do
+    socket
+    |> assign(:current_view, current_view(socket, params))
+  end
+
+  defp apply_action(socket, :participants, params) do
+    socket
+    |> assign(:current_view, current_view(socket, params))
+  end
+
+  defp apply_action(socket, _, _) do
+    socket
+  end
+
+  defp list_participants_paginated(id, params) do
+    case Activities.list_display_participants(id, params) do
+      {:ok, {participants, meta}} ->
+        %{participants: participants, meta: meta}
+
+      {:error, flop} ->
+        %{participants: [], meta: flop}
+    end
+  end
+
   @impl true
-  def handle_event("enroll", _payload, socket) do
+  def handle_event("confirm", _payload, socket) do
+    case socket.assigns.live_action do
+      :enroll ->
+        action_enroll(socket)
+
+      :unenroll ->
+        action_unenroll(socket)
+
+      _ ->
+        {:noreply, socket}
+    end
+  end
+
+  def handle_event("handle_participants_modal", _, socket) do
+    {:noreply, socket |> assign(:participants_modal, not socket.assigns.participants_modal)}
+  end
+
+  def action_enroll(socket) do
     case Activities.create_enrollment(socket.assigns.id, socket.assigns.current_user) do
       {:ok, %Enrollment{}} ->
         {:noreply,
          socket
-         |> put_flash(:success, "Enrolled successufully!")
-         |> assign(:enrolled?, true)}
-
-      {:error, changeset} ->
-        case is_nil(changeset.errors[:activity_id]) do
-          true -> {:noreply, socket |> put_flash(:error, "Unable to enroll")}
-          _ -> {:noreply, socket |> put_flash(:error, changeset.errors[:activity_id] |> elem(0))}
-        end
+         |> put_flash(:success, gettext("Enrolled successufully!"))
+         |> assign(:enrolled?, true)
+         |> push_patch(to: ~p"/activities/#{socket.assigns.activity.id}")}
+
+      {:error, _changeset} ->
+        {:noreply,
+         socket
+         |> put_flash(:error, gettext("Unable to enroll. Please try again later."))
+         |> push_patch(to: ~p"/activities/#{socket.assigns.activity.id}")}
     end
   end
 
-  @impl true
-  def handle_event("unenroll", _payload, socket) do
+  def action_unenroll(socket) do
     case Activities.delete_enrollment(socket.assigns.id, socket.assigns.current_user) do
-      {1, nil} ->
+      {:ok, _} ->
         {:noreply,
          socket
-         |> put_flash(:success, gettext("Unenrolled successufully!"))
-         |> assign(:enrolled?, false)}
+         |> put_flash(:success, "Unenrolled successufully!")
+         |> assign(:enrolled?, false)
+         |> push_patch(to: ~p"/activities/#{socket.assigns.activity.id}")}
 
-      {_, nil} ->
+      {:error, _changeset} ->
         {:noreply,
          socket
-         |> put_flash(:error, gettext("Unable to unenroll. Please try again."))}
+         |> put_flash(:error, gettext("Unable to unenroll. Please try again."))
+         |> push_patch(to: ~p"/activities/#{socket.assigns.activity.id}")}
     end
   end
 
   @impl true
-  def handle_event("must-login", _payload, socket) do
+  def handle_info(updated_activity, socket) do
+    max_enrolled? = updated_activity.enrolled >= updated_activity.maximum_entries
+
     {:noreply,
      socket
-     |> put_flash(:error, gettext("You must be logged in to enroll in an activity."))
-     |> push_navigate(to: ~p"/users/log_in")}
+     |> assign(
+       :activity,
+       Map.put(updated_activity, :organization, socket.assigns.activity.organization)
+     )
+     |> assign(:enrolled?, maybe_put_enrolled(socket))
+     |> assign(:max_enrolled?, max_enrolled?)
+     |> maybe_close_modal(max_enrolled? and socket.assigns.live_action == :enroll)}
   end
 
-  @impl true
-  def handle_info({event, _changes}, socket)
-      when event in [:new_enrollment, :deleted_enrollment] do
-    {:noreply, reload(socket, action: event)}
+  defp maybe_close_modal(socket, condition) do
+    if condition do
+      push_patch(socket, to: ~p"/activities/#{socket.assigns.activity.id}")
+    else
+      socket
+    end
   end
 
-  defp reload(socket, action: :new_enrollment) do
-    socket
-    |> assign(:enrolled, socket.assigns.enrolled + 1)
-    |> assign(:enrolled?, maybe_put_enrolled(socket))
-    |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(socket.assigns.id))
-  end
+  defp maybe_put_enrollment_id(socket) when not socket.assigns.is_authenticated?, do: nil
 
-  defp reload(socket, action: :deleted_enrollment) do
-    socket
-    |> assign(:enrolled, socket.assigns.enrolled - 1)
-    |> assign(:enrolled?, maybe_put_enrolled(socket))
-    |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(socket.assigns.id))
+  defp maybe_put_enrollment_id(socket) do
+    Activities.get_enrollment!(socket.assigns.id, socket.assigns.current_user.id)
   end
 
   defp maybe_put_enrolled(socket) when not socket.assigns.is_authenticated?, do: false
@@ -111,4 +162,53 @@ defmodule AtomicWeb.ActivityLive.Show do
         socket.assigns.activity.organization_id
       )
   end
+
+  def draw_ticket_qr_code(enrollment_id) do
+    enrollment_id = enrollment_id.id
+
+    enrollment_id
+    |> QRCodeEx.encode()
+    |> QRCodeEx.svg(color: "#111827", width: 200, background_color: :transparent)
+  end
+
+  defp generate_dropdown_items(is_enrolled, can_edit, activity, _) do
+    [%{name: gettext("Share"), navigate: "/", icon: "share"}]
+    |> append_if_true(is_enrolled, %{
+      name: gettext("Unenroll"),
+      navigate: ~p"/activities/#{activity.id}/unenroll",
+      icon: "user-minus"
+    })
+    |> append_if_true(can_edit, %{
+      name: gettext("Edit"),
+      navigate: ~p"/organizations/#{activity.organization}/activities/#{activity.id}/edit",
+      icon: "pencil"
+    })
+  end
+
+  defp append_if_true(list, true, item), do: list ++ [item]
+  defp append_if_true(list, _, _), do: list
+
+  defp display_action_goal_confirm_title(action) do
+    case action do
+      :enroll ->
+        gettext("Are you sure you want to join this activity?")
+
+      :unenroll ->
+        gettext("Are you sure you no longer want to take part in this activity?")
+    end
+  end
+
+  defp display_action_goal_confirm_description(action) do
+    case action do
+      :enroll ->
+        gettext("You can alway unenroll later if you change your mind.")
+
+      :unenroll ->
+        gettext("Beware that you will lose your spot if you unenroll.")
+    end
+  end
+
+  defp current_view(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
+
+  defp current_view(_socket, _params), do: "show"
 end
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index ed01add77..5d5390453 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -1,151 +1,287 @@
-<div class="my-4">
-  <div class="bg-white">
-    <div class="flex justify-between px-4 py-5 sm:px-6">
-      <div class="my-4 w-full items-center gap-x-4 lg:flex">
-        <div class="flex-1">
-          <h1 class="text-2xl font-bold text-zinc-900 sm:text-3xl">
-            {@activity.title}
-          </h1>
-        </div>
+<.page title={@activity.title}>
+  <:title_wrapper>
+    <div class="grid">
+      <span class="flex items-center gap-2">
+        <p class="text-sm font-semibold text-gray-900">
+          {gettext("hosted by")}
+        </p>
+        <.link navigate={~p"/organizations/#{@activity.organization.id}"} class="flex items-center gap-1 font-semibold text-gray-900 hover:underline">
+          <.avatar class={@activity.organization.logo && "border-0 size-5"} src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} name={@activity.organization.name} size={:xs} type={:organization} color={:white} />
+          {@activity.organization.name}
+        </.link>
+      </span>
+    </div>
+  </:title_wrapper>
+  <:actions>
+    <%= if @current_view == "show" do %>
+      <!-- Actions (desktop) -->
+      <div class="hidden gap-4 sm:flex">
+        <%= if @is_authenticated? do %>
+          <.button :if={not @max_enrolled? and !@enrolled?} color={:white} icon="hero-ticket" patch={~p"/activities/#{@activity.id}/enroll"} disabled={@enrolled?}>
+            {gettext("Register")}
+          </.button>
+          <.button :if={@enrolled?} patch={~p"/activities/#{@activity.id}/ticket"} color={:white} icon="hero-ticket">
+            {gettext("Ticket")}
+          </.button>
+          <.button :if={@has_permissions?} navigate={~p"/organizations/#{@activity.organization_id}/activities/#{@activity.id}/edit"} icon="hero-pencil">
+            {gettext("Edit activity")}
+          </.button>
+        <% end %>
+      </div>
+      <!-- Actions (mobile) -->
+      <div class="block sm:hidden">
+        <.dropdown id="activity-actions-dropdown" items={generate_dropdown_items(@enrolled?, @has_permissions?, @activity, @socket)}>
+          <:wrapper>
+            <.button icon="hero-ellipsis-horizontal" color={:white} />
+          </:wrapper>
+        </.dropdown>
+      </div>
+    <% end %>
+    <%= if @current_view == "participants" do %>
+      <.button icon="hero-arrow-left-solid" color={:white} patch={~p"/activities/#{@activity.id}"} />
+    <% end %>
+  </:actions>
+  <!-- Activity image (mobile) -->
+  <%= if @current_view == "show" do %>
+    <div class="flex w-full justify-center px-8 pb-8 sm:hidden sm:px-6">
+      <div class="aspect-square w-full object-cover">
+        <%= if @activity.card do %>
+          <img class="h-full w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
+        <% else %>
+          <.gradient class="rounded-xl" seed={@activity.id} />
+        <% end %>
       </div>
     </div>
-
-    <div class="flex flex-col border-t border-zinc-200 1.5xl:flex-row">
-      <div class="w-full px-4 py-5 sm:px-6">
-        <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
-          <div class="col-span-2 sm:col-span-1">
-            <dt class="font medium text-lg leading-6 text-zinc-900">
-              {gettext("Preview activity")}
-            </dt>
-            <dd class="mt-1 text-sm text-zinc-600">
-              {gettext("Check here every detail of this activity")}
-            </dd>
-          </div>
-
-          <div class={
-            if @has_permissions? do
-              "col-span-1"
-            else
-              "col-span-2"
-            end
-          }>
-            <dt class="text-sm font-medium text-zinc-500">
-              {gettext("Enrollments")}
-            </dt>
-            <dd class="mt-1 flex text-sm text-zinc-900">
-              <div class="flex w-full">
-                <.icon name="hero-users-solid" class="size-5 text-zinc-400" />
-                <div class="pl-2.5">
-                  {@enrolled} / {@activity.maximum_entries}
-                </div>
-              </div>
-            </dd>
-          </div>
-
-          <div class="col-span-2">
-            <dt class="grid grid-cols-2 items-center">
-              <div class="text-sm font-medium text-zinc-500">
-                {gettext("Date and location")}
-              </div>
-            </dt>
-            <dd class="mt-1 flex flex-col gap-x-2 gap-y-4 text-sm text-zinc-900">
-              <div class="flex flex-col gap-x-2 gap-y-2 md:flex-row">
-                <div class="flex gap-x-2">
-                  <div class="text-zinc-900x inset-y-0 my-auto flex w-full gap-y-4 text-sm">
-                    <.icon name="hero-calendar-solid" class="size-5 text-zinc-400" />
-                    <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="hero-clock-solid" class="size-5 text-zinc-400" />
-                  <p class="block max-w-6xl pl-1.5">
-                    {display_time(@activity.start)} - {display_time(@activity.finish)}
+    <div class="mx-4 grid max-w-5xl grid-cols-5 gap-12 sm:mx-6 lg:mx-8">
+      <div class="col-span-5 flex flex-col gap-6 sm:col-span-3">
+        <div class="flex flex-row justify-between gap-16 sm:justify-normal">
+          <!-- Date -->
+          <%= if @activity.start do %>
+            <div class="flex items-center gap-2">
+              <.icon name="hero-calendar" class="h-5 w-5 text-gray-700" />
+              <!-- One day activity -->
+              <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
+                <div class="flex flex-col">
+                  <p class="font-medium">
+                    {pretty_display_date(@activity.start)}
+                  </p>
+                  <p>
+                    {"#{display_time(@activity.start)}-#{display_time(@activity.finish)}"}
                   </p>
                 </div>
-                <div class="flex text-sm md:pl-3">
-                  <%= if @activity.location do %>
-                    <.icon name="hero-map-pin-solid" class="size-5 text-zinc-400" />
-                    <.link navigate={@activity.location.url} data-confirm={gettext("Are you sure?")} class="pl-1.5 text-blue-500">
-                      {@activity.location.name}
-                    </.link>
-                  <% else %>
-                    <%= if @activity.location do %>
-                      <div class="pl-1.5 text-zinc-900">
-                        {@activity.location.name}
-                      </div>
-                    <% end %>
-                  <% end %>
+              <% else %>
+                <div class="flex flex-col">
+                  <p class="font-medium">
+                    {pretty_display_date(@activity.start)} - {pretty_display_date(@activity.finish)}
+                  </p>
+                  <p>
+                    {"#{display_time(@activity.start)}-#{display_time(@activity.finish)}"}
+                  </p>
                 </div>
+              <% end %>
+            </div>
+          <% end %>
+          <!-- Capacity -->
+          <.link phx-click="handle_participants_modal">
+            <div class="flex items-center gap-2">
+              <.icon name="hero-user-group" class="h-5 w-5 text-gray-700" />
+              <p class="font-medium">
+                {Enum.count(@participants)} {if @activity.maximum_entries, do: "/ #{@activity.maximum_entries}"}
+              </p>
+            </div>
+          </.link>
+        </div>
+        <!-- Enrollment (desktop) -->
+        <%= if @enrolled? do %>
+          <div class="hidden sm:block">
+            <div class="flex flex-row items-center gap-2">
+              <.icon name="hero-check-badge" class="h-5 w-5 text-gray-700" />
+              <div>
+                <h2 class="text-md flex-1 select-none truncate font-semibold text-gray-900">
+                  {gettext("You are going!")}
+                </h2>
+                <p>
+                  {gettext("If you can't go please unenroll")}
+                  <.link patch={~p"/activities/#{@activity.id}/unenroll/"}>
+                    <span class="text-primary-500 underline">{gettext("here")}</span>.
+                  </.link>
+                </p>
               </div>
-            </dd>
+            </div>
+          </div>
+        <% end %>
+        <!-- About -->
+        <div>
+          <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
+            {gettext("About")}
+          </h2>
+          <div class="flex flex-col gap-2">
+            {text_to_html(@activity.description)}
+          </div>
+        </div>
+        <!-- Location -->
+        <div :if={@activity.location}>
+          <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
+            {gettext("Location")}
+          </h2>
+          <div class="pb-4">
+            <p>
+              {@activity.location.name}
+            </p>
+            <p class="text-sm text-gray-600">
+              {@activity.location.address}
+            </p>
           </div>
-          <div class="col-span-2">
-            <dt class="text-sm font-medium text-zinc-500">
-              {gettext("Description")}
-            </dt>
-            <dd class="prose prose-slate mt-1 max-w-full text-sm text-zinc-900 prose-headings:underline prose-a:text-blue-500">
-              {@activity.description}
-            </dd>
+          <figure class="rounded-xl border">
+            <.map location={@activity.location.address} class="rounded-xl" />
+          </figure>
+        </div>
+        <!-- Action buttons (mobile) -->
+        <div class="block pt-8 sm:hidden">
+          <!-- Register button -->
+          <.button :if={not @max_enrolled? and !@enrolled?} icon="hero-ticket" size={:lg} patch={~p"/activities/#{@activity.id}/enroll/"} full_width>
+            {gettext("Register")}
+          </.button>
+          <!-- Ticket and unenroll buttons -->
+          <div :if={@enrolled?} class="grid grid-cols-3 gap-2">
+            <.button class="col-span-2" patch={~p"/activities/#{@activity.id}/ticket/"} icon="hero-ticket" size={:lg} full_width>
+              {gettext("View ticket")}
+            </.button>
+            <.button patch={~p"/activities/#{@activity.id}/unenroll/"} color={:white} icon="hero-user-minus" size={:lg} full_width></.button>
+          </div>
+        </div>
+      </div>
+      <div class="col-span-2 hidden w-full object-cover sm:block">
+        <!-- Activity image (desktop) -->
+        <%= if @activity.card do %>
+          <img class="max-h-fit w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
+        <% else %>
+          <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
+        <% end %>
+        <div class="flex flex-col">
+          <!-- Activity participants (desktop) -->
+          <div :if={@activity.enrolled > 0} class="pt-4">
+            <h2 class="text-md mb-2 flex-1 select-none truncate font-semibold text-gray-900">
+              {gettext("%{enrolled} Going", enrolled: Enum.count(@participants))}
+            </h2>
+            <.avatar_group
+              size={:xs}
+              items={
+                @participants
+                |> Enum.take(6)
+                |> Enum.map(fn p -> %{name: p.name} end)
+                |> then(fn avatars ->
+                  if length(@participants) > 6 do
+                    Enum.concat(avatars, [%{name: "+#{length(@participants) - 6}", auto_generate_initials: false}])
+                  else
+                    avatars
+                  end
+                end)
+              }
+            />
           </div>
-          <div class="col-span-2">
-            <%= if @enrolled? do %>
-              <dt class="text-sm font-medium text-zinc-500">
-                {gettext("Your already enrolled in the activity, below is your QRCode")}
-              </dt>
-              <dd class="mt-1 flex text-sm text-zinc-900">
-                {draw_qr_code(@activity, @current_user, @socket) |> raw}
-              </dd>
-              <dd class="mt-1 flex flex-row space-x-1 text-sm text-zinc-900">
-                <span>
-                  {gettext("If you can't go please")}
-                </span>
-                <button class="text-blue-500" phx-click="unenroll" phx-disable-with={gettext("Unenrolling...")} phx-throttle="0">
-                  {gettext("Unenroll")}
-                </button>
-              </dd>
+          <%= if length(@participants) == 0 do %>
+            <span class="flex justify-center pt-2 text-orange-500">{gettext("No participants on this activity")}</span>
+          <% else %>
+            <%= if @has_permissions? do %>
+              <.link patch="?tab=participants" class="text-orange-500 hover:cursor-pointer hover:underline">
+                {gettext("View all")}
+              </.link>
             <% else %>
-              <%= if not @max_enrolled? do %>
-                <div class="flex flex-col">
-                  <dt class="text-sm font-medium text-zinc-500">
-                    {gettext("You are not enrolled in this activity")}
-                  </dt>
-                  <%= if @is_authenticated? do %>
-                    <button
-                      phx-click="enroll"
-                      phx-disable-with={gettext("Enrolling...")}
-                      phx-throttle="0"
-                      class="bg-primary-500 mt-1 w-fit rounded-md px-3.5 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                    >
-                      {gettext("Enroll")}
-                    </button>
-                  <% else %>
-                    <button phx-click="must-login" class="bg-primary-500 mt-1 w-fit rounded-md px-3.5 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
-                      {gettext("Enroll")}
-                    </button>
-                  <% end %>
-                </div>
-              <% end %>
+              <.link phx-click="handle_participants_modal" class="text-orange-500 hover:cursor-pointer hover:underline">
+                {gettext("View all")}
+              </.link>
             <% end %>
-          </div>
-        </dl>
+          <% end %>
+        </div>
       </div>
     </div>
+  <% end %>
+  <%= if @current_view == "participants" do %>
+    <%= if length(@participants) != 0 do %>
+      <%= if @has_permissions? do %>
+        <div class="mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Participants</h2>
+          <div class="border-t border-l">
+            <.table items={@participants} meta={@meta} filter={[]}>
+              <:col :let={participant} label="Name"><.link navigate={~p"/profile/#{participant.slug}"} class="hover:underline">{participant.name}</.link></:col>
+              <:col :let={participant} label="Email">{participant.email}</:col>
+              <:col :let={participant} label="Phone number">{participant.phone_number}</:col>
+            </.table>
+          </div>
+          <.pagination items={@participants} meta={@meta} params={@params} class="flex w-full items-center justify-between border border-t-0 pt-2" />
+        </div>
+      <% else %>
+        <ul>
+          <%= for participant <- @participants do %>
+            <li>{participant.name}</li>
+          <% end %>
+        </ul>
+      <% end %>
+    <% end %>
+  <% end %>
+</.page>
+<!-- Ticket show modal -->
+<.modal :if={@live_action in [:ticket] and @enrolled?} id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
+  <div class="flex w-full flex-col place-items-center gap-2 text-center">
+    <p class="text-md font-semibold text-gray-900 sm:w-1/2">
+      {gettext("Show this code to the staff present at the activity to register your presence.")}
+    </p>
+    {draw_ticket_qr_code(@enrollment_id) |> raw}
+  </div>
+</.modal>
+<!-- Enrollment modal -->
+<.modal :if={@live_action in [:enroll, :unenroll]} id="action-confirm-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
+  <div class="flex flex-col">
+    <h1 class="flex-1 select-none text-lg font-semibold text-gray-900">
+      {display_action_goal_confirm_title(@live_action)}
+    </h1>
+    <p class="mt-4">
+      {display_action_goal_confirm_description(@live_action)}
+    </p>
+    <div class="mt-8 flex flex-row">
+      <.button patch={~p"/activities/#{@activity.id}/"} class="mr-2" size={:lg} icon="hero-x-circle" color={:white} full_width>{gettext("Cancel")}</.button>
+      <.button
+        phx-click="confirm"
+        class="ml-2"
+        size={:lg}
+        icon="hero-check-circle"
+        color={
+          if @live_action == :unenroll do
+            :danger
+          else
+            :success
+          end
+        }
+        full_width
+      >
+        {gettext("Confirm")}
+      </.button>
+    </div>
   </div>
-</div>
-
-<div class="flex flex-row space-x-1">
-  <%= if @has_permissions? do %>
-    <.link patch={~p"/organizations/#{@activity.organization_id}/activities/#{@activity}/edit"} class="button">
-      <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="hero-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 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="hero-trash-solid" class="mr-3 h-5 w-5 text-zinc-400" /> Delete
+</.modal>
+<!-- Participants show modal -->
+<.modal :if={@participants_modal} show class="max-w-[500px]" id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
+  <div class="flex w-full justify-center">
+    <span class="flex-l text-lg font-semibold text-gray-900">{gettext("Participants")}</span>
+  </div>
+  <%= if length(@participants) != 0 do %>
+    <div class="flex w-full place-items-center justify-center">
+      <div class="align-center scrollbar-hide mt-4 grid max-h-80 w-fit grid-cols-1 gap-4 overflow-auto">
+        <%= for participant <- @participants do %>
+          <div class="flex h-10 place-items-center justify-between">
+            <div class="flex place-items-center">
+              <.avatar size={:xs} name={participant.name} type={:user} />
+              <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline">{participant.name}</.link>
+            </div>
+            <span class="ml-2 hidden text-gray-500 sm:block">{relative_datetime(participant.enrollments |> List.first() |> Map.get(:inserted_at))}</span>
+          </div>
+        <% end %>
       </div>
-    <% end %>
+    </div>
+  <% else %>
+    <div class="mt-4">
+      <span>{gettext("There are no participants for this activity")}</span>
+    </div>
   <% end %>
-</div>
+</.modal>
diff --git a/lib/atomic_web/live/department_live/show.ex b/lib/atomic_web/live/department_live/show.ex
index faee63964..327bb7fad 100644
--- a/lib/atomic_web/live/department_live/show.ex
+++ b/lib/atomic_web/live/department_live/show.ex
@@ -33,9 +33,9 @@ defmodule AtomicWeb.DepartmentLive.Show do
       |> assign(:page_title, department.name)
       |> assign_page_metadata(:departments)
       |> assign(:current_page, :departments)
+      |> assign(:department, department)
       |> assign(:current_view, current_view(socket, params))
       |> assign(:organization, organization)
-      |> assign(:department, department)
       |> assign(:params, params)
       |> assign(:current_collaborator, maybe_put_collaborator(socket, department.id))
       |> assign(list_collaborators(department.id, params, has_permissions))
diff --git a/lib/atomic_web/live/department_live/show.html.heex b/lib/atomic_web/live/department_live/show.html.heex
index 92311720d..9abe4a571 100644
--- a/lib/atomic_web/live/department_live/show.html.heex
+++ b/lib/atomic_web/live/department_live/show.html.heex
@@ -166,7 +166,7 @@
             <%= if @has_permissions? do %>
               <!-- Collaborators admin view -->
               <div class="mx-auto px-4 sm:px-6 lg:px-8">
-                <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Collaborators</h2>
+                <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Collaborators</h2>
                 <div class="border-t border-l">
                   <.table items={@collaborators} meta={@meta} filter={[]}>
                     <:col :let={collaborator} label="Name" field={:string}>{collaborator.user.name}</:col>
diff --git a/lib/atomic_web/live/partner_live/form_component.ex b/lib/atomic_web/live/partner_live/form_component.ex
index b2384695b..edb7a7083 100644
--- a/lib/atomic_web/live/partner_live/form_component.ex
+++ b/lib/atomic_web/live/partner_live/form_component.ex
@@ -17,7 +17,8 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
             <.field type="text" help_text={gettext("A brief description of the partner")} field={f[:description]} placeholder="Description" required />
             <.field type="textarea" help_text={gettext("Benefits of the partnership")} field={f[:benefits]} placeholder="Benefits" required />
             <.inputs_for :let={location_form} field={f[:location]}>
-              <.field field={location_form[:name]} label="Address" type="text" placeholder="Address" help_text={gettext("Address of the partner")} required />
+              <.field field={location_form[:name]} label="Location name" type="text" placeholder="Name" help_text={gettext("Location name")} required />
+              <.field field={location_form[:address]} label="Address" type="text" placeholder="Address" help_text={gettext("Address of the partner")} required />
             </.inputs_for>
             <h2 class="mt-8 mb-2 w-full border-b pb-2 text-lg font-semibold text-zinc-900">{gettext("Socials")}</h2>
             <div class="grid w-full gap-x-4 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4">
diff --git a/lib/atomic_web/router.ex b/lib/atomic_web/router.ex
index 8d2376c0a..bce29692d 100644
--- a/lib/atomic_web/router.ex
+++ b/lib/atomic_web/router.ex
@@ -103,6 +103,10 @@ defmodule AtomicWeb.Router do
       live "/cookies", CookiesLive.Show, :show
 
       live "/activities/:id", ActivityLive.Show, :show
+      live "/activities/:id/ticket", ActivityLive.Show, :ticket
+      live "/activities/:id/enroll", ActivityLive.Show, :enroll
+      live "/activities/:id/unenroll", ActivityLive.Show, :unenroll
+
       live "/organizations/:organization_id", OrganizationLive.Show, :show
       live "/announcements/:id", AnnouncementLive.Show, :show
 
diff --git a/lib/atomic_web/views/helpers.ex b/lib/atomic_web/views/helpers.ex
index b017feebf..0367c8009 100644
--- a/lib/atomic_web/views/helpers.ex
+++ b/lib/atomic_web/views/helpers.ex
@@ -325,23 +325,6 @@ defmodule AtomicWeb.Helpers do
     end
   end
 
-  def draw_qr_code(activity, user, _socket) do
-    internal_route = "/redeem/#{activity.id}/#{user.id}/confirm"
-    url = build_url() <> internal_route
-
-    url
-    |> QRCodeEx.encode()
-    |> QRCodeEx.svg(color: "#1F2937", width: 295, background_color: :transparent)
-  end
-
-  defp build_url do
-    if Mix.env() == :dev do
-      "http://localhost:4000"
-    else
-      "https://#{Application.fetch_env!(:atomic, AtomicWeb.Endpoint)[:url][:host]}"
-    end
-  end
-
   def build_path(current_path, params) do
     current_path
     |> URI.parse()
diff --git a/priv/repo/migrations/20221022010100_create_activities.exs b/priv/repo/migrations/20221022010100_create_activities.exs
index 10ae6829d..901b65c9c 100644
--- a/priv/repo/migrations/20221022010100_create_activities.exs
+++ b/priv/repo/migrations/20221022010100_create_activities.exs
@@ -11,11 +11,10 @@ defmodule Atomic.Repo.Migrations.CreateActivities do
       add :start, :naive_datetime, null: false
       add :finish, :naive_datetime, null: false
 
-      add :minimum_entries, :integer, null: false
-      add :maximum_entries, :integer, null: false
+      add :maximum_entries, :integer, null: true
       add :enrolled, :integer, default: 0, null: false
 
-      add :image, :string
+      add :card, :string
       add :location, :map
 
       add :organization_id, references(:organizations, type: :binary_id), null: false
diff --git a/priv/repo/migrations/20221104160002_create_enrollments.exs b/priv/repo/migrations/20221104160002_create_enrollments.exs
index c1133b7ef..af0264dd0 100644
--- a/priv/repo/migrations/20221104160002_create_enrollments.exs
+++ b/priv/repo/migrations/20221104160002_create_enrollments.exs
@@ -12,5 +12,7 @@ defmodule Atomic.Repo.Migrations.CreateEnrollments do
 
       timestamps()
     end
+
+    create unique_index(:enrollments, [:activity_id, :user_id], name: :unique_enrollments)
   end
 end
diff --git a/priv/repo/seeds/accounts.exs b/priv/repo/seeds/accounts.exs
index 55bff19d9..fc7c3267c 100644
--- a/priv/repo/seeds/accounts.exs
+++ b/priv/repo/seeds/accounts.exs
@@ -4,7 +4,6 @@ defmodule Atomic.Repo.Seeds.Accounts do
   """
   alias Atomic.Accounts
   alias Atomic.Accounts.{Course, User}
-  alias Atomic.Organizations.Organization
   alias Atomic.Repo
 
   @masters File.read!("priv/fake/masters.txt") |> String.split("\n")
@@ -23,7 +22,6 @@ defmodule Atomic.Repo.Seeds.Accounts do
 
   def seed_users(characters, role) do
     courses = Repo.all(Course)
-    organizations = Repo.all(Organization)
 
     for character <- characters do
       email = (character |> String.downcase() |> String.replace(~r/\s*/, "")) <> "@mail.pt"
@@ -39,8 +37,7 @@ defmodule Atomic.Repo.Seeds.Accounts do
         "phone_number" => phone_number,
         "password" => "password1234",
         "role" => role,
-        "course_id" => Enum.random(courses).id,
-        "current_organization_id" => Enum.random(organizations).id
+        "course_id" => Enum.random(courses).id
       }
 
       case Accounts.register_user(user) do
diff --git a/priv/repo/seeds/enrollments.exs b/priv/repo/seeds/enrollments.exs
index 9a8f37abf..3898293a3 100644
--- a/priv/repo/seeds/enrollments.exs
+++ b/priv/repo/seeds/enrollments.exs
@@ -18,7 +18,7 @@ defmodule Atomic.Repo.Seeds.Enrollments do
         activities = Repo.all(Activity)
 
         for user <- users do
-          for _ <- 1..Enum.random(1..2) do
+          for _ <- 1..Enum.random(2..6) do
             Activities.create_enrollment(
               Enum.random(activities).id,
               user
diff --git a/priv/repo/seeds/feed.exs b/priv/repo/seeds/feed.exs
index 59a9bf9f4..104a2b818 100644
--- a/priv/repo/seeds/feed.exs
+++ b/priv/repo/seeds/feed.exs
@@ -105,8 +105,7 @@ defmodule Atomic.Repo.Seeds.Feed do
       description: activity_description(organization, title),
       start: build_start_date(i),
       finish: build_finish_date(i),
-      location: location,
-      minimum_entries: Enum.random(1..10),
+      location: %{name: Faker.Company.name(), address: Faker.Address.street_address()},
       maximum_entries: Enum.random(11..20),
       organization_id: organization.id,
       enrolled: Enum.random(0..10)
diff --git a/priv/repo/seeds/organizations.exs b/priv/repo/seeds/organizations.exs
index b0d25b2e1..41c779154 100644
--- a/priv/repo/seeds/organizations.exs
+++ b/priv/repo/seeds/organizations.exs
@@ -28,8 +28,9 @@ defmodule Atomic.Repo.Seeds.Organizations do
       description:
         "O CeSIUM é um grupo de estudantes voluntários, que tem como objetivo representar e promover o curso de Engenharia Informática 💾 na UMinho 🎓",
       location: %{
-        name: "Departamento de Informática, Campus de Gualtar, Universidade do Minho",
-        url: "https://cesium.di.uminho.pt"
+        name: "Departamento de Informática, Universidade do Minho",
+        address:
+          "Departamento de Informática, UMinho, Campus de Gualtar, 4710-057 Braga, Portugal"
       }
     }
     |> Repo.insert!()
diff --git a/priv/repo/seeds/partners.exs b/priv/repo/seeds/partners.exs
index 0d50bb0bd..e76e359df 100644
--- a/priv/repo/seeds/partners.exs
+++ b/priv/repo/seeds/partners.exs
@@ -18,11 +18,6 @@ defmodule Atomic.Repo.Seeds.Partners do
   def seed_partners do
     organizations = Repo.all(Organization)
 
-    location = %{
-      name: Faker.Address.city(),
-      url: Faker.Internet.url()
-    }
-
     socials = %{
       instagram: Faker.Internet.slug(),
       facebook: Faker.Internet.slug(),
@@ -40,7 +35,7 @@ defmodule Atomic.Repo.Seeds.Partners do
           description: Enum.join(Faker.Lorem.paragraphs(2), "\n"),
           benefits: Enum.join(Faker.Lorem.paragraphs(5), "\n"),
           organization_id: organization.id,
-          location: location,
+          location: %{name: Faker.Company.name(), address: Faker.Address.street_address()},
           socials: socials
         })
         |> Repo.insert!()
diff --git a/test/atomic/activities_test.exs b/test/atomic/activities_test.exs
index 1d3ab1749..5a8eb7011 100644
--- a/test/atomic/activities_test.exs
+++ b/test/atomic/activities_test.exs
@@ -9,7 +9,7 @@ defmodule Atomic.ActivitiesTest do
   describe "activities" do
     alias Atomic.Activities.Activity
 
-    @invalid_attrs %{description: nil, maximum_entries: nil, minimum_entries: nil, title: nil}
+    @invalid_attrs %{description: nil, maximum_entries: nil, title: nil}
 
     test "list_activities/1 returns all activities" do
       activity = insert(:activity)
@@ -34,12 +34,6 @@ defmodule Atomic.ActivitiesTest do
       assert {:error, %Ecto.Changeset{}} = Activities.create_activity_with_post(@invalid_attrs)
     end
 
-    test "create_activity_with_post/2 with maximum_entries lower than minimum_entries" do
-      activity = params_for(:activity, maximum_entries: 1, minimum_entries: 2)
-
-      assert {:error, %Ecto.Changeset{}} = Activities.create_activity_with_post(activity)
-    end
-
     test "create_activity_with_post/2 with finish date before start date" do
       activity =
         params_for(:activity, finish: ~N[2022-10-21 20:00:00], start: ~N[2022-10-22 20:00:00])
diff --git a/test/support/factories/activities_factory.ex b/test/support/factories/activities_factory.ex
index a8e59e395..497733ac9 100644
--- a/test/support/factories/activities_factory.ex
+++ b/test/support/factories/activities_factory.ex
@@ -12,7 +12,6 @@ defmodule Atomic.Factories.ActivityFactory do
         %Activity{
           title: Faker.Beer.brand(),
           description: Faker.Lorem.paragraph(),
-          minimum_entries: Enum.random(1..10),
           maximum_entries: Enum.random(11..20),
           enrolled: 0,
           start: NaiveDateTime.utc_now(),
diff --git a/test/support/fixtures/activities_fixtures.ex b/test/support/fixtures/activities_fixtures.ex
index 53d583351..50f6fec4e 100644
--- a/test/support/fixtures/activities_fixtures.ex
+++ b/test/support/fixtures/activities_fixtures.ex
@@ -16,7 +16,6 @@ defmodule Atomic.ActivitiesFixtures do
         description: "some description",
         title: "some title",
         maximum_entries: 42,
-        minimum_entries: 0,
         finish: ~N[2022-10-22 20:00:00],
         start: ~N[2022-10-22 20:00:00],
         organization_id: OrganizationsFixtures.organization_fixture().id