diff --git a/src/app/pages/page-accueil/page-accueil.component.html b/src/app/pages/page-accueil/page-accueil.component.html
index 3adf40d..c707994 100644
--- a/src/app/pages/page-accueil/page-accueil.component.html
+++ b/src/app/pages/page-accueil/page-accueil.component.html
@@ -1,27 +1,22 @@
 <div class="d-flex align-items-stretch">
-  <app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
+    <app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
 
-  <div class="custom-main container p-3">
-      <input class="form-control"
-          type="text"
-          placeholder="Recherche ta belle plante"
-          aria-label="Input Recherche ta belle plante">
+    <div class="custom-main container p-3">
+        <input class="form-control" type="text" placeholder="Recherche ta belle plante"
+            aria-label="Input Recherche ta belle plante">
 
-      <div class="py-3">
-          Trier par :
-          <button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
-          <button class="btn btn-outline-success btn-sm me-2"(click)="onAlphaTri()">Ordre Alpha</button>
-          <button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
-      </div>
-
-      <div class="row">
-          <div class="col" *ngFor="let product of listData">
-              <app-card-plante [plant]="product"
-              [routerLink]="['/details/:productId']" 
-                          (clickLike)="onEventLike()">
-              </app-card-plante>
-          </div>
-      </div>
-  </div>
-</div>
+        <div class="py-3">
+            Trier par :
+            <button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
+            <button class="btn btn-outline-success btn-sm me-2" (click)="onAlphaTri()">Ordre Alpha</button>
+            <button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
+        </div>
 
+        <div class="row">
+            <div class="col" *ngFor="let product of listData">
+                <app-card-plante [plant]="product" [routerLink]="['/details/:productId']" (clickLike)="onEventLike()">
+                </app-card-plante>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/page-details/page-details.component.html b/src/app/pages/page-details/page-details.component.html
index 3f27c3e..a6d0033 100644
--- a/src/app/pages/page-details/page-details.component.html
+++ b/src/app/pages/page-details/page-details.component.html
@@ -1,3 +1,25 @@
-<p (clickCardId) = "test($event)"></p>
-
-
+<div class="container" *ngIf="detailsPlant">
+    <div class="row my-4">
+        <img src="{{detailsPlant.product_url_picture}}" class="col-sm-5" style="width: 30rem;"
+            alt="Image de {{ detailsPlant.product_name }}">
+        <div class="col-sm-6">
+            <h4 style=" color: green;">{{detailsPlant.product_breadcrumb_label}}</h4>
+            <h2 class="card-title" style="font-size: 30px;">{{ detailsPlant.product_name }}</h2>
+            <div>
+            </div>
+            <div class="card-content">
+            </div>
+            <div style="border-style: solid; border-color: green; margin: auto; text-align: center;">
+                <p>
+                    Plante appréciant la chaleur et un bon réseau wifi,
+                    interconnectée avec son propriétaire et détestant les chats.
+                    Beaucoup de café et un peu d’eau. Ne pas sortir en extérieur, sauf en terrasse. Floraison totale au
+                    mois de juin.
+                </p>
+            </div>
+            <div class="card-content" style="font-weight: bold">{{ detailsPlant.product_unitprice_ati }} €
+            </div>
+            <div>Quantité restante : {{detailsPlant.product_qty}}</div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/page-details/page-details.component.ts b/src/app/pages/page-details/page-details.component.ts
index 28fd5e1..037b2f7 100644
--- a/src/app/pages/page-details/page-details.component.ts
+++ b/src/app/pages/page-details/page-details.component.ts
@@ -10,13 +10,13 @@ import { PlantouneService } from 'src/app/services/plantoune.service';
 })
 export class PageDetailsComponent implements OnInit {
 
-  product : any;
- public listData : any[];
+  detailsPlant: any;
+  public listData: any[];
 
-    constructor(private route: ActivatedRoute, private plantouneService: PlantouneService) {
+  constructor(private route: ActivatedRoute, private plantouneService: PlantouneService) {
 
-      this.listData = [];
-   }
+    this.listData = [];
+  }
 
   ngOnInit(): void {
 
@@ -26,19 +26,23 @@ export class PageDetailsComponent implements OnInit {
 
         this.listData = listPlant;
 
-    
-    //ajoute le ProductId à l'url
-    const routeParams = this.route.snapshot.paramMap;
-    const productIdFromRoute = Number (routeParams.get('productId'));
 
-    //trouve le produit qui correspond à l'Id de la route
+        //ajoute le ProductId à l'url
+        const routeParams = this.route.snapshot.paramMap;
+        const productIdFromRoute = Number(routeParams.get('productId'));
 
-   this.product = this.listData.find (product => product.product_id === productIdFromRoute);
+        // Faire appel au service et récuperer et executer la requete http  et lui fournir le productId
+        this.plantouneService.getPlantById(productIdFromRoute).subscribe
+          (plant => {
+            this.detailsPlant = plant[0];
+            console.log(this.detailsPlant);
+          })
 
-  })
-}
 
-  test(id:any){
-  console.log(id);
+      })
+  }
+
+  test(id: any) {
+    console.log(id);
   }
 }
diff --git a/src/app/services/plantoune.service.ts b/src/app/services/plantoune.service.ts
index 2e0527d..98581a8 100644
--- a/src/app/services/plantoune.service.ts
+++ b/src/app/services/plantoune.service.ts
@@ -11,6 +11,11 @@ export class PlantouneService {
   constructor(private httpClient: HttpClient) { }
 
   getData(): Observable<any[]> {
+    
     return this.httpClient.get<any[]>('http://localhost:3000/list_products');
   }
+  
+  getPlantById(id : any): Observable<any[]> {
+    return this.httpClient.get<any[]>('http://localhost:3000/list_products?product_id=' + id);
+  }
 }