diff --git a/db.json b/db.json
index 7df0858..50a4dee 100644
--- a/db.json
+++ b/db.json
@@ -5983,6 +5983,31 @@
       "product_image_source": "https://images.truffaut.com/media/catalog/product/cdn:///Articles/jpg/0832000/832900_001.jpg",
       "product_seller": "Truffaut",
       "product_web_only": "oui"
+    },
+    {
+      "id": "JbdahUA",
+      "product_name": "bibi",
+      "product_price": "8",
+      "product_qty": 5,
+      "product_rating": 5,
+      "product_breadcrumb_label": "plantes fleuries",
+      "product_instock": [
+        [
+          "non disponible"
+        ]
+      ],
+      "product_url_picture": "https//picsum.photos/id/18/200/300",
+      "product_discount_code": "",
+      "product_color": "",
+      "product_unitprice_ati": "",
+      "product_unitprice_tf": "",
+      "product_discount_tf": "",
+      "product_discount_ati": "",
+      "product_url_page": "",
+      "product_shipping_method": null,
+      "product_image_source": "",
+      "product_seller": "market place",
+      "product_web_only": "non"
     }
   ],
   "users": [
diff --git a/src/app/components/nav-bar/nav-bar.component.html b/src/app/components/nav-bar/nav-bar.component.html
index cb45e67..bfdcff7 100644
--- a/src/app/components/nav-bar/nav-bar.component.html
+++ b/src/app/components/nav-bar/nav-bar.component.html
@@ -1,12 +1,12 @@
 <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow ">
     <div class="container-fluid">
         <a class="navbar-brand" href="#">🪴 La Belle Plante</a>
-        <button class="navbar-toggler" 
-            type="button" 
-            data-bs-toggle="collapse" 
+        <button class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
             data-bs-target="#navbarNavAltMarkup"
-            aria-controls="navbarNavAltMarkup" 
-            aria-expanded="false" 
+            aria-controls="navbarNavAltMarkup"
+            aria-expanded="false"
             aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -21,6 +21,7 @@
                 <a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>
                 <a class="nav-link disabled" *ngIf="likeCounter == 1">Plante likée : {{ likeCounter }}</a>
                 <a class="nav-link disabled" *ngIf="likeCounter > 1">Plantes likées : {{ likeCounter }}</a>
+                <a routerLink="admin" routerLinkActive="active-custom" class="nav-link">Page administrateur</a>
             </div>
         </div>
     </div>
diff --git a/src/app/modules/admin/components/formulaire/formulaire.component.scss b/src/app/modules/admin/components/formulaire/formulaire.component.scss
index 1b527e6..8e0c566 100644
--- a/src/app/modules/admin/components/formulaire/formulaire.component.scss
+++ b/src/app/modules/admin/components/formulaire/formulaire.component.scss
@@ -13,8 +13,8 @@
   margin-right: auto;
   border: solid 1px;
   border-radius: 10px;
-  background-color: #64c982;
-  border-color: #64c982;
+  background-color: #306340;
+  border-color: #306340;
 }
 
 .form-plant .checkbox {
@@ -70,6 +70,6 @@
 .btn-outline-success {
   margin-top: 10px;
   background-color: #ffff;
-  color: #64c982 !important;
-  border-color: #64c982 !important;
+  color: #306340 !important;
+  border-color: #306340 !important;
 }
diff --git a/src/app/modules/admin/models/plant.ts b/src/app/modules/admin/models/plant.ts
index 337fc91..b9de4aa 100644
--- a/src/app/modules/admin/models/plant.ts
+++ b/src/app/modules/admin/models/plant.ts
@@ -1,5 +1,3 @@
-import { Category } from "./category";
-
 export class Plant {
   constructor(
     public name: string='',
@@ -9,6 +7,6 @@ export class Plant {
     public category:string[]=['plantes fleuries','orchides','cactus et plantes grasses','bonsas','plantes vertes','palmier dintrieur'],
     public urlPicture: string = "https//picsum.photos/id/18/200/300",
     public rating: number = 0,
-    public id?: string
+    public id: string = ''
   ){}
 }
diff --git a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html
index 2521453..eff6fa4 100644
--- a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html
+++ b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html
@@ -1,2 +1,2 @@
 <h1>Ajouter une plante</h1>
-<app-formulaire [buttonLabel]="'Ajouter une plante'"></app-formulaire>
+<app-formulaire [plantInfos]="newplant" (submitted)="addPlant($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>
diff --git a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.scss b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.scss
index 8a0fa8b..c15ebd4 100644
--- a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.scss
+++ b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.scss
@@ -1,4 +1,6 @@
 h1{
+  display: flex;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.658);
   font-size: 28px;
   margin-top: 20px;
diff --git a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.ts b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.ts
index bda58f2..d577db0 100644
--- a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.ts
+++ b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.ts
@@ -19,43 +19,49 @@ import { AdminService } from '../../services/admin.service';
   styleUrls: ['./page-ajouter.component.scss'],
 })
 export class PageAjouterComponent implements OnInit {
-  public plantForm: FormGroup;
-  public isAdd: boolean = false;
+  public newplant = new Plant();
 
 
   constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
-    this.plantForm = new FormGroup({});
-    this.isAdd = false;
+
   }
 
   ngOnInit(): void {
 
   }
 
