diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 6bdafa0e..35df42b2 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -188,5 +188,9 @@ nav {
   .navbar-item.has-dropdown a.navbar-link figure {
     margin-right: 0.75rem;
   }
+
+  a.navbar-item:focus-within {
+    background-color: inherit;
+  }
 }
 </style>
diff --git a/js/src/graphql/event.ts b/js/src/graphql/event.ts
index 1ce5d1b2..92edeeb3 100644
--- a/js/src/graphql/event.ts
+++ b/js/src/graphql/event.ts
@@ -101,7 +101,8 @@ export const FETCH_EVENT = gql`
       # },
       participantStats {
         approved,
-        unapproved
+        unapproved,
+        participants
       },
       tags {
         ${tagsQuery}
@@ -257,7 +258,8 @@ export const CREATE_EVENT = gql`
       },
       participantStats {
         approved,
-        unapproved
+        unapproved,
+        participants
       },
       tags {
         ${tagsQuery}
@@ -341,7 +343,8 @@ export const EDIT_EVENT = gql`
       },
       participantStats {
         approved,
-        unapproved
+        unapproved,
+        participants
       },
       tags {
         ${tagsQuery}
@@ -407,7 +410,8 @@ export const PARTICIPANTS = gql`
       participantStats {
         approved,
         unapproved,
-        rejected
+        rejected,
+        participants
       }
     }
   }
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 8d19829b..29ee401a 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -273,5 +273,6 @@
 	"{count} participants": "{count} participants",
 	"{count} requests waiting": "{count} requests waiting",
 	"{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.",
-	"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks"
+	"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks",
+	"All the places have already been taken": "All the places have been taken|One place is still available|{places} places are still available"
 }
\ No newline at end of file
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index dbed4d11..9a58e5ff 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -312,5 +312,6 @@
     "{count} participants": "Un⋅e participant⋅e|{count} participant⋅e⋅s",
     "{count} requests waiting": "Un⋅e demande en attente|{count} demandes en attente",
     "{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} garantit {respect} des personnes qui l'utiliseront. Puisque {source}, il est publiquement auditable, ce qui garantit sa transparence.",
-    "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines"
+    "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines",
+    "All the places have already been taken": "Toutes les places ont été prises|Une place est encore disponible|{places} places sont encore disponibles"
 }
\ No newline at end of file
diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts
index 82aac669..66e946a3 100644
--- a/js/src/types/event.model.ts
+++ b/js/src/types/event.model.ts
@@ -112,6 +112,7 @@ export interface IEvent {
     approved: number;
     unapproved: number;
     rejected: number;
+    participants: number;
   };
   participants: IParticipant[];
 
