diff --git a/config.yaml b/config.yaml
index 016f92b..c1b9959 100644
--- a/config.yaml
+++ b/config.yaml
@@ -229,6 +229,7 @@ views:
         - web/layouts/journeys/_partials/journeys-public-transit-transitous.html
         - web/layouts/journeys/_partials/journeys-solidarity-transport.html
         - web/layouts/journeys/_partials/journeys-organized-carpools.html
+        - web/layouts/journeys/_partials/saved-searches.html
         - web/layouts/journeys/search.html
     list:
       files:
@@ -345,7 +346,7 @@ views:
       files:
         - web/layouts/_partials/address_autocomplete.html
         - web/layouts/organized_carpool/_partials/driver_availabilities.html
-        - web/layouts/solidarity_transport/_partials/driver_documents.html
+        - web/layouts/organized_carpool/_partials/driver_documents.html
         - web/layouts/organized_carpool/driver_display.html
     journey:
       files:
diff --git a/web/layouts/beneficiaries/display.html b/web/layouts/beneficiaries/display.html
index 066eb66..e46a17f 100644
--- a/web/layouts/beneficiaries/display.html
+++ b/web/layouts/beneficiaries/display.html
@@ -125,7 +125,7 @@
             </section>
 
             <section aria-labelledby="functionalities-title" x-data="{
-                    tab: 'documents',
+                    tab: '{{ if .ViewState.tab }}{{ .ViewState.tab }}{{ else }}documents{{ end }}',
                     to(event) {
                         this.tab = event.target.value
                     }
diff --git a/web/layouts/dashboard/_partials/bookings-widget.html b/web/layouts/dashboard/_partials/bookings-widget.html
index bd78bae..4b00750 100644
--- a/web/layouts/dashboard/_partials/bookings-widget.html
+++ b/web/layouts/dashboard/_partials/bookings-widget.html
@@ -7,7 +7,7 @@
     </div>
     <ul role="list" class="divide-y divide-gray-200 flex-1">
         {{range .}}
-        {{if or (eq .Data.Deleted nil) (eq .Data.Deleted false)}}
+        {{if not .Deleted}}
             <li class="py-2 px-4 flex">
                 <a href="/app/vehicles-management/bookings/{{.ID}}" class="flex w-full">
                 <div class="ml-3">
diff --git a/web/layouts/journeys/_partials/journeys-organized-carpools.html b/web/layouts/journeys/_partials/journeys-organized-carpools.html
index ce1a795..06b484b 100644
--- a/web/layouts/journeys/_partials/journeys-organized-carpools.html
+++ b/web/layouts/journeys/_partials/journeys-organized-carpools.html
@@ -24,6 +24,10 @@
           class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
           Distance du covoiturage
       </th>
+      <th scope="col"
+          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+          Profil validé
+      </th>
       <th scope="col"
           class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
           &nbsp;
@@ -38,8 +42,15 @@
       <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .DriverDepartureAddress }}</td>
       <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .DriverArrivalAddress }}</td>
       <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .Distance }} km</td>
+      <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
+        {{if carpoolDriverValidatedProfile $driver (carpoolDocuments $driver.ID) }}
+        <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Oui</span>
+        {{else}}
+        <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
+        {{end}}
+      </td>
       <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-        <a class="text-co-blue hover:text-co-blue" 
+        <a class="text-co-blue hover:text-co-blue"
           href="/app/organized-carpool/drivers/{{$driver.ID}}/journeys/{{.Id}}">
           Organiser
         </a>
diff --git a/web/layouts/journeys/_partials/saved-searches.html b/web/layouts/journeys/_partials/saved-searches.html
new file mode 100644
index 0000000..b0ec117
--- /dev/null
+++ b/web/layouts/journeys/_partials/saved-searches.html
@@ -0,0 +1,110 @@
+{{define "saved_searches"}}
+<div class="bg-white shadow sm:rounded-2xl sm:overflow-hidden">
+    <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">Recherches sauvegardées</h2>
+    <div class="border-t border-gray-200">
+
+        {{if .ViewState.saved_searches}}
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-300">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th scope="col" class="w-1/6 py-2 px-3 text-left text-sm font-semibold text-gray-900">
+                            Bénéficiaire
+                        </th>
+                        <th scope="col" class="w-1/4 px-3 py-2 text-left text-sm font-semibold text-gray-900">
+                            Départ
+                        </th>
+                        <th scope="col" class="w-1/4 px-3 py-2 text-left text-sm font-semibold text-gray-900">
+                            Destination
+                        </th>
+                        <th scope="col" class="w-1/6 px-3 py-2 text-left text-sm font-semibold text-gray-900">
+                            Date/Heure
+                        </th>
+                        <th scope="col" class="w-1/6 relative py-2 px-3 text-right text-sm font-semibold text-gray-900">
+                            <span class="sr-only">Actions</span>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200 bg-white">
+                    {{range .ViewState.saved_searches}}
+                    <tr>
+                        <td class="py-3 px-3 text-sm text-gray-500">
+                            {{if and .Data .Data.passenger_id}}
+                                {{$beneficiary := index $.ViewState.beneficiaries .Data.passenger_id}}
+                                {{if $beneficiary}}
+                                    <a href="/app/beneficiaries/{{.Data.passenger_id}}" class="text-co-blue hover:text-co-blue-dark">
+                                        {{$beneficiary.Data.first_name}} {{$beneficiary.Data.last_name}}
+                                    </a>
+                                {{else}}
+                                    -
+                                {{end}}
+                            {{else}}
+                                -
+                            {{end}}
+                        </td>
+                        <td class="px-3 py-3 text-sm text-gray-500 break-words">
+                            {{if .Departure}}
+                                {{if .Departure.Properties}}
+                                    {{if .Departure.Properties.city}}
+                                        {{.Departure.Properties.city}}
+                                    {{else}}
+                                        {{.Departure.Properties.label}}
+                                    {{end}}
+                                {{else}}
+                                    -
+                                {{end}}
+                            {{else}}
+                                -
+                            {{end}}
+                        </td>
+                        <td class="px-3 py-3 text-sm text-gray-500 break-words">
+                            {{if .Destination}}
+                                {{if .Destination.Properties}}
+                                    {{if .Destination.Properties.city}}
+                                        {{.Destination.Properties.city}}
+                                    {{else}}
+                                        {{.Destination.Properties.label}}
+                                    {{end}}
+                                {{else}}
+                                    -
+                                {{end}}
+                            {{else}}
+                                -
+                            {{end}}
+                        </td>
+                        <td class="px-3 py-3 text-sm text-gray-500 whitespace-nowrap">
+                            {{if .DateTime}}
+                                {{timeFormat .DateTime "02/01/2006 15:04"}}
+                            {{else}}
+                                -
+                            {{end}}
+                        </td>
+                        <td class="relative py-3 px-3 text-right text-sm font-medium whitespace-nowrap">
+                            <a href="/app/journeys/?departure={{json .Departure}}&destination={{json .Destination}}&departuredate={{timeFormat .DateTime "2006-01-02"}}&departuretime={{timeFormat .DateTime "15:04"}}{{if and .Data .Data.passenger_id}}&passengerid={{.Data.passenger_id}}{{end}}" class="text-co-blue hover:text-co-blue-dark mr-4">
+                                Rechercher
+                            </a>
+                            <a href="/app/journeys/saved-searches/{{.ID}}/delete"
+                               class="text-red-600 hover:text-red-900"
+                               onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette recherche sauvegardée ?')">
+                                Supprimer
+                            </a>
+                        </td>
+                    </tr>
+                    {{end}}
+                </tbody>
+            </table>
+        </div>
+        {{else}}
+        <div class="text-center py-8">
+            <div class="text-gray-500">
+                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                <h3 class="mt-2 text-sm font-medium text-gray-900">Aucune recherche sauvegardée</h3>
+                <p class="mt-1 text-sm text-gray-500">Effectuez une recherche et cliquez sur "Enregistrer pour plus tard" pour commencer.</p>
+            </div>
+        </div>
+        {{end}}
+    </div>
+</div>
+{{end}}
diff --git a/web/layouts/journeys/search.html b/web/layouts/journeys/search.html
index 89ea4dd..69e73a0 100644
--- a/web/layouts/journeys/search.html
+++ b/web/layouts/journeys/search.html
@@ -21,7 +21,30 @@
             <div class="bg-white shadow sm:rounded-2xl">
                 <h2 id="timeline-title" class="text-lg font-medium text-gray-900 p-4 sm:px-6">Chercher une solution</h2>
                 <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
