diff --git a/event/static/css/calendar.css b/event/static/css/calendar.css
index e4501dc..0426e9d 100644
--- a/event/static/css/calendar.css
+++ b/event/static/css/calendar.css
@@ -313,6 +313,7 @@
 }
 
 #cal-container .cal-event-details .cal-detail-perm-title {
+  display: block;
   margin: 0 0 10px 0;
 }
 
diff --git a/event/static/js/calendar.js b/event/static/js/calendar.js
index 03c15dc..a94db4d 100644
--- a/event/static/js/calendar.js
+++ b/event/static/js/calendar.js
@@ -770,7 +770,9 @@ class EventDetails {
   }
 
   updatePermManagementCounter () {
-    let permCounterNode = this.node.find(".cal-detail-perm-count");
+    let permCounterNode = this.node
+      .find(".cal-detail-perm-count")
+      .html(`👤 ${this.event.nbPerms}/${this.event.maxNbPerms}`);
 
     if (this.event.minNbPerms > this.event.nbPerms) {
       permCounterNode.addClass("cal-perms-missing");
@@ -787,12 +789,37 @@ class EventDetails {
     // On click, switch the subscription state
     // and update objects related to the perm count
     let event = this.event;
-    buttonNode.on("click", () => {
-      // TODO: subscribe or unsubscribe
-      event.subscribedByUser = ! event.subscribedByUser;
 
-      this.updatePermManagementArea();
-      event.updatePermCounter();
+    buttonNode.on("click", () => {
+      let goal = event.subscribedByUser ? "unenrol" : "enrol";
+      let url = event.calendar.subscriptionURLFormat
+        .replace("999999", event.id);
+
+      $.ajax(url, {
+        method: "POST",
+        dataType: "json",
+
+        headers: {
+          "X-CSRFToken": event.calendar.csrfToken
+        },
+
+        data: {
+          "goal": goal
+        },
+
+        success: (jsonAnswer) => {
+          event.subscribedByUser = jsonAnswer.enrolled;
+          event.nbPerms = jsonAnswer.number;
+
+          this.updatePermManagementArea();
+          event.updatePermCounter();
+          event.updateNodeStyle();
+        },
+
+        error: (_, message) => {
+          alert(message);
+        }
+      });
     });
 
     return buttonNode;
diff --git a/event/templates/event/calendar.html b/event/templates/event/calendar.html
index 88426e3..dfdb867 100644
--- a/event/templates/event/calendar.html
+++ b/event/templates/event/calendar.html
@@ -13,8 +13,8 @@
     <script type="text/javascript">
       $(document).ready(() => {
         let cal = new Calendar({
-          startDate: new Date(2018, 11, 1, 8),
-          endDate: new Date(2018, 11, 2, 18),
+          startDate: new Date(2018, 10, 30, 8),
+          endDate: new Date(2018, 11, 2, 6),
           subscriptionURLFormat: "{% url "event:enrol_activity" 999999 %}?ajax=json",
           csrfToken: $(".planning [name=csrfmiddlewaretoken]").val()
         });
@@ -33,9 +33,9 @@
     <div class="content fluid" id="cal-container">
     {% for day in days_list %}
         {% for activity in day.list %}
-            <div class="{% cycle "" "inverted" %} cal-event">
+            <div class="cal-event">
                 <span class="cal-event-id">{{ activity.id }}</span>
-                <span class="cal-event-name">{{ activity.id }}</span>
+                <span class="cal-event-name">{{ activity.title }}</span>
                 <span class="cal-event-start-date">{{ activity.beginning | date:"j/m/Y H:i" }}</span>
                 <span class="cal-event-end-date">{{ activity.end | date:"j/m/Y H:i" }}</span>
                 <span class="cal-event-location">{{ activity.places.all | join:", " }}</span>
@@ -55,7 +55,6 @@
                 {% endfor %}
             </div>
         {% endfor %}
-        </div>
     {% endfor %}
     </div>
 {% endblock %}