diff --git a/config.yaml b/config.yaml
index af8d537..7642553 100644
--- a/config.yaml
+++ b/config.yaml
@@ -218,8 +218,13 @@ views:
   solidarity_service: 
     list:
       files:
-        - web/layouts/_partials/address_autocomplete.html
         - web/layouts/solidarity_service/main.html
+        - web/layouts/solidarity_service/_partials/beneficiary-list.html
+        - web/layouts/solidarity_service/_partials/driver-list.html
+    create:
+      files:
+        - web/layouts/_partials/address_autocomplete.html
+        - web/layouts/solidarity_service/_partials/create-booking.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/beneficiary-list.html b/web/layouts/solidarity_service/_partials/beneficiary-list.html
new file mode 100644
index 0000000..170ae55
--- /dev/null
+++ b/web/layouts/solidarity_service/_partials/beneficiary-list.html
@@ -0,0 +1,146 @@
+{{define "beneficiary_solidarity_list"}}
+<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">
+            Bénéficiaires Silvermobi
+        </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="GET" name="driver_journeys" @submit="submit">                
+                    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+                                state: {{.ViewState.JSONWithLimits 0 10}},
+                                current: 0,
+                                nb_pages() {
+                                    let nbEl = this.state.count 
+                                    return Math.ceil(nbEl/10)
+                                },
+                                async paginate(page) {
+                                    let start = (page-1)*10
+                                    if(start < 0|| start > this.state.count) {
+                                        return
+                                    }
+                                    let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
+                                    let data = await resp.json()
+                                    this.state.beneficiariessolidarity = data
+                                    this.current=page-1
+                                }
+                            }">
+                        <div class="bg-white shadow sm:rounded-2xl">
+                            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+                                <div class="mt-8 flex flex-col">
+                                    <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                                        <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                                            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                                                <table class="min-w-full divide-y divide-gray-300">
+                                                    <tbody class="divide-y divide-gray-200 bg-white">
+                                                        <template x-for="beneficiary in state.beneficiariessolidarity.passenger">
+                                                            <tr>
+                                                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                                                    <div class="flex items-center">
+                                                                        <button type="button" @click="
+                                                                                document.getElementById('passenger_id').value = beneficiary.id;
+                                                                                document.getElementById('passenger_name').textContent = beneficiary.first_name+' '+beneficiary.last_name" class="ml-4">
+                                                                            <div class="font-medium text-gray-900">
+                                                                                <span
+                                                                                    x-text="beneficiary.first_name" >
+                                                                                </span>
+                                                                                <span
+                                                                                    x-text="beneficiary.last_name">
+                                                                                </span>
+                                                                            </div>
+                                                                            <div class="text-gray-500" x-text="beneficiary.email">                                                                
+                                                                            </div>
+                                                                        </button>
+                                                                    </div>
+                                                                </td>
+                                                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                                    <template x-for="tag in beneficiary.data.tags">
+                                                                        <span
+                                                                            class="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800"
+                                                                            x-text="tag">
+                                                                        </span>
+                                                                    </template>
+                                                                </td>
+                                                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                                                    <a :href="'/app/solidarity_service/create/'+ beneficiary.id"
+                                                                        class="text-co-blue hover:text-co-blue">Demande de trajet<span class="sr-only">
+                                                                    </a>
+                                                                </td>
+                                                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                                                    <a :href="'/app/beneficiaries/' + beneficiary.id"
+                                                                        class="text-co-blue hover:text-co-blue">Voir<span class="sr-only">, <span
+                                                                                x-text="beneficiary.first_name"></span> <span
+                                                                                x-text="beneficiary.last_name"></span>
+                                                                    </a>
+                                                                </td>
+                                                            </tr>
+                                                        </template>
+                                                        <!-- More people... -->
+                                                    </tbody>
+                                                </table>
+                                                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                                                    <div class="flex-1 flex justify-between sm:hidden">
+                                                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                        @click="paginate(current)"> Previous </a>
+                                                        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                        @click="paginate(current+2)"> Next </a>
+                                                    </div>
+                                                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                                    <div>
+                                                        <p class="text-sm text-gray-700">
+                                                            Résultats
+                                                            <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                                            à
+                                                            <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                                            sur
+                                                            <span class="font-medium" x-text="state.count"></span>
+                                                        </p>
+                                                    </div>
+                                                    <div>
+                                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current)">
+                                                            <span class="sr-only">Previous</span>
+                                                            <!-- Heroicon name: solid/chevron-left -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        <template x-for="i in nb_pages">
+                                                            <a href="#" @click="paginate(i)"
+                                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                                            x-text="i"></a>
+                                                        </template>
+                                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current+2)">
+                                                            <span class="sr-only">Next</span>
+                                                            <!-- Heroicon name: solid/chevron-right -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        </nav>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <input type="hidden" id="passenger_id" name="passenger_id" >
+                            <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>
+                    </div>
+                </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</main>
+{{end}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_service/_partials/create-booking.html b/web/layouts/solidarity_service/_partials/create-booking.html
new file mode 100644
index 0000000..e0b687c
--- /dev/null
+++ b/web/layouts/solidarity_service/_partials/create-booking.html
@@ -0,0 +1,165 @@
+{{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">
+            Transport Solidaire
+        </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="GET" name="driver_journeys" @submit="submit">                
+                    
+                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">    
+                            {{ $departureField := "departure" }}
+                            {{ $departureLabel := "Départ" }}
+                            {{ template "address_autocomplete" dict "FieldName" $departureField "FieldLabel" $departureLabel }}
+                    
+                            {{ $destinationField := "destination" }}
+                            {{ $destinationLabel := "Destination" }}
+                            {{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel }}
+    
+                            <div class="py-4 grid grid-cols-2">
+                                <div class="lg:col-span-1">
+                                    <label for="date" class="block text-sm font-medium text-gray-700">Le</label>
+                                    <div class="mt-1">
+                                        <input type="datetime-local" id="date" name="date" 
+                                            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>
+                            <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>
+                </div>
+                </form>
+                <div class="bg-white shadow sm:rounded-2xl">
+
+                    <form class="space-y-6" method="POST" name="create_booking">
+                    
+                        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+                            state: {{.ViewState.JSONWithLimits 0 10}},
+                            current: 0,
+                            nb_pages() {
+                                let nbEl = this.state.count 
+                                return Math.ceil(nbEl/10)
+                            },
+                            async paginate(page) {
+                                let start = (page-1)*10
+                                if(start < 0|| start > this.state.count) {
+                                    return
+                                }
+                                let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
+                                let data = await resp.json()
+                                this.state.drivers = data
+                                this.current=page-1
+                            }
+                        }">
+                        <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
+                            Sélectionner un Conducteurs
+                        </h2>
+                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+
+                            <div class="mt-8 flex flex-col">
+                                <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                                    <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                                        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                                            <table class="min-w-full divide-y divide-gray-300">
+                                                <tbody class="divide-y divide-gray-200 bg-white">
+                                                    <template x-for="driver in state.drivers.driver_journeys">
+                                                        <tr>
+                                                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                                                <div class="flex items-center">
+                                                                    <button type="button" @click="
+                                                                    document.getElementById('driver_id').value = driver.user.id
+                                                                    document.getElementById('driver_name').textContent = driver.user.first_name+' '+driver.user.last_name" class="ml-4">                                                              
+                                                                        <div class="font-medium text-gray-900">
+                                                                            <span
+                                                                            x-text="driver.user.first_name">
+                                                                            </span>
+                                                                            <span
+                                                                                x-text="driver.user.last_name">
+                                                                            </span>
+                                                                        </div>
+                                                                    </button>
+                                                                </div>
+                                                            </td>
+                                                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                                            
+                                                            </td>
+                                                            <td
+                                                                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                                            
+                                                            </td>
+                                                        </tr>
+                                                    </template>
+                        
+                                                    <!-- More people... -->
+                                                </tbody>
+                                            </table>
+                                            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                                                <div class="flex-1 flex justify-between sm:hidden">
+                                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                @click="paginate(current)"> Previous </a>
+                                                <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                                @click="paginate(current+2)"> Next </a>
+                                                </div>
+                                                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                                    <div>
+                                                        <p class="text-sm text-gray-700">
+                                                        Résultats
+                                                        <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                                        à
+                                                        <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                                        sur
+                                                        <span class="font-medium" x-text="state.count"></span>
+                                                        </p>
+                                                    </div>
+                                                    <div>
+                                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current)">
+                                                            <span class="sr-only">Previous</span>
+                                                            <!-- Heroicon name: solid/chevron-left -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        <template x-for="i in nb_pages">
+                                                            <a href="#" @click="paginate(i)"
+                                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                                            x-text="i"></a>
+                                                        </template>
+                                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                                            @click="paginate(current+2)">
+                                                            <span class="sr-only">Next</span>
+                                                            <!-- Heroicon name: solid/chevron-right -->
+                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                                            </svg>
+                                                        </a>
+                                                        </nav>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <p id="driver_name"></p>
+                            <input type="hidden" id="driver_id" name="driver_id" >
+                            <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="Confirmer">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+{{end}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_service/_partials/driver-list.html b/web/layouts/solidarity_service/_partials/driver-list.html
new file mode 100644
index 0000000..5d3b962
--- /dev/null
+++ b/web/layouts/solidarity_service/_partials/driver-list.html
@@ -0,0 +1,128 @@
+
+{{define "driver_solidarity_list" }}
+<main>
+    <form class="space-y-6" method="POST" name="create_booking">
+                        
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
+            state: {{.ViewState.JSONWithLimits 0 10}},
+            current: 0,
+            nb_pages() {
+                let nbEl = this.state.count 
+                return Math.ceil(nbEl/10)
+            },
+            async paginate(page) {
+                let start = (page-1)*10
+                if(start < 0|| start > this.state.count) {
+                    return
+                }
+                let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
+                let data = await resp.json()
+                this.state.drivers = data
+                this.current=page-1
+            }
+        }">
+        <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
+            Sélectionner un Conducteurs
+        </h2>
+        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
+
+            <div class="mt-8 flex flex-col">
+                <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                            <table class="min-w-full divide-y divide-gray-300">
+                                <tbody class="divide-y divide-gray-200 bg-white">
+                                    <span x-text="drivers"></span>
+                                    <template x-for="driver in state.drivers.driver_journeys">
+                                        <tr>
+                                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+                                               
+                                                <div class="flex items-center">
+                                                    <button type="button" @click="
+                                                    document.getElementById('driver_id').value = driver.id
+                                                    document.getElementById('driver_name').textContent = driver.first_name+' '+driver.last_name" class="ml-4">                                                              
+                                                        <div class="font-medium text-gray-900">
+                                                            <span
+                                                            x-text="driver.first_name">
+                                                            </span>
+                                                            <span
+                                                                x-text="driver.last_name">
+                                                            </span>
+                                                        </div>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                            
+                                            </td>
+                                            <td
+                                                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            
+                                            </td>
+                                        </tr>
+                                    </template>
+        
+                                    <!-- More people... -->
+                                </tbody>
+                            </table>
+                            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+                                <div class="flex-1 flex justify-between sm:hidden">
+                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                @click="paginate(current)"> Previous </a>
+                                <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                                @click="paginate(current+2)"> Next </a>
+                                </div>
+                                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                    <div>
+                                        <p class="text-sm text-gray-700">
+                                        Résultats
+                                        <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
+                                        à
+                                        <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
+                                        sur
+                                        <span class="font-medium" x-text="state.count"></span>
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                            @click="paginate(current)">
+                                            <span class="sr-only">Previous</span>
+                                            <!-- Heroicon name: solid/chevron-left -->
+                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                            </svg>
+                                        </a>
+                                        <template x-for="i in nb_pages">
+                                            <a href="#" @click="paginate(i)"
+                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
+                                            x-text="i"></a>
+                                        </template>
+                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                                            @click="paginate(current+2)">
+                                            <span class="sr-only">Next</span>
+                                            <!-- Heroicon name: solid/chevron-right -->
+                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                            </svg>
+                                        </a>
+                                        </nav>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p id="driver_name"></p>
+            <input type="hidden" id="driver_id" name="driver_id" >
+            <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="Confirmer">
+            </div>
+        </div>
+    </form>
+</main>
+{{end}}
\ No newline at end of file
diff --git a/web/layouts/solidarity_service/main.html b/web/layouts/solidarity_service/main.html
index 3444e40..c751773 100644
--- a/web/layouts/solidarity_service/main.html
+++ b/web/layouts/solidarity_service/main.html
@@ -5,286 +5,43 @@
             Transport Solidaire
         </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="GET" name="driver_journeys" @submit="submit">                
-                    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
-                                state: {{.ViewState.JSONWithLimits 0 10}},
-                                current: 0,
-                                nb_pages() {
-                                    let nbEl = this.state.count 
-                                    return Math.ceil(nbEl/10)
-                                },
-                                async paginate(page) {
-                                    let start = (page-1)*10
-                                    if(start < 0|| start > this.state.count) {
-                                        return
-                                    }
-                                    let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
-                                    let data = await resp.json()
-                                    this.state.beneficiariessolidarity = data
-                                    this.current=page-1
-                                }
-                            }">
-                        <div class="bg-white shadow sm:rounded-2xl">
-                            <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
-                                Bénéficiaires
-                            </h2>
-                            <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
-                                <div class="mt-8 flex flex-col">
-                                    <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                                        <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-                                            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                                                <table class="min-w-full divide-y divide-gray-300">
-                                                    <tbody class="divide-y divide-gray-200 bg-white">
-                                                        <template x-for="beneficiary in state.beneficiariessolidarity.passenger">
-                                                            <tr>
-                                                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-                                                                    <div class="flex items-center">
-                                                                        <button type="button" @click="
-                                                                                document.getElementById('passenger_id').value = beneficiary.id;
-                                                                                document.getElementById('passenger_name').textContent = beneficiary.first_name+' '+beneficiary.last_name" class="ml-4">
-                                                                            <div class="font-medium text-gray-900">
-                                                                                <span
-                                                                                    x-text="beneficiary.first_name" >
-                                                                                </span>
-                                                                                <span
-                                                                                    x-text="beneficiary.last_name">
-                                                                                </span>
-                                                                            </div>
-                                                                            <div class="text-gray-500" x-text="beneficiary.email">                                                                
-                                                                            </div>
-                                                                        </button>
-                                                                    </div>
-                                                                </td>
-                                                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                                    <template x-for="tag in beneficiary.data.tags">
-                                                                        <span
-                                                                            class="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800"
-                                                                            x-text="tag">
-                                                                        </span>
-                                                                    </template>
-                                                                </td>
-                                                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                                                                    <a :href="'/app/beneficiaries/' + beneficiary.id"
-                                                                        class="text-co-blue hover:text-co-blue">Voir<span class="sr-only">, <span
-                                                                                x-text="beneficiary.first_name"></span> <span
-                                                                                x-text="beneficiary.last_name"></span>
-                                                                    </a>
-                                                                </td>
-                                                            </tr>
-                                                        </template>
-                                                        <!-- More people... -->
-                                                    </tbody>
-                                                </table>
-                                                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-                                                    <div class="flex-1 flex justify-between sm:hidden">
-                                                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                                                        @click="paginate(current)"> Previous </a>
-                                                        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                                                        @click="paginate(current+2)"> Next </a>
-                                                    </div>
-                                                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-                                                    <div>
-                                                        <p class="text-sm text-gray-700">
-                                                            Résultats
-                                                            <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
-                                                            à
-                                                            <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
-                                                            sur
-                                                            <span class="font-medium" x-text="state.count"></span>
-                                                        </p>
-                                                    </div>
-                                                    <div>
-                                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-                                                            @click="paginate(current)">
-                                                            <span class="sr-only">Previous</span>
-                                                            <!-- Heroicon name: solid/chevron-left -->
-                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
-                                                            </svg>
-                                                        </a>
-                                                        <template x-for="i in nb_pages">
-                                                            <a href="#" @click="paginate(i)"
-                                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
-                                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
-                                                            x-text="i"></a>
-                                                        </template>
-                                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
-                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-                                                            @click="paginate(current+2)">
-                                                            <span class="sr-only">Next</span>
-                                                            <!-- Heroicon name: solid/chevron-right -->
-                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                                                            </svg>
-                                                        </a>
-                                                        </nav>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
-                            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-                                <p class="divide-y divide-gray-200 bg-white" id="passenger_name">Sélectionner un Passager</p>
-                            </div>
-                            {{ $departureField := "departure" }}
-                            {{ $departureLabel := "Départ" }}
-                            {{ template "address_autocomplete" dict "FieldName" $departureField "FieldLabel" $departureLabel }}
-                    
-                            {{ $destinationField := "destination" }}
-                            {{ $destinationLabel := "Destination" }}
-                            {{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel }}
-    
-                            <div class="py-4 grid grid-cols-2">
-                                <div class="lg:col-span-1">
-                                    <label for="date" class="block text-sm font-medium text-gray-700">Le</label>
-                                    <div class="mt-1">
-                                        <input type="datetime-local" id="date" name="date" 
-                                            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>
-                            <input type="hidden" id="passenger_id" name="passenger_id" >
-                            <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>
+    <section aria-labelledby="functionalities-title" x-data="{
+        tab: 'beneficiaries',
+        to(event) {
+            this.tab = event.target.value
+        }
+    }">
+    <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden">
+        <div class="divide-y divide-gray-200">
+            <div>
+                <div class="hidden sm:block">
+                    <div class="border-b border-gray-200 pl-4">
+                        <nav class="-mb-px flex space-x-8" aria-label="Tabs"> 
+                            <a href="#" @click="tab = 'beneficiaries'"
+                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                :class="tab == 'documents' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
+                                Bénéficiaires </a>
+
+                            <a href="#" @click="tab = 'drivers'"
+                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                :class="tab == 'organizations' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
+                                Conducteurs </a>
+                            
+                            <a href="#" @click="tab = 'solidarityService'"
+                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                :class="tab == 'solidarityService' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
+                                Trajets Solidaire </a>
+                        </nav>
                     </div>
                 </div>