-                    <form method="GET">
+                    <form method="GET" x-data="journeySearch()">
+
+                        <div class="py-4">
+                            <label for="beneficiary" class="block text-sm font-medium text-gray-700">Bénéficiaire (optionnel)</label>
+                            <div class="mt-1 relative" x-data="beneficiaryAutocomplete()">
+                                <input type="text"
+                                       x-model="input"
+                                       @input="onInput()"
+                                       @focus="showResults = true"
+                                       @blur="setTimeout(() => showResults = false, 200)"
+                                       class="p-2 shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl">
+
+                                <ul x-show="showResults && filteredBeneficiaries.length > 0"
+                                    class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-xl py-1 text-base overflow-auto focus:outline-none sm:text-sm border border-gray-300"
+                                    tabindex="-1" role="listbox">
+                                    <template x-for="beneficiary in filteredBeneficiaries" :key="beneficiary.id">
+                                        <li class="text-gray-900 hover:bg-gray-200 cursor-default select-none relative py-2 pl-3 pr-9"
+                                            @click="selectBeneficiary(beneficiary)">
+                                            <span class="font-normal block truncate" x-text="beneficiary.name"></span>
+                                        </li>
+                                    </template>
+                                </ul>
+                            </div>
+                        </div>
 
                         {{ $departureField := "departure" }}
                         {{ $departureLabel := "Départ" }}
@@ -33,9 +56,7 @@
                         {{ $destination := .ViewState.destination }}
                         {{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel "Address" $destination }}
                         
-			{{if ne .ViewState.passengerid "" }}
-			<input type="hidden" value="{{.ViewState.passengerid}}" name="passengerid" />
-			{{end}}
+                        <input type="hidden" name="passengerid" value="{{.ViewState.passengerid}}" />
 
                         <div class="py-4 grid grid-cols-2">
                             <div class="lg:col-span-1">
@@ -55,11 +76,100 @@
                             
                         </div>
 
-                        <button type="submit"
-                            class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
-                            Chercher
-                        </button>
+                        <div class="flex gap-2 mt-8">
+                            <button type="submit"
+                                class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
+                                Chercher
+                            </button>
+                            {{if .ViewState.searched}}
+			    <a href="/app/journeys/save?departure={{json .ViewState.departure}}&destination={{ json .ViewState.destination }}&departuredate={{.ViewState.departuredate}}&departuretime={{.ViewState.departuretime}}&passengerid={{.ViewState.passengerid}}"
+                                class="rounded-2xl border border-gray-300 bg-white px-4 py-2 my-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto inline-flex items-center">
+                                Enregistrer pour plus tard
+                            </a>
+                            {{end}}
+                        </div>
                     </form>
