diff --git a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
index c2f3ea6ba..990f7ea59 100644
--- a/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
+++ b/src/Bundle/ChillCalendarBundle/Form/CalendarType.php
@@ -48,13 +48,13 @@ class CalendarType extends AbstractType
             ->add('comment', CommentType::class, [
                 'required' => false
             ])
-            ->add('cancelReason', EntityType::class, [
-                'required' => false,
-                'class' => CancelReason::class,
-                'choice_label' => function (CancelReason $entity) {
-                    return $entity->getCanceledBy();
-                },
-            ])
+            // ->add('cancelReason', EntityType::class, [
+            //     'required' => false,
+            //     'class' => CancelReason::class,
+            //     'choice_label' => function (CancelReason $entity) {
+            //         return $entity->getCanceledBy();
+            //     },
+            // ])
             ->add('sendSMS', ChoiceType::class, [
                 'required' => false,
                 'choices' => [
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/chill/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/chill/index.js
new file mode 100644
index 000000000..c6e439991
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/chill/index.js
@@ -0,0 +1 @@
+require('./scss/calendar.scss');
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss
new file mode 100644
index 000000000..b224125f1
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss
@@ -0,0 +1,10 @@
+div#calendarControls {
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+div#fullCalendar{
+
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index fb4429a1d..8c762a645 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -1,18 +1,21 @@
 <template>
   <concerned-groups></concerned-groups>
-  <calendar-user-selector 
-    v-bind:users="users"
-    v-bind:calendarEvents="calendarEvents" 
-    v-bind:updateEventsSource="updateEventsSource"
-    v-bind:showMyCalendar="showMyCalendar"
-    v-bind:toggleMyCalendar="toggleMyCalendar" >
-  </calendar-user-selector>
-  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions">
-    <template v-slot:eventContent='arg'>
-      <b>{{ arg.timeText }}</b>
-    </template>
-  </FullCalendar>
+  <teleport to="#calendarControls">
+    <calendar-user-selector 
+      v-bind:users="users"
+      v-bind:calendarEvents="calendarEvents" 
+      v-bind:updateEventsSource="updateEventsSource"
+      v-bind:showMyCalendar="showMyCalendar"
+      v-bind:toggleMyCalendar="toggleMyCalendar" >
+    </calendar-user-selector>
+  </teleport>
+  <teleport to="#fullCalendar">
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+      <template v-slot:eventContent='arg'>
+        <b>{{ arg.timeText }}</b>
+      </template>
+    </FullCalendar>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index c0db531ac..e97fe9ba4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -1,6 +1,6 @@
 <template>
-  <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
-  <div>
+  <div class="calendar__controls">
+     <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
     <VueMultiselect
         name="field"
         id="calendarUserSelector"
@@ -196,3 +196,12 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 
+<style lang="scss" scoped>
+  div.calendar__controls {
+    background-color: 'black';
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+</style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
index d5491df8c..d750ff3f7 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
@@ -2,7 +2,7 @@ const calendarUserSelectorMessages = {
     fr: {
       choose_your_calendar_user: "Afficher les plages de disponibilités",
       select_user: "Sélectionnez des calendriers",
-      show_my_calendar: "Affichez mon calendrier"
+      show_my_calendar: "Afficher mon calendrier"
     }
  };
  
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
index 784d3686d..f64e22353 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
@@ -40,10 +40,6 @@
 
 .. location
 
-{%- if form.cancelReason is defined -%}
-    {{ form_row(form.cancelReason) }}
-{% endif %}
-
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
 {% endif %}
@@ -52,8 +48,7 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-
-..calendarRange
+<div id="fullCalendar"></div>
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
index d0295d0e2..f41939f62 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
@@ -36,3 +36,7 @@
     {{ parent() }}
     {{ encore_entry_link_tags('vue_calendar') }}
 {% endblock %}
+
+{% block block_post_menu %}
+    <div id="calendarControls"></div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
index 501f2ebe1..028111079 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
@@ -1,4 +1,4 @@
-<h1>{{ "Calendar item creation"|trans ~ ' :' }}</h1>
+<h1>{{ "Calendar item creation"|trans }}</h1>
 
 {{ form_start(form) }}
 {{ form_errors(form) }}
@@ -34,16 +34,8 @@
     {{ form_row(form.endDate) }}
 {% endif %}
 
-{%- if form.calendarRange is defined -%}
-    {{ form_row(form.calendarRange) }}
-{% endif %}
-
 .. location
 
-{%- if form.cancelReason is defined -%}
-    {{ form_row(form.cancelReason) }}
-{% endif %}
-
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
 {% endif %}
@@ -52,10 +44,7 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-
-..calendarRange
-
-
+<div id="fullCalendar"></div>
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
index b28f7060f..35b2d9e63 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig
@@ -34,4 +34,6 @@
     <link rel="stylesheet" href="{{ asset('build/vue_calendar.css') }}"/>
 {% endblock %}
 
-
+{% block block_post_menu %}
+    <div id="calendarControls"></div>
+{% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
index 74f1dd6ea..b4b42d2fe 100644
--- a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
@@ -1,10 +1,10 @@
 // this file loads all assets from the Chill calendar bundle
 module.exports = function(encore, entries) {
-    //entries.push(__dirname + '/Resources/public/index.js');
+    entries.push(__dirname + '/Resources/public/chill/index.js');
     
     encore.addAliases({
         ChillCalendarAssets: __dirname + '/Resources/public'
     });
-    
+
     encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig
index 8ccccb3d4..b3e34e13c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig
@@ -17,6 +17,10 @@
         'layout': '@ChillPerson/menu.html.twig',
         'args' : { 'accompanyingCourse': accompanyingCourse }
     }) }}
+    
+    {% block block_post_menu %}
+    {% endblock %}
+
 {% endblock %}
 
 {% block css %}