diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fba7493..69fa6b4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,6 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {LayoutModule} from "./layout/layout.module";
 import {HttpClientModule} from "@angular/common/http";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 @NgModule({
   declarations: [
@@ -12,6 +13,7 @@ import {HttpClientModule} from "@angular/common/http";
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     LayoutModule,
     HttpClientModule
diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html
index f1f96b4..bdcf6d4 100644
--- a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html
+++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html
@@ -1,4 +1,5 @@
 
+
 <div>
   <div style="display: inline-flex">
     <div style="">
@@ -7,17 +8,30 @@
       <input type="text" pInputText [(ngModel)]="searchTerm" (ngModelChange)="search()" />
     </div>
 
-    <div style="margin-left: 10px">Filtre par date</div>
+    <div style="margin-left: 10px">
+      <div>Filtrer par date</div>
+      <div>
+        <p-calendar
+          [(ngModel)]="filterDate"
+          (ngModelChange)="onChangeDate($event)"
+          selectionMode="range"
+          [showIcon]="true"
+          [showOnFocus]="false"
+          inputId="buttondisplay" />
+      </div>
+    </div>
   </div>
 </div>
 
 <div style="text-align: right; margin-bottom :10px">
   <button (click)="edit('0')" pButton type="button" label="Ajouter un véhicule"></button>
+  <button (click)="reload()" pButton type="button" label="Recharger"></button>
 </div>
 
 <p-table [value]="vehicles" [tableStyle]="{'min-width': '50rem'}">
   <ng-template pTemplate="header">
     <tr>
+      <th>Crée le</th>
       <th>Marque</th>
       <th>Modèle</th>
       <th>Matricule</th>
@@ -26,6 +40,7 @@
   </ng-template>
   <ng-template pTemplate="body" let-vehicle>
     <tr>
+      <td>{{vehicle.createdAt | date:'dd-MM-yyyy à hh:mm'}}</td>
       <td>{{vehicle.mark}}</td>
       <td>{{vehicle.model}}</td>
       <td>{{vehicle.matricule}}</td>
@@ -37,3 +52,10 @@
     </tr>
   </ng-template>
 </p-table>
+
+<p-paginator
+  (onPageChange)="onPageChange($event)"
+  [first]="first"
+  [rows]="rows"
+  [totalRecords]="total"
+  [rowsPerPageOptions]="[5, 10, 15]" />
diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts
index de13e3b..61cbd3a 100644
--- a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts
+++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Router} from "@angular/router";
 import {VehicleService} from "../../service/vehicle.service";
+import {PaginatorState} from "primeng/paginator";
 
 @Component({
   selector: 'app-vehicle-list',
@@ -16,7 +17,12 @@ export class VehicleListComponent implements OnInit {
   //2. table
 
   vehicles: any[] = []; //Récupère les données sous forme de tableau
+  total: number = 0;
+  page: number = 0;
+  rows: number = 5;
+  first: number = 0;
 
+  filterDate: any;
   constructor(private router: Router,
               private vehicleService: VehicleService) {
   }
@@ -24,17 +30,36 @@ export class VehicleListComponent implements OnInit {
   ngOnInit(): void {
     this.params.search = ""; //Propriété search de l'objet params : permet de stocker la recherche
     this.params.fields = ["matricule", "mark", "model"]; //Propriété fields de l'objet params : permet de spécifier les champs à rechercher
-    this.params.page = 1; //Propriété page de l'objet params : permet de stocker la page de début
-    this.params.limit = 5; //Propriété limit de l'objet params : permet de stocker la page de fin.
+    this.params.page = 0; //Propriété page de l'objet params : permet de stocker la page de début
+    this.params.rows = 5; //Propriété limit de l'objet params : permet de stocker la page de fin.
+
+    if(this.searchTerm == ""){
+      delete this.params['fields'];
+      delete this.params['search'];
+    }else{
+      this.params.fields = ["matricule", "mark", "model"];
+    }
+
+
     this.getVehicles();
   }
 
   getVehicles() {
 
+
+   // this.params["mark[ne]"] = "Toyota"
+  //   this.params["mark[in]"] = "Toyota"
+   // this.params["createdAt[gt]"] = "2024-08-18"
+   // this.params["createdAt[lt]"] = "2024-08-16"
+
     this.vehicleService.getAll(this.params).subscribe({
       next: (res) => {
         if (res.success) {
           this.vehicles = res.data;
+          this.total = res.totalRecords;
+          this.page = res.page;
+          this.rows = res.rows;
+
         }
       }
     })
@@ -63,4 +88,46 @@ export class VehicleListComponent implements OnInit {
     this.params.search = this.searchTerm; //On a affecter à la propriété search de notre objet params le terme saisie ou rechercher
     this.getVehicles()
   }
+
+  onPageChange($event: PaginatorState) {
+    if(this.rows != $event.rows){
+      this.params.page = 0
+    }else{
+      this.params.page = Number($event.page);
+    }
+
+     this.params.rows = $event.rows;
+    this.getVehicles();
+  }
+
+  onChangeDate(dates: any) {
+    console.log(dates);
+
+    let dateSelect1 = dates[0];
+    let dateSelect2;
+    if(dates[1] && dates[1] != null){
+      dateSelect2 = new Date(dates[1]);
+    }else{
+      dateSelect2 = new Date(dateSelect1);
+    }
+
+    dateSelect2.setHours(23);
+    dateSelect2.setMinutes(59);
+    dateSelect2.setSeconds(59);
+
+    this.params['createdAt[gt]'] =  new Date(dateSelect1);
+    this.params['createdAt[lt]'] = dateSelect2;
+
+
+    this.params.page = 0;
+    this.getVehicles();
+  }
+
+  reload() {
+    delete this.params['createdAt[gt]'];
+    delete this.params['createdAt[lt]'];
+    delete this.params['search'];
+    delete this.params['fields'];
+    this.getVehicles();
+  }
 }
diff --git a/src/app/features/vehicle/vehicle.module.ts b/src/app/features/vehicle/vehicle.module.ts
index da8f94b..9fcf66a 100644
--- a/src/app/features/vehicle/vehicle.module.ts
+++ b/src/app/features/vehicle/vehicle.module.ts
@@ -8,6 +8,8 @@ import {TableModule} from "primeng/table";
 import {ButtonModule} from "primeng/button";
 import {InputTextModule} from "primeng/inputtext";
 import {FormsModule} from "@angular/forms";
+import {PaginatorModule} from "primeng/paginator";
+import {CalendarModule} from "primeng/calendar";
 
 const routes: Routes = [
   {
@@ -30,14 +32,16 @@ const routes: Routes = [
     VehicleEditComponent,
     VehicleViewComponent
   ],
-  imports: [
-    CommonModule,
-    RouterModule.forChild(routes),
-    TableModule,
-    ButtonModule,
-    InputTextModule,
-    FormsModule
-  ]
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        TableModule,
+        ButtonModule,
+        InputTextModule,
+        FormsModule,
+        PaginatorModule,
+        CalendarModule
+    ]
 })
 export class VehicleModule {
 }