diff --git a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod/Origin.php b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod/Origin.php
index 3175e3156..aaf2bec94 100644
--- a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod/Origin.php
+++ b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod/Origin.php
@@ -24,10 +24,17 @@ namespace Chill\PersonBundle\Entity\AccompanyingPeriod;
 
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Annotation\Groups;
+use Symfony\Component\Serializer\Annotation as Serializer;
+use Symfony\Component\Serializer\Annotation\DiscriminatorMap;
 
 /**
  * @ORM\Entity
  * @ORM\Table(name="chill_person_accompanying_period_origin")
+ * @Serializer\DiscriminatorMap(
+ *   typeProperty="type", 
+ *   mapping={
+ *     "origin"=Origin::class
+ * })
  */
 class Origin
 {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
index 8706601e2..1a4ad5fe8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
@@ -1,17 +1,37 @@
 <template>
    <div class="vue-component">
-     <h2><a name="section-05"></a>{{ $t('origin.title') }}</h2>
+      <h2><a name="section-05"></a>{{ $t('origin.title') }}</h2>
+     
+      <div class="my-4">
+         <label for="selectOrigin">
+            {{ $t('origin.label') }}
+         </label>
 
-     hop
+         <VueMultiselect
+            name="selectOrigin"
+            label="text"
+            vbind:custom-label="transText"
+            track-by="id"
+            v-bind:multiple="false"
+            v-bind:searchable="true"
+            v-bind:placeholder="$t('origin.placeholder')"
+            v-model="value"
+            v-bind:options="options"
+            @select="updateOrigin">
+         </VueMultiselect>
+
+      </div>
    </div>
 </template>
 
 <script>
-import { getOrigins } from '../api';
+import VueMultiselect from 'vue-multiselect';
+import { getListOrigins } from '../api';
 import { mapState } from 'vuex';
 
 export default {
    name: 'OriginDemand',
+   components: { VueMultiselect },
    data() {
       return {
          options: []
@@ -28,10 +48,25 @@ export default {
    methods: {
       getOptions() {
          console.log('loading origins list');
-      }
+         getListOrigins().then(response => new Promise((resolve, reject) => {
+            this.options = response.results;
+            resolve();
+         }));
+      },
+      updateOrigin(value) {
+         //console.log('value', value);
+         this.$store.dispatch('updateOrigin', value);
+      },
+      transText ({ text }) {
+         return text.fr //TODO multilang
+      },
    }
 }
 </script>
 
-<style lang="scss" scoped>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="css" scoped>
+   label {
+      display: none;
+   }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
index c566d2281..aa10b76a2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -3,7 +3,7 @@
    <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
 
    <div class="my-4">
-      <label for="" class="">
+      <label for="selectReferrer">
          {{ $t('referrer.label') }}
       </label>
 
@@ -77,3 +77,5 @@ export default {
    }
 }
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
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 f41424462..6e212eb15 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -28,6 +28,8 @@ const appMessages = {
       },
       origin: {
          title: "Origine de la demande",
+         label: "Origine de la demande",
+         placeholder: "Renseignez l'origine de la demande",
       },
       persons_associated: {
          title: "Usagers concernés",
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 5338a562a..9d994386b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -81,6 +81,10 @@ let initPromise = getAccompanyingCourse(id)
             updateSocialIssues(state, value) {
                state.accompanyingCourse.socialIssues = value;
             },
+            updateOrigin(state, value) {
+               console.log('value', value);
+               state.accompanyingCourse.origin = value;
+            },
             updateReferrer(state, value) {
                console.log('value', value);
                state.accompanyingCourse.user = value;
@@ -191,6 +195,13 @@ let initPromise = getAccompanyingCourse(id)
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
+            updateOrigin({ commit }, payload) {
+               patchAccompanyingCourse(id, { type: "accompanying_period", origin: { id: payload.id, type: payload.type } })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('updateOrigin', course.origin);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
             updateReferrer({ commit }, payload) {
                patchAccompanyingCourse(id, { type: "accompanying_period", user: { id: payload.id, type: payload.type } })
                .then(course => new Promise((resolve, reject) => {
diff --git a/src/Bundle/ChillPersonBundle/Serializer/Normalizer/AccompanyingPeriodOriginNormalizer.php b/src/Bundle/ChillPersonBundle/Serializer/Normalizer/AccompanyingPeriodOriginNormalizer.php
new file mode 100644
index 000000000..7c9174217
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Serializer/Normalizer/AccompanyingPeriodOriginNormalizer.php
@@ -0,0 +1,46 @@
+<?php
+/*
+ *
+ * Copyright (C) 2014-2021, Champs Libres Cooperative SCRLFS, <http://www.champs-libres.coop>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+namespace Chill\PersonBundle\Serializer\Normalizer;
+
+use Chill\PersonBundle\Entity\AccompanyingPeriod\Origin;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
+
+/**
+ *
+ * @internal we keep this normalizer, because the property 'text' may be replace by a rendering in the future
+ */
+class AccompanyingPeriodOriginNormalizer implements NormalizerInterface
+{
+    public function normalize($origin, string $format = null, array $context = array())
+    {
+        /** @var Origin $origin */
+        return [
+            'type' => 'origin',
+            'id' => $origin->getId(),
+            'label' => $origin->getLabel(),
+            'text' => $origin->getLabel()
+        ];
+    }
+
+    public function supportsNormalization($data, string $format = null): bool
+    {
+        return $data instanceof Origin;
+    }
+}