diff --git a/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php b/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php
index a40221263..277e916a8 100644
--- a/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php
+++ b/src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php
@@ -35,6 +35,7 @@ use Chill\MainBundle\Doctrine\DQL\OverlapsI;
 use Symfony\Component\DependencyInjection\Definition;
 use Symfony\Component\DependencyInjection\Reference;
 use Chill\MainBundle\Doctrine\DQL\Replace;
+use Symfony\Component\HttpFoundation\Request;
 
 /**
  * Class ChillMainExtension
@@ -133,7 +134,7 @@ class ChillMainExtension extends Extension implements PrependExtensionInterface,
         $loader->load('services/search.yaml');
         $loader->load('services/serializer.yaml');
 
-        $this->configureCruds($container, $config['cruds'], $config['apis'], $loader); 
+        $this->configureCruds($container, $config['cruds'], $config['apis'], $loader);
     }
 
     /**
@@ -212,6 +213,9 @@ class ChillMainExtension extends Extension implements PrependExtensionInterface,
         $container->prependExtensionConfig('monolog', array(
             'channels' => array('chill')
         ));
+
+        //add crud api
+        $this->prependCruds($container);
     }
 
     /**
@@ -235,4 +239,97 @@ class ChillMainExtension extends Extension implements PrependExtensionInterface,
 
         // Note: the controller are loaded inside compiler pass
     }
+
+
+    /**
+     * @param ContainerBuilder $container
+     */
+    protected function prependCruds(ContainerBuilder $container)
+    {
+        $container->prependExtensionConfig('chill_main', [
+            'apis' => [
+                [
+                    'class' => \Chill\MainBundle\Entity\Address::class,
+                    'name' => 'address',
+                    'base_path' => '/api/1.0/main/address',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_index' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ],
+                        ],
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_POST => true,
+                                Request::METHOD_HEAD => true
+                            ]
+                        ],
+                    ]
+                ],
+                [
+                    'class' => \Chill\MainBundle\Entity\AddressReference::class,
+                    'name' => 'address_reference',
+                    'base_path' => '/api/1.0/main/address-reference',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_index' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ],
+                        ],
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ]
+                        ],
+                    ]
+                ],
+                [
+                    'class' => \Chill\MainBundle\Entity\PostalCode::class,
+                    'name' => 'postal_code',
+                    'base_path' => '/api/1.0/main/postal-code',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_index' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ],
+                        ],
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ]
+                        ],
+                    ]
+                ],
+                [
+                    'class' => \Chill\MainBundle\Entity\Country::class,
+                    'name' => 'country',
+                    'base_path' => '/api/1.0/main/country',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_index' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ],
+                        ],
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ]
+                        ],
+                    ]
+                ]
+            ]
+        ]);
+    }
 }
diff --git a/src/Bundle/ChillMainBundle/Entity/AddressReference.php b/src/Bundle/ChillMainBundle/Entity/AddressReference.php
index 944cab81b..b1fca205d 100644
--- a/src/Bundle/ChillMainBundle/Entity/AddressReference.php
+++ b/src/Bundle/ChillMainBundle/Entity/AddressReference.php
@@ -2,12 +2,11 @@
 
 namespace Chill\MainBundle\Entity;
 