+
+                    <script>
+                    function journeySearch() {
+                        return {
+                            selectedBeneficiaryId: '{{.ViewState.passengerid}}',
+                        }
+                    }
+
+                    function beneficiaryAutocomplete() {
+                        const beneficiaries = [
+                            {{range .ViewState.beneficiaries_list}}
+                            {
+                                id: '{{.ID}}',
+                                name: '{{.Data.first_name}} {{.Data.last_name}}',
+                                address: {{json .Data.address}}
+                            },
+                            {{end}}
+                        ];
+
+                        return {
+                            input: '',
+                            showResults: false,
+                            filteredBeneficiaries: [],
+                            selectedBeneficiary: null,
+
+                            init() {
+                                // Set initial value if passengerid is set
+                                const currentPassengerId = '{{.ViewState.passengerid}}';
+                                if (currentPassengerId) {
+                                    const beneficiary = beneficiaries.find(b => b.id === currentPassengerId);
+                                    if (beneficiary) {
+                                        this.input = beneficiary.name;
+                                        this.selectedBeneficiary = beneficiary;
+                                    }
+                                }
+                            },
+
+                            onInput() {
+                                if (this.input.length === 0) {
+                                    this.filteredBeneficiaries = [];
+                                    this.selectedBeneficiary = null;
+                                    this.updatePassengerId('');
+                                    return;
+                                }
+
+                                this.filteredBeneficiaries = beneficiaries.filter(beneficiary =>
+                                    beneficiary.name.toLowerCase().includes(this.input.toLowerCase())
+                                ).slice(0, 10); // Limit to 10 results
+                            },
+
+                            selectBeneficiary(beneficiary) {
+                                this.input = beneficiary.name;
+                                this.selectedBeneficiary = beneficiary;
+                                this.showResults = false;
+                                this.updatePassengerId(beneficiary.id);
+                                this.setDepartureAddress(beneficiary.address);
+                            },
+
+                            updatePassengerId(id) {
+                                const passengerInput = document.querySelector('input[name="passengerid"]');
+                                if (passengerInput) {
+                                    passengerInput.value = id;
+                                }
+                            },
+
+                            setDepartureAddress(address) {
+                                if (address) {
+                                    // Find the departure address autocomplete container
+                                    const departureContainer = document.querySelector('input[name="departure"]').closest('[x-data]');
+                                    if (departureContainer && departureContainer._x_dataStack && departureContainer._x_dataStack[0]) {
+                                        const addressAutocomplete = departureContainer._x_dataStack[0];
+                                        // Update the address autocomplete component directly
+                                        addressAutocomplete.address = JSON.stringify(address);
+                                        addressAutocomplete.addressObject = address;
+                                        addressAutocomplete.input = address.properties.label;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    </script>
                 </div>
             </div>
         </div>
@@ -113,6 +223,8 @@
                 </div>
             </div>
         </section>
+            {{else}}
+            {{template "saved_searches" .}}
             {{end}}
         </div>
     </div>
diff --git a/web/layouts/organized_carpool/_partials/driver_documents.html b/web/layouts/organized_carpool/_partials/driver_documents.html
new file mode 100644
index 0000000..40f1d3b
--- /dev/null
+++ b/web/layouts/organized_carpool/_partials/driver_documents.html
@@ -0,0 +1,137 @@
+{{define "driver_files"}}
+<div class="px-4 py-6 sm:px-6"
+x-data="{
+    fields: {
+        name: null,
+        type: null,
+        file: null,
+    },
+    rules: {
+        name: ['required'],
+        type: ['required'],
+        file: ['required'],
+    },
+    formValidation: {
+        valid: false,
+        fields: {
+            name: {valid: null},
+            type: {valid: null},
+            file: {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
+    }
+}">
+    {{if eq (len .ViewState.documents) 0}}
+    <p class="p-12 text-gray-500 text-center text-md">Aucun document</p>
+    {{end}}
+
+
+    {{if gt (len .ViewState.documents) 0}}
+
+    <div class="-mx-4 mb-10 ring-1 ring-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
+        <table class="min-w-full divide-y divide-gray-300">
+          <thead>
+            <tr>
+              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Type</th>
+              <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Nom du document</th>
+              <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Ajouté le</th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {{range .ViewState.documents}}
+            <tr>
+              <td class="relative py-4 pl-4 sm:pl-6 pr-3 text-sm">
+                <div class="font-medium text-gray-900">
+                    <span class="bg-co-blue text-xs text-white rounded-xl p-1 mr-2">{{index $.ViewState.file_types_map .Metadata.Type}}</span>
+                </div>
+              </td>
+              <td class="px-3 py-3.5 text-sm text-gray-900 lg:table-cell">{{.Metadata.Name}}</td>
+              <td class="px-3 py-3.5 text-sm text-gray-500 lg:table-cell">{{.LastModified.Format "02/01/2006"}}</td>
+              <td class="relative py-3.5 pl-3 pr-4 sm:pr-6 text-right text-sm font-medium">
+                <a href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/documents/{{.FileName}}" target="_blank">
+                <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30">Télécharger<span class="sr-only"> le document</span></button>
+                </a>
+              </td>
+            </tr>
+            {{end}}
+
+
+            <!-- More plans... -->
+          </tbody>
+        </table>
+      </div>
+
+    {{end}}
+
+    <h3 class="text-lg">Ajouter un document</h3>
+    <form method="POST" action="/app/organized-carpool/drivers/{{.ViewState.driver.ID}}/documents"  @submit="submit"  enctype="multipart/form-data">
+        <div class="md:grid md:grid-cols-6 p-2">
+            <div class="sm:col-span-2">
+                <label for="type" class="block text-sm font-medium text-gray-700">Type</label>
+                <select id="type" name="type" class="mt-1 block w-full rounded-l-2xl border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    x-model="fields.type" @blur="validateField('type')"
+                    :class="formValidation.fields.type.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                    <option value="" selected>Sélectionner un type</option>
+                    {{range .ViewState.drivers_file_types}}
+                    <option value="{{.}}">{{index $.ViewState.file_types_map .}}</option>
+                    {{end}}
+                </select>
+              </div>
+              <div class="sm:col-span-4">
+                <label for="name" class="block text-sm font-medium text-gray-700">Nom</label>
+                      <input type="text" name="name" id="name"
+                          placeholder="Nom du fichier"
+                          class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm  rounded-r-2xl p-2"
+                          x-model="fields.name" @blur="validateField('name')"
+                          :class="formValidation.fields.name.valid == false ? 'border-co-red border-2' : 'border-gray-300'" />
+              </div>
+              <div class="sm:col-span-6 mt-4">
+                <label for="cover-photo" class="block text-sm font-medium text-gray-700">Téléchargement</label>
+                <div class="mt-1 flex justify-center rounded-md border-2 border-dashed px-6 pt-5 pb-6"
+                x-on:drop="console.log('toto')"
+                :class="formValidation.fields.file.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                  <div class="space-y-1 text-center">
+                    {{.IconSet.Icon "hero:outline/folder-plus" "mx-auto h-12 w-12 text-gray-400"}}
+                    <div class="flex text-sm text-gray-600">
+                      <label for="file-upload" class="relative cursor-pointer rounded-md bg-white font-medium text-co-blue focus-within:outline-none focus-within:ring-2 focus-within:ring-co-blue focus-within:ring-offset-2 hover:text-co-blue">
+                        <span>Sélectionnez un fichier </span>
+                        <input id="file-upload" name="file-upload" type="file" class="sr-only"
+                        x-model="fields.file" @blur="validateField('file')">
+                      </label>
+                      <!-- <p class="pl-1">ou glissez-déposez</p>  -->
+
+
+                    </div>
+                    <p class="text-xs text-gray-500">Jusqu'à 10MB</p>
+                    <template x-if="fields.file">
+                      <p class="text-co-blue p-2" x-text="fields.file"></p>
+                    </template>
+                  </div>
+                </div>
+              </div>
+        </div>
+        <button type="submit"
+            class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
+            Ajouter le document
+        </button>
+    </form>
+
+</div>
+{{end}}
\ No newline at end of file
diff --git a/web/layouts/organized_carpool/_partials/journey_preview.html b/web/layouts/organized_carpool/_partials/journey_preview.html
index 19dcfdd..526dd6f 100644
--- a/web/layouts/organized_carpool/_partials/journey_preview.html
+++ b/web/layouts/organized_carpool/_partials/journey_preview.html
@@ -42,6 +42,14 @@
                                 <dt class="text-sm font-medium text-gray-500">Prix (passager)</dt>
             <dd class="mt-1 text-sm text-gray-900">0 EUR</dd>
                             </div>
+                            <div class="sm:col-span-1">
+                                <dt class="text-sm font-medium text-gray-500">Distance passager</dt>
+            			<dd class="mt-1 text-sm text-gray-900">{{ printf "%.2f" .journey.ExtraMembers.passenger_distance }} km</dd>
+                            </div>
+                            <div class="sm:col-span-1">
+                                <dt class="text-sm font-medium text-gray-500">Distance conducteur</dt>
+            			<dd class="mt-1 text-sm text-gray-900">{{ printf "%.2f" .journey.ExtraMembers.driver_distance }} km</dd>
+                            </div>
                         </dl>
                     </div>
                     <div>
@@ -149,6 +157,16 @@
                                 <dd class="mt-1 text-sm text-gray-900">{{.driver.Data.file_number}}</dd>
                             </div>
                             {{end}}
+                            <div class="sm:col-span-1">
+                                <dt class="text-sm font-medium text-gray-500">Profil validé</dt>
+                                <dd class="mt-1 text-sm text-gray-900">
+                                    {{if carpoolDriverValidatedProfile .driver (carpoolDocuments .driver.ID) }}
+                                    <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Oui</span>
+                                    {{else}}
+                                    <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
+                                    {{end}}
+                                </dd>
+                            </div>
                         </dl>
                     </div>
 
@@ -269,6 +287,16 @@
                                 <dd class="mt-1 text-sm text-gray-900">{{.passenger.Data.file_number}}</dd>
                             </div>
                             {{end}}
+                            <div class="sm:col-span-1">
+                                <dt class="text-sm font-medium text-gray-500">Profil validé</dt>
+                                <dd class="mt-1 text-sm text-gray-900">
+                                    {{if carpoolDriverValidatedProfile .passenger (carpoolDocuments .passenger.ID) }}
+                                    <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Oui</span>
+                                    {{else}}
+                                    <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
+                                    {{end}}
+                                </dd>
+                            </div>
                             <div class="sm:col-span-1">
                                 <dt class="text-sm font-medium text-gray-500">Compte mobilié (solde)</dt>
                                 <dd class="mt-1 text-sm text-gray-900">{{if .passenger.Data.wallet}}{{ .passenger.Data.wallet }}{{else}}0{{end}} EUR</dd>
diff --git a/web/layouts/solidarity_transport/_partials/journey_preview.html b/web/layouts/solidarity_transport/_partials/journey_preview.html
index fae5e3b..cd967be 100644
--- a/web/layouts/solidarity_transport/_partials/journey_preview.html
+++ b/web/layouts/solidarity_transport/_partials/journey_preview.html
@@ -50,8 +50,31 @@
                             </div>
                             <div class="sm:col-span-1">
                                 <dt class="text-sm font-medium text-gray-500">Prix (passager)</dt>
-                                <dd class="mt-1 text-sm text-gray-900">{{ .driver_journey.Price.Amount }} {{ .driver_journey.Price.Currency}}</dd>
+                                <dd class="mt-1 text-sm text-gray-900">
+                                    {{if .pricing_result}}
+                                        {{ printf "%.2f" .pricing_result.passenger.Amount }} {{.pricing_result.passenger.Currency}}
+                                    {{else if .booking}}
+                                        {{ printf "%.2f" .booking.Journey.Price.Amount }} {{.booking.Journey.Price.Currency}}
+                                    {{else}}
+                                        0.00 EUR
+                                    {{end}}
+                                </dd>
                             </div>
+                            {{if and .pricing_result .pricing_result.driver (gt .pricing_result.driver.Amount 0.0)}}
+                            <div class="sm:col-span-1">
+                                <dt class="text-sm font-medium text-gray-500">Indemnité conducteur</dt>
+                                <dd class="mt-1 text-sm text-gray-900">{{ printf "%.2f" .pricing_result.driver.Amount }} {{.pricing_result.driver.Currency}}</dd>
+                            </div>
+                            {{else if .booking}}
+                                {{if .booking.DriverCompensationAmount}}
+                                    {{if gt . 0.0}}
+                                    <div class="sm:col-span-1">
+                                        <dt class="text-sm font-medium text-gray-500">Indemnité conducteur</dt>
+                                        <dd class="mt-1 text-sm text-gray-900">{{ printf "%.2f" . }} {{.booking.DriverCompensationCurrency}}</dd>
+                                    </div>
+                                    {{end}}
+                                {{end}}
+                            {{end}}
                         </dl>
                     </div>
   <div>
diff --git a/web/layouts/solidarity_transport/booking_display.html b/web/layouts/solidarity_transport/booking_display.html
index cb64024..b2ae86b 100644
--- a/web/layouts/solidarity_transport/booking_display.html
+++ b/web/layouts/solidarity_transport/booking_display.html
@@ -3,124 +3,209 @@
     <h1 class="text-2xl font-semibold text-gray-900">
       Transport solidaire
     </h1>
-    {{if and .ViewState.booking.Data.motivation (or (or (eq .ViewState.booking.Data.motivation "Santé") (eq .ViewState.booking.Data.motivation "Insertion")) (eq .ViewState.booking.Data.motivation "Administratif"))}}<div class="mt-4"><span class="text-sm p-2 bg-co-green text-white rounded-2xl">Trajet garanti : {{.ViewState.booking.Data.motivation}}</span></div>{{end}}
-      {{ if eq .ViewState.booking.Status "WAITING_CONFIRMATION"}}
-      <div class="mt-4"><span class="p-2 text-sm bg-gray-300 rounded-2xl px-4">Attente confirmation</span></div>
-      {{ else if eq .ViewState.booking.Status "VALIDATED"}}
-      <div class="mt-4"><span class="p-1 text-sm bg-co-green rounded-2xl px-4">Validé</span></div>
-      {{ else if eq .ViewState.booking.Status "CANCELLED"}}
-  <div class="mt-4"><span class="p-1 text-sm bg-co-red text-white rounded-2xl px-4">Annulé : {{.ViewState.booking.Data.reason}}</span></div>
-      {{ end }}
-<div
-  class="mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">
 
+    {{if and .ViewState.booking.Data.motivation (or (or (eq .ViewState.booking.Data.motivation "Santé") (eq .ViewState.booking.Data.motivation "Insertion")) (eq .ViewState.booking.Data.motivation "Administratif"))}}
+    <div class="mt-4"><span class="text-sm p-2 bg-co-green text-white rounded-2xl">Trajet garanti : {{.ViewState.booking.Data.motivation}}</span></div>
+    {{end}}
 
-    {{$dialog := "modif"}}
-<div  x-data="{ {{ $dialog }}: false}">
-  <button @click="{{ $dialog }} = !{{ $dialog }}" type="button" class="bg-white border-gray-300 border px-4 py-2 text-gray-700 items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
-    Modifier
-  </button>
-  <div x-show="{{$dialog}}" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-     <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
-        
-     <div class="fixed inset-0 z-10 overflow-y-auto">
-       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+    {{ if eq .ViewState.booking.Status "WAITING_CONFIRMATION"}}
+    <div class="mt-4"><span class="p-2 text-sm bg-gray-300 rounded-2xl px-4">Attente confirmation</span></div>
+    {{ else if eq .ViewState.booking.Status "VALIDATED"}}
+    <div class="mt-4"><span class="p-1 text-sm bg-co-green rounded-2xl px-4">Validé</span></div>
+    {{ else if eq .ViewState.booking.Status "CANCELLED"}}
+    <div class="mt-4"><span class="p-1 text-sm bg-co-red text-white rounded-2xl px-4">Annulé{{if .ViewState.booking.Data.reason}} : {{.ViewState.booking.Data.reason}}{{end}}</span></div>
+    {{ end }}
 
-         <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full max-w-lg sm:p-6">
-           <form method="POST">
-             <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue text-white">
+    <div class="mt-6 flex justify-end space-x-3">
+      {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION" }}
+      <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/confirm" class="inline-flex">
+        <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
+          Confirmer
+        </button>
+      </a>
+      {{end}}
+
+      {{if ne .ViewState.booking.Status "WAITING_CONFIRMATION" }}
+      <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/waitconfirmation" class="inline-flex">
+        <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
+          Remettre en attente
+        </button>
+      </a>
+      {{end}}
+
+      {{if ne .ViewState.booking.Status "CANCELLED" }}
+      {{$dialog := "cancel"}}
+      <div x-data="{ {{ $dialog }}: false}">
+        <button @click="{{ $dialog }} = !{{ $dialog }}" type="button" class="bg-co-red border-gray-300 border px-4 py-2 text-white items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
+          Annuler
+        </button>
+        <div x-show="{{$dialog}}" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+          <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+          <div class="fixed inset-0 z-10 overflow-y-auto">
+            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+
+              <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full max-w-lg sm:p-6">
+                <form method="POST" action="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/cancel">
+                  <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue text-white">
                     {{$.IconSet.Icon "hero:outline/information-circle" "h-6 w-6"}}
-             </div>
-             <div class="mt-3 text-center sm:mt-5">
-               <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Modifier</h3>
-               <div class="mt-2">
-                 <p class="text-sm text-gray-500"></p>
-               </div>
-               <div>
-                 <label for="driver_distance" class="block text-sm font-medium text-gray-700">Kilomètres conducteur</label>
-                 <div class="mt-1">
-                    <input type="text" name="driver_distance" id="driver_distance" class="block w-full rounded-2xl border-gray-300 shadow-sm focus:border-co-blue focus:ring-co-blue sm:text-sm" value="{{.ViewState.booking.Journey.DriverDistance}}" />
-                 </div>
-               </div>
-             </div>
-             <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2">
-               <button @click="{{$dialog}} = !{{$dialog}}" type="button" class="mt-3 inline-flex w-full justify-center rounded-l-2xl border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-1 sm:mt-0 sm:text-sm">Annuler</button>
-               <button type="submit" class="inline-flex w-full justify-center rounded-r-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-2 sm:text-sm">Valider</button>
-             </div>
-           </form>
-         </div>
-       </div>
-     </div>
-</div>
+                  </div>
+                  <div class="mt-3 text-center sm:mt-5">
+                    <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Annuler</h3>
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-500">Sélectionnez la raison de l'annulation</p>
+                    </div>
+                    <div>
+                      <label for="reason" class="block text-sm font-medium text-gray-700">Raison de l'annulation</label>
+                      <div class="mt-1">
+                        <select name="reason" id="reason" class="block w-full rounded-2xl border-gray-300 shadow-sm focus:border-co-blue focus:ring-co-blue sm:text-sm">
+                          <option value="Trajet annulé par le passager">Trajet annulé par le passager</option>
+                          <option value="Trajet non réalisé">Trajet non réalisé</option>
+                          <option value="Refusé par le bénévole">Refusé par le bénévole</option>
+                          <option value="Autre" selected="selected">Autre</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2">
+                    <button @click="{{$dialog}} = !{{$dialog}}" type="button" class="mt-3 inline-flex w-full justify-center rounded-l-2xl border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-1 sm:mt-0 sm:text-sm">Annuler</button>
+                    <button type="submit" class="inline-flex w-full justify-center rounded-r-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-2 sm:text-sm">Confirmer</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {{end}}
+
+      <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&passengerid={{.ViewState.booking.PassengerId}}" class="inline-flex">
+        <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
+          Dupliquer
+        </button>
+      </a>
+
+      {{if eq .ViewState.booking.Status "CANCELLED" }}
+      <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&departuredate={{ .ViewState.booking.Journey.PassengerPickupDate.Format "2006-01-02"}}&departuretime={{ (timeFrom .ViewState.booking.Journey.PassengerPickupDate).Format "15:04"}}&passengerid={{.ViewState.booking.PassengerId}}&solidarity_transport_exclude_driver={{.ViewState.booking.DriverId}}" class="inline-flex">
+        <button type="button" class="px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
+          Solliciter un autre conducteur
+        </button>
+      </a>
+      {{end}}
+    </div>
 </div>
 
-  <!-- <button type="button"
-       class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Supprimer</button> -->
-  <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&passengerid={{.ViewState.booking.PassengerId}}" class="inline-flex"><button type="button"
-     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Dupliquer</button></a>
-  {{if eq .ViewState.booking.Status "CANCELLED" }}
-  <a href="/app/journeys/?departure={{json .ViewState.booking.Journey.PassengerPickup}}&destination={{ json .ViewState.booking.Journey.PassengerDrop }}&departuredate={{ .ViewState.booking.Journey.PassengerPickupDate.Format "2006-01-02"}}&departuretime={{ (timeFrom .ViewState.booking.Journey.PassengerPickupDate).Format "15:04"}}&passengerid={{.ViewState.booking.PassengerId}}&solidarity_transport_exclude_driver={{.ViewState.booking.DriverId}}" class="inline-flex"><button type="button"
-     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Solliciter un autre conducteur</button></a>
-  {{end}}
-  {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION" }}
-  <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/confirm" class="inline-flex"><button type="button"
-     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Confirmer</button></a>
-  {{end}}
-  {{if ne .ViewState.booking.Status "WAITING_CONFIRMATION" }}
-  <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/waitconfirmation" class="inline-flex"><button type="button"
-     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Remettre en attente</button></a>
-  {{end}}
-  {{if ne .ViewState.booking.Status "CANCELLED" }}
-  <!--<a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/cancel" class="inline-flex"><button type="button"
-     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-red hover:bg-co-red focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Annuler</button></a>-->
-{{$dialog := "cancel"}}
-<div  x-data="{ {{ $dialog }}: false}">
-  <button @click="{{ $dialog }} = !{{ $dialog }}" type="button" class="bg-co-red border-gray-300 border px-4 py-2 text-white items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
-    Annuler 
-  </button>
-  <div x-show="{{$dialog}}" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-     <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
-        
-     <div class="fixed inset-0 z-10 overflow-y-auto">
-       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-
-         <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full max-w-lg sm:p-6">
-           <form method="POST" action="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/cancel">
-             <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue text-white">
-                    {{$.IconSet.Icon "hero:outline/information-circle" "h-6 w-6"}}
-             </div>
-             <div class="mt-3 text-center sm:mt-5">
-               <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Annuler</h3>
-               <div class="mt-2">
-                 <p class="text-sm text-gray-500"></p>
-               </div>
-               <div>
-                 <label for="reason" class="block text-sm font-medium text-gray-700">Raison de l'annulation</label>
-                 <div class="mt-1">
-                    <select name="reason" id="reason" class="block w-full rounded-2xl border-gray-300 shadow-sm focus:border-co-blue focus:ring-co-blue sm:text-sm">
-                      <option value="Trajet annulé par le passager">Trajet annulé par le passager</option>
-                      <option value="Trajet non réalisé">Trajet non réalisé</option>
-                      <option value="Refusé par le bénévole">Refusé par le bénévole</option>
-                      <option value="Autre" selected="selected">Autre</option>
-                    </select>
-                 </div>
-               </div>
-             </div>
-             <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2">
-               <button @click="{{$dialog}} = !{{$dialog}}" type="button" class="mt-3 inline-flex w-full justify-center rounded-l-2xl border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-1 sm:mt-0 sm:text-sm">Annuler</button>
-               <button type="submit" class="inline-flex w-full justify-center rounded-r-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-2 sm:text-sm">Valider</button>
-             </div>
-           </form>
-         </div>
-       </div>
-     </div>
-  </div>
-</div>
-  {{end}}
-</div>
-</div>
 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
-  {{template "journey_preview" (dict "driver_journey" .ViewState.booking.Journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries "passenger_wallet_balance" .ViewState.passenger_wallet_balance)}}
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+    <!-- Booking Details -->
+    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+      <div class="px-4 py-5 sm:px-6">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">Détails du transport solidaire</h3>
+        <p class="mt-1 max-w-2xl text-sm text-gray-500">Informations sur le trajet</p>
+      </div>
+      <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
+        <dl class="sm:divide-y sm:divide-gray-200">
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Conducteur</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <a class="text-co-blue" href="/app/solidarity-transport/drivers/{{ .ViewState.driver.ID }}">{{ .ViewState.driver.Data.first_name }} {{ .ViewState.driver.Data.last_name }}</a>
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Passager</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <a class="text-co-blue" href="/app/beneficiaries/{{ .ViewState.passenger.ID }}">{{ .ViewState.passenger.Data.first_name }} {{ .ViewState.passenger.Data.last_name }}</a>
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Départ conducteur</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Journey.DriverDeparture.Properties.label }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Prise en charge passager</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Journey.PassengerPickup.Properties.label }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Dépose passager</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Journey.PassengerDrop.Properties.label }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Arrivée conducteur</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Journey.DriverArrival.Properties.label }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Date et heure</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ timeFormat .ViewState.booking.Journey.PassengerPickupDate "02/01/2006 15:04" }}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Type de trajet</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{if .ViewState.booking.Journey.Noreturn}}
+                Aller simple (pas de retour)
+              {{else}}
+                Aller-retour ({{.ViewState.booking.ReturnWaitingDuration | shortDuration}} d'attente estimée sur place)
+              {{end}}
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Distance passager</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Journey.PassengerDistance }} km
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Distance conducteur</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Journey.DriverDistance }} km
+            </dd>
+          </div>
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Prix (passager)</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <span class="font-medium">{{ printf "%.2f" .ViewState.booking.Journey.Price.Amount }} {{ .ViewState.booking.Journey.Price.Currency }}</span>
+            </dd>
+          </div>
+          {{if .ViewState.booking.DriverCompensationAmount}}
+            {{if gt .ViewState.booking.DriverCompensationAmount 0.0}}
+            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="text-sm font-medium text-gray-500">Indemnité conducteur</dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                <span class="font-medium">{{ printf "%.2f" .ViewState.booking.DriverCompensationAmount }} {{.ViewState.booking.DriverCompensationCurrency}}</span>
+              </dd>
+            </div>
+            {{end}}
+          {{end}}
+          {{if .ViewState.booking.Data.motivation}}
+          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-gray-500">Motif</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              {{ .ViewState.booking.Data.motivation }}
+            </dd>
+          </div>
+          {{end}}
+        </dl>
+      </div>
+    </div>
+
+    <!-- Map -->
+    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+      <div class="border-t border-gray-200 h-full">
+        <div class="h-full min-h-96">
+          {{ template "journey_map" (dict "driver_journey" .ViewState.booking.Journey) }}
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 {{ end }}
diff --git a/web/layouts/solidarity_transport/driver_journey.html b/web/layouts/solidarity_transport/driver_journey.html
index 510f699..5a4c3b4 100644
--- a/web/layouts/solidarity_transport/driver_journey.html
+++ b/web/layouts/solidarity_transport/driver_journey.html
@@ -26,11 +26,11 @@
       </div>
 </div>
 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