@@ -178,7 +179,7 @@ export class EventModel implements IEvent {
 
   publishAt = new Date();
 
-  participantStats = { approved: 0, unapproved: 0, rejected: 0 };
+  participantStats = { approved: 0, unapproved: 0, rejected: 0, participants: 0 };
   participants: IParticipant[] = [];
 
   relatedEvents: IEvent[] = [];
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 2ee20b50..b108cee9 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -17,17 +17,24 @@
                 <div class="date-component">
                   <date-calendar-icon :date="event.beginsOn"></date-calendar-icon>
                 </div>
-                <h1 class="title">{{ event.title }}</h1>
+                <div class="title-and-informations">
+                  <h1 class="title">{{ event.title }}</h1>
+                  <span>
+                    <small v-if="event.participantStats.approved > 0 && !actorIsParticipant">
+                      {{ $tc('One person is going', event.participantStats.approved, {approved: event.participantStats.approved}) }}
+                    </small>
+                    <small v-else-if="event.participantStats.approved > 0 && actorIsParticipant">
+                      {{ $tc('You and one other person are going to this event', event.participantStats.participants, { approved: event.participantStats.participants }) }}
+                    </small>
+                    <small v-if="event.options.maximumAttendeeCapacity">
+                        {{ $tc('All the places have already been taken', numberOfPlacesStillAvailable, { places: numberOfPlacesStillAvailable}) }}
+                    </small>
+                  </span>
+                </div>
               </div>
-              <div class="has-text-right" v-if="new Date(endDate) > new Date()">
-                <small v-if="event.participantStats.approved > 0 && !actorIsParticipant">
-                    {{ $tc('One person is going', event.participantStats.approved, {approved: event.participantStats.approved}) }}
-                </small>
-                <small v-else-if="event.participantStats.approved > 0 && actorIsParticipant">
-                  {{ $tc('You and one other person are going to this event', event.participantStats.approved - 1, {approved: event.participantStats.approved - 1}) }}
-                </small>
+              <div class="event-participation has-text-right" v-if="new Date(endDate) > new Date()">
                 <participation-button
-                        v-if="currentActor.id && !actorIsOrganizer && !event.draft"
+                        v-if="currentActor.id && !actorIsOrganizer && !event.draft && (eventCapacityOK || actorIsParticipant)"
                         :participation="participations[0]"
                         :current-actor="currentActor"
                         @joinEvent="joinEvent"
@@ -46,14 +53,14 @@
             </div>
             <div class="metadata columns">
               <div class="column is-three-quarters-desktop">
-                <p class="tags" v-if="event.category || event.tags.length > 0">
+                <p class="tags" v-if="event.tags.length > 0">
                   <b-tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t('Draft') }}</b-tag>
-                  <b-tag type="is-success" v-if="event.tags" v-for="tag in event.tags" :key="tag.title">{{ tag.title }}</b-tag>
-                  <span v-if="event.tags > 0">⋅</span>
-                  <span class="visibility" v-if="!event.draft">
+                    <span class="visibility" v-if="!event.draft">
                     <b-tag type="is-info" v-if="event.visibility === EventVisibility.PUBLIC">{{ $t('Public event') }}</b-tag>
                     <b-tag type="is-info" v-if="event.visibility === EventVisibility.UNLISTED">{{ $t('Private event') }}</b-tag>
                   </span>
+                  <b-tag type="is-success" v-if="event.tags" v-for="tag in event.tags" :key="tag.title">{{ tag.title }}</b-tag>
+                  <span v-if="event.tags > 0">⋅</span>
                 </p>
                 <div class="date-and-add-to-calendar">
                   <div class="date-and-privacy" v-if="event.beginsOn">
@@ -147,6 +154,9 @@
             <div class="columns">
               <div class="column is-half has-text-centered">
                 <h3 class="title">{{ $t('Share this event') }}</h3>
+                <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
+                  {{ $t('All the places have already been taken') }}
+                </small>
                 <div>
                   <b-icon icon="mastodon" size="is-large" type="is-primary" />
                   <a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"><b-icon icon="facebook" size="is-large" type="is-primary" /></a>