-  public onSubmit(): void {
-    const nameValue = this.plantForm.value['nameFC'];
-    const priceValue = this.plantForm.value['priceFc'];
-    const quantityValue = this.plantForm.value['quantityFc'];
-    const inStockValue = this.plantForm.value['inStockFC'];
-    const categoryValue = this.plantForm.value['categotyFC'];
-    const urlPicture: string = 'https//picsum.photos/id/18/200/300';
-    const ratingValue = this.plantForm.value['ratingFc'];
-    const idValue = this.plantForm.value[''];
+  public addPlant(plant: any): void {
+    const nameValue = plant.nameFc;
+    const priceValue = plant.priceFc;
+    const ratingValue = plant.ratingFc;
+    const quantityValue = plant.quantityFc;
+    const categoryValue = plant.categoryFc;
+    const inStockValue = plant.inStockFc;
 
-    const plant : Plant = {
-      name: nameValue,
-      price: priceValue,
-      quantity: quantityValue,
-      inStock: [inStockValue],
-      category: [categoryValue],
-      urlPicture: 'https//picsum.photos/id/18/200/300',
-      rating: ratingValue,
-      id: idValue,
+    const plante: any = {
+      product_name: nameValue,
+      product_price: priceValue,
+      product_qty: quantityValue,
+      product_rating: ratingValue,
+      product_breadcrumb_label: categoryValue,
+      product_instock: [inStockValue],
+      product_url_picture : "https//picsum.photos/id/18/200/300",
+      product_discount_code : "",
+      product_color: "",
+      product_unitprice_ati: "",
+      product_unitprice_tf: "",
+      product_discount_tf: "",
+      product_discount_ati: "",
+      product_url_page: "",
+      product_shipping_method: null,
+      product_image_source: "",
+      product_seller: "market place",
+      product_web_only: "non"
     };
-    console.log("coco",plant);
 
-    this.adminService.addPlant(plant)?.subscribe((resp)=>{
+    this.adminService.addPlant(plante)?.subscribe((resp)=>{
+      this.router.navigate(['admin']);
     })
-    this.router.navigate(['admin']);
+
   }
 }
diff --git a/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss b/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss
index 8a0fa8b..c15ebd4 100644
--- a/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss
+++ b/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss
@@ -1,4 +1,6 @@
 h1{
+  display: flex;
+  justify-content: center;
   color: rgba(0, 0, 0, 0.658);
   font-size: 28px;
   margin-top: 20px;
diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
index c32cab0..a35ccd4 100644
--- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
+++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
@@ -1,30 +1,35 @@
-<table class="table" *ngIf="subCollection$ | async as collection">
-  <thead class="thead-dark">
-    <tr>
-      <th scope="col">Id</th>
-      <th scope="col">Nom</th>
-      <th scope="col">Prix</th>
-      <th scope="col">Quantité</th>
-      <th scope="col">En stock</th>
-      <th scope="col">Catégorie</th>
-      <th scope="col">Note</th>
-      <th scope="col">Modifier</th>
-      <th scope="col">Supprimer</th>
+<div id="container">
+  <div id="button">
+    <button class="w-100 btn btn-lg btn-outline-success" routerLink="../ajouter">Ajouter une plante </button>
+  </div>
+  <table class="table" *ngIf="subCollection$ | async as collection">
+    <thead class="thead-dark" style="background-color: #306340 ; color:#f3f7f4 ;">
+      <tr>
+        <th scope="col">Id</th>
+        <th scope="col">Nom</th>
+        <th scope="col">Prix</th>
+        <th scope="col">Quantité</th>
+        <th scope="col">En stock</th>
+        <th scope="col">Catégorie</th>
+        <th scope="col">Note</th>
+        <th scope="col">Modifier</th>
+        <th scope="col">Supprimer</th>
+
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let products of collection">
+        <td>{{products.id}}</td>
+        <td>{{products.name}}</td>
+        <td>{{products.price}}</td>
+        <td>{{products.quantity}}</td>
+        <td>{{products.inStock}}</td>
+        <td>{{products.category}}</td>
+        <td>{{products.rating}}</td>
+        <td><a class="bi-pencil-square" style="color: #5472b1;" routerLink="../modifier/{{products.id}}"></a></td>
+        <td class="bi-trash-fill" style="color: rgb(231, 73, 73); cursor: pointer;" (click)="onClickDelete(products.id)"></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let products of collection">
-      <th scope="row">{{products.id}}</th>
-      <td>{{products.name}}</td>
-      <td>{{products.price}}</td>
-      <td>{{products.quantity}}</td>
-      <td>{{products.inStock}}</td>
-      <td>{{products.category}}</td>
-      <td>{{products.rating}}</td>
-      <td><a class="bi-pencil-square" routerLink="../modifier/{{products.id}}"></a></td>
-      <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
-    </tr>
-  </tbody>
-</table>
-<button routerLink="../ajouter">Ajouter une plante </button>
diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.scss b/src/app/modules/admin/pages/page-tableau/page-tableau.component.scss
index e69de29..179e015 100644
--- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.scss
+++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.scss
@@ -0,0 +1,19 @@
+#container{
+  display: flex;
+  justify-content: center;
+  margin-top: 5rem;
+}
+table{
+  width: 75%;
+  margin-left: 2rem;
+}
+button{
+  background-color: #306340;
+  color: #f3f7f4 !important;
+  border-color: #306340 !important;
+}
+#button{
+  width: 10%;
+}
+
+
diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts b/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts
index 8dce42f..e20838a 100644
--- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts
+++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts
@@ -28,8 +28,7 @@ export class PageTableauComponent implements OnInit {
     //   })
   }
 
-  onClickDelete(id: any){
-    console.log(id);
+  onClickDelete(id: string){
     this.adminService.onClickDelete(id).subscribe((resp) => {
       console.log("Suppression successful : ", resp);
     });
diff --git a/src/app/modules/admin/services/admin.service.ts b/src/app/modules/admin/services/admin.service.ts
index 4ff8008..fbe82c1 100644
--- a/src/app/modules/admin/services/admin.service.ts
+++ b/src/app/modules/admin/services/admin.service.ts
@@ -31,16 +31,15 @@ export class AdminService {
   public refreshCollection(): void {
     // On se sert de notre flux de donnée type observable froid
     this.collection$.subscribe((listPlant: Plant[]) => {
-      this.plantCollection = [...listPlant];
       // Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
       this.subCollection$.next(listPlant);
     })
   }
 
   addPlant(plant: Plant): Observable<any> | void {
-    return this.httpClient.post(`${this.apiUrl}`, plant);
+    return this.httpClient.post(`${this.apiUrl}/list_products`, plant);
   }
-  onClickDelete(id: number): Observable<any> {
+  onClickDelete(id: string): Observable<any> {
     return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
       tap(() => this.refreshCollection())
     );