-  {{template "journey_preview" (dict "driver_journey" .ViewState.driver_journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries "passenger_wallet_balance" .ViewState.passenger_wallet_balance)}}
+  {{template "journey_preview" (dict "driver_journey" .ViewState.driver_journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries "passenger_wallet_balance" .ViewState.passenger_wallet_balance "pricing_result" .ViewState.pricing_result)}}
           {{if ne .ViewState.passenger.ID ""}}
 <div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex flex-col justify-items-center">
   {{if .ViewState.passenger}}
-  {{if lt .ViewState.passenger_wallet_balance .ViewState.driver_journey.Price.Amount}}
+  {{if lt .ViewState.passenger_wallet_balance .ViewState.pricing_result.passenger.Amount}}
     <p class="text-xl text-co-red text-center p-4">Le solde du compte mobilité est insuffisant.</p>
     {{end}}
   <form method="POST">
diff --git a/web/layouts/vehicles/bookings-list.html b/web/layouts/vehicles/bookings-list.html
index d6f9538..8958287 100644
--- a/web/layouts/vehicles/bookings-list.html
+++ b/web/layouts/vehicles/bookings-list.html
@@ -55,7 +55,11 @@
                             {{range .ViewState.bookings}}
                             <tr>
                                 <td class="flex-col py-4 pl-4 pr-3 text-sm sm:pl-6 text-center">