-                </form>
-                <div class="bg-white shadow sm:rounded-2xl">
-
-                    <form class="space-y-6" method="POST" name="create_booking">
-                    
-                        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8" x-data="{
-                            state: {{.ViewState.JSONWithLimits 0 10}},
-                            current: 0,
-                            nb_pages() {
-                                let nbEl = this.state.count 
-                                return Math.ceil(nbEl/10)
-                            },
-                            async paginate(page) {
-                                let start = (page-1)*10
-                                if(start < 0|| start > this.state.count) {
-                                    return
-                                }
-                                let resp = await fetch('/api/cache/' + this.state.cache_id + '?limits.min=' + start + '&limits.max=' + (start+10))
-                                let data = await resp.json()
-                                this.state.drivers = data
-                                this.current=page-1
-                            }
-                        }">
-                        <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">
-                            Sélectionner un Conducteurs
-                        </h2>
-                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
-
-                            <div class="mt-8 flex flex-col">
-                                <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                                    <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
-                                        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                                            <table class="min-w-full divide-y divide-gray-300">
-                                                <tbody class="divide-y divide-gray-200 bg-white">
-                                                    <template x-for="driver in state.drivers.driver_journeys">
-                                                        <tr>
-                                                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-                                                                <div class="flex items-center">
-                                                                    <button type="button" @click="
-                                                                    document.getElementById('driver_id').value = driver.user.id
-                                                                    document.getElementById('driver_name').textContent = driver.user.first_name+' '+driver.user.last_name" class="ml-4">                                                              
-                                                                        <div class="font-medium text-gray-900">
-                                                                            <span
-                                                                            x-text="driver.user.first_name">
-                                                                            </span>
-                                                                            <span
-                                                                                x-text="driver.user.last_name">
-                                                                            </span>
-                                                                        </div>
-                                                                    </button>
-                                                                </div>
-                                                            </td>
-                                                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                                                            
-                                                            </td>
-                                                            <td
-                                                                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                                                            
-                                                            </td>
-                                                        </tr>
-                                                    </template>
-                        
-                                                    <!-- More people... -->
-                                                </tbody>
-                                            </table>
-                                            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-                                                <div class="flex-1 flex justify-between sm:hidden">
-                                                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                                                @click="paginate(current)"> Previous </a>
-                                                <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                                                @click="paginate(current+2)"> Next </a>
-                                                </div>
-                                                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-                                                    <div>
-                                                        <p class="text-sm text-gray-700">
-                                                        Résultats
-                                                        <span class="font-medium" x-text="Math.min((current * 10)+1, state.count)"></span>
-                                                        à
-                                                        <span class="font-medium" x-text="Math.min((current * 10)+10, state.count)"></span>
-                                                        sur
-                                                        <span class="font-medium" x-text="state.count"></span>
-                                                        </p>
-                                                    </div>
-                                                    <div>
-                                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-                                                            @click="paginate(current)">
-                                                            <span class="sr-only">Previous</span>
-                                                            <!-- Heroicon name: solid/chevron-left -->
-                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
-                                                            </svg>
-                                                        </a>
-                                                        <template x-for="i in nb_pages">
-                                                            <a href="#" @click="paginate(i)"
-                                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
-                                                            :class="i == current+1 ? 'z-10 bg-indigo-50 border-co-blue text-co-blue' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
-                                                            x-text="i"></a>
-                                                        </template>
-                                                        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
-                                                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-                                                            @click="paginate(current+2)">
-                                                            <span class="sr-only">Next</span>
-                                                            <!-- Heroicon name: solid/chevron-right -->
-                                                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                                                            </svg>
-                                                        </a>
-                                                        </nav>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <p id="driver_name"></p>
-                            <input type="hidden" id="driver_id" name="driver_id" >
-                            <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="Confirmer">
-                            </div>
-                        </div>
-                    </form>
-                </div>
             </div>
+
+            <div x-show="tab == 'beneficiaries'">{{template "beneficiary_solidarity_list" .}}</div>
+            <div x-show="tab == 'drivers'">{{template "driver_solidarity_list" .}}</div>
+            <div x-show="tab == 'solidarityService'">{{template "beneficiary_solidarity_list" .}}</div>
+
         </div>
     </div>
+    </section>
 </main>
 {{end}}
\ No newline at end of file