diff --git a/config.yaml b/config.yaml
index b2e80f8..4a34e29 100644
--- a/config.yaml
+++ b/config.yaml
@@ -228,6 +228,8 @@ views:
     create_driver:
       files:
         - web/layouts/solidarity_service/_partials/create-driver.html
+        - web/layouts/_partials/address_autocomplete.html
+
 icons:
   svg:
     coopgo:parcoursmob/monogram: <svg xmlns="http://www.w3.org/2000/svg" class="%s" viewBox="0 0 61.85 33.58"><defs><style>.cls-1{fill:#ff1300;}.cls-2{fill:#243887;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M44.978,0C31.337,0,28.1,6.824,27.875,15.505H39.536V9.434a.727.727,0,0,1,1.123-.607L52.6,16.453,40.659,24.08a.729.729,0,0,1-1.123-.608v-6.1H27.865c.075,8.427,1.527,16.213,17.113,16.213,14.867,0,16.872-7.764,16.872-17.032C61.85,7.91,59.894,0,44.978,0Z"/><polygon class="cls-1" points="41.412 21.385 49.133 16.453 41.412 11.521 41.412 21.385"/><path class="cls-2" d="M14.175,11.4l-.019,4.151H26.311a14.781,14.781,0,0,0,.819-5.141C27.046,3.767,22.545,0,14.764,0H1.052A1.147,1.147,0,0,0,0,1.24V31.87a1.149,1.149,0,0,0,1.094,1.239H11.525a1.145,1.145,0,0,0,1.051-1.239V10.41h.758C13.88,10.41,14.175,10.756,14.175,11.4Z"/><path class="cls-2" d="M14.148,17.3l-.015,3.514H18.97A7.521,7.521,0,0,0,25.458,17.3Z"/></g></g></svg>
diff --git a/web/layouts/solidarity_service/_partials/create-driver.html b/web/layouts/solidarity_service/_partials/create-driver.html
index 0b7086d..82fcc4e 100644
--- a/web/layouts/solidarity_service/_partials/create-driver.html
+++ b/web/layouts/solidarity_service/_partials/create-driver.html
@@ -1,101 +1,254 @@
 {{define "content"}}
-<main>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
-        <h1 class="text-2xl font-semibold text-gray-900">
-            Créer un conducteur
-        </h1>
-    </div>
-    <div>
-        <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-            <div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3">
-                <form class="space-y-6" method="POST" name="create_driver" @submit="submit">                
-                    <div class="border-t border-gray-200 px-4 py-5 sm:px-6">    
-                        <div class="py-4 grid grid-cols-2">
-                            <div class="lg:col-span-1">
-                                <label for="firstname" class="block text-sm font-medium text-gray-700">Prénom</label>
-                                <div class="mt-1">
-                                    <input type="text" id="firstname" name="firstname" 
-                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
-                                </div>
-                            </div> 
-                            <div class="lg:col-span-1">
-                                <label for="lastname" class="block text-sm font-medium text-gray-700">Nom</label>
-                                <div class="mt-1">
-                                    <input type="text" id="lastname" name="lastname" 
-                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
-                                </div>
-                            </div> 
-                            <div class="lg:col-span-1">
-                                <label for="model" class="block text-sm font-medium text-gray-700">Model</label>
-                                <div class="mt-1">
-                                    <input type="text" id="model" name="model" 
-                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
-                                </div>
-                            </div> 
-                            <div class="lg:col-span-1">
-                                <label for="brand" class="block text-sm font-medium text-gray-700">Brand</label>
-                                <div class="mt-1">
-                                    <input type="text" id="brand" name="brand" 
-                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
-                                </div>
-                            </div> 
-                            <div x-data="{
-                                days : [
-                                'monday' ,
-                                'tuesday' ,
-                                'wednesday' ,
-                                'thursday' ,
-                                'friday' ,
-                                'saturday' ,
-                                'sunday' ,
-                                ],
 
-                                hours : [
-                                '12:00 AM',
-                                '01:00 AM',
-                                '02:00 AM',
-                                '03:00 AM',
-                                '04:00 AM',
-                                '05:00 AM',
-                                '06:00 AM',
-                                '07:00 AM',
-                                '08:00 AM',
-                                '09:00 AM',
-                                '10:00 AM',
-                                '11:00 AM',
-                                '12:00 PM',
-                                '01:00 PM',
-                                '02:00 PM',
-                                '03:00 PM',
-                                '04:00 PM',
-                                '05:00 PM',
-                                '06:00 PM',
-                                '07:00 PM',
-                                '08:00 PM',
-                                '09:00 PM',
-                                '10:00 PM',
-                                '11:00 PM'
-                                ] 
-                            }">
-                            <template x-for="day in days" :key="day">
-                                <div>
-                                    <label for="day-select-${day}" x-text="day"></label><br>
-                                    <select name="${day}" id="day-select-${day}">
-                                        <template x-for="hour in hours" :key="hour">
-                                            <option x-text="hour" x-value="hour"></option>
-                                        </template>
-                                    </select>
-                                </div>
-                            </template>
-                            </div>             
+<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+    <h1 class="text-2xl font-semibold text-gray-900">Ajouter un conducteur</h1>
+</div>
+
+<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 mt-8"
+    x-data="{
+        fields: {
+            first_name: null,
+            last_name: null,
+            email: null,
+            phone_number: null,
+            birthdate: null,
+            file_number: null
+        },
+       
+        formValidation: {
+            valid: false,
+            fields: {
+                first_name: {valid: null},
+                last_name: {valid: null},
+                email: {valid: null},
+                phone_number: {valid: null},
+                birthdate: {valid: null},
+                file_number: {valid: null},
+            }
+        },
+        isFormValid: true,
+        validate() {
+            this.formValidation = Iodine.assert(this.fields, this.rules)
+        },
+        validateField(field) {
+            this.formValidation.fields[field] = Iodine.assert(this.fields[field], this.rules[field])
+        },
+        submit(event) {
+            this.validate()
+            if(!this.formValidation.valid) {
+                this.isFormValid = false
+                event.preventDefault()
+            }
+            return this.formValidation.valid
+        }
+    }">
+    <form class="space-y-6" method="POST" @submit="submit">
+        <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
+            <div class="md:grid md:grid-cols-3 md:gap-6">
+                <div class="md:col-span-1">
+                    <h3 class="text-lg font-medium leading-6 text-gray-900">Informations obligatoires</h3>
+                    <p class="mt-1 text-sm text-gray-500">Informations personnelles sur le conducteur obligatoires
+                        pour créer son profil dans PARCOURSMOB</p>
+                </div>
+                <div class="mt-5 md:mt-0 md:col-span-2">
+                    <div class="grid grid-cols-6 gap-6">
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="first_name" class="block text-sm font-medium text-gray-700">Prénom</label>
+                            <input type="text" name="first_name" id="first_name" autocomplete="given-name"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm  rounded-2xl"
+                                x-model="fields.first_name" @blur="validateField('first_name')"
+                                :class="formValidation.fields.first_name.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
                         </div>
