diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js
index 0a1f3f8..e1d0c38 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js
@@ -1,16 +1,115 @@
 import { Form } from "react-bootstrap";
+import { useState } from "react";
 
 const Filters = ({ onChange }) => {
+
+    const [priceFilter, setPriceFilter] = useState("");
+    const [stateFilter, setStateFilter] = useState("");
+
+    const handlePriceChange = (value) =>{
+        setPriceFilter(value);
+    }
+
+    const handleStateChange = (value) =>{
+        setStateFilter(value);
+    }
+
+
     return (
         <div className="filters-menu">
-            <div className="filters-price-container">
-                <Form>
-                    <Form.Check type="radio" aria-label="radio 1" />
-
-                </Form>
-            </div>
-            <div className="filters-state-container">
-            </div>
+            <Form>
+                <div className="filters-price-container">
+                    <Form.Group>
+                        <div key="price-filter-radio" onChange={e => handlePriceChange(e.target.value)}>
+                            <Form.Check
+                                defaultChecked
+                                label="Aucun"
+                                name="priceFilter"
+                                type='radio'
+                                id="price-none"
+                                value=""
+                            />
+                            <Form.Check
+                                label="Sous 20$"
+                                name="priceFilter"
+                                type='radio'
+                                id="price-u-20"
+                                value="PriceUnder20"
+                            />
+                            <Form.Check
+                                label="De 20$ à 49$"
+                                name="priceFilter"
+                                type='radio'
+                                id="price-ft-20-49"
+                                value="Price20to49"
+                            />
+                            <Form.Check
+                                label="De 50$ à 99$"
+                                name="priceFilter"
+                                type='radio'
+                                id="price-ft-50-99"
+                                value="Price50to99"
+                            />
+                            <Form.Check
+                                label="Au-déssus de 100$"
+                                name="priceFilter"
+                                type='radio'
+                                id="price-o-100"
+                                value="PriceOver100"
+                            />
+                        </div>
+                    </Form.Group>
+                </div>
+                <div className="filters-state-container">
+                <Form.Group>
+                        <div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
+                            <Form.Check
+                                defaultChecked
+                                label="Aucun"
+                                name="stateFilter"
+                                type='radio'
+                                id="state-none"
+                                value=""
+                            />
+                            <Form.Check
+                                label="Displonible"
+                                name="stateFilter"
+                                type='radio'
+                                id="state-available"
+                                value="isAvailable"
+                            />
+                            <Form.Check
+                                label="Indisponible"
+                                name="stateFilter"
+                                type='radio'
+                                id="state-unavailable"
+                                value="isUnavailable"
+                            />
+                            <Form.Check
+                                label="En commande"
+                                name="stateFilter"
+                                type='radio'
+                                id="state-backorder"
+                                value="isBackOrder"
+                            />
+                            <Form.Check
+                                label="Liquidation"
+                                name="stateFilter"
+                                type='radio'
+                                id="state-cleareance"
+                                value="isClearance"
+                            />
+                            <Form.Check
+                                label="Discontinué"
+                                name="stateFilter"
+                                type='radio'
+                                id="state-discontinued"
+                                value="isDiscontinued"
+                            />
+                        </div>
+                    </Form.Group>
+                </div>
+            </Form>
         </div>
     )
 }
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index bf28022..807ec5d 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@@ -64,11 +64,10 @@ const Morceaux = (startingProducts) => {
 
     return (
         <div className="morceaux">
-            <div >
-                {/* className="morceaux-options-container" */}
-                {/* <div className='filters-container'>
+            <div className="morceaux-options-container">
+                <div className='filters-container'>
                     <Filters onChange={handleFilters}/>
-                </div> */}
+                </div>
                 <div className="sorting-container">
                     <Sorting onChange={handleOrder} />
                 </div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index b5303f8..b720bfe 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -466,13 +466,18 @@ html {
     display: flex;
     width: 100%;
     height: fit-content;
-    border: black 2px solid;
+    /* border: black 2px solid; */
     margin-bottom: 16px;
 }
 
+
+.filters-menu{
+    display:flex;
+}
+
 .filters-container {
     width: 75%;
-    border: green 2px dotted;
+    /* border: green 2px dotted; */
     margin: 0px;
 }