-                                    {{if .Data.administrator_unavailability}}
+                                    {{if .Deleted}}
+                                    <span class="p-1 bg-co-red text-white text-xs font-bold rounded-xl" >
+                                        Supprimé
+                                    </span>
+                                    {{else if .Data.administrator_unavailability}}
                                     <span class="p-1 bg-black text-white text-xs font-bold rounded-xl" >
                                         Retiré
                                     </span>
diff --git a/web/layouts/vehicles_management/_partials/bookings-list.html b/web/layouts/vehicles_management/_partials/bookings-list.html
index d294fb7..5a0e3f3 100644
--- a/web/layouts/vehicles_management/_partials/bookings-list.html
+++ b/web/layouts/vehicles_management/_partials/bookings-list.html
@@ -39,7 +39,7 @@
                                     <span class="p-1 bg-black text-white text-xs font-bold rounded-xl" >
                                         Retiré
                                     </span>
-                                    {{else if or .Deleted .Data.Deleted}}
+                                    {{else if .Deleted}}
                                     <span class="p-1 bg-black text-white text-xs font-bold rounded-xl" >
                                         Annulé
                                     </span>
diff --git a/web/layouts/vehicles_management/booking-display.html b/web/layouts/vehicles_management/booking-display.html
index 6862c90..803fef9 100644
--- a/web/layouts/vehicles_management/booking-display.html
+++ b/web/layouts/vehicles_management/booking-display.html
@@ -17,7 +17,7 @@
                     return true
                 }
             }">