-                        <input type="submit"
-                               class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto" 
-                               value="Chercher un Conducteurs">   
+
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="last_name" class="block text-sm font-medium text-gray-700">Nom</label>
+                            <input type="text" name="last_name" id="last_name" autocomplete="family-name"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
+                                x-model="fields.last_name" @blur="validateField('last_name')"
+                                :class="formValidation.fields.last_name.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                        </div>
+
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+                            <input type="text" name="email" id="email" autocomplete="email"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
+                                x-model="fields.email" @blur="validateField('email')"
+                                :class="formValidation.fields.email.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                        </div>
+
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="phone_number" class="block text-sm font-medium text-gray-700">Numéro de
+                                téléphone</label>
+                            <input type="text" name="phone_number" id="phone_number" autocomplete="phone" placeholder="+33612345678"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
+                                x-model="fields.phone_number" @blur="validateField('phone_number')"
+                                :class="formValidation.fields.phone_number.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                        </div>
+
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="birthdate" class="block text-sm font-medium text-gray-700">Date de
+                                naissance</label>
+                            <input type="date" name="birthdate" id="birthdate" autocomplete="birthdate" placeholder="JJ/MM/AAAA"
+                                class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
+                                x-model="fields.birthdate" @blur="validateField('birthdate')"
+                                :class="formValidation.fields.birthdate.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                        </div>
+                       
                     </div>
-                </form>
+                </div>
             </div>
         </div>
