diff --git a/CHANGELOG.md b/CHANGELOG.md
index 349ccbd4a..dcd149841 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,9 +11,11 @@ and this project adheres to
 ## Unreleased
 
 <!-- write down unreleased development here -->
+* [parcours]: component added to change the opening date of a parcours (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/411)
 * [search]: listing of parcours display changed (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/410)
 * [user]: page with accompanying periods to which is user is referent (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/408)
 
+
 ## Test releases
 
 ### test release 2021-01-28
diff --git a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
index 728ef7322..c457d2863 100644
--- a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
+++ b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
@@ -212,6 +212,8 @@ class AccompanyingPeriod implements
      *
      * @ORM\Column(type="date")
      * @Groups({"read", "write", "docgen:read"})
+     * @Assert\LessThan(value= "today", groups={AccompanyingPeriod::STEP_CONFIRMED})
+     * @Assert\LessThan(propertyPath="closingDate", groups={AccompanyingPeriod::STEP_CONFIRMED})
      */
     private ?DateTime $openingDate = null;
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index c0f279760..51fc2c1d0 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -14,6 +14,7 @@
    <scopes></scopes>
    <referrer></referrer>
    <resources></resources>
+   <start-date v-if="accompanyingCourse.step === 'CONFIRMED'"></start-date>
    <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
    <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
 
@@ -39,6 +40,7 @@ import Referrer from './components/Referrer.vue';
 import Resources from './components/Resources.vue';
 import Comment from './components/Comment.vue';
 import Confirm from './components/Confirm.vue';
+import StartDate from './components/StartDate.vue';
 
 export default {
    name: 'App',
@@ -56,6 +58,7 @@ export default {
       Resources,
       Comment,
       Confirm,
+      StartDate
    },
    computed: {
       ...mapState([
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
new file mode 100644
index 000000000..349581452
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
@@ -0,0 +1,46 @@
+<template>
+<div class="vue-component">
+    <h2><a id="section-110"></a>
+        {{ $t('startdate.change') }}
+    </h2>
+    <div>
+        <div class="mb-3 row">
+            <label class="col-form-label col-sm-4">{{ $t('startdate.date') }}</label>
+            <div class="col-sm-8">
+                <input class="form-control" type="date" v-model="startDate" @change="updateStartDate" />
+            </div>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<script>
+
+import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+    name: 'startDate',
+    methods: {
+        updateStartDate(event) {
+            const date = event.target.value;
+            // console.log(date)
+            this.$store.dispatch('updateStartDate', date)
+                .catch(({name, violations}) => {
+                    if (name === 'ValidationException' || name === 'AccessException') {
+                        violations.forEach((violation) => this.$toast.open({message: violation}));
+                    } else {
+                        this.$toast.open({message: 'An error occurred'})
+                    }
+            });
+        },
+    },
+    computed: {
+        ...mapState({
+            startDate: state => dateToISO(ISOToDatetime(state.accompanyingCourse.openingDate.datetime))
+        })
+    }
+}
+
+</script>
\ No newline at end of file
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 297642c24..249cd7d41 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -151,6 +151,10 @@ const appMessages = {
          placeholder: "Choisir un métier",
          not_valid: "Sélectionnez un métier du référent"
       },
+      startdate: {
+         change: "Modifier la date de début",
+         date: "Date de début",
+      },
       // catch errors
       'Error while updating AccompanyingPeriod Course.': "Erreur du serveur lors de la mise à jour du parcours d'accompagnement.",
       'Error while retriving AccompanyingPeriod Course.': "Erreur du serveur lors du chargement du parcours d'accompagnement.",
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 1413aa9e6..1fdc65c5e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -8,6 +8,7 @@ import { getAccompanyingCourse,
 import { patchPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
 import { patchThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
 
 
 const debug = process.env.NODE_ENV !== 'production';
@@ -278,6 +279,10 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                if (scopeIds.includes(scope.id)) {
                   state.scopesAtBackend = state.scopesAtBackend.filter(s => s.id !== scope.id);
                }
+            },
+            updateStartDate(state, date) {
+               console.log('new state date', date)
+               state.accompanyingCourse.openingDate = date;
             }
          },
          actions: {
@@ -701,15 +706,30 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                      throw error;
                   })
             },
+            updateStartDate({commit}, payload) {
+               console.log('payload', payload)
+               const date = ISOToDate(payload);
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = { type: "accompanying_period", openingDate: { datetime: datetimeToISO(date) }};
+               console.log('body', body)
+               return makeFetch('PATCH', url, body)
+                  .then((response) => {
+                     commit('updateStartDate', response.openingDate);
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
             async fetchReferrersSuggested({ state, commit}) {
                let users = await getReferrersSuggested(state.accompanyingCourse);
                commit('setReferrersSuggested', users);
                commit('setFilteredReferrersSuggested');
                if (
-                 null === state.accompanyingCourse.user
-                 && !state.accompanyingCourse.confidential
-                 && !state.accompanyingCourse.step === 'DRAFT'
-                 && users.length === 1
+                  null === state.accompanyingCourse.user
+                  && !state.accompanyingCourse.confidential
+                  && !state.accompanyingCourse.step === 'DRAFT'
+                  && users.length === 1
                ) {
                   // set the user if unique
                   commit('updateReferrer', users[0]);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
index 74ed0467c..5f4973f3e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@@ -5,7 +5,7 @@
 
   <div id="awc_create_form">
 
-      <div id="picking">
+      <div id="picking" class="">
           <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
           <div v-for="si in socialIssues" :key="si.id">
             <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
@@ -33,7 +33,7 @@
           </vue-multiselect>
         </div>
       </div>
-      <div v-if="hasSocialIssuePicked">
+      <div v-if="hasSocialIssuePicked" class="mb-3">
         <h2>{{ $t('pick_an_action') }}</h2>
         <div class="col-11">
           <vue-multiselect
@@ -52,7 +52,7 @@
         <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
       </div>
 
-      <div v-if="hasSocialActionPicked" id="persons">
+      <div v-if="hasSocialActionPicked" id="persons" class="mb-5">
         <h2>{{ $t('persons_involved') }}</h2>
 
         <ul>
@@ -64,14 +64,27 @@
       </div>
 
     </div>
-    <div v-if="hasSocialActionPicked" id="start_date">
+    <!-- <div v-if="hasSocialActionPicked" id="start_date">
       <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
+    </div> -->
+    <div class="row">
+    <div v-if="hasSocialActionPicked" id="start_date" class="mb-3 row">
+      <label class="col-form-label col-sm-4">{{ $t('startDate') }}</label>
+      <div class="col-sm-8">
+          <input class="form-control" type="date" v-model="startDate"/>
+      </div>
     </div>
 
-    <div v-if="hasSocialActionPicked" id="end_date">
+    <!-- <div v-if="hasSocialActionPicked" id="end_date">
       <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
+    </div> -->
+    <div v-if="hasSocialActionPicked" id="end_date" class="mb-3 row">
+      <label class="col-form-label col-sm-4">{{ $t('endDate') }}</label>
+      <div class="col-sm-8">
+          <input class="form-control" type="date" v-model="endDate"/>
+      </div>
+    </div>
     </div>
-
     <div id="confirm">
       <div v-if="hasErrors">
         <p>{{ $t('form_has_errors') }}</p>