@@ -346,7 +356,7 @@ export default class Event extends EventMixin {
 
           const participationCachedData = store.readQuery<{ person: IPerson }>({
             query: EVENT_PERSON_PARTICIPATION,
-            variables: { eventId: this.event.id, name: identity.preferredUsername },
+            variables: { eventId: this.event.id, actorId: identity.id },
           });
           if (participationCachedData == null) return;
           const { person } = participationCachedData;
@@ -357,7 +367,7 @@ export default class Event extends EventMixin {
           person.participations.push(data.joinEvent);
           store.writeQuery({
             query: EVENT_PERSON_PARTICIPATION,
-            variables: { eventId: this.event.id, name: identity.preferredUsername },
+            variables: { eventId: this.event.id, actorId: identity.id },
             data: { person },
           });
 
@@ -408,7 +418,7 @@ export default class Event extends EventMixin {
 
           const participationCachedData = store.readQuery<{ person: IPerson }>({
             query: EVENT_PERSON_PARTICIPATION,
-            variables: { eventId: this.event.id, name: this.currentActor.preferredUsername },
+            variables: { eventId: this.event.id, actorId: this.currentActor.id },
           });
           if (participationCachedData == null) return;
           const { person } = participationCachedData;
@@ -420,7 +430,7 @@ export default class Event extends EventMixin {
           person.participations = [];
           store.writeQuery({
             query: EVENT_PERSON_PARTICIPATION,
-            variables: { eventId: this.event.id, name: this.currentActor.preferredUsername },
+            variables: { eventId: this.event.id, actorId: this.currentActor.id },
             data: { person },
           });
 
@@ -497,6 +507,15 @@ export default class Event extends EventMixin {
     return meta.getAttribute('content') || '';
   }
 
+  get eventCapacityOK(): boolean {
+    if (!this.event.options.maximumAttendeeCapacity) return true;
+    return this.event.options.maximumAttendeeCapacity > this.event.participantStats.participants;
+  }
+
+  get numberOfPlacesStillAvailable(): number {
+    return this.event.options.maximumAttendeeCapacity - this.event.participantStats.participants;
+  }
+
 }
 </script>
 <style lang="scss" scoped>
@@ -600,22 +619,40 @@ export default class Event extends EventMixin {
     /*align-self: center;*/
     align-items: stretch;
     /*align-content: space-around;*/
-    padding: 15px 10px 0;
+    padding: 7.5px 10px 0;
+    margin-bottom: 1rem;
 
     div.title-wrapper {
       display: flex;
       flex: 1 1 auto;
 
+      div.title-and-informations {
+        h1.title {
+          font-weight: normal;
+          word-break: break-word;
+          font-size: 1.7em;
+          margin-bottom: 0;
+        }
+
+        span small {
+          &:not(:last-child):after {
+            content: '⋅'
+          }
+
+          &:not(:first-child) {
+            padding-left: 3px;
+          }
+        }
+      }
+
 
       div.date-component {
         margin-right: 16px;
       }
+    }
 
-      h1.title {
-        font-weight: normal;
-        word-break: break-word;
-        font-size: 1.7em;
-      }
+    .event-participation small {
+      display: block;
     }
 
     .participate-button {
@@ -660,12 +697,16 @@ export default class Event extends EventMixin {
 
   p.tags {
     span {
-      &.tag.is-success {
-        &::before {
-          content: '#';
+      &.tag {
+        margin: 0 2px 4px;
+
+        &.is-success {
+            &::before {
+                content: '#';
+            }
+            text-transform: uppercase;
+            color: #111111;
         }
-        text-transform: uppercase;
-        color: #111111;
       }
 
       margin: auto 5px;
@@ -733,6 +774,36 @@ export default class Event extends EventMixin {
         padding: 10rem 0;
       }
 
+      h3 {
+        display: block;
+        color: $primary;
+        font-size: 3rem;
+        text-decoration: underline;
+        text-decoration-color: $secondary;
+        cursor: pointer;
+        max-width: 20rem;
+      }
+
+      .column:first-child {
+        h3 {
+          margin: 0 auto 1rem;
+          font-weight: normal;
+        }
+
+        small.maximumNumberOfPlacesWarning {
+          margin: 0 auto 1rem;
+          display: block;
+        }
+      }
+
+      .column:last-child {
+
+        h3 {
+          margin-right: 0;
+          margin-left: auto;
+        }
+      }
+
       .add-to-calendar {
         background-repeat: no-repeat;
         background-size: 400px;
@@ -749,19 +820,6 @@ export default class Event extends EventMixin {
           height: 40%;
           width: 1px;
         }
-
-
-        h3 {
-          display: block;
-          color: $primary;
-          font-size: 3rem;
-          text-decoration: underline;
-          text-decoration-color: $secondary;
-          cursor: pointer;
-          max-width: 20rem;
-          margin-right: 0;
-          margin-left: auto;
-        }
       }
     }
   }
diff --git a/lib/mobilizon/events/events.ex b/lib/mobilizon/events/events.ex
index 3bae79e1..739c65a4 100644
--- a/lib/mobilizon/events/events.ex
+++ b/lib/mobilizon/events/events.ex
@@ -762,6 +762,17 @@ defmodule Mobilizon.Events do
     |> Repo.aggregate(:count, :id)
   end
 
+  @doc """
+  Counts participant participants.
+  """
+  @spec count_participant_participants(integer | String.t()) :: integer
+  def count_participant_participants(event_id) do
+    event_id
+    |> count_participants_query()
+    |> filter_participant_role()
+    |> Repo.aggregate(:count, :id)
+  end
+
   @doc """
   Counts unapproved participants.
   """
@@ -1457,6 +1468,11 @@ defmodule Mobilizon.Events do
     from(p in query, where: p.role not in ^[:not_approved, :rejected])
   end
 
+  @spec filter_participant_role(Ecto.Query.t()) :: Ecto.Query.t()
+  defp filter_participant_role(query) do
+    from(p in query, where: p.role == ^:participant)
+  end
+
   @spec filter_unapproved_role(Ecto.Query.t()) :: Ecto.Query.t()
   defp filter_unapproved_role(query) do
     from(p in query, where: p.role == ^:not_approved)
diff --git a/lib/mobilizon_web/resolvers/event.ex b/lib/mobilizon_web/resolvers/event.ex
index 9fb155bf..e627d0cc 100644
--- a/lib/mobilizon_web/resolvers/event.ex
+++ b/lib/mobilizon_web/resolvers/event.ex
@@ -101,7 +101,8 @@ defmodule MobilizonWeb.Resolvers.Event do
      %{
        approved: Mobilizon.Events.count_approved_participants(id),
        unapproved: Mobilizon.Events.count_unapproved_participants(id),
-       rejected: Mobilizon.Events.count_rejected_participants(id)
+       rejected: Mobilizon.Events.count_rejected_participants(id),
+       participants: Mobilizon.Events.count_participant_participants(id)
      }}
   end
 
@@ -170,6 +171,9 @@ defmodule MobilizonWeb.Resolvers.Event do
            |> Map.put(:actor, Person.proxify_pictures(actor)) do
       {:ok, participant}
     else
+      {:maximum_attendee_capacity, _} ->
+        {:error, "The event has already reached it's maximum capacity"}
+
       {:has_event, _} ->
         {:error, "Event with this ID #{inspect(event_id)} doesn't exist"}
 
diff --git a/lib/mobilizon_web/schema/event.ex b/lib/mobilizon_web/schema/event.ex
index d6cc0b58..53fe860e 100644
--- a/lib/mobilizon_web/schema/event.ex
+++ b/lib/mobilizon_web/schema/event.ex
@@ -115,6 +115,10 @@ defmodule MobilizonWeb.Schema.EventType do
     field(:approved, :integer, description: "The number of approved participants")
     field(:unapproved, :integer, description: "The number of unapproved participants")
     field(:rejected, :integer, description: "The number of rejected participants")
+
+    field(:participants, :integer,
+      description: "The number of simple participants (excluding creators)"
+    )
   end
 
   object :event_offer do
diff --git a/lib/service/activity_pub/activity_pub.ex b/lib/service/activity_pub/activity_pub.ex
index b98753c0..f3de44b0 100644
--- a/lib/service/activity_pub/activity_pub.ex
+++ b/lib/service/activity_pub/activity_pub.ex
@@ -411,8 +411,16 @@ defmodule Mobilizon.Service.ActivityPub do
 
   def join(object, actor, local \\ true)
 
-  def join(%Event{} = event, %Actor{} = actor, local) do
-    with role <- Mobilizon.Events.get_default_participant_role(event),
+  def join(%Event{options: options} = event, %Actor{} = actor, local) do
+    # TODO Refactor me for federation
+    with maximum_attendee_capacity <-
+           Map.get(options, :maximum_attendee_capacity, 2_000_000) || false,
+         {:maximum_attendee_capacity, true} <-
+           {:maximum_attendee_capacity,
+            !maximum_attendee_capacity ||
+              Mobilizon.Events.count_participant_participants(event.id) <
+                maximum_attendee_capacity},
+         role <- Mobilizon.Events.get_default_participant_role(event),
          {:ok, %Participant{} = participant} <-
            Mobilizon.Events.create_participant(%{
              role: role,
diff --git a/schema.graphql b/schema.graphql
index 03609452..9cacfb2e 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -1,5 +1,5 @@
 # source: http://localhost:4000/api
-# timestamp: Fri Oct 04 2019 15:04:46 GMT+0200 (GMT+02:00)
+# timestamp: Fri Oct 11 2019 11:53:52 GMT+0200 (Central European Summer Time)
 
 schema {
   query: RootQueryType
@@ -681,6 +681,9 @@ type ParticipantStats {
   """The number of approved participants"""
   approved: Int
 
+  """The number of simple participants (excluding creators)"""
+  participants: Int
+
   """The number of rejected participants"""
   rejected: Int
 
diff --git a/test/mobilizon_web/resolvers/participant_resolver_test.exs b/test/mobilizon_web/resolvers/participant_resolver_test.exs
index c0e69ea2..bd195d47 100644
--- a/test/mobilizon_web/resolvers/participant_resolver_test.exs
+++ b/test/mobilizon_web/resolvers/participant_resolver_test.exs
@@ -74,6 +74,76 @@ defmodule MobilizonWeb.Resolvers.ParticipantResolverTest do
       assert hd(json_response(res, 200)["errors"])["message"] =~ "already a participant"
     end
 
+    test "actor_join_event/3 doesn't work if the event already has too much participants", %{
+      conn: conn,
+      actor: actor
+    } do
+      event = insert(:event, options: %{maximum_attendee_capacity: 2})
+      insert(:participant, event: event, actor: actor, role: :creator)
+      insert(:participant, event: event, role: :participant)
+      insert(:participant, event: event, role: :not_approved)
+      insert(:participant, event: event, role: :rejected)
+      user_participant = insert(:user)
+      actor_participant = insert(:actor, user: user_participant)
+
+      mutation = """
+          mutation {
+            joinEvent(
+              actor_id: #{actor_participant.id},
+              event_id: #{event.id}
+            ) {
+                role,
+                actor {
+                  id
+                },
+                event {
+                  id
+                }
+              }
+            }
+      """
+
+      res =
+        conn
+        |> auth_conn(user_participant)
+        |> post("/api", AbsintheHelpers.mutation_skeleton(mutation))
+
+      assert json_response(res, 200)["errors"] == nil
+      assert json_response(res, 200)["data"]["joinEvent"]["role"] == "PARTICIPANT"
+      assert json_response(res, 200)["data"]["joinEvent"]["event"]["id"] == to_string(event.id)
+
+      assert json_response(res, 200)["data"]["joinEvent"]["actor"]["id"] ==
+               to_string(actor_participant.id)
+
+      user_participant_2 = insert(:user)
+      actor_participant_2 = insert(:actor, user: user_participant_2)
+
+      mutation = """
+          mutation {
+            joinEvent(
+              actor_id: #{actor_participant_2.id},
+              event_id: #{event.id}
+            ) {
+                role,
+                actor {
+                  id
+                },
+                event {
+                  id
+                }
+              }
+            }
+      """
+
+      res =
+        conn
+        |> auth_conn(user_participant_2)
+        |> post("/api", AbsintheHelpers.mutation_skeleton(mutation))
+
+      assert hd(json_response(res, 200)["errors"])["message"] ==
+               "The event has already reached it's maximum capacity"
+    end
+
     test "actor_join_event/3 should check the actor is owned by the user", %{
       conn: conn,
       user: user
diff --git a/test/support/factory.ex b/test/support/factory.ex
index c866ca6c..7e7c8597 100644
--- a/test/support/factory.ex
+++ b/test/support/factory.ex
@@ -124,7 +124,8 @@ defmodule Mobilizon.Factory do
       url: Routes.page_url(Endpoint, :event, uuid),
       picture: insert(:picture),
       uuid: uuid,
-      join_options: :free
+      join_options: :free,
+      options: %{}
     }
   end