diff --git a/src/app/components/filter-side-bar/filter-side-bar.component.html b/src/app/components/filter-side-bar/filter-side-bar.component.html
index b1658ff..2944f0c 100644
--- a/src/app/components/filter-side-bar/filter-side-bar.component.html
+++ b/src/app/components/filter-side-bar/filter-side-bar.component.html
@@ -7,7 +7,7 @@
           <p class="mb-1 fs-5 fw-semibold">Catégories</p>
           <div *ngFor="let category of listCategories; let indexCat = index" class="form-check">
 
-              <input class="form-check-input" type="checkbox" value="testcategory" id="checkBoxCategory{{indexCat}}">
+                <input class="form-check-input" type="checkbox" value="testcategory" id="checkBoxCategory{{indexCat}}" (click)="onCheckCategory(category,$event)">
 
                 <label class="form-check-label" for="checkBoxCategory{{indexCat}}">
                     {{ category }}
diff --git a/src/app/components/filter-side-bar/filter-side-bar.component.ts b/src/app/components/filter-side-bar/filter-side-bar.component.ts
index 2af42fb..a2cfb1c 100644
--- a/src/app/components/filter-side-bar/filter-side-bar.component.ts
+++ b/src/app/components/filter-side-bar/filter-side-bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-filter-side-bar',
@@ -7,17 +7,40 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 })
 export class FilterSideBarComponent implements OnInit {
   @Input() listCategories: string[];
+  @Output() checkCategory = new EventEmitter();
   @Output() stateNumber = new EventEmitter();
   @Output() rangeNumber = new EventEmitter();
   filterStateNumber: number = 0;
-  
-  constructor() { 
+  public selectedCategory: string[];
+
+
+  constructor() {
     this.listCategories = [];
+    this.selectedCategory = [];
   }
 
   ngOnInit(): void {
   }
 
+  onCheckCategory(category: string, event: any) {
+    console.log(event)
+
+
+    if (event.target.checked == true) {
+      //console.log("true")
+      this.selectedCategory.push(category);
+
+
+    }
+    if (event.target.checked == false) {
+      //console.log("false")
+      this.selectedCategory = this.selectedCategory.filter(product => product !== category);
+    }
+
+    this.checkCategory.emit(this.selectedCategory);
+    //console.log("romain" , this.selectedCategory)
+  }
+
   onStateNumberChange(stateNumber: number): void {
     this.filterStateNumber = stateNumber;
   }
diff --git a/src/app/pages/page-accueil/page-accueil.component.html b/src/app/pages/page-accueil/page-accueil.component.html
index 9d50c66..8efc124 100644
--- a/src/app/pages/page-accueil/page-accueil.component.html
+++ b/src/app/pages/page-accueil/page-accueil.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex align-items-stretch">
-    <app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)"></app-filter-side-bar>
+    <app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)" (checkCategory)="onListCategory($event)"></app-filter-side-bar>
   <div class="custom-main container p-3">
       <input class="form-control"
           type="text"
diff --git a/src/app/pages/page-accueil/page-accueil.component.ts b/src/app/pages/page-accueil/page-accueil.component.ts
index 59b0649..8d11a53 100644
--- a/src/app/pages/page-accueil/page-accueil.component.ts
+++ b/src/app/pages/page-accueil/page-accueil.component.ts
@@ -15,6 +15,8 @@ export class PageAccueilComponent implements OnInit {
   public listDataGlobal: any[];
   public listDataFilter: any[];
   public listCategoriesFilter: string[];
+  public dataFilterCategory : any;
+  
 
   public rangeNumber: number[];
   public stateNumber: number;
@@ -59,7 +61,7 @@ export class PageAccueilComponent implements OnInit {
         this.listDataGlobal = [...listPlant];
         this.listDataFilter = [...this.listDataGlobal];
         console.log(this.listDataGlobal);
-
+        
         /**
          * Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes
          */
@@ -91,6 +93,31 @@ export class PageAccueilComponent implements OnInit {
     this.plantouneService.plantLiked$.next('')
   }
 
+  onListCategory(categoryArray: string[]) {
+   // this.listData=listData;
+    //console.log(typeof(valueText));
+
+    if(categoryArray.length == 0) {
+      this.listData = [...this.listDataGlobal];
+
+    } else if(categoryArray.length > 0) {
+      let listProductsByCategory:string[] = [];
+      this.listDataGlobal.forEach(product => {
+
+        categoryArray.forEach(categorySelected => {
+          if (product.product_breadcrumb_label == categorySelected){
+            listProductsByCategory.push(product);
+          }
+        });
+      });
+    this.listData= [...listProductsByCategory];
+    }
+
+  if(this.listData.length>=9){
+    this.listData.length=9;
+  }
+}
+
   onRatingFilter(stateNumber: number): void {
     this.stateNumber = stateNumber;
     this.isRatingFilterActive = true;