diff --git a/src/Bundle/ChillCalendarBundle/Controller/InviteApiController.php b/src/Bundle/ChillCalendarBundle/Controller/InviteApiController.php
index 960459617..62c3dc521 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/InviteApiController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/InviteApiController.php
@@ -57,7 +57,7 @@ class InviteApiController
             throw new AccessDeniedHttpException('not allowed to answer on this invitation');
         }
 
-        if (!in_array($answer, Invite::STATUSES, true) || Invite::PENDING === $answer) {
+        if (!in_array($answer, Invite::STATUSES, true)) {
             throw new BadRequestHttpException('answer not valid');
         }
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js b/src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js
index ab10f72ee..a97fe584d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js
@@ -14,7 +14,18 @@ document.addEventListener('DOMContentLoaded', function (e) {
       components: {
         Answer,
       },
-      template: '<answer :calendarId="14" :status="defined"></answer>',
+      data() {
+        return {
+          status: el.dataset.status,
+          calendarId: Number.parseInt(el.dataset.calendarId),
+        }
+      },
+      template: '<answer :calendarId="calendarId" :status="status" @statusChanged="onStatusChanged"></answer>',
+      methods: {
+        onStatusChanged: function(newStatus) {
+          this.$data.status = newStatus;
+        },
+      }
     });
 
     app.use(i18n).mount(el);
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
index d001334ae..a45ac2ed5 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
@@ -1,31 +1,70 @@
 <template>
   <div class="btn-group" role="group">
     <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-      {{ $t('answer')}}
+      <template v-if="status === Statuses.PENDING">
+        <span class="fa fa-hourglass"></span>{{ $t('answer')}}
+      </template>
+      <template v-else-if="status === Statuses.ACCEPTED">
+        <span class="fa fa-check"></span>{{ $t('accepted')}}
+      </template>
+      <template v-else-if="status === Statuses.DECLINED">
+        <span class="fa fa-times"></span>{{ $t('declined')}}
+      </template>
+      <template v-else-if="status === Statuses.TENTATIVELY_ACCEPTED">
+        <span class="fa fa-question"></span>{{ $t('tentative')}}
+      </template>
     </button>
     <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-      <li><a class="dropdown-item" href="#"><i class="fa fa-check" aria-hidden="true"></i> {{ $t('accept') }}</a></li>
-      <li><a class="dropdown-item" href="#"><i class="fa fa-times" aria-hidden="true"></i> {{ $t('decline') }}</a></li>
-      <li><a class="dropdown-item" href="#"><i class="fa fa-question"></i> {{ $t('tentatively_accept') }}</a></li>
-      <li><a class="dropdown-item" href="#"><i class="fa fa-hourglass-o"></i> {{ $t('pending') }}</a></li>
+      <li v-if="status !== Statuses.ACCEPTED"><a class="dropdown-item" @click="changeStatus(Statuses.ACCEPTED)"><i class="fa fa-check" aria-hidden="true"></i> {{ $t('accept') }}</a></li>
+      <li v-if="status !== Statuses.DECLINED"><a class="dropdown-item" @click="changeStatus(Statuses.DECLINED)"><i class="fa fa-times" aria-hidden="true"></i> {{ $t('decline') }}</a></li>
+      <li v-if="status !== Statuses.TENTATIVELY_ACCEPTED"><a class="dropdown-item" @click="changeStatus(Statuses.TENTATIVELY_ACCEPTED)"><i class="fa fa-question"></i> {{ $t('tentatively_accept') }}</a></li>
+      <li v-if="status !== Statuses.PENDING"><a class="dropdown-item" @click="changeStatus(Statuses.PENDING)"><i class="fa fa-hourglass-o"></i> {{ $t('pending') }}</a></li>
     </ul>
   </div>
 
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, PropType} from 'vue';
 
-interface Props {
-  calendarId: number,
-  status: string
-}
+enum AnswerStatus {
+  ACCEPTED = 'accepted',
+  DECLINED = 'declined',
+  PENDING = 'pending',
+  TENTATIVELY_ACCEPTED = 'tentative',
+};
 
 export default defineComponent({
   name: "Answer",
   props: {
     calendarId: { type: Number, required: true},
-    status: {type: String, required: true},
+    status: {type: Object as PropType<AnswerStatus>, required: true},
+  },
+  emits: {
+    statusChanged(payload: AnswerStatus) {
+      return true;
+    }
+  },
+  data() {
+    return {
+      Statuses: AnswerStatus,
+    }
+  },
+  methods: {
+    changeStatus: function (newStatus: AnswerStatus) {
+      console.log('changeStatus', newStatus);
+      const url = `/api/1.0/calendar/calendar/${this.$props.calendarId}/answer/${newStatus}.json`;
+      window.fetch(url, {
+        method: 'POST',
+      }).then((r: Response) => {
+        if (!r.ok) {
+          console.error('could not confirm answer', newStatus);
+          return;
+        }
+        console.log('answer sent', newStatus);
+        this.$emit('statusChanged', newStatus);
+      });
+    },
   }
 })