-    </div>
-</main>
-{{end}}
\ No newline at end of file
+
+        <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
+            <div class="md:grid md:grid-cols-3 md:gap-6">
+                <div class="md:col-span-1">
+                    <h3 class="text-lg font-medium leading-6 text-gray-900">Informations optionnelles</h3>
+                    <p class="mt-1 text-sm text-gray-500">Autres informations de profil optionnelles</p>
+                </div>
+                <div class="mt-5 space-y-6 md:mt-0 md:col-span-2">
+                    <div class="grid grid-cols-6 gap-6">
+
+                        <div class="col-span-6 sm:col-span-3">
+                            <label for="gender" class="block text-sm font-medium text-gray-700">Genre</label>
+                            <div class="sm:mt-0 sm:col-span-2">
+                                <select id="gender" name="gender" autocomplete="gender" x-model="gender"
+                                    class="max-w-lg mt-1 block focus:ring-co-blue focus:border-co-blue w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-2xl">
+                                    <option value="0">Inconnu</option>
+                                    <option value="1">Masculin</option>
+                                    <option value="2">Féminin</option>
+                                    <option value="9">Sans objet</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <!-- <div class="col-span-3 sm:col-span-3">
+                            <label class="block text-sm font-medium text-gray-700"> Photo </label>
+                            <div class="mt-1 flex items-center space-x-5">
+                                <span class="inline-block h-12 w-12 rounded-co overflow-hidden bg-gray-100">
+                                    {{.IconSet.Icon "img:profile-picture-placeholder" "h-full w-full"}}
+                                </span>
+                                <button type="button"
+                                    class="bg-white py-2 px-3 border border-gray-300 rounded-2xl shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
+                                    Charger la photo
+                                </button>
+                            </div>
+                        </div> -->
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
+            <div class="md:grid md:grid-cols-3 md:gap-6">
+                <div class="md:col-span-1">
+                    <h3 class="text-lg font-medium leading-6 text-gray-900">Paramètres</h3>
+                    <p class="mt-1 text-sm text-gray-500">Paramètres liés au conducteur, utiles pour exploiter les fonctionnalités de PARCOURSMOB</p>
+                </div>
+                <div class="mt-5 space-y-6 md:mt-0 md:col-span-2">
+
+                    {{ $fieldName := "address" }}
+                    {{ template "address_autocomplete" dict "FieldName" $fieldName }}
+
+                    <!-- will dolater : tags, groups, ... -->
+
+                </div>
+            </div>
+        </div> 
+
+        <div class="lg:col-span-1">
+            <label for="model" class="block text-sm font-medium text-gray-700">Model</label>
+            <div class="mt-1">
+                <input type="text" id="model" name="model" 
+                    class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
+            </div>
+        </div> 
+        <div class="lg:col-span-1">
+            <label for="brand" class="block text-sm font-medium text-gray-700">Brand</label>
+            <div class="mt-1">
+                <input type="text" id="brand" name="brand" 
+                    class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
+            </div>
+        </div> 
+        <div class="lg:col-span-1">
+            <label for="radius" class="block text-sm font-medium text-gray-700">Radius</label>
+            <div class="mt-1">
+                <input type="number" id="radius" name="radius" 
+                    class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
+            </div>
+        </div> 
+        <div class="lg:col-span-1">
+            <label for="alias" class="block text-sm font-medium text-gray-700">Alias</label>
+            <div class="mt-1">
+                <input type="text" id="alias" name="alias" 
+                    class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
+            </div>
+        </div> 
+        <div class="lg:col-span-1">
+            <label for="grade" class="block text-sm font-medium text-gray-700">Grade</label>
+            <div class="mt-1">
+                <input type="number" id="grade" name="grade" 
+                    class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
+            </div>
+        </div> 
+
+        <div x-data="{
+            days : [
+            'monday' ,
+            'tuesday' ,
+            'wednesday' ,
+            'thursday' ,
+            'friday' ,
+            'saturday' ,
+            'sunday' ,
+            ],
+
+            hours : [
+            '12:00 AM',
+            '01:00 AM',
+            '02:00 AM',
+            '03:00 AM',
+            '04:00 AM',
+            '05:00 AM',
+            '06:00 AM',
+            '07:00 AM',
+            '08:00 AM',
+            '09:00 AM',
+            '10:00 AM',
+            '11:00 AM',
+            '12:00 PM',
+            '01:00 PM',
+            '02:00 PM',
+            '03:00 PM',
+            '04:00 PM',
+            '05:00 PM',
+            '06:00 PM',
+            '07:00 PM',
+            '08:00 PM',
+            '09:00 PM',
+            '10:00 PM',
+            '11:00 PM'
+            ] 
+        }">
+        <template x-for="day in days" :key="day">
+            <div>
+                <label for="day-select-${day}" x-text="day"></label><br>
+                <select name="${day}" id="day-select-${day}">
+                    <template x-for="hour in hours" :key="hour">
+                        <option x-text="hour" x-value="hour"></option>
+                    </template>
+                </select>
+            </div>
+        </template>
+        <div class="flex justify-end">
+            <p x-show="! isFormValid" class="px-4 py-2 text-sm text-co-red">Certains champs de sont pas valides.</p>
+            <a href="/app/beneficiaries/">
+                <button type="button"
+                    class="bg-white py-2 px-4 border border-gray-300 rounded-2xl shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Annuler</button>
+            </a>
+            <button type="submit"
+                class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-2xl text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Créer le conducteur</button>
+        </div>
+    </form>
+</div>
+{{end}}