diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 0947637d..68fa7d80 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -10,7 +10,16 @@
           event.picture ? event.picture.url : '/img/mobilizon_default_card.png'
         }')`"
       >
-        <div class="tag-container" v-if="event.tags">
+        <div
+          class="tag-container"
+          v-if="event.tags || event.status !== EventStatus.CONFIRMED"
+        >
+          <b-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
+            {{ $t("Tentative") }}
+          </b-tag>
+          <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
+            {{ $t("Cancelled") }}
+          </b-tag>
           <router-link
             :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
             v-for="tag in event.tags.slice(0, 3)"
@@ -84,7 +93,7 @@ import { IEvent, IEventCardOptions } from "@/types/event.model";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { Actor, Person } from "@/types/actor";
-import { ParticipantRole } from "@/types/enums";
+import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
 
 @Component({
@@ -99,6 +108,8 @@ export default class EventCard extends Vue {
 
   ParticipantRole = ParticipantRole;
 
+  EventStatus = EventStatus;
+
   RouteName = RouteName;
 
   defaultOptions: IEventCardOptions = {
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 8e02c4cc..b4398d16 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -110,15 +110,7 @@
                   v-if="new Date(endDate) > new Date()"
                 >
                   <participation-button
-                    v-if="
-                      anonymousParticipation === null &&
-                      (config.anonymous.participation.allowed ||
-                        (currentActor.id &&
-                          !actorIsOrganizer &&
-                          !event.draft &&
-                          (eventCapacityOK || actorIsParticipant) &&
-                          event.status !== EventStatus.CANCELLED))
-                    "
+                    v-if="shouldShowParticipationButton"
                     :participation="participations[0]"
                     :event="event"
                     :current-actor="currentActor"
@@ -949,6 +941,7 @@ export default class Event extends EventMixin {
         mutation: JOIN_EVENT,
         variables: {
           eventId: this.event.id,
+          actorId: identity.id,
           message,
         },
         update: (store, { data }) => {
@@ -1205,6 +1198,29 @@ export default class Event extends EventMixin {
     }
     return null;
   }
+
+  get shouldShowParticipationButton(): boolean {
+    // So that people can cancel their participation
+    if (
+      this.actorIsParticipant ||
+      (this.config.anonymous.participation.allowed &&
+        this.anonymousParticipation)
+    )
+      return true;
+
+    // You can participate to draft or cancelled events
+    if (this.event.draft || this.event.status === EventStatus.CANCELLED)
+      return false;
+
+    // Organizer can't participate
+    if (this.actorIsOrganizer) return false;
+
+    // If capacity is OK
+    if (this.eventCapacityOK) return true;
+
+    // Else
+    return false;
+  }
 }
 </script>
 <style lang="scss" scoped>