-use Chill\MainBundle\Entity\AddressReferenceRepository;
 use Doctrine\ORM\Mapping as ORM;
 use Chill\MainBundle\Doctrine\Model\Point;
 
 /**
- * @ORM\Entity(repositoryClass=AddressReferenceRepository::class)
+ * @ORM\Entity()
  * @ORM\Table(name="chill_main_address_reference")
  * @ORM\HasLifecycleCallbacks()
  */
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
new file mode 100644
index 000000000..461b0038e
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -0,0 +1,41 @@
+<template>
+   
+   <div v-if="address.address">
+      {{ address.address.street }}, {{ address.address.streetNumber }}
+   </div>
+   <div v-if="address.city">
+      {{ address.city.code }} {{ address.city.name }}
+   </div>
+   <div v-if="address.country">
+      {{ address.country.name }}
+   </div>
+   
+   <add-address
+      @addNewAddress="addNewAddress">
+   </add-address>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+import AddAddress from '../_components/AddAddress.vue';
+
+export default {
+   name: 'App',
+   components: {
+      AddAddress
+   },
+   computed: {
+      address() {
+         return this.$store.state.address;
+      }
+   },
+   methods: {
+      addNewAddress({ address, modal }) {
+         console.log('@@@ CLICK button addNewAdress', address);
+         this.$store.dispatch('addAddress', address.selected);
+         modal.showModal = false;
+      }
+   }
+};
+</script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
new file mode 100644
index 000000000..27676369e
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { addressMessages } from './js/i18n'
+import { store } from './store'
+
+import App from './App.vue';
+
+const i18n = _createI18n(addressMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#address');
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
new file mode 100644
index 000000000..87ee9a5c0
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
@@ -0,0 +1,22 @@
+const addressMessages = {
+   fr: {
+      add_an_address: 'Ajouter une adresse',
+      select_an_address: '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 ?',
+      floor: 'Étage',
+      corridor: 'Couloir',
+      steps: 'Escalier',
+      flat: 'Appartement',
+      buildingName: 'Nom du batiment',
+      extra: 'Complément d\'adresse',
+      distribution: 'Service particulier de distribution'
+   }
+};
+
+export {
+   addressMessages
+};
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
new file mode 100644
index 000000000..b9466b50c
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
@@ -0,0 +1,43 @@
+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' 
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = createStore({
+   strict: debug,
+   state: {
+      address: {},
+      errorMsg: {}
+   },
+   getters: {
+   },
+   mutations: {
+      addAddress(state, address) {
+         console.log('@M addAddress address', address);
+         state.address = address;
+      }
+   },
+   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); 
+         //   }); 
+      }
+   }
+});
+
+export { store };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js
new file mode 100644
index 000000000..4de0fcc19
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_api/AddAddress.js
@@ -0,0 +1,46 @@
+/*
+* Endpoint countries GET
+* TODO
+*/
+const fetchCountries = () => {
+   console.log('<<< fetching countries');
+   return [
+      {id: 1, name: 'France', countryCode: 'FR'},
+      {id: 2, name: 'Belgium', countryCode: 'BE'}
+   ];
+};
+
+/*
+* Endpoint cities GET 
+* TODO
+*/
+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'}
+   ];
+};
+
+/*
+* Endpoint chill_main_address_reference_api_show
+* method GET, get AddressReference Object
+* @returns {Promise} a promise containing all AddressReference object
+*/
+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`;
+    return fetch(url)
+       .then(response => {
+          if (response.ok) { return response.json(); }
+          throw Error('Error with request resource response');
+       });
+};
+
+export {
+   fetchCountries,
+   fetchCities,
+   fetchReferenceAddresses
+};
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
new file mode 100644
index 000000000..55cf2f098
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
@@ -0,0 +1,219 @@
+<template>
+   <button class="sc-button bt-create centered mt-4" @click="openModal">
+      {{ $t('add_an_address') }}
+   </button>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal"
+         v-bind:modalDialogClass="modal.modalDialogClass"
+         @close="modal.showModal = false">
+
+         <template v-slot:header>
+            <h3 class="modal-title">{{ $t('add_an_address') }}</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>
+
+            <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>
+
+            <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>
+            <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" 
+               @click.prevent="$emit('addNewAddress', { address, modal })">
+               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
+            </button>
+         </template>
+
+      </modal>
+   </teleport>
+</template>
+
+<script>
+import Modal from './Modal';
+import { fetchCountries, fetchCities, fetchReferenceAddresses } from '../_api/AddAddress'
+import CountrySelection from './AddAddress/CountrySelection';
+import CitySelection from './AddAddress/CitySelection';
+import AddressSelection from './AddAddress/AddressSelection';
+import AddressMap from './AddAddress/AddressMap';
+import AddressMore from './AddAddress/AddressMore'
+
+export default {
+   name: 'AddAddresses',
+   components: {
+      Modal,
+      CountrySelection,
+      CitySelection,
+      AddressSelection,
+      AddressMap,
+      AddressMore
+   },
+   props: [
+   ],
+   emits: ['addNewAddress'],
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+         address: {
+            loaded: {
+               countries: [],
+               cities: [],
+               addresses: [],
+            },
+            selected: {
+               country: {},
+               city: {},
+               address: {},
+            },
+            addressMap: {
+               center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/
+               zoom: 12
+            },
+            isNoAddress: false,
+            floor: null,
+            corridor: null,
+            steps: null,
+            floor: null,
+            flat: null,
+            buildingName: null,
+            extra: null,
+            distribution: null,
+         },
+         errorMsg: {}
+      }
+   },
+   computed: {
+      isNoAddress: {
+         set(value) {
+            console.log('value', value);
+            this.address.isNoAddress = value;
+         },
+         get() {
+            return this.address.isNoAddress;
+         }
+      }
+   },
+   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); 
+         //  }); 
+      },
+      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); 
+         //  }); 
+      },
+      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) => {
+               console.log('addresses', addresses);
+               this.address.loaded.addresses = addresses.results;
+               resolve();
+            }))
+            .catch((error) => { 
+               this.errorMsg.push(error.message); 
+            }); 
+      },
+      updateMapCenter(point) {
+         console.log('point', point);
+         this.address.addressMap.center[0] = point.coordinates[1];  // TODO use reverse()
+         this.address.addressMap.center[1] = point.coordinates[0];
+         this.$refs.addressMap.update(); // cast child methods
+      },
+      resetAll() {
+         console.log('reset all selected');
+         this.address.loaded.addresses = [];
+         this.address.selected.address = {}; 
+         this.address.loaded.cities = [];
+         this.address.selected.city = {};
+         this.address.selected.country = {};
+         console.log('cities and addresses', this.address.loaded.cities, this.address.loaded.addresses);
+      }
+   }
+}
+</script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
new file mode 100644
index 000000000..5b616819d
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
@@ -0,0 +1,47 @@
+<template>
+   <div class="container">
+      <div id='address_map' style='height:400px; width:400px;'></div>
+   </div>
+</template>
+
+<script>
+
+import L from 'leaflet';
+import markerIconPng from 'leaflet/dist/images/marker-icon.png'
+import 'leaflet/dist/leaflet.css';
+
+let map;
+
+export default {
+   name: 'AddressMap',
+   props: ['address'],
+   computed: {
+      center() {
+         return this.address.addressMap.center;
+      },
+   },
+   methods:{
+      init() {
+         map = L.map('address_map').setView([48.8589, 2.3469], 12);
+
+         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+         }).addTo(map);
+
+         const markerIcon = L.icon({
+            iconUrl: markerIconPng,
+         });
+
+         L.marker([48.8589, 2.3469], {icon: markerIcon}).addTo(map);
+
+      },
+      update() {
+         console.log('update map with : ', this.address.addressMap.center)
+         map.setView(this.address.addressMap.center, 12);
+      }
+   },
+   mounted(){
+      this.init()
+   }
+}
+</script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue
new file mode 100644
index 000000000..b216d5ed0
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue
@@ -0,0 +1,112 @@
+<template>
+   <div>
+      <h4>{{ $t('fill_an_address') }}</h4>
+      <input 
+         type="text"
+         name="floor"
+         :placeholder="$t('floor')"
+         v-model="floor"/>
+      <input 
+         type="text"
+         name="corridor"
+         :placeholder="$t('corridor')"
+         v-model="corridor"/>
+      <input 
+         type="text"
+         name="steps"
+         :placeholder="$t('steps')"
+         v-model="steps"/>
+      <input 
+         type="text"
+         name="flat"
+         :placeholder="$t('flat')"
+         v-model="flat"/>
+      <input 
+         type="text"
+         name="buildingName"
+         :placeholder="$t('buildingName')"
+         v-model="buildingName"/>
+      <input 
+         type="text"
+         name="extra"
+         :placeholder="$t('extra')"
+         v-model="extra"/>
+      <input 
+         type="text"
+         name="distribution"
+         :placeholder="$t('distribution')"
+         v-model="distribution"/>
+   </div>
+</template>
+
+<script>
+export default {
+   name: "AddressMore",
+   props: ['address'],
+   computed: {
+      floor: {
+         set(value) {
+            console.log('value', value);
+            this.address.floor = value;
+         },
+         get() {
+            return this.address.floor;
+         }
+      },
+      corridor: {
+         set(value) {
+            console.log('value', value);
+            this.address.corridor = value;
+         },
+         get() {
+            return this.address.corridor;
+         }
+      },
+      steps: {
+         set(value) {
+            console.log('value', value);
+            this.address.steps = value;
+         },
+         get() {
+            return this.address.steps;
+         }
+      },
+      flat: {
+         set(value) {
+            console.log('value', value);
+            this.address.flat = value;
+         },
+         get() {
+            return this.address.flat;
+         }
+      },
+      buildingName: {
+         set(value) {
+            console.log('value', value);
+            this.address.buildingName = value;
+         },
+         get() {
+            return this.address.buildingName;
+         }
+      },
+      extra: {
+         set(value) {
+            console.log('value', value);
+            this.address.extra = value;
+         },
+         get() {
+            return this.address.extra;
+         }
+      },
+      distribution: {
+         set(value) {
+            console.log('value', value);
+            this.address.distribution = value;
+         },
+         get() {
+            return this.address.distribution;
+         }
+      }
+   }
+}
+</script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
new file mode 100644
index 000000000..71738079c
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
@@ -0,0 +1,38 @@
+<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>
+   </div>
+</template>
+
+<script>
+
+export default {
+   name: 'AddressSelection',
+   props: ['address', 'updateMapCenter'],
+   computed: {
+      addresses() { 
+         return this.address.loaded.addresses; 
+      },
+      selected: {
+         set(value) {
+            console.log('selected value', value);
+            this.address.selected.address = value;
+            this.updateMapCenter(value.point);
+         },
+         get() {
+            return this.address.selected.address;
+         }
+      },
+   }
+};
+</script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
new file mode 100644
index 000000000..99e46db08
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
@@ -0,0 +1,38 @@
+<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>
+   </div>
+</template>
+
+<script>
+
+export default {
+   name: 'CitySelection',
+   props: ['address', 'getReferenceAddresses'],
+   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;
+         }
+      },
+   }
+};
+</script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
new file mode 100644
index 000000000..4eb591135
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
@@ -0,0 +1,38 @@
+<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>
+   </div>
+</template>
+
+<script>
+
+export default {
+   name: 'CountrySelection',
+   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;
+         }
+      }
+   }
+};
+</script>
diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index 6187b31ea..78accf004 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js
@@ -62,5 +62,7 @@ module.exports = function(encore, entries)
     buildCKEditor(encore);
     encore.addEntry('ckeditor5', __dirname + '/Resources/public/modules/ckeditor5/index.js');
 
+    // Address
+    encore.addEntry('address', __dirname + '/Resources/public/vuejs/Address/index.js');
 
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
index 70cc51e53..17591f86d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
@@ -49,4 +49,22 @@
 
     {{ form_end(form) }}
 
+
+    NEW FORM
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+        <div id="address"></div>
+    {% endblock %}
+
+    {% block stylesheets %}
+        <link href="{{ asset('build/address.css') }}" type="text/css" rel="stylesheet" />
+    {% endblock %}
+
+    {% block js %}
+        {{ encore_entry_script_tags('address') }}
+    {% endblock %}
+
+
+
 {% endblock personcontent %}