diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 6973ff6d7..86e65c390 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -8,7 +8,7 @@ cache:
 
 before_script:
   # add extensions to postgres
-  - PGPASSWORD=$POSTGRES_PASSWORD psql -U $POSTGRES_USER -h db -c "CREATE EXTENSION IF NOT EXISTS unaccent; CREATE EXTENSION IF NOT EXISTS pg_trgm; CREATE EXTENSION IF NOT EXISTS btree_gist;"
+  - PGPASSWORD=$POSTGRES_PASSWORD psql -U $POSTGRES_USER -h db -c "CREATE EXTENSION IF NOT EXISTS unaccent; CREATE EXTENSION IF NOT EXISTS pg_trgm;"
   # Install and run Composer
   - curl -sS https://getcomposer.org/installer | php
   - php -d memory_limit=2G composer.phar install
diff --git a/composer.json b/composer.json
index 95074c18f..748a7d862 100644
--- a/composer.json
+++ b/composer.json
@@ -73,7 +73,7 @@
         "symfony/web-profiler-bundle": "^5.0",
         "symfony/var-dumper": "4.*",
         "symfony/debug-bundle": "^5.1",
-        "symfony/phpunit-bridge": "^5.2",    
+        "symfony/phpunit-bridge": "^5.2",
         "nelmio/alice": "^3.8"
     },
     "scripts": {
diff --git a/src/Bundle/ChillActivityBundle/Timeline/TimelineActivityProvider.php b/src/Bundle/ChillActivityBundle/Timeline/TimelineActivityProvider.php
index a4dbdfad3..a1c6b6c65 100644
--- a/src/Bundle/ChillActivityBundle/Timeline/TimelineActivityProvider.php
+++ b/src/Bundle/ChillActivityBundle/Timeline/TimelineActivityProvider.php
@@ -117,7 +117,7 @@ class TimelineActivityProvider implements TimelineProviderInterface
     private function getWhereClauseForPerson(Person $person)
     {
         $parameters = [];
-        $metadataActivity = $this->em->getClassMetadata('ChillActivityBundle:Activity');
+        $metadataActivity = $this->em->getClassMetadata(Activity::class);
         $associationMapping = $metadataActivity->getAssociationMapping('person');
         $role = new Role('CHILL_ACTIVITY_SEE');
         $reachableScopes =  $this->helper->getReachableScopes($this->user,
@@ -154,8 +154,8 @@ class TimelineActivityProvider implements TimelineProviderInterface
     
     private function getFromClausePerson()
     {
-        $metadataActivity = $this->em->getClassMetadata('ChillActivityBundle:Activity');
-        $metadataPerson = $this->em->getClassMetadata('ChillPersonBundle:Person');
+        $metadataActivity = $this->em->getClassMetadata(Activity::class);
+        $metadataPerson = $this->em->getClassMetadata(Person::class);
         $associationMapping = $metadataActivity->getAssociationMapping('person');
         
         return $metadataActivity->getTableName().' JOIN '
@@ -173,7 +173,7 @@ class TimelineActivityProvider implements TimelineProviderInterface
      */
     public function getEntities(array $ids)
     {
-        $activities = $this->em->getRepository('ChillActivityBundle:Activity')
+        $activities = $this->em->getRepository(Activity::class)
               ->findBy(array('id' => $ids));
         
         $result = array();
diff --git a/src/Bundle/ChillMainBundle/Controller/AddressController.php b/src/Bundle/ChillMainBundle/Controller/AddressController.php
deleted file mode 100644
index 1aeb39062..000000000
--- a/src/Bundle/ChillMainBundle/Controller/AddressController.php
+++ /dev/null
@@ -1,63 +0,0 @@
-<?php
-
-namespace Chill\MainBundle\Controller;
-
-use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\HttpFoundation\Exception\BadRequestException;
-use Symfony\Component\Routing\Annotation\Route;
-use Chill\MainBundle\Entity\Address;
-use Chill\MainBundle\Entity\AddressReference;
-
-/**
- * Class AddressController
- *
- * @package Chill\MainBundle\Controller
- */
-class AddressController extends AbstractController
-{
-
-
-    /**
-     * Get API Data for showing endpoint
-     *
-     * @Route(
-     *     "/{_locale}/main/api/1.0/address/{address_id}/show.{_format}",
-     *     name="chill_main_address_api_show"
-     * )
-     * @ParamConverter("address", options={"id": "address_id"})
-     */
-    public function showAddress(Address $address, $_format): Response
-    {
-        // TODO check ACL ?
-        switch ($_format) {
-            case 'json':
-                return $this->json($address);
-            default:
-                throw new BadRequestException('Unsupported format');
-        }
-    }
-
-
-    /**
-     * Get API Data for showing endpoint
-     *
-     * @Route(
-     *     "/{_locale}/main/api/1.0/address-reference/{address_reference_id}/show.{_format}",
-     *     name="chill_main_address_reference_api_show"
-     * )
-     * @ParamConverter("addressReference", options={"id": "address_reference_id"})
-     */
-    public function showAddressReference(AddressReference $addressReference, $_format): Response
-    {
-        // TODO check ACL ?
-        switch ($_format) {
-            case 'json':
-                return $this->json($addressReference);
-            default:
-                throw new BadRequestException('Unsupported format');
-        }
-
-    }
-}
diff --git a/src/Bundle/ChillMainBundle/Controller/AddressReferenceAPIController.php b/src/Bundle/ChillMainBundle/Controller/AddressReferenceAPIController.php
new file mode 100644
index 000000000..cbe0ea0a5
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Controller/AddressReferenceAPIController.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace Chill\MainBundle\Controller;
+
+use Chill\MainBundle\CRUD\Controller\ApiController;
+use Symfony\Component\HttpFoundation\Request;
+
+/**
+ * Class AddressReferenceAPIController
+ *
+ * @package Chill\MainBundle\Controller
+ * @author Champs Libres
+ */
+class AddressReferenceAPIController extends ApiController
+{
+
+    protected function customizeQuery(string $action, Request $request, $qb): void
+    {
+        if ($request->query->has('postal_code')) {
+
+            $qb->where('e.postcode = :postal_code')
+               ->setParameter('postal_code', $request->query->get('postal_code'));
+
+        }
+    }
+
+}
diff --git a/src/Bundle/ChillMainBundle/Controller/PostalCodeAPIController.php b/src/Bundle/ChillMainBundle/Controller/PostalCodeAPIController.php
new file mode 100644
index 000000000..026784208
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Controller/PostalCodeAPIController.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace Chill\MainBundle\Controller;
+
+use Chill\MainBundle\CRUD\Controller\ApiController;
+use Symfony\Component\HttpFoundation\Request;
+
+/**
+ * Class PostalCodeAPIController
+ *
+ * @package Chill\MainBundle\Controller
+ * @author Champs Libres
+ */
+class PostalCodeAPIController extends ApiController
+{
+
+    protected function customizeQuery(string $action, Request $request, $qb): void
+    {
+        if ($request->query->has('country')) {
+
+            $qb->where('e.country = :country')
+               ->setParameter('country', $request->query->get('country'));
+
+        }
+    }
+
+}
diff --git a/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php b/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php
index 5644138e6..f6d10ec9e 100644
--- a/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php
+++ b/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php
@@ -284,6 +284,7 @@ class ChillMainExtension extends Extension implements PrependExtensionInterface,
                     ]
                 ],
                 [
+                    'controller' => \Chill\MainBundle\Controller\AddressReferenceAPIController::class,
                     'class' => \Chill\MainBundle\Entity\AddressReference::class,
                     'name' => 'address_reference',
                     'base_path' => '/api/1.0/main/address-reference',
@@ -304,6 +305,7 @@ class ChillMainExtension extends Extension implements PrependExtensionInterface,
                     ]
                 ],
                 [
+                    'controller' => \Chill\MainBundle\Controller\PostalCodeAPIController::class,
                     'class' => \Chill\MainBundle\Entity\PostalCode::class,
                     'name' => 'postal_code',
                     'base_path' => '/api/1.0/main/postal-code',
diff --git a/src/Bundle/ChillMainBundle/Doctrine/Model/Point.php b/src/Bundle/ChillMainBundle/Doctrine/Model/Point.php
index 43c21ae59..2e6f83a69 100644
--- a/src/Bundle/ChillMainBundle/Doctrine/Model/Point.php
+++ b/src/Bundle/ChillMainBundle/Doctrine/Model/Point.php
@@ -9,11 +9,11 @@ use \JsonSerializable;
  *
  */
 class Point implements JsonSerializable {
-    private float $lat;
-    private float $lon;
+    private ?float $lat = null;
+    private ?float $lon = null;
     public static string $SRID = '4326';
 
-    private function __construct(float $lon, float $lat)
+    private function __construct(?float $lon, ?float $lat)
     {
         $this->lat = $lat;
         $this->lon = $lon;
diff --git a/src/Bundle/ChillMainBundle/Entity/Address.php b/src/Bundle/ChillMainBundle/Entity/Address.php
index 2003a7910..2fc024e8c 100644
--- a/src/Bundle/ChillMainBundle/Entity/Address.php
+++ b/src/Bundle/ChillMainBundle/Entity/Address.php
@@ -4,6 +4,7 @@ namespace Chill\MainBundle\Entity;
 
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Validator\Context\ExecutionContextInterface;
+use Symfony\Component\Serializer\Annotation\Groups;
 use Chill\MainBundle\Doctrine\Model\Point;
 use Chill\ThirdPartyBundle\Entity\ThirdParty;
 
@@ -22,6 +23,7 @@ class Address
      * @ORM\Id
      * @ORM\Column(name="id", type="integer")
      * @ORM\GeneratedValue(strategy="AUTO")
+     * @groups({"write"})
      */
     private $id;
 
@@ -29,6 +31,7 @@ class Address
      * @var string
      *
      * @ORM\Column(type="string", length=255)
+     * @groups({"write"})
      */
     private $street = '';
 
@@ -36,6 +39,7 @@ class Address
      * @var string
      *
      * @ORM\Column(type="string", length=255)
+     * @groups({"write"})
      */
     private $streetNumber = '';
 
@@ -43,6 +47,7 @@ class Address
      * @var PostalCode
      *
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\PostalCode")
+     * @groups({"write"})
      */
     private $postcode;
 
@@ -50,6 +55,7 @@ class Address
      * @var string|null
      *
      * @ORM\Column(type="string", length=16, nullable=true)
+     * @groups({"write"})
      */
     private $floor;
 
@@ -57,6 +63,7 @@ class Address
      * @var string|null
      *
      * @ORM\Column(type="string", length=16, nullable=true)
+     * @groups({"write"})
      */
     private $corridor;
 
@@ -64,6 +71,7 @@ class Address
      * @var string|null
      *
      * @ORM\Column(type="string", length=16, nullable=true)
+     * @groups({"write"})
      */
     private $steps;
 
@@ -71,6 +79,7 @@ class Address
      * @var string|null
      *
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @groups({"write"})
      */
     private $buildingName;
 
@@ -78,6 +87,7 @@ class Address
      * @var string|null
      *
      * @ORM\Column(type="string", length=16, nullable=true)
+     * @groups({"write"})
      */
     private $flat;
 
@@ -85,6 +95,7 @@ class Address
      * @var string|null
      *
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @groups({"write"})
      */
     private $distribution;
 
@@ -92,6 +103,7 @@ class Address
      * @var string|null
      *
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @groups({"write"})
      */
     private $extra;
 
@@ -102,6 +114,7 @@ class Address
      * @var \DateTime
      *
      * @ORM\Column(type="date")
+     * @groups({"write"})
      */
     private $validFrom;
 
@@ -112,11 +125,13 @@ class Address
      * @var \DateTime|null
      *
      * @ORM\Column(type="date", nullable=true)
+     * @groups({"write"})
      */
     private $validTo;
 
     /**
      * True if the address is a "no address", aka homeless person, ...
+     * @groups({"write"})
      *
      * @var bool
      */
@@ -128,6 +143,7 @@ class Address
      * @var Point|null
      *
      * @ORM\Column(type="point", nullable=true)
+     * @groups({"write"})
      */
     private $point;
 
@@ -137,6 +153,7 @@ class Address
      * @var ThirdParty|null
      *
      * @ORM\ManyToOne(targetEntity="Chill\ThirdPartyBundle\Entity\ThirdParty")
+     * @groups({"write"})
      * @ORM\JoinColumn(nullable=true, onDelete="SET NULL")
      */
     private $linkedToThirdParty;
diff --git a/src/Bundle/ChillMainBundle/Entity/AddressReference.php b/src/Bundle/ChillMainBundle/Entity/AddressReference.php
index b1fca205d..d13de4de9 100644
--- a/src/Bundle/ChillMainBundle/Entity/AddressReference.php
+++ b/src/Bundle/ChillMainBundle/Entity/AddressReference.php
@@ -4,6 +4,7 @@ namespace Chill\MainBundle\Entity;
 
 use Doctrine\ORM\Mapping as ORM;
 use Chill\MainBundle\Doctrine\Model\Point;
+use Symfony\Component\Serializer\Annotation\Groups;
 
 /**
  * @ORM\Entity()
@@ -16,21 +17,25 @@ class AddressReference
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
+     * @groups({"read"})
      */
     private $id;
 
     /**
      * @ORM\Column(type="string", length=255)
+     * @groups({"read"})
      */
     private $refId;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @groups({"read"})
      */
     private $street;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @groups({"read"})
      */
     private $streetNumber;
 
@@ -38,16 +43,19 @@ class AddressReference
      * @var PostalCode
      *
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\PostalCode")
+     * @groups({"read"})
      */
     private $postcode;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @groups({"read"})
      */
     private $municipalityCode;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @groups({"read"})
      */
     private $source;
 
@@ -57,6 +65,7 @@ class AddressReference
      * @var Point
      *
      * @ORM\Column(type="point")
+     * @groups({"read"})
      */
     private $point;
 
diff --git a/src/Bundle/ChillMainBundle/Entity/Country.php b/src/Bundle/ChillMainBundle/Entity/Country.php
index f8f68c3f3..932944d03 100644
--- a/src/Bundle/ChillMainBundle/Entity/Country.php
+++ b/src/Bundle/ChillMainBundle/Entity/Country.php
@@ -3,6 +3,7 @@
 namespace Chill\MainBundle\Entity;
 
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Annotation\Groups;
 
 /**
  * Country
@@ -20,6 +21,7 @@ class Country
      * @ORM\Id
      * @ORM\Column(name="id", type="integer")
      * @ORM\GeneratedValue(strategy="AUTO")
+     * @groups({"read"})
      */
     private $id;
 
@@ -27,13 +29,16 @@ class Country
      * @var string
      *
      * @ORM\Column(type="json_array")
+     * @groups({"read"})
+     *
      */
     private $name;
-    
+
     /**
      * @var string
      *
      * @ORM\Column(type="string", length=3)
+     * @groups({"read"})
      */
     private $countryCode;
 
@@ -41,7 +46,7 @@ class Country
     /**
      * Get id
      *
-     * @return integer 
+     * @return integer
      */
     public function getId()
     {
@@ -57,20 +62,20 @@ class Country
     public function setName($name)
     {
         $this->name = $name;
-    
+
         return $this;
     }
 
     /**
      * Get name
      *
-     * @return string 
+     * @return string
      */
     public function getName()
     {
         return $this->name;
     }
-    
+
     /**
      * @return string
      */
@@ -90,12 +95,12 @@ class Country
 
     /**
      *
-     * @param string $countryCode            
+     * @param string $countryCode
      */
     public function setCountryCode($countryCode)
     {
         $this->countryCode = $countryCode;
         return $this;
     }
- 
+
 }
diff --git a/src/Bundle/ChillMainBundle/Entity/PostalCode.php b/src/Bundle/ChillMainBundle/Entity/PostalCode.php
index 3cff0a6bf..a70a955b8 100644
--- a/src/Bundle/ChillMainBundle/Entity/PostalCode.php
+++ b/src/Bundle/ChillMainBundle/Entity/PostalCode.php
@@ -3,6 +3,7 @@
 namespace Chill\MainBundle\Entity;
 
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Annotation\Groups;
 
 /**
  * PostalCode
@@ -25,6 +26,7 @@ class PostalCode
      * @ORM\Id
      * @ORM\Column(name="id", type="integer")
      * @ORM\GeneratedValue(strategy="AUTO")
+     * @groups({"read"})
      */
     private $id;
 
@@ -32,6 +34,7 @@ class PostalCode
      * @var string
      *
      * @ORM\Column(type="string", length=255, name="label")
+     * @groups({"read"})
      */
     private $name;
 
@@ -39,6 +42,7 @@ class PostalCode
      * @var string
      *
      * @ORM\Column(type="string", length=100)
+     * @groups({"read"})
      */
     private $code;
 
@@ -46,6 +50,7 @@ class PostalCode
      * @var Country
      *
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\Country")
+     * @groups({"read"})
      */
     private $country;
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
index 8a77ac48f..cc9c090e2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
@@ -23,7 +23,7 @@
 // @import "bootstrap/scss/button-group";
 // @import "bootstrap/scss/input-group";
 // @import "bootstrap/scss/custom-forms";
-// @import "bootstrap/scss/nav";
+@import "bootstrap/scss/nav";
 // @import "bootstrap/scss/navbar";
 // @import "bootstrap/scss/card";
 // @import "bootstrap/scss/breadcrumb";
diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index b91aadb42..2eb1f9bc7 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -50,7 +50,7 @@ div#header-accompanying_course-name {
   background: none repeat scroll 0 0 #718596;
   color: #FFF;
   h1 {
-    margin: 0.4em 0;       
+    margin: 0.4em 0;
   }
   span {
     a {
@@ -71,7 +71,7 @@ div#header-accompanying_course-details {
 /*
 *  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
 */
-div.flex-bloc, 
+div.flex-bloc,
 div.flex-table {
    h2, h3, h4, dl, p {
       margin: 0;
@@ -85,38 +85,38 @@ div.flex-table {
 * Bloc appearance
 */
 div.flex-bloc {
-   box-sizing: border-box; 
+   box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
-   
+
    div.item-bloc {
       flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
-      
+
       margin: 0;
       border: 1px solid #000;
       padding: 1em;
-      
+
       border-top: 0;
-      &:nth-child(1), &:nth-child(2) { 
+      &:nth-child(1), &:nth-child(2) {
          border-top: 1px solid #000;
       }
       border-left: 0;
       &:nth-child(odd) {
          border-left: 1px solid #000;
       }
-      
+
       //background-color: #e6e6e6;
       display: flex;
       flex-direction: column;
-         
+
       div.item-row {
          flex-grow: 1; flex-shrink: 1; flex-basis: auto;
          display: flex;
          flex-direction: column;
-         
+
          div.item-col {
             &:first-child {
                flex-grow: 0; flex-shrink: 0; flex-basis: auto;
@@ -124,7 +124,7 @@ div.flex-bloc {
             &:last-child {
                flex-grow: 1; flex-shrink: 1; flex-basis: auto;
                display: flex;
-               
+
                .list-content { // ul, dl, or div
                }
                ul.record_actions {
@@ -134,7 +134,7 @@ div.flex-bloc {
                   li {
                      margin-right: 5px;
                   }
-               }            
+               }
             }
          }
       }
@@ -147,7 +147,7 @@ div.flex-bloc {
       margin: auto 0;
       div.item-bloc {
          border-left: 1px solid #000;
-         &:nth-child(2) { 
+         &:nth-child(2) {
             border-top: 0;
          }
       }
@@ -156,13 +156,13 @@ div.flex-bloc {
 
 /*
 * Table appearance
-*/ 
+*/
 div.flex-table {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
-   
+
    div.item-bloc {
       display: flex;
       flex-direction: column;
@@ -173,7 +173,7 @@ div.flex-table {
          border-top: 1px solid #000;
       }
       &:nth-child(even) {
-         background-color: #e6e6e6;         
+         background-color: #e6e6e6;
       }
 
       div.item-row {
@@ -185,7 +185,7 @@ div.flex-table {
             padding-top: 0.5em;
             flex-direction: column;
          }
-         
+
          div.item-col {
             &:first-child {
                flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
@@ -194,7 +194,7 @@ div.flex-table {
                flex-grow: 1; flex-shrink: 1; flex-basis: auto;
                display: flex;
                justify-content: flex-end;
-               
+
                .list-content { // ul, dl, or div
                }
                ul.record_actions {
@@ -204,7 +204,7 @@ div.flex-table {
                   li {
                      margin-right: 5px;
                   }
-               }            
+               }
             }
          }
          @media only screen and (max-width: 900px) {
@@ -217,9 +217,47 @@ div.flex-table {
                }
             }
          }
-         
-         // neutralize 
+
+         // neutralize
          div.chill_address div.chill_address_address p { text-indent: 0; }
       }
    }
-}      
+}
+
+
+
+/*
+* Address form
+*/
+div.address_form {
+   display: flex;
+   flex-direction: column;
+   div.address_form__header {
+
+   }
+   div.address_form__select {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      div.address_form__select__body {
+         display: flex;
+         flex-direction: column;
+         flex-grow: 1;
+      }
+
+      div.address_form__select__map {
+         margin: 0px 20px;
+         div#address_map {
+            height:400px;
+            width:400px;
+         }
+      }
+   }
+   div.address_form__more {
+
+   }
+}
+
+
+
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index 461b0038e..7c27db341 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -1,5 +1,5 @@
 <template>
-   
+
    <div v-if="address.address">
       {{ address.address.street }}, {{ address.address.streetNumber }}
    </div>
@@ -9,7 +9,7 @@
    <div v-if="address.country">
       {{ address.country.name }}
    </div>
-   
+
    <add-address
       @addNewAddress="addNewAddress">
    </add-address>
@@ -33,7 +33,26 @@ export default {
    methods: {
       addNewAddress({ address, modal }) {
          console.log('@@@ CLICK button addNewAdress', address);
-         this.$store.dispatch('addAddress', address.selected);
+
+         let newAddress = {
+            'isNoAddress': address.isNoAddress,
+            'street': address.selected.address.street,
+            'streetNumber': address.selected.address.streetNumber,
+            'postcode': {'id': address.selected.city.id },
+            'floor': address.floor,
+            'corridor': address.corridor,
+            'steps': address.steps,
+            'flat': address.flat,
+            'buildingName': address.buildingName,
+            'distribution': address.distribution,
+            'extra': address.extra
+         };
+
+         if (address.selected.address.point !== undefined){
+            newAddress = Object.assign(newAddress, {'point': address.selected.address.point.coordinates});
+         }
+
+         this.$store.dispatch('addAddress', newAddress);
          modal.showModal = false;
       }
    }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
index 87ee9a5c0..ba79e88a7 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
@@ -1,12 +1,13 @@
 const addressMessages = {
    fr: {
-      add_an_address: 'Ajouter une adresse',
-      select_an_address: 'Sélectionner une adresse',
+      add_an_address_title: 'Ajouter une adresse',
+      select_an_address_title: 'Sélectionner une adresse',
       fill_an_address: 'Compléter l\'adresse',
       select_country: 'Choisir le pays',
       select_city: 'Choisir une localité',
       select_address: 'Choisir une adresse',
-      isNoAddress: 'L\'adresse n\'est pas celle d\'un domicile fixe ?',
+      create_address: 'Appuyer sur "Entrée" pour créer une nouvelle adresse',
+      isNoAddress: 'Pas d\'adresse complète',
       floor: 'Étage',
       corridor: 'Couloir',
       steps: 'Escalier',
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
index b9466b50c..59e573d19 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
@@ -1,8 +1,7 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 
-// le fetch POST serait rangé dans la logique du composant qui appelle AddAddress
-//import { postAddress } from '... api' 
+import { postAddress } from '../../_api/AddAddress'
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -10,11 +9,14 @@ const store = createStore({
    strict: debug,
    state: {
       address: {},
-      errorMsg: {}
+      errorMsg: []
    },
    getters: {
    },
    mutations: {
+      catchError(state, error) {
+         state.errorMsg.push(error);
+      },
       addAddress(state, address) {
          console.log('@M addAddress address', address);
          state.address = address;
@@ -23,19 +25,19 @@ const store = createStore({
    actions: {
       addAddress({ commit }, payload) {
          console.log('@A addAddress payload', payload);
-         commit('addAddress', payload); // à remplacer par 
-         
-         // fetch POST qui envoie l'adresse, et récupère la confirmation que c'est ok. 
-         // La confirmation est l'adresse elle-même.
-         //
-         //   postAddress(payload) 
-         //   .fetch(address => new Promise((resolve, reject) => {
-         //      commit('addAddress', address);
-         //      resolve();
-         //   }))
-         //   .catch((error) => { 
-         //      state.errorMsg.push(error.message); 
-         //   }); 
+         //commit('addAddress', payload); // à remplacer par la suite
+
+         //fetch POST qui envoie l'adresse, et récupère la confirmation que c'est ok.
+         //La confirmation est l'adresse elle-même.
+
+         postAddress(payload)
+            .then(address => new Promise((resolve, reject) => {
+               commit('addAddress', address);
+               resolve();
+            }))
+            .catch((error) => {
+               commit('catchError', error);
+            });
       }
    }
 });
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js
index 4de0fcc19..db03da860 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js
@@ -1,37 +1,43 @@
 /*
-* Endpoint countries GET
-* TODO
+* Endpoint chill_api_single_country__index
+* method GET, get Country Object
+* @returns {Promise} a promise containing all Country object
 */
 const fetchCountries = () => {
    console.log('<<< fetching countries');
-   return [
-      {id: 1, name: 'France', countryCode: 'FR'},
-      {id: 2, name: 'Belgium', countryCode: 'BE'}
-   ];
+
+   const url = `/api/1.0/main/country.json?item_per_page=1000`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
 };
 
 /*
-* Endpoint cities GET 
-* TODO
+* Endpoint chill_api_single_postal_code__index
+* method GET, get Country Object
+* @returns {Promise} a promise containing all Postal Code objects filtered with country
 */
-const fetchCities = (country) => {   
+const fetchCities = (country) => {
    console.log('<<< fetching cities for', country);
-   return [
-      {id: 1, name: 'Bruxelles', code: '1000', country: 'BE'},
-      {id: 2, name: 'Aisne', code: '85045', country: 'FR'},
-      {id: 3, name: 'Saint-Gervais', code: '85230', country: 'FR'}
-   ];
+   const url = `/api/1.0/main/postal-code.json?item_per_page=1000&country=${country.id}`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
 };
 
 /*
-* Endpoint chill_main_address_reference_api_show
+* Endpoint chill_api_single_address_reference__index
 * method GET, get AddressReference Object
-* @returns {Promise} a promise containing all AddressReference object
+* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
 */
-const fetchReferenceAddresses = (city) => {
-    console.log('<<< fetching references addresses for', city); // city n'est pas utilisé pour le moment
-    
-    const url = `/api/1.0/main/address-reference.json`;
+const fetchReferenceAddresses = (postalCode) => {
+    console.log('<<< fetching references addresses for', postalCode);
+   //TODO deal with huge number of addresses... we should do suggestion...
+    const url = `/api/1.0/main/address-reference.json?item_per_page=1000&postal_code=${postalCode.id}`;
     return fetch(url)
        .then(response => {
           if (response.ok) { return response.json(); }
@@ -39,8 +45,31 @@ const fetchReferenceAddresses = (city) => {
        });
 };
 
+/*
+* Endpoint chill_api_single_address__entity__create
+* method POST, post Address Object
+* @returns {Promise}
+*/
+const postAddress = (address) => {
+   console.log(address);
+   const url = `/api/1.0/main/address.json?`;
+   const body = address;
+
+   return fetch(url, {
+      method: 'POST',
+      headers: {
+         'Content-Type': 'application/json;charset=utf-8'
+         },
+      body: JSON.stringify(body)
+   }).then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });
+};
+
 export {
    fetchCountries,
    fetchCities,
-   fetchReferenceAddresses
+   fetchReferenceAddresses,
+   postAddress
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
index 55cf2f098..6072cf850 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
@@ -1,6 +1,6 @@
 <template>
    <button class="sc-button bt-create centered mt-4" @click="openModal">
-      {{ $t('add_an_address') }}
+      {{ $t('add_an_address_title') }}
    </button>
 
    <teleport to="body">
@@ -9,76 +9,64 @@
          @close="modal.showModal = false">
 
          <template v-slot:header>
-            <h3 class="modal-title">{{ $t('add_an_address') }}</h3>
+            <h3 class="modal-title">{{ $t('add_an_address_title') }}</h3>
          </template>
 
          <template v-slot:body>
-            
-            <h4>{{ $t('select_an_address') }}</h4>
-            
-            <label for="isNoAddress">
-               <input type="checkbox" 
-                  name="isNoAddress" 
-                  v-bind:placeholder="$t('isNoAddress')" 
-                  v-model="isNoAddress" 
-                  v-bind:value="value"/>
-               {{ $t('isNoAddress') }}
-            </label>
+            <div class="address_form">
 
-            <country-selection
-               v-bind:address="address"
-               v-bind:getCities="getCities">
-            </country-selection>
-            
-            <city-selection
-               v-bind:address="address"
-               v-bind:getReferenceAddresses="getReferenceAddresses">
-            </city-selection>
-            
-            <address-selection
-               v-bind:address="address"
-               v-bind:updateMapCenter="updateMapCenter">
-            </address-selection>
+               <div class="address_form__header">
+                  <h4>{{ $t('select_an_address_title') }}</h4>
+               </div>
 
-            <address-map
-               v-bind:address="address"
-               ref="addressMap">
-            </address-map>
-            
-            <address-more 
-               v-if="!isNoAddress"
-               v-bind:address="address">
-            </address-more>
-                        
-            <!--
-            <div class="address_form__fields__isNoAddress"></div>
-            <div class="address_form__select">
-               <div class="address_form__select__header"></div>
-               <div class="address_form__select__left"></div>
-               <div class="address_form__map"></div>
+               <div class="address_form__select">
+
+                  <div class="address_form__select__body">
+                     <label for="isNoAddress">
+                        <input type="checkbox"
+                           name="isNoAddress"
+                           v-bind:placeholder="$t('isNoAddress')"
+                           v-model="isNoAddress"
+                           v-bind:value="value"/>
+                        {{ $t('isNoAddress') }}
+                     </label>
+
+                     <country-selection
+                        v-bind:address="address"
+                        v-bind:getCities="getCities">
+                     </country-selection>
+
+                     <city-selection
+                        v-bind:address="address"
+                        v-bind:getReferenceAddresses="getReferenceAddresses">
+                     </city-selection>
+
+                     <address-selection
+                        v-bind:address="address"
+                        v-bind:updateMapCenter="updateMapCenter">
+                     </address-selection>
+                  </div>
+
+                  <div class="address_form__select__map">
+                     <address-map
+                        v-bind:address="address"
+                        ref="addressMap">
+                     </address-map>
+                  </div>
+               </div>
+
+               <div class="address_form__more">
+                  <address-more
+                     v-if="!isNoAddress"
+                     v-bind:address="address">
+                  </address-more>
+               </div>
             </div>
-            <div class="address_form__fields">
-               <div class="address_form__fields__header"></div>
-               <div class="address_form__fields__left"></div>
-               <div class="address_form__fields__right"></div>
-            </div>
-         
-            à discuter, 
-            mais je pense qu'il est préférable de profiter de l'imbriquation des classes css 
-            
-            div.address_form {
-               div.select {
-                  div.header {}
-                  div.left {}
-                  div.map {}
-               }
-            }
-         
-            -->
+
          </template>
 
          <template v-slot:footer>
-            <button class="sc-button green" 
+            <button class="sc-button green"
                @click.prevent="$emit('addNewAddress', { address, modal })">
                <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
             </button>
@@ -155,49 +143,47 @@ export default {
          }
       }
    },
+   mounted() {
+       this.getCountries();
+   },
    methods: {
       openModal() {
          this.modal.showModal = true;
          this.resetAll();
-         this.getCountries();
-         
          //this.$nextTick(function() {
          //   this.$refs.search.focus(); // positionner le curseur à l'ouverture de la modale
          //})
       },
       getCountries() {
          console.log('getCountries');
-         this.address.loaded.countries = fetchCountries(); // à remplacer par
-         //  fetchCountries().then(countries => new Promise((resolve, reject) => {
-         //     this.address.loaded.countries = countries;
-         //     resolve()
-         //  }))
-         //  .catch((error) => { 
-         //     this.errorMsg.push(error.message); 
-         //  }); 
+         fetchCountries().then(countries => new Promise((resolve, reject) => {
+             this.address.loaded.countries = countries.results;
+             resolve()
+          }))
+          .catch((error) => {
+             this.errorMsg.push(error.message);
+          });
       },
       getCities(country) {
          console.log('getCities for', country.name);
-         this.address.loaded.cities = fetchCities(); // à remplacer par
-         //  fetchCities(country).then(cities => new Promise((resolve, reject) => {
-         //     this.address.loaded.cities = cities;
-         //     resolve()
-         //  }))
-         //  .catch((error) => { 
-         //     this.errorMsg.push(error.message); 
-         //  }); 
+         fetchCities(country).then(cities => new Promise((resolve, reject) => {
+            this.address.loaded.cities = cities.results;
+            resolve()
+         }))
+         .catch((error) => {
+            this.errorMsg.push(error.message);
+         });
       },
       getReferenceAddresses(city) {
          console.log('getReferenceAddresses for', city.name);
-         fetchReferenceAddresses(city)  // il me semble que le paramètre city va limiter le poids des adresses de références reçues
-            .then(addresses => new Promise((resolve, reject) => {
+         fetchReferenceAddresses(city).then(addresses => new Promise((resolve, reject) => {
                console.log('addresses', addresses);
                this.address.loaded.addresses = addresses.results;
                resolve();
             }))
-            .catch((error) => { 
-               this.errorMsg.push(error.message); 
-            }); 
+            .catch((error) => {
+               this.errorMsg.push(error.message);
+            });
       },
       updateMapCenter(point) {
          console.log('point', point);
@@ -208,7 +194,7 @@ export default {
       resetAll() {
          console.log('reset all selected');
          this.address.loaded.addresses = [];
-         this.address.selected.address = {}; 
+         this.address.selected.address = {};
          this.address.loaded.cities = [];
          this.address.selected.city = {};
          this.address.selected.country = {};
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
index 5b616819d..d78dfa1ec 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="container">
-      <div id='address_map' style='height:400px; width:400px;'></div>
+      <div id='address_map'></div>
    </div>
 </template>
 
@@ -11,6 +11,7 @@ import markerIconPng from 'leaflet/dist/images/marker-icon.png'
 import 'leaflet/dist/leaflet.css';
 
 let map;
+let marker;
 
 export default {
    name: 'AddressMap',
@@ -30,13 +31,15 @@ export default {
 
          const markerIcon = L.icon({
             iconUrl: markerIconPng,
+            iconAnchor: [12, 41],
          });
 
-         L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);
+         marker = L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);
 
       },
       update() {
          console.log('update map with : ', this.address.addressMap.center)
+         marker.setLatLng(this.address.addressMap.center);
          map.setView(this.address.addressMap.center, 12);
       }
    },
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
index 71738079c..f5da59143 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
@@ -1,38 +1,56 @@
 <template>
    <div class="container">
-      <select 
-         v-model="selected">
-         <option :value="{}" disabled selected>{{ $t('select_address') }}</option>
-         <option 
-            v-for="item in this.addresses" 
-            v-bind:item="item" 
-            v-bind:key="item.id" 
-            v-bind:value="item">
-            {{ item.street }}, {{ item.streetNumber }}
-         </option>
-      </select>
+      <VueMultiselect
+         v-model="value"
+         @select="selectAddress"
+         name="field"
+         track-by="id"
+         label="value"
+         :custom-label="transName"
+         :taggable="true"
+         :multiple="false"
+         @tag="addAddress"
+         :placeholder="$t('select_address')"
+         :tagPlaceholder="$t('create_address')"
+         :options="addresses">
+      </VueMultiselect>
    </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
 
 export default {
    name: 'AddressSelection',
+   components: { VueMultiselect },
    props: ['address', 'updateMapCenter'],
+   data() {
+      return {
+         value: null
+      }
+   },
    computed: {
-      addresses() { 
-         return this.address.loaded.addresses; 
+      addresses() {
+         return this.address.loaded.addresses;
+      }
+   },
+   methods: {
+      transName(value) {
+         return value.streetNumber === undefined ? value.street : `${value.street}, ${value.streetNumber}`
       },
-      selected: {
-         set(value) {
-            console.log('selected value', value);
-            this.address.selected.address = value;
-            this.updateMapCenter(value.point);
-         },
-         get() {
-            return this.address.selected.address;
-         }
+      selectAddress(value) {
+         this.address.selected.address = value;
+         this.updateMapCenter(value.point);
       },
+      addAddress (newAddress) {
+         const address = {
+            street: newAddress
+         };
+         this.value = address;
+         this.address.selected.address = address;
+      }
    }
 };
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
index 99e46db08..933b415a0 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
@@ -1,38 +1,45 @@
 <template>
    <div class="container">
-      <select 
-         v-model="selected">
-         <option :value="{}" disabled selected>{{ $t('select_city') }}</option>
-         <option 
-            v-for="item in this.cities" 
-            v-bind:item="item" 
-            v-bind:key="item.id" 
-            v-bind:value="item">
-            {{ item.code }}-{{ item.name }}
-         </option>
-      </select>
+      <VueMultiselect
+         v-model="value"
+         @select="selectCity"
+         name="field"
+         track-by="id"
+         label="value"
+         :custom-label="transName"
+         :placeholder="$t('select_city')"
+         :options="cities">
+      </VueMultiselect>
    </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
 
 export default {
    name: 'CitySelection',
+   components: { VueMultiselect },
    props: ['address', 'getReferenceAddresses'],
+   data() {
+      return {
+         value: null
+      }
+   },
+   methods: {
+      transName(value) {
+         return `${value.code}-${value.name}`
+      },
+      selectCity(value) {
+         this.address.selected.city = value;
+         this.getReferenceAddresses(value);
+      },
+   },
    computed: {
-      cities() { 
-         return this.address.loaded.cities; 
-      },
-      selected: {
-         set(value) {
-            console.log('selected value', value.name);
-            this.address.selected.city = value;
-            this.getReferenceAddresses(value);
-         },
-         get() {
-            return this.address.selected.city;
-         }
-      },
+      cities() {
+         return this.address.loaded.cities;
+      }
    }
 };
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
index 4eb591135..44009cdc4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
@@ -1,38 +1,59 @@
 <template>
    <div class="container">
-      <select 
-         v-model="selected">
-         <option :value="{}" disabled selected>{{ $t('select_country') }}</option>
-         <option 
-            v-for="item in this.countries" 
-            v-bind:item="item" 
-            v-bind:key="item.id" 
-            v-bind:value="item">
-            {{ item.name }}
-         </option>
-      </select>
+      <VueMultiselect
+         v-model="value"
+         name="field"
+         track-by="id"
+         label="name"
+         :custom-label="transName"
+         :placeholder="$t('select_country')"
+         :options="countries"
+         @select="selectCountry">
+      </VueMultiselect>
    </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
 
 export default {
    name: 'CountrySelection',
+   components: { VueMultiselect },
    props: ['address', 'getCities'],
-   computed: {
-      countries() { 
-         return this.address.loaded.countries; 
-      },
-      selected: {
-         set(value) {
-            console.log('selected value', value.name);
-            this.address.selected.country = value;
-            this.getCities(value);
-         },
-         get() {
-            return this.address.selected.country;
+   data() {
+      return {
+         value: this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
+      }
+   },
+   methods: {
+      init() {
+         if (this.value !== undefined) {
+            this.getCities(this.value);
          }
+      },
+      transName ({ name }) {
+         return name.fr //TODO multilang
+      },
+      selectCountry(value) {
+         console.log(value);
+         this.address.selected.country = value;
+         this.getCities(value);
+      },
+   },
+   mounted(){
+      this.init()
+   },
+   computed: {
+      countries() {
+         const countries = this.address.loaded.countries;
+         let orderedCountries = [];
+         orderedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
+         orderedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
+         orderedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
+         return orderedCountries;
       }
    }
 };
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
new file mode 100644
index 000000000..8e1e2227a
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
@@ -0,0 +1,153 @@
+<template>
+  
+   <a class="sc-button" target="_blank"
+      :class="classAction"
+      :title="$t(titleAction)"
+      @click="openModal">
+      {{ buttonText }}
+   </a>
+  
+   <teleport to="body">
+      <modal v-if="modal.showModal"
+         :modalDialogClass="modal.modalDialogClass"
+         @close="modal.showModal = false">
+         
+         <template v-slot:header>
+            <h3 class="modal-title">{{ $t(titleModal) }}</h3>
+         </template>
+         
+         <template v-slot:body v-if="type === 'person'">
+            <on-the-fly-person
+               v-bind:id="id"
+               v-bind:type="type"
+               v-bind:action="action"
+               ref="castPerson">
+            </on-the-fly-person>
+         </template>
+         
+         <template v-slot:body v-else-if="type === 'thirdparty'">
+            <on-the-fly-thirdparty
+               v-bind:id="id"
+               v-bind:type="type"
+               v-bind:action="action"
+               ref="castThirdparty">
+            </on-the-fly-thirdparty>
+         </template>
+         
+         <template v-slot:body v-else>
+            <on-the-fly-create
+               v-bind:action="action"
+               ref="castNew">
+            </on-the-fly-create>
+         </template>
+            
+         <template v-slot:footer>
+            <button v-if="action === 'show'"
+               @click="changeActionTo('edit')"
+               class="sc-button bt-update"> <!-- @click.prevent="$emit('..', ..)" -->
+            </button>
+            <button v-else
+               class="sc-button bt-save"
+               @click="saveAction"
+               > <!--  
+               -->
+               {{ $t('action.save')}}
+            </button>
+         </template>
+         
+      </modal>
+   </teleport>
+   
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
+import OnTheFlyThirdparty from './OnTheFly/ThirdParty.vue';
+import OnTheFlyCreate from './OnTheFly/Create.vue';
+
+export default {
+   name: 'OnTheFly',
+   components: {
+      Modal,
+      OnTheFlyPerson,
+      OnTheFlyThirdparty,
+      OnTheFlyCreate
+   },
+   props: ['type', 'id', 'action', 'buttonText'],
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+         action: this.action
+      }
+   },
+   computed: {
+      action() {
+         return this.$data.action;
+      },
+      classAction() {
+         switch (this.action) {
+            case 'show':
+               return 'bt-show';
+            case 'edit':
+               return 'bt-update';
+            case 'create':
+               return 'bt-create';
+         }
+      },
+      titleAction() {
+         switch (this.action) {
+            case 'show':
+               return 'action.show';
+            case 'edit':
+               return 'action.edit';
+            case 'create':
+               return 'action.create';
+         }
+      },
+      titleModal() {
+         switch (this.action) {
+            case 'show':
+               return 'onthefly.show.' + this.type;
+            case 'edit':
+               return 'onthefly.edit.' + this.type;
+            case 'create':
+               return 'onthefly.create.title';
+         }
+      }
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+         this.$nextTick(function() {
+            //this.$refs.search.focus();
+         })
+      },
+      changeActionTo(action) {
+         // [BUG] clic first on show item button; in modal clic edit button; close modal; clic again on show item button
+         this.$data.action = action; 
+      },
+      saveAction() {
+         console.log('saveAction');
+         if (this.type === 'person') {
+            this.$refs.castPerson.postData();
+         } else if (this.type === 'thirdparty') {
+            this.$refs.castThirdparty.postData();
+         } else {
+            // saveAction() ==cast=to==> child.castByType() ==cast=to==> grand-child.postData()
+            this.$refs.castNew.castByType();
+         }
+         this.modal.showModal = false;
+      }
+   }
+}
+</script>
+
+<style lang="css" scoped>
+a {
+   cursor: pointer;
+}
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue
new file mode 100644
index 000000000..f374647ff
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue
@@ -0,0 +1,84 @@
+<template>   
+   <ul class="nav nav-tabs">
+      <li class="nav-item">
+         <a class="nav-link" :class="{ active: isActive('person') }">
+            <label for="person">
+               <input type="radio" name="person" v-model="radioType" value="person">
+               {{ $t('onthefly.create.person') }}
+            </label>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" :class="{ active: isActive('thirdparty') }">
+            <label for="thirdparty">
+               <input type="radio" name="thirdparty" v-model="radioType" value="thirdparty">
+               {{ $t('onthefly.create.thirdparty') }}
+            </label>
+         </a>
+      </li>
+   </ul>
+   
+   <div class="my-4">
+      <on-the-fly-person
+         v-if="type === 'person'"
+         v-bind:action="action"
+         ref="castPerson">
+      </on-the-fly-person>
+      
+      <on-the-fly-thirdparty
+         v-if="type === 'thirdparty'"
+         v-bind:action="action"
+         ref="castThirdparty">
+      </on-the-fly-thirdparty>
+   </div>      
+</template>
+
+<script>
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
+import OnTheFlyThirdparty from './ThirdParty.vue'; // TODO move in ChillThirdpartyAssets
+
+export default {
+   name: "OnTheFlyCreate",
+   props: ['action'], 
+   components: {
+      OnTheFlyPerson,
+      OnTheFlyThirdparty
+   },
+   data() {
+      return {
+         type: 'person' //by default
+      }
+   },
+   computed: {
+      radioType: {
+         set(type) {
+            this.type = type;
+         },
+         get() {
+            return this.type;
+         }
+      }
+   },
+   methods: {
+      isActive(tab) {
+         return (this.type === tab) ? true : false; 
+      },
+      castByType() {
+         console.log('saveActionByType');
+         if (this.type === 'person') {
+            this.$refs.castPerson.postData();
+         } else if (this.type === 'thirdparty') {
+            this.$refs.castThirdparty.postData();
+         } else {
+            throw Error('Invalid type of entity');
+         }
+      }
+   }
+}
+</script>
+
+<style lang="css" scoped>
+label {
+   cursor: pointer;
+}
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
new file mode 100644
index 000000000..b8dced534
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
@@ -0,0 +1,23 @@
+<template>
+   <div v-if="action === 'show'">
+      show
+      thirdparty
+      {{ id }}
+   </div>
+   <div v-else-if="action === 'edit' || action === 'create'">
+      {{ action }}
+      thirdparty 
+      {{ id }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: "OnTheFlyThirdParty",
+   props: ['id', 'type', 'action']
+}
+// TODO move in ChillThirdpartyAssets
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 319378d7e..025aeeb44 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -46,6 +46,22 @@ const messages = {
          previous: "Précédent",
          top: "Haut",
          bottom: "Bas",
+      },
+      onthefly: {
+         show: {
+            person: "Détails de l'usager",
+            thirdparty: "Détails du tiers"
+         },
+         edit: {
+            person: "Modifier un usager",
+            thirdparty: "Modifier un tiers"
+         },
+         create: {
+            button: "Créer \"{q}\"",
+            title: "Créer à la volée…",
+            person: "un nouvel usager",
+            thirdparty: "un nouveau tiers"
+         },         
       }
    }
 };
diff --git a/src/Bundle/ChillMainBundle/Serializer/Normalizer/PointNormalizer.php b/src/Bundle/ChillMainBundle/Serializer/Normalizer/PointNormalizer.php
new file mode 100644
index 000000000..210e85fb7
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Serializer/Normalizer/PointNormalizer.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Chill\MainBundle\Serializer\Normalizer;
+
+use Symfony\Component\Serializer\Normalizer\DenormalizerInterface;
+use Symfony\Component\Serializer\Exception\InvalidArgumentException;
+
+use Chill\MainBundle\Doctrine\Model\Point;
+
+
+class PointNormalizer implements DenormalizerInterface
+{
+
+    public function supportsDenormalization($data, string $type, string $format = null) : bool
+    {
+        return $type === Point::class;
+    }
+
+    public function denormalize($data, string $type, string $format = null, array $context = [])
+    {
+
+        if (!is_array($data)) {
+            throw new InvalidArgumentException('point data is not an array. It should be an array of 2 coordinates.');
+        } else {
+            if (count($data) !== 2) {
+                throw new InvalidArgumentException('point data is not an array of 2 elements. It should be an array of 2 coordinates.');
+            } else {
+                return Point::fromLonLat($data[0], $data[1]);
+            }
+        }
+
+    }
+
+}
diff --git a/src/Bundle/ChillMainBundle/config/services.yaml b/src/Bundle/ChillMainBundle/config/services.yaml
index a6afa4336..20716e33b 100644
--- a/src/Bundle/ChillMainBundle/config/services.yaml
+++ b/src/Bundle/ChillMainBundle/config/services.yaml
@@ -31,14 +31,14 @@ services:
             - [ setContainer, ["@service_container"]]
         tags:
             - { name: twig.extension }
-            
+
     chill.main.twig.widget:
         class: Chill\MainBundle\Templating\Widget\WidgetRenderingTwig
         arguments:
             - "@event_dispatcher"
         tags:
             - { name: twig.extension }
-            
+
     chill.main.twig.csv_cell:
         class: Chill\MainBundle\Templating\CSVCellTwig
         tags:
@@ -65,3 +65,4 @@ services:
             - "@security.authorization_checker"
             - "@chill.main.security.authorization.helper"
             - "@security.token_storage"
+
diff --git a/src/Bundle/ChillMainBundle/config/services/command.yaml b/src/Bundle/ChillMainBundle/config/services/command.yaml
index 223449bfa..5df80c2ad 100644
--- a/src/Bundle/ChillMainBundle/config/services/command.yaml
+++ b/src/Bundle/ChillMainBundle/config/services/command.yaml
@@ -7,7 +7,7 @@ services:
             $validator: '@Symfony\Component\Validator\Validator\ValidatorInterface'
         tags:
             - { name: console.command }
-            
+
     Chill\MainBundle\Command\ChillUserSendRenewPasswordCodeCommand:
         arguments:
             $logger: '@Psr\Log\LoggerInterface'
diff --git a/src/Bundle/ChillMainBundle/config/services/serializer.yaml b/src/Bundle/ChillMainBundle/config/services/serializer.yaml
index c7cc6ca63..efe98996e 100644
--- a/src/Bundle/ChillMainBundle/config/services/serializer.yaml
+++ b/src/Bundle/ChillMainBundle/config/services/serializer.yaml
@@ -1,7 +1,7 @@
 ---
 services:
-    
-    # note: the autowiring for serializers and normalizers is declared 
+
+    # note: the autowiring for serializers and normalizers is declared
     # into ../services.yaml
 
     Chill\MainBundle\Serializer\Normalizer\DoctrineExistingEntityNormalizer:
diff --git a/src/Bundle/ChillMainBundle/migrations/Version20210528090000.php b/src/Bundle/ChillMainBundle/migrations/Version20210528090000.php
index de3c7336a..d2a33230f 100644
--- a/src/Bundle/ChillMainBundle/migrations/Version20210528090000.php
+++ b/src/Bundle/ChillMainBundle/migrations/Version20210528090000.php
@@ -10,7 +10,7 @@ use Doctrine\Migrations\AbstractMigration;
 /**
  * Add extension btree_gist
  */
-final class Version20210528104651 extends AbstractMigration
+final class Version20210528090000 extends AbstractMigration
 {
     public function getDescription(): string
     {
diff --git a/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php b/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php
new file mode 100644
index 000000000..14ee42669
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace Chill\PersonBundle\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
+use Chill\PersonBundle\Entity\Household\Household;
+
+/**
+ * @Route("/{_locale}/person/household")
+ */
+class HouseholdController extends AbstractController
+{
+    /**
+     * @Route(
+     *      "/{household_id}/summary",
+     *      name="chill_person_household_summary",
+     *      methods={"GET", "HEAD"}
+     *  )
+     *  @ParamConverter("household", options={"id" = "household_id"})
+     */
+    public function summary(Request $request, Household $household)
+    {
+        // TODO ACL
+        return $this->render('@ChillPerson/Household/summary.html.twig',
+            [
+                'household' => $household
+            ]
+        );
+    }
+
+    /**
+     * @Route(
+     *      "/{household_id}/members",
+     *      name="chill_person_household_members",
+     *      methods={"GET", "HEAD"}
+     *  )
+     *  @ParamConverter("household", options={"id" = "household_id"})
+     */
+    public function members(Request $request, Household $household)
+    {
+        // TODO ACL
+        return $this->render('@ChillPerson/Household/members.html.twig',
+            [
+                'household' => $household
+            ]
+        );
+    }
+
+    /**
+     * @Route(
+     *      "/{household_id}/addresses",
+     *      name="chill_person_household_addresses",
+     *      methods={"GET", "HEAD"}
+     *  )
+     *  @ParamConverter("household", options={"id" = "household_id"})
+     */
+    public function addresses(Request $request, Household $household)
+    {
+        // TODO ACL
+        return $this->render('@ChillPerson/Household/addresses.html.twig',
+            [
+                'household' => $household
+            ]
+        );
+    }
+
+    /**
+     * @Route(
+     *      "/{household_id}/address/move",
+     *      name="chill_person_household_address_move",
+     *      methods={"GET", "HEAD", "POST"}
+     *  )
+     *  @ParamConverter("household", options={"id" = "household_id"})
+     */
+    public function addressMove(Request $request, Household $household)
+    {
+        // TODO ACL
+        return $this->render('@ChillPerson/Household/address_move.html.twig',
+            [
+                'household' => $household
+            ]
+        );
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Controller/HouseholdMemberController.php b/src/Bundle/ChillPersonBundle/Controller/HouseholdMemberController.php
index e60deea8e..ab708806c 100644
--- a/src/Bundle/ChillPersonBundle/Controller/HouseholdMemberController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/HouseholdMemberController.php
@@ -13,6 +13,7 @@ use Symfony\Component\Serializer\Exception;
 use Symfony\Component\Routing\Annotation\Route;
 use Chill\MainBundle\CRUD\Controller\ApiController;
 use Chill\PersonBundle\Household\MembersEditor;
+use Symfony\Component\Serializer\Normalizer\AbstractNormalizer;
 
 class HouseholdMemberController extends ApiController
 {
@@ -37,15 +38,10 @@ class HouseholdMemberController extends ApiController
         //
         $em = $this->getDoctrine()->getManager();
 
-        // to ensure closing membership before creating one, we must manually open a transaction
-        $em->beginTransaction();
-
         foreach ($editor->getPersistable() as $el) {
            $em->persist($el); 
         }
-
         $em->flush();
-        $em->commit();
 
         return $this->json($editor->getHousehold(), Response::HTTP_OK, ["groups" => ["read"]]);
     }
diff --git a/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php b/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
index a28887c68..3e54cf9de 100644
--- a/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
+++ b/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
@@ -72,7 +72,6 @@ class ChillPersonExtension extends Extension implements PrependExtensionInterfac
         $loader->load('services/command.yaml');
         $loader->load('services/actions.yaml');
         $loader->load('services/form.yaml');
-        $loader->load('services/templating.yaml');
         $loader->load('services/alt_names.yaml');
         $loader->load('services/household.yaml');
         // We can get rid of this file when the service 'chill.person.repository.person' is no more used.
diff --git a/src/Bundle/ChillPersonBundle/Entity/Household/Household.php b/src/Bundle/ChillPersonBundle/Entity/Household/Household.php
index ac22b6e8b..f95b177f9 100644
--- a/src/Bundle/ChillPersonBundle/Entity/Household/Household.php
+++ b/src/Bundle/ChillPersonBundle/Entity/Household/Household.php
@@ -2,10 +2,12 @@
 
 namespace Chill\PersonBundle\Entity\Household;
 
+use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\ORM\Mapping as ORM;
 use Doctrine\Common\Collections\Collection;
-use Chill\MainBundle\Entity\Address;
 use Symfony\Component\Serializer\Annotation as Serializer;
+use Chill\MainBundle\Entity\Address;
+use Chill\PersonBundle\Entity\Household\HouseholdMember;
 
 /**
  * @ORM\Entity
@@ -24,16 +26,10 @@ class Household
      * @ORM\Column(type="integer")
      * @Serializer\Groups({"read"})
      */
-    private $id;
-
-    public function getId(): ?int
-    {
-        return $this->id;
-    }
+    private ?int $id = null;
 
     /**
      * Addresses
-     * @var Collection
      *
      * @ORM\ManyToMany(
      *     targetEntity="Chill\MainBundle\Entity\Address",
@@ -41,8 +37,27 @@ class Household
      * @ORM\JoinTable(name="chill_person_household_to_addresses")
      * @ORM\OrderBy({"validFrom" = "DESC"})
      */
-    private $addresses;
+    private Collection $addresses;
 
+    /**
+     * @ORM\OneToMany(
+     *      targetEntity=HouseholdMember::class,
+     *      mappedBy="household"
+     *  )
+     * @Serializer\Groups({"read"})
+     */
+    private Collection $members;
+
+    public function __construct()
+    {
+        $this->addresses = new ArrayCollection();
+        $this->members = new ArrayCollection();
+    }
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
 
     /**
      * @param Address $address
@@ -74,4 +89,34 @@ class Household
         return $this->addresses;
     }
 
+    /**
+     * @return Collection|HouseholdMember[]
+     */
+    public function getMembers(): Collection
+    {
+        return $this->members;
+    }
+
+    public function addMember(HouseholdMember $member): self
+    {
+        if (!$this->members->contains($member)) {
+            $this->members[] = $member;
+            $member->setHousehold($this);
+        }
+
+        return $this;
+    }
+
+    public function removeMember(HouseholdMember $member): self
+    {
+        if ($this->members->removeElement($member)) {
+            // set the owning side to null (unless already changed)
+            if ($member->getHousehold() === $this) {
+                $member->setHousehold(null);
+            }
+        }
+
+        return $this;
+    }
+
 }
diff --git a/src/Bundle/ChillPersonBundle/Entity/Household/HouseholdMember.php b/src/Bundle/ChillPersonBundle/Entity/Household/HouseholdMember.php
index 52bd969fc..cd58af565 100644
--- a/src/Bundle/ChillPersonBundle/Entity/Household/HouseholdMember.php
+++ b/src/Bundle/ChillPersonBundle/Entity/Household/HouseholdMember.php
@@ -6,6 +6,7 @@ use Doctrine\ORM\Mapping as ORM;
 use Chill\PersonBundle\Entity\Person;
 use Chill\PersonBundle\Entity\Household\Household;
 use Chill\PersonBundle\Entity\Household\Position;
+use Symfony\Component\Serializer\Annotation as Serializer;
 
 
 /**
@@ -20,26 +21,31 @@ class HouseholdMember
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
+     * @Serializer\Groups({"read"})
      */
     private $id;
 
     /**
      * @ORM\ManyToOne(targetEntity=Position::class)
+     * @Serializer\Groups({"read"})
      */
     private ?Position $position = null;
 
     /**
      * @ORM\Column(type="date_immutable", nullable=true, options={"default": null})
+     * @Serializer\Groups({"read"})
      */
     private ?\DateTimeImmutable $startDate = null;
 
     /**
      * @ORM\Column(type="date_immutable", nullable= true, options={"default": null})
+     * @Serializer\Groups({"read"})
      */
     private ?\DateTimeImmutable $endDate = null;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
+     * @Serializer\Groups({"read"})
      */
     private ?string $comment = NULL;
 
@@ -50,6 +56,7 @@ class HouseholdMember
 
     /**
      * @ORM\Column(type="boolean", options={"default": false})
+     * @Serializer\Groups({"read"})
      */
     private bool $holder = false;
 
@@ -59,6 +66,7 @@ class HouseholdMember
      * @ORM\ManyToOne(
      *  targetEntity="\Chill\PersonBundle\Entity\Person"
      * )
+     * @Serializer\Groups({"read"})
      */
     private ?Person $person = null;
 
@@ -131,6 +139,9 @@ class HouseholdMember
         return $this;
     }
 
+    /**
+     * @Serializer\Groups({"read"})
+     */
     public function getShareHousehold(): ?bool
     {
         return $this->sharedHousehold;
diff --git a/src/Bundle/ChillPersonBundle/Menu/HouseholdMenuBuilder.php b/src/Bundle/ChillPersonBundle/Menu/HouseholdMenuBuilder.php
new file mode 100644
index 000000000..2146bbb7c
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Menu/HouseholdMenuBuilder.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace Chill\PersonBundle\Menu;
+
+use Chill\MainBundle\Routing\LocalMenuBuilderInterface;
+use Chill\PersonBundle\Entity\Household\Household;
+use Knp\Menu\MenuItem;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+class HouseholdMenuBuilder implements LocalMenuBuilderInterface
+{
+    
+    /**
+     * @var TranslatorInterface
+     */
+    protected $translator;
+    
+    public function __construct(TranslatorInterface $translator)
+    {
+        $this->translator = $translator;
+    }
+    
+    public static function getMenuIds(): array
+    {
+        return [ 'household' ];
+    }
+    
+    public function buildMenu($menuId, MenuItem $menu, array $parameters): void
+    {
+        $household = $parameters['household'];
+
+        $menu->addChild($this->translator->trans('Summary'), [
+            'route' => 'chill_person_household_summary',
+            'routeParameters' => [
+                'household_id' => $household->getId()
+        ]])
+        ->setExtras(['order' => 10]);
+
+        $menu->addChild($this->translator->trans('Members'), [
+            'route' => 'chill_person_household_members',
+            'routeParameters' => [
+                'household_id' => $household->getId()
+        ]])
+        ->setExtras(['order' => 20]);
+        
+        $menu->addChild($this->translator->trans('Addresses'), [
+            'route' => 'chill_person_household_addresses',
+            'routeParameters' => [
+                'household_id' => $household->getId()
+        ]])
+        ->setExtras(['order' => 30]);
+        
+    }
+    
+    
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index 7c61b066c..3ab9598c9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -9,8 +9,7 @@
    <table class="rounded" v-if="participations.length > 0">
       <thead>
          <tr>
-            <th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
-            <th class="chill-orange">{{ $t('persons_associated.lastname') }}</th>
+            <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
             <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
             <th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
             <th class="chill-orange">{{ $t('action.actions') }}</th>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
index 4fa2caf12..7e3abd1ba 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
@@ -1,7 +1,9 @@
 <template>
 <tr>
-   <td>{{ participation.person.firstName }}</td>
-   <td>{{ participation.person.lastName }}</td>
+   <td>
+      {{ participation.person.firstName }}
+      {{ participation.person.lastName }}
+   </td>
    <td><span v-if="participation.startDate">
        {{ $d(participation.startDate.datetime, 'short') }}</span>
    </td>
@@ -11,16 +13,18 @@
    <td>
       <ul class="record_actions">
          <li>
-            <a class="sc-button bt-show" target="_blank"
-               :href="url.show"
-               :title="$t('action.show')">
-            </a>
+            <on-the-fly
+               v-bind:type="participation.person.type"
+               v-bind:id="participation.person.id"
+               action="show">
+            </on-the-fly>
          </li>
          <li>
-            <a class="sc-button bt-update" target="_blank"
-               :href="url.edit"
-               :title="$t('action.edit')">
-            </a>
+            <on-the-fly
+               v-bind:type="participation.person.type"
+               v-bind:id="participation.person.id"
+               action="edit">
+            </on-the-fly>
          </li>
          <!--li>
             <button class="sc-button bt-delete"
@@ -31,7 +35,7 @@
          <li>
             <button v-if="!participation.endDate"
                class="sc-button bt-remove"
-               :title="$t('action.remove')" 
+               v-bind:title="$t('action.remove')" 
                @click.prevent="$emit('close', participation)">
             </button>
             <button v-else class="sc-button bt-remove disabled"></button>
@@ -42,17 +46,14 @@
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'PersonItem',
-   props: ['participation'],
-   data() {
-      return {
-         url: {
-            show: '/fr/person/' + this.participation.person.id + '/general',
-            edit: '/fr/person/' + this.participation.person.id + '/general/edit'
-         }
-      }
+   components: {
+      OnTheFly
    },
-   emits: ['remove', 'close']
+   props: ['participation'],
+   emits: ['remove', 'close'],
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index 32fbb86c2..67b12a14a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -41,7 +41,18 @@
 
          <ul class="record_actions">
             <li>
-               <a class="sc-button bt-show" :title="$t('action.show')" target="_blank" :href="url.show"></a>
+               <on-the-fly
+                  v-bind:type="accompanyingCourse.requestor.type"
+                  v-bind:id="accompanyingCourse.requestor.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  v-bind:type="accompanyingCourse.requestor.type"
+                  v-bind:id="accompanyingCourse.requestor.id"
+                  action="edit">
+               </on-the-fly>
             </li>
          </ul>
       </div>
@@ -76,12 +87,14 @@
 </template>
 
 <script>
-import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 
 export default {
    name: 'Requestor',
    components: {
       AddPersons,
+      OnTheFly
    },
    data() {
       return {
@@ -107,13 +120,6 @@ export default {
          get() {
             return this.$store.state.accompanyingCourse.requestorAnonymous;
          }
-      },
-      url() {
-         return (this.accompanyingCourse.requestor.type === 'person') ? {
-            show: `/fr/person/${this.accompanyingCourse.requestor.id}/general`,
-         } : {
-            show: `/fr/thirdparty/thirdparty/${this.accompanyingCourse.requestor.id}/show`,
-         }
       }
    },
    methods: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
index ffec23ddf..9b9316fec 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -21,24 +21,25 @@
    <td>
       <ul class="record_actions">
          <li>
-            <a class="sc-button bt-show" target="_blank"
-               :href="url.show"
-               :title="$t('action.show')">
-            </a>
+            <on-the-fly
+               v-bind:type="resource.resource.type"
+               v-bind:id="resource.resource.id"
+               action="show">
+            </on-the-fly>
          </li>
          <li>
-            <a class="sc-button bt-update" target="_blank"
-               :href="url.edit"
-               :title="$t('action.edit')">
-            </a>
+            <on-the-fly
+               v-bind:type="resource.resource.type"
+               v-bind:id="resource.resource.id"
+               action="edit">
+            </on-the-fly>
          </li>
          <li>
             <button
                class="sc-button bt-remove"
-               :title="$t('action.remove')" 
+               v-bind:title="$t('action.remove')" 
                @click.prevent="$emit('remove', resource)">
             </button>
-            
          </li>
       </ul>
    </td>
@@ -46,23 +47,14 @@
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'ResourceItem',
+   components: {
+      OnTheFly
+   },
    props: ['resource'],
-   emits: ['remove'],
-   computed: {
-      type() {
-         return this.resource.resource.type;
-      },
-      url() {
-         return (this.type === 'person') ? {
-            show: `/fr/person/${this.resource.resource.id}/general`,
-            edit: `/fr/person/${this.resource.resource.id}/general/edit`
-         } : {
-            show: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/show`,
-            edit: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/update`
-         }
-      }
-   }
+   emits: ['remove']
 }
 </script>
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 242d48b8f..f5741b34a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -31,6 +31,7 @@ const appMessages = {
          counter: "Il n'y a pas encore d'usager | 1 usager | {count} usagers",
          firstname: "Prénom",
          lastname: "Nom",
+         name: "Nom",
          startdate: "Date d'entrée",
          enddate: "Date de sortie",
          add_persons: "Ajouter des usagers",
@@ -73,7 +74,7 @@ const appMessages = {
       comment: {
          title: "Observations",
          label: "Ajout d'une note",
-         content: "Rédigez une première note...",
+         content: "Rédigez une première note…",
          created_by: "créé par {0}, le {1}" 
       },
       confirm: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
new file mode 100644
index 000000000..6adbc7028
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/OnTheFly.js
@@ -0,0 +1,34 @@
+/*
+* GET a person by id
+*/
+const getPerson = (id) => {
+   const url = `/api/1.0/person/person/${id}.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+
+/*
+* POST a new person
+*/
+const postPerson = (body) => {
+   const url = `/api/1.0/person/person.json`;
+   return fetch(url, {
+         method: 'POST',
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+   
+export { 
+   getPerson, 
+   postPerson 
+};
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index a37f93e7e..dc4ead36d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -65,9 +65,14 @@
                   @updateSelected="updateSelected">
                </person-suggestion>
 
-               <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
-                  {{ $t('action.create') }} "{{ query }}"
-               </button>
+               <div class="create-button">
+                  <on-the-fly
+                     v-if="query.length >= 3" 
+                     v-bind:buttonText="$t('onthefly.create.button', {q: query})"
+                     action="create"><!-- TODO first close this modal -->
+                  </on-the-fly>
+               </div>
+               
             </div>
          </template>
 
@@ -84,6 +89,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
 import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 
@@ -92,6 +98,7 @@ export default {
    components: {
       Modal,
       PersonSuggestion,
+      OnTheFly
    },
    props: [
       'buttonTitle',
@@ -170,7 +177,7 @@ export default {
          if (query.length >= 3) {
             searchPersons_2({ query, options: this.options })
                .then(suggested => new Promise((resolve, reject) => {
-                  console.log('suggested', suggested);
+                  //console.log('suggested', suggested);
                   this.loadSuggestions(suggested.results);
                   resolve();
             }));
@@ -179,14 +186,14 @@ export default {
          }
       },
       loadSuggestions(suggested) { 
-         console.log('suggested', suggested);
+         //console.log('suggested', suggested);
          this.search.suggested = suggested;
          this.search.suggested.forEach(function(item) {
             item.key = this.itemKey(item);
          }, this);
       },
       updateSelected(value) {
-         console.log('value', value);
+         //console.log('value', value);
          this.search.selected = value;
       },
       resetSearch() {
@@ -251,4 +258,8 @@ export default {
          }
       }
    }
+   .create-button > a {
+      margin-top: 0.5em;
+      margin-left: 2.6em;
+   }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
index 3846f7b39..c6494e461 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -42,7 +42,7 @@ export default {
    computed: {
       selected: {
          set(value) {
-            console.log('value', value);
+            //console.log('value', value);
             this.$emit('updateSelected', value);
          },
          get() {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
index af5b13b16..eff860f91 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
@@ -14,22 +14,23 @@
       <span class="badge badge-pill badge-secondary" :title="item.key">
          {{ $t('item.type_person') }}
       </span>
-      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      <on-the-fly
+         type="person"
+         v-bind:id="item.result.id"
+         action="show">
+      </on-the-fly>
       
    </div>
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'SuggestionPerson',
-   props: ['item'],
-   data() {
-      return {
-         url: {
-            show: '/fr/person/' + this.item.result.person_id + '/general',
-            edit: '/fr/person/' + this.item.result.person_id + '/general/edit'
-         },
-      }
+   components: {
+      OnTheFly
    },
+   props: ['item']
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
index 37cee7852..5a4aa9de6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
@@ -15,22 +15,23 @@
       <span class="badge badge-pill badge-secondary" :title="item.key">
          {{ $t('item.type_thirdparty') }}
       </span>
-      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      <on-the-fly
+         type="thirdparty"
+         v-bind:id="item.result.id"
+         action="show">
+      </on-the-fly>
       
    </div>
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'SuggestionThirdParty',
-   props: ['item'],
-   data() {
-      return {
-         url: {
-            show: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/show',
-            edit: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/edit'
-         },
-      }
+   components: {
+      OnTheFly
    },
+   props: ['item']
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
new file mode 100644
index 000000000..a3cf339e2
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -0,0 +1,200 @@
+<template>
+<div v-if="action === 'show'">
+   
+   <div class="flex-table">
+      <div class="item-bloc">
+         <div class="item-row">
+            <div class="item-col">
+               <h3 :title="person.id">{{ person.text }}</h3>
+               <p>
+                  <i class="fa fa-fw" 
+                     :class="genderClass">
+                     <!--
+                     :title="$t(genderTranslation)"
+                     -->
+                  </i>
+                  <span v-if="person.birthdate">
+                     {{ $t('person.born', { e: feminized }) }}
+                     {{ $d(person.birthdate.datetime, 'short') }}
+                  </span>
+               </p>
+            </div>
+            <div class="item-col">
+               <dl class="list-content"> 
+                  <dt>{{ $t('person.firstname') }}</dt>
+                  <dd>{{ person.firstName }}</dd>
+                  
+                  <dt>{{ $t('person.lastname') }}</dt>
+                  <dd>{{ person.lastName }}</dd>
+                  
+                  <dt>{{ $t('person.altnames') }}</dt>
+                  <dd>{{ person.altNames }}</dd>
+                  
+                  <span v-if="person.center">
+                     <dt>{{ $t('person.center_name') }}</dt>
+                     <dd :title="person.center.id">{{ person.center.name }}</dd>
+                  </span>
+                     
+                  <dt>{{ $t('person.phonenumber') }}</dt>
+                  <dd>{{ person.phonenumber }}</dd>
+                  
+                  <dt>{{ $t('person.mobilenumber') }}</dt>
+                  <dd>{{ person.mobilenumber }}</dd>
+                  
+                  <dt>{{ $t('person.gender.title') }}</dt>
+                  <!--
+                  <dd>{{ $t(genderTranslation) }}</dd>
+                  -->
+               </dl>
+            </div>
+         </div>
+      </div>
+   </div>   
+   
+</div>
+<div v-else-if="action === 'edit' || action === 'create'">
+   
+   <input v-model="firstName" :placeholder="$t('person.firstname')" />
+   <input v-model="lastName" :placeholder="$t('person.lastname')" />
+   
+   <!--  TODO fix placeholder if undefined 
+         TODO dynamically get gender options
+   -->
+   <select v-model="gender">
+      <option disabled value="">{{ $t('person.gender.placeholder') }}</option> 
+      <option value="woman">{{ $t('person.gender.woman') }}</option>
+      <option value="man">{{ $t('person.gender.man') }}</option>
+      <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
+   </select>
+   
+   <i class="fa fa-birthday-cake"></i>
+   <input type="date"
+      id="chill_personbundle_person_birthdate" 
+      name="chill_personbundle_person[birthdate]" 
+      v-model="birthDate"
+   />
+   
+   <i class="fa fa-phone">
+   </i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
+   <i class="fa fa-mobile">
+   </i><input v-model="mobilenumber" :placeholder="$t('person.mobilenumber')" />
+   
+</div>
+</template>
+
+<script>
+import { getPerson, postPerson } from '../../_api/OnTheFly';
+
+export default {
+   name: "OnTheFlyPerson",
+   props: ['id', 'type', 'action'],
+   data() {
+      return {
+         person: {
+            type: 'person'
+         }
+      }
+   },
+   computed: {
+      firstName: {
+         set(value) { this.person.firstName = value; },
+         get() { return this.person.firstName; }
+      },
+      lastName: {
+         set(value) { this.person.lastName = value; },
+         get() { return this.person.lastName; }
+      },
+      gender: {
+         set(value) { this.person.gender = value; },
+         get() { return this.person.gender; } 
+      },
+      birthDate: {
+         set(value) { 
+            if (this.person.birthdate) {
+               this.person.birthdate.datetime = value + "T00:00:00+0100"; 
+            } else {
+               this.person.birthdate = { datetime: value + "T00:00:00+0100"};
+            }
+         },
+         get() { 
+            return (this.person.birthdate) ? this.person.birthdate.datetime.split('T')[0] : ''; 
+         } 
+      },
+      phonenumber: {
+         set(value) { this.person.phonenumber = value; },
+         get() { return this.person.phonenumber; }
+      },
+      mobilenumber: {
+         set(value) { this.person.mobilenumber = value; },
+         get() { return this.person.mobilenumber; }
+      },
+      genderClass() {
+         switch (this.person.gender) {
+            case 'woman':
+               return 'fa-venus';
+            case 'man':
+               return 'fa-mars';
+            case 'neuter':
+               return 'fa-neuter';
+         }
+      },
+      genderTranslation() {
+         switch (this.person.gender) {
+            case 'woman':
+               return 'person.gender.woman';
+            case 'man':
+               return 'person.gender.man';
+            case 'neuter':
+               return 'person.gender.neuter';
+         }
+      },
+      feminized() {
+         return (this.person.gender === 'woman')? 'e' : ''; 
+      }
+   },
+   mounted() {
+      if (this.action !== 'create') {
+         this.loadData();
+      }
+   },
+   methods: {
+      loadData() {
+         getPerson(this.id)
+            .then(person => new Promise((resolve, reject) => {
+               this.person = person;
+               console.log('get person', this.person);
+               resolve();
+         }));
+      },
+      postData() {
+         postPerson(this.person)
+            .then(person => new Promise((resolve, reject) => {
+               this.person = person;
+               console.log('post person', person);
+               resolve();
+         }));
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+ul {
+   li::marker {
+   }
+}
+div.flex-table {
+   div.item-bloc {
+      div.item-row {
+         div.item-col:last-child {
+            justify-content: flex-start;
+         }
+      }
+   }
+}
+dl {
+   dd {
+      margin-left: 1em;
+   }
+}
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
index e92a81e62..0f019c26b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
@@ -15,7 +15,21 @@ const personMessages = {
       person: {
          firstname: "Prénom",
          lastname: "Nom",
-         born: "né le ",
+         born: "né{e} le ",
+         center_id: "Identifiant du centre",
+         center_type: "Type de centre",
+         center_name: "Territoire", // vendée
+         phonenumber: "Téléphone",
+         mobilenumber: "Mobile",
+         altnames: "Autres noms",
+         gender: {
+            title: "Genre",
+            placeholder: "Choisissez le genre de l'usager",
+            woman: "Femme",
+            man: "Homme",
+            neuter: "Neutre",
+         }
+         
       },
       error_only_one_person: "Une seule personne peut être sélectionnée !"
    }
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index 98f26987f..3fe5c56db 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -31,7 +31,7 @@
                             {% set gender = (p.person.gender == 'woman') ? 'fa-venus' : 
                                 (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
                             {% set genderTitle = (p.person.gender == 'woman') ? 'femme' : 
-                                (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
+                                (p.person.gender == 'man') ? 'homme' : 'neutre' %}
                             <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
                         </p>
                     </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig
new file mode 100644
index 000000000..755ad8acf
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig
@@ -0,0 +1,11 @@
+{% extends '@ChillPerson/Household/layout.html.twig' %}
+
+{% block title 'Move household'|trans %}
+
+{% block content %}
+<h1>{{ block('title') }}</h1>
+
+<p>Household with id {{ household.id }}</p>
+
+
+{% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
new file mode 100644
index 000000000..aa0aa443b
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
@@ -0,0 +1,15 @@
+{% extends '@ChillPerson/Household/layout.html.twig' %}
+
+{% block title 'Addresses history for household'|trans %}
+
+{% block content %}
+<h1>{{ block('title') }}</h1>
+
+<p>Household with id {{ household.id }}</p>
+
+<a class="sc-button bt-update" 
+  href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
+  {{ 'Move household'|trans }}
+</a>
+
+{% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
new file mode 100644
index 000000000..9ea33c8d4
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
@@ -0,0 +1,26 @@
+<div class="subheader">
+    <div class="grid-12 parent" id="header-accompanying_course-name" >
+        <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
+
+            <div class="grid-6">{% set title = title %}
+                <h1>
+                    <i class="fa fa-child"></i>
+                    {{ 'Household'|trans }}
+                    <span style="font-weight: lighter; font-size: 50%;">(n°{{ household.id  }})</span>
+                </h1>
+            </div>
+
+            <div class="grid-3" id="banner-flags"></div>
+
+            <div class="grid-3" id="banner-status"></div>
+
+        </div>
+    </div>
+    <div class="grid-12 parent" id="header-accompanying_course-details" >
+        <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
+
+            <div id="banner-misc"></div>
+
+        </div>
+    </div>
+</div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/layout.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/layout.html.twig
new file mode 100644
index 000000000..6b8faa4b0
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/layout.html.twig
@@ -0,0 +1,17 @@
+{% extends "ChillMainBundle::layoutWithVerticalMenu.html.twig" %}
+
+{% block top_banner %}
+    {{ include('@ChillPerson/Household/banner.html.twig', { title: block('title') }) }}
+{% endblock %}
+
+{% block layout_wvm_content %}
+    {% block content %}{% endblock %}
+{% endblock  %}
+
+{% block vertical_menu_content %}
+    {{ chill_menu('household', {
+        'layout': '@ChillPerson/Household/menu.html.twig',
+        'args' : { 'household': household }
+    }) }}
+{% endblock %}
+
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/members.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/members.html.twig
new file mode 100644
index 000000000..bd6d54a0b
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/members.html.twig
@@ -0,0 +1,10 @@
+{% extends '@ChillPerson/Household/layout.html.twig' %}
+
+{% block title 'Household members'|trans %}
+
+{% block content %}
+<h1>{{ block('title') }}</h1>
+
+<p>Household with id {{ household.id }}</p>
+
+{% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/menu.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/menu.html.twig
new file mode 100644
index 000000000..a60abe7eb
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/menu.html.twig
@@ -0,0 +1,7 @@
+<ul class="tab-nav">
+    {% for menu in menus %}
+        <li class="">
+            <a href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
new file mode 100644
index 000000000..d0305d183
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
@@ -0,0 +1,14 @@
+{% extends '@ChillPerson/Household/layout.html.twig' %}
+
+{% block title 'Household summary'|trans %}
+
+{% block content %}
+<h1>{{ block('title') }}</h1>
+
+<p>Household with id {{ household.id }}</p>
+
+<h2>{{ 'Actual household members'|trans }}</h2>
+
+<p>TODO</p>
+
+{% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php b/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php
index 1923325f9..84da45db4 100644
--- a/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php
+++ b/src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php
@@ -5,9 +5,10 @@ namespace Chill\PersonBundle\Templating\Entity;
 use Chill\MainBundle\Templating\Entity\ChillEntityRenderInterface;
 use Chill\PersonBundle\Entity\SocialWork\SocialIssue;
 use Chill\MainBundle\Templating\TranslatableStringHelper;
+use RuntimeException;
 use Symfony\Component\Templating\EngineInterface;
 
-class SocialIssueRender implements ChillEntityRenderInterface
+final class SocialIssueRender implements ChillEntityRenderInterface
 {
     private TranslatableStringHelper $translatableStringHelper;
     private EngineInterface $engine;
@@ -28,11 +29,14 @@ class SocialIssueRender implements ChillEntityRenderInterface
     {
         return $entity instanceof SocialIssue;
     }
-    
+
+    /**
+     * @param SocialIssue $socialIssue
+     */
     public function renderString($socialIssue, array $options): string
     {
         /** @var $socialIssue SocialIssue */
-        $options = \array_merge(self::DEFAULT_ARGS, $options); 
+        $options = array_merge(self::DEFAULT_ARGS, $options);
 
         $str = $this->translatableStringHelper->localize($socialIssue->getTitle());
 
@@ -46,26 +50,36 @@ class SocialIssueRender implements ChillEntityRenderInterface
         return $str;
     }
 
-    protected function buildParents($socialIssue): array
+    protected function buildParents(SocialIssue $socialIssue): array
     {
         $parents = [];
+
         while ($socialIssue->hasParent()) {
             $socialIssue = $parents[] = $socialIssue->getParent();
         }
 
         return $parents;
-    } 
-    
+    }
+
+    /**
+     *
+     * @param SocialIssue $socialIssue
+     */
     public function renderBox($socialIssue, array $options): string
     {
-        $options = \array_merge(self::DEFAULT_ARGS, $options); 
+        $options = array_merge(self::DEFAULT_ARGS, $options);
         // give some help to twig: an array of parents
         $parents = $this->buildParents($socialIssue);
 
-        return $this->engine->render('@ChillPerson/Entity/social_issue.html.twig', [
-            'socialIssue' => $socialIssue,
-            'parents' => $parents,
-            'options' => $options
-        ]);
+        return $this
+            ->engine
+            ->render(
+                '@ChillPerson/Entity/social_issue.html.twig',
+                [
+                    'socialIssue' => $socialIssue,
+                    'parents' => $parents,
+                    'options' => $options
+                ]
+            );
     }
 }
diff --git a/src/Bundle/ChillPersonBundle/Tests/Controller/HouseholdControllerTest.php b/src/Bundle/ChillPersonBundle/Tests/Controller/HouseholdControllerTest.php
new file mode 100644
index 000000000..33e930e23
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Tests/Controller/HouseholdControllerTest.php
@@ -0,0 +1,97 @@
+<?php
+
+namespace Chill\PersonBundle\Tests\Controller;
+
+use Chill\PersonBundle\Entity\Household\Household;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\HttpFoundation\Request;
+use Chill\MainBundle\Test\PrepareClientTrait;
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+use Symfony\Bundle\FrameworkBundle\KernelBrowser;
+
+class HouseholdControllerTest extends WebTestCase
+{
+    use PrepareClientTrait;
+
+    private ?KernelBrowser $client = null;
+
+    protected function setUp()
+    {
+        $this->client = $this->getClientAuthenticated();
+    } 
+
+    /**
+     * @dataProvider generateValidHouseholdIds
+     */
+    public function testSummary($householdId)
+    {
+        $this->client->request(
+            Request::METHOD_GET,
+            "/fr/person/household/{$householdId}/summary"
+        );
+
+        $this->assertResponseIsSuccessful();
+    }
+
+    /**
+     * @dataProvider generateValidHouseholdIds
+     */
+    public function testMembers($householdId)
+    {
+        $this->client->request(
+            Request::METHOD_GET,
+            "/fr/person/household/{$householdId}/members"
+        );
+
+        $this->assertResponseIsSuccessful();
+    }
+
+    /**
+     * @dataProvider generateValidHouseholdIds
+     */
+    public function testAddresses($householdId)
+    {
+        $this->client->request(
+            Request::METHOD_GET,
+            "/fr/person/household/{$householdId}/addresses"
+        );
+
+        $this->assertResponseIsSuccessful();
+    }
+
+    /**
+     * @dataProvider generateValidHouseholdIds
+     */
+    public function testAddressMove($householdId)
+    {
+        $this->client->request(
+            Request::METHOD_GET,
+            "/fr/person/household/{$householdId}/address/move"
+        );
+
+        $this->assertResponseIsSuccessful();
+
+        // ici, il faudrait tester la requête POST
+    }
+
+    public function generateValidHouseholdIds()
+    {
+        self::bootKernel();
+        $em = self::$container->get(EntityManagerInterface::class);
+
+        $ids = $em->createQuery("SELECT DISTINCT h.id FROM ".Household::class." h ".
+            "JOIN h.members m ".
+            "JOIN m.person p ".
+            "JOIN p.center c ".
+            "WHERE c.name = :center"
+        )
+            ->setParameter('center', "Center A")
+            ->setMaxResults(100)
+            ->getScalarResult()
+            ;
+
+        \shuffle($ids);
+
+        yield [ \array_pop($ids)['id'] ]; 
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Tests/Serializer/Normalizer/HouseholdNormalizerTest.php b/src/Bundle/ChillPersonBundle/Tests/Serializer/Normalizer/HouseholdNormalizerTest.php
new file mode 100644
index 000000000..9dd348c82
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Tests/Serializer/Normalizer/HouseholdNormalizerTest.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace Chill\PersonBundle\Tests\Serializer\Normalizer;
+
+use Chill\PersonBundle\Entity\Household\Position;
+use Chill\PersonBundle\Entity\Household\Household;
+use Chill\PersonBundle\Entity\Household\HouseholdMember;
+use Chill\PersonBundle\Entity\Person;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
+use Symfony\Component\Serializer\SerializerInterface;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+
+
+class HouseholdNormalizerTest extends KernelTestCase
+{
+    private ?NormalizerInterface $normalizer;
+
+    protected function setUp()
+    {
+        self::bootKernel();
+        $this->normalizer= self::$container->get(NormalizerInterface::class);
+    }
+
+    public function testNormalizationRecursive()
+    {
+        $person = new Person();
+        $member = new HouseholdMember();
+        $household = new Household();
+        $position = (new Position())
+            ->setShareHousehold(true)
+            ->setAllowHolder(true)
+            ;
+
+        $member->setPerson($person)
+            ->setStartDate(new \DateTimeImmutable('1 year ago'))
+            ->setEndDate(new \DateTimeImmutable('1 month ago'));
+
+        $household->addMember($member);
+
+        $normalized = $this->normalizer->normalize($household,
+            'json', [ 'groups' => [ 'read' ]]);
+
+        $this->assertIsArray($normalized);
+        $this->assertArrayHasKey('type', $normalized);
+        $this->assertEquals('household', $normalized['type']);
+    }
+    
+}
diff --git a/src/Bundle/ChillPersonBundle/config/services.yaml b/src/Bundle/ChillPersonBundle/config/services.yaml
index d164fd089..0383bdf41 100644
--- a/src/Bundle/ChillPersonBundle/config/services.yaml
+++ b/src/Bundle/ChillPersonBundle/config/services.yaml
@@ -1,7 +1,7 @@
 parameters:
 #    cl_chill_person.example.class: Chill\PersonBundle\Example
 
-services:   
+services:
     _defaults:
         autowire: true
         autoconfigure: true
@@ -62,3 +62,10 @@ services:
         autoconfigure: true
         resource: '../Repository/'
         tags: ['doctrine.repository_service']
+
+    Chill\PersonBundle\Templating\Entity\:
+        autowire: true
+        autoconfigure: true
+        resource: '../Templating/Entity'
+        tags:
+            - 'chill.render_entity'
diff --git a/src/Bundle/ChillPersonBundle/config/services/menu.yaml b/src/Bundle/ChillPersonBundle/config/services/menu.yaml
index e94a81572..344eb2a17 100644
--- a/src/Bundle/ChillPersonBundle/config/services/menu.yaml
+++ b/src/Bundle/ChillPersonBundle/config/services/menu.yaml
@@ -1,17 +1,23 @@
 services:
-    Chill\PersonBundle\Menu\SectionMenuBuilder:
-        arguments:
-            $authorizationChecker: '@Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface'
-            $translator: '@Symfony\Component\Translation\TranslatorInterface'
-        tags:
-            - { name: 'chill.menu_builder' }
-
-    Chill\PersonBundle\Menu\AdminMenuBuilder:
-        arguments:
-            $authorizationChecker: '@Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface'
+    Chill\PersonBundle\Menu\:
+        resource: './../../Menu'
+        autowire: true
         tags:
             - { name: 'chill.menu_builder' }
 
+              #    Chill\PersonBundle\Menu\SectionMenuBuilder:
+              #        arguments:
+              #            $authorizationChecker: '@Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface'
+              #            $translator: '@Symfony\Component\Translation\TranslatorInterface'
+              #        tags:
+              #            - { name: 'chill.menu_builder' }
+              #
+              #    Chill\PersonBundle\Menu\AdminMenuBuilder:
+              #        arguments:
+              #            $authorizationChecker: '@Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface'
+              #        tags:
+              #            - { name: 'chill.menu_builder' }
+              #
     Chill\PersonBundle\Menu\PersonMenuBuilder:
         arguments:
             $showAccompanyingPeriod: '%chill_person.accompanying_period%'
@@ -19,8 +25,8 @@ services:
         tags:
             - { name: 'chill.menu_builder' }
 
-    Chill\PersonBundle\Menu\AccompanyingCourseMenuBuilder:
-        arguments:
-            $translator: '@Symfony\Contracts\Translation\TranslatorInterface'
-        tags:
-            - { name: 'chill.menu_builder' }
+              #    Chill\PersonBundle\Menu\AccompanyingCourseMenuBuilder:
+              #        arguments:
+              #            $translator: '@Symfony\Contracts\Translation\TranslatorInterface'
+              #        tags:
+              #            - { name: 'chill.menu_builder' }
diff --git a/src/Bundle/ChillPersonBundle/config/services/templating.yaml b/src/Bundle/ChillPersonBundle/config/services/templating.yaml
deleted file mode 100644
index 8b6e85a8c..000000000
--- a/src/Bundle/ChillPersonBundle/config/services/templating.yaml
+++ /dev/null
@@ -1,25 +0,0 @@
-services:
-    Chill\PersonBundle\Templating\Entity\:
-        resource: '../../Templating/Entity'
-        tags:
-            - 'chill.render_entity'
-
-    Chill\PersonBundle\Templating\Entity\PersonRender:
-        arguments:
-            $configAltNamesHelper: '@Chill\PersonBundle\Config\ConfigPersonAltNamesHelper'
-            $engine: '@Symfony\Component\Templating\EngineInterface'
-        tags:
-            - 'chill.render_entity'
-
-    Chill\PersonBundle\Templating\Entity\ClosingMotiveRender:
-        arguments:
-            $translatableStringHelper: '@Chill\MainBundle\Templating\TranslatableStringHelper'
-        tags:
-            - 'chill.render_entity'
-
-    Chill\PersonBundle\Templating\Entity\SocialIssueRender:
-        arguments:
-            $translatableStringHelper: '@Chill\MainBundle\Templating\TranslatableStringHelper'
-            $engine: '@Symfony\Component\Templating\EngineInterface'
-        tags:
-            - 'chill.render_entity'