-            {{if and (ne .ViewState.booking.Status -1) (not (or .ViewState.booking.Deleted .ViewState.booking.Data.Deleted))}}
+            {{if and (ne .ViewState.booking.Status -1) (not .ViewState.booking.Deleted)}}
             <button type="button" @click="changeVehicle = ! changeVehicle"
                 class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">
                 Changer de véhicule
@@ -135,9 +135,18 @@
                 <div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
                     <div class="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
                         <div class="ml-4 mt-4">
-                            {{if or .ViewState.booking.Data.Deleted .ViewState.booking.Deleted}}
-                            <h3 class="text-lg leading-6 font-medium text-gray-900">Réservation annulée le {{(timeFrom .ViewState.booking.Unavailableto).Format "02/01/2006"}}</h3>
+                            {{if .ViewState.booking.Deleted}}
+                            <h3 class="text-lg leading-6 font-medium text-gray-900">Réservation annulée le {{if .ViewState.booking.Data.deleted_at}}{{(timeFrom .ViewState.booking.Data.deleted_at).Format "02/01/2006"}}{{else}}{{(timeFrom .ViewState.booking.Unavailableto).Format "02/01/2006"}}{{end}}</h3>
+                            {{if .ViewState.booking.Data.deleted_by}}
+                            <p class="mt-1 text-sm text-gray-500">
+                                Annulée par : {{index (index .ViewState.booking.Data.deleted_by "user") "display_name"}} ({{index (index .ViewState.booking.Data.deleted_by "group") "name"}})
+                            </p>
+                            {{end}}
+                            {{if .ViewState.booking.Data.reason}}
+                            <p class="mt-1 text-sm text-gray-500">Motif : {{.ViewState.booking.Data.reason}}</p>
+                            {{else if .ViewState.booking.Data.motif}}
                             <p class="mt-1 text-sm text-gray-500">Motif : {{.ViewState.booking.Data.motif}}</p>
