diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js b/src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js
new file mode 100644
index 000000000..ab10f72ee
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js
@@ -0,0 +1,22 @@
+
+import { createApp } from 'vue';
+import Answer from 'ChillCalendarAssets/vuejs/Invite/Answer';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+
+const i18n = _createI18n({});
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  console.log('dom loaded answer');
+  document.querySelectorAll('div[invite-answer]').forEach(function (el) {
+    console.log('element found', el);
+
+    const app = createApp({
+      components: {
+        Answer,
+      },
+      template: '<answer :calendarId="14" :status="defined"></answer>',
+    });
+
+    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
new file mode 100644
index 000000000..d001334ae
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
@@ -0,0 +1,36 @@
+<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')}}
+    </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>
+    </ul>
+  </div>
+
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+
+interface Props {
+  calendarId: number,
+  status: string
+}
+
+export default defineComponent({
+  name: "Answer",
+  props: {
+    calendarId: { type: Number, required: true},
+    status: {type: String, required: true},
+  }
+})
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByAccompanyingCourse.html.twig
index b189d0eb2..5577dc639 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByAccompanyingCourse.html.twig
@@ -7,6 +7,14 @@
 {% set user_id = null %}
 {% set accompanying_course_id = accompanyingCourse.id %}
 
+{% block js %}
+    {{ encore_entry_script_tags('mod_answer') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('mod_answer') }}
+{% endblock %}
+
 {% block content %}
 
 <h1>{{ 'Calendar list' |trans }}</h1>
@@ -55,6 +63,12 @@
 
                         </ul>
                         <ul class="record_actions">
+                            {% if (calendar.isInvited(app.user)) %}
+                                {% set invite = calendar.inviteForUser(app.user) %}
+                                <li>
+                                    <div invite-answer data-status="{{ invite.status|e('html_attr') }}" data-calendar-id="{{ calendar.id|e('html_attr') }}"></div>
+                                </li>
+                            {% endif %}
                             <li>
                                 <a href="{{ path('chill_calendar_calendar_show', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-show "></a>
                             </li>
diff --git a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
index f91b30268..d4ce3f04b 100644
--- a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
@@ -8,4 +8,5 @@ module.exports = function(encore, entries) {
     encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
     encore.addEntry('vue_mycalendarrange', __dirname + '/Resources/public/vuejs/MyCalendarRange/index.js');
     encore.addEntry('page_calendar', __dirname + '/Resources/public/chill/index.js');
+    encore.addEntry('mod_answer', __dirname + '/Resources/public/module/Invite/answer.js');
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 1371989ba..f4301981a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -1,27 +1,6 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n } from 'vue-i18n';
+import datetimeFormats from 'ChillMainAssets/vuejs/i18n/datetimeFormats';
 
-const datetimeFormats = {
-   fr: {
-      short: {
-         year: "numeric",
-         month: "numeric",
-         day: "numeric"
-      },
-      text: {
-         year: "numeric",
-         month: "long",
-         day: "numeric",
-      },
-      long: {
-         year: "numeric",
-         month: "numeric",
-         day: "numeric",
-         hour: "numeric",
-         minute: "numeric",
-         hour12: false
-      }
-   }
-};
 const messages = {
    fr: {
       action: {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.js
new file mode 100644
index 000000000..a0f771371
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.js
@@ -0,0 +1,22 @@
+export default {
+  fr: {
+    short: {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric"
+    },
+    text: {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    },
+    long: {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false
+    }
+  }
+};