+                            {{end}}
                             {{else}}
                             <h3 class="text-lg leading-6 font-medium text-gray-900">Réservation</h3>
                             <p class="mt-1 text-sm text-gray-500">Informations utiles sur la réservation.</p>
@@ -211,7 +220,7 @@
                                     x-data="{ updateOpen: false }">
                                     <div class="w-full inline-flex" x-show="!updateOpen">
                                         <div class="flex-1">{{(timeFrom .ViewState.booking.Startdate).Format "02/01/2006"}}</div>
-                                        {{if (not (or .ViewState.booking.Deleted .ViewState.booking.Data.Deleted))}}
+                                        {{if (not .ViewState.booking.Deleted)}}
                                         <a href="#" class="text-co-blue hover:text-co-blue ml-5" @click="updateOpen = ! updateOpen">Modifier</a>
                                         {{end}}
                                     </div>
@@ -233,7 +242,7 @@
                                         x-data="{ updateOpen: false }">
                                         <div class="w-full inline-flex" x-show="!updateOpen">
                                             <div class="flex-1">{{(timeFrom .ViewState.booking.Enddate).Format "02/01/2006"}}</div>
-                                            {{if (not (or .ViewState.booking.Deleted .ViewState.booking.Data.Deleted))}}
+                                            {{if (not .ViewState.booking.Deleted)}}
                                             <a href="#" class="text-co-blue hover:text-co-blue ml-5" @click="updateOpen = ! updateOpen">Modifier</a>
                                             {{end}}
                                         </div>
@@ -255,7 +264,7 @@
                                     x-data="{ updateOpen: false }">
                                     <div class="w-full inline-flex" x-show="!updateOpen">
                                         <div class="flex-1">{{(timeFrom .ViewState.booking.Unavailablefrom).Format "02/01/2006"}}</div>
-                                        {{if (not (or .ViewState.booking.Deleted .ViewState.booking.Data.Deleted))}}
+                                        {{if (not .ViewState.booking.Deleted)}}
                                         <a href="#" class="text-co-blue hover:text-co-blue ml-5" @click="updateOpen = ! updateOpen">Modifier</a>
                                         {{end}}
                                     </div>
@@ -277,7 +286,7 @@
                                     x-data="{ updateOpen: false }">
                                     <div class="w-full inline-flex" x-show="!updateOpen">
                                         <div class="flex-1">{{(timeFrom .ViewState.booking.Unavailableto).Format "02/01/2006"}}</div>
-                                        {{if (not (or .ViewState.booking.Deleted .ViewState.booking.Data.Deleted))}}
+                                        {{if (not .ViewState.booking.Deleted)}}
                                         <a href="#" class="text-co-blue hover:text-co-blue ml-5" @click="updateOpen = ! updateOpen">Modifier</a>
                                         {{end}}
                                     </div>
diff --git a/web/layouts/vehicles_management/fleet-display.html b/web/layouts/vehicles_management/fleet-display.html
index 6521568..b2bc674 100644
--- a/web/layouts/vehicles_management/fleet-display.html
+++ b/web/layouts/vehicles_management/fleet-display.html
@@ -110,7 +110,7 @@
                                                     <span class="p-1 bg-black text-white text-xs font-bold rounded-xl" >
                                                         Retiré
                                                     </span>
-                                                    {{else if or .Deleted .Data.Deleted}}
+                                                    {{else if .Deleted}}
                                                     <span class="p-1 bg-co-red text-white text-xs font-bold rounded-xl" >
                                                         Annulé
                                                     </span>
diff --git a/web/public/css/main.css b/web/public/css/main.css
index 4c1b062..e1f28fd 100644
--- a/web/public/css/main.css
+++ b/web/public/css/main.css
@@ -8,6 +8,7 @@
       "Courier New", monospace;
     --color-red-500: oklch(0.637 0.237 25.331);
     --color-red-600: oklch(0.577 0.245 27.325);
+    --color-red-900: oklch(0.396 0.141 25.723);
     --color-green-100: oklch(0.962 0.044 156.743);
     --color-green-600: oklch(0.627 0.194 149.214);
     --color-green-800: oklch(0.448 0.119 151.328);
@@ -57,7 +58,6 @@
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
-    --tracking-wider: 0.05em;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -472,9 +472,6 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .-my-1 {
-    margin-block: calc(var(--spacing) * -1);
-  }
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
@@ -523,9 +520,6 @@
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
-  .-mr-1 {
-    margin-right: calc(var(--spacing) * -1);
-  }
   .-mr-1\.5 {
     margin-right: calc(var(--spacing) * -1.5);
   }
@@ -710,9 +704,6 @@
   .h-50 {
     height: calc(var(--spacing) * 50);
   }
-  .h-96 {
-    height: calc(var(--spacing) * 96);
-  }
   .h-full {
     height: 100%;
   }
@@ -731,27 +722,24 @@
   .min-h-96 {
     min-height: calc(var(--spacing) * 96);
   }
-  .min-h-100 {
-    min-height: calc(var(--spacing) * 100);
-  }
   .min-h-full {
     min-height: 100%;
   }
   .min-h-screen {
     min-height: 100vh;
   }
-  .w-0 {
-    width: calc(var(--spacing) * 0);
-  }
   .w-0\.5 {
     width: calc(var(--spacing) * 0.5);
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
+  .w-1\/6 {
+    width: calc(1/6 * 100%);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -1979,9 +1967,6 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2018,9 +2003,6 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
-  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -2205,10 +2187,6 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
   .text-balance {
     text-wrap: balance;
   }
@@ -2998,6 +2976,13 @@
       }
     }
   }
+  .hover\:text-red-900 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-900);
+      }
+    }
+  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {