diff --git a/webapp/src/components/products/MainProducts.tsx b/webapp/src/components/products/MainProducts.tsx
index bb2fbe4..3a7e425 100644
--- a/webapp/src/components/products/MainProducts.tsx
+++ b/webapp/src/components/products/MainProducts.tsx
@@ -236,7 +236,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem button key="orange" onClick={() => { filterColor("orange") }}>
+              <ListItem button data-testid="orange" key="orange" onClick={() => { filterColor("orange") }}>
                 <ListItemIcon>
                   <Brightness1Icon sx={{ color: orange[500] }}></Brightness1Icon>
                 </ListItemIcon>
@@ -245,7 +245,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem button key="red" onClick={() => { filterColor("red") }}>
+              <ListItem button data-testid="red" key="red" onClick={() => { filterColor("red") }}>
                 <ListItemIcon>
                   <Brightness1Icon sx={{ color: red[500] }}></Brightness1Icon>
                 </ListItemIcon>
@@ -254,7 +254,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem button key="gray" onClick={() => { filterColor("gray") }}>
+              <ListItem button data-testid="gray" key="gray" onClick={() => { filterColor("gray") }}>
                 <ListItemIcon>
                   <Brightness1Icon></Brightness1Icon>
                 </ListItemIcon>
@@ -263,7 +263,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem button key="green" onClick={() => { filterColor("green") }}>
+              <ListItem button data-testid="green" key="green" onClick={() => { filterColor("green") }}>
                 <ListItemIcon>
                   <Brightness1Icon sx={{ color: green[500] }}></Brightness1Icon>
                 </ListItemIcon>
@@ -272,7 +272,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem button key="blue" onClick={() => { filterColor("blue") }}>
+              <ListItem button data-testid="blue" key="blue" onClick={() => { filterColor("blue") }}>
                 <ListItemIcon>
                   <Brightness1Icon sx={{ color: blue[500] }}></Brightness1Icon>
                 </ListItemIcon>
@@ -281,7 +281,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem id="black" button key="white" onClick={() => { filterColor("white") }}>
+              <ListItem id="white" data-testid="white" button key="white" onClick={() => { filterColor("white") }}>
                 <ListItemIcon>
                   <Brightness1Icon id="whiteIcon"></Brightness1Icon>
                 </ListItemIcon>
@@ -290,7 +290,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             </MenuItem>
             <br></br>
             <MenuItem>
-              <ListItem id="black" button key="black" onClick={() => { filterColor("black") }}>
+              <ListItem id="black" button data-testid="black" key="black" onClick={() => { filterColor("black") }}>
                 <ListItemIcon>
                   <Brightness1Icon id="blackIcon"></Brightness1Icon>
                 </ListItemIcon>
@@ -306,14 +306,15 @@ function MainProducts(props: MainProductsProps): JSX.Element {
           <br />
 
           <Select
+            data-testid="brandPanel"
             id="brandChooser"
             sx={{ width: 200 }}
           >
-            <div id="brandChooserDiv">
+            <div data-testid="brandOptions" id="brandChooserDiv">
               {['All', 'Toyota', 'Volvo', 'Renault', 'Nissan', 'Plymouth', 'BMW', 'Subaru', 'Honda', 'Lamborghini', 'Volkswagen', 'Chevy', 'Polestar', 'Porsche'].map((text, index) => (
                 <div>
                   <MenuItem>
-                    <ListItem button key={text} onClick={() => { filterBrand(text) }} id={"li" + index}>
+                    <ListItem button data-testid={text} key={text} onClick={() => { filterBrand(text) }} id={"li" + index}>
                       <ListItemIcon>
                         <DirectionsCarIcon />
                       </ListItemIcon>
@@ -342,6 +343,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
             min={29.99}
             max={420.0}
             onChangeCommitted={(_e, value) => { filterMinPrice(value as number) }}
+            data-testid="minPricePanel"
           />
 
           <br /><Divider /><br />
diff --git a/webapp/src/components/products/tests/MainProducts.test.tsx b/webapp/src/components/products/tests/MainProducts.test.tsx
index c60fd70..e285594 100644
--- a/webapp/src/components/products/tests/MainProducts.test.tsx
+++ b/webapp/src/components/products/tests/MainProducts.test.tsx
@@ -18,7 +18,8 @@ const productsList = [
     "reviews": [],
     "quantity": 2,
     "product": fakeProd,
-    "_id": "prod1"
+    "_id": "prod1",
+    "color": "blue"
 
   }, {
     "id": "prod2",
@@ -35,7 +36,9 @@ const productsList = [
   },
 ];
 
+
 test("Filter is rendered properly", async () => {
+  //We need to mock this function as the ProductCard calls it in order to render the img of each product.
   jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
     return Promise.resolve(["1"]);
   });
@@ -58,6 +61,9 @@ test("Filter is rendered properly", async () => {
   expect(screen.getByText('Min Price')).toBeInTheDocument();
   expect(screen.getByText('Max Price')).toBeInTheDocument();
   expect(screen.getByText('Rating')).toBeInTheDocument();
+
+
+
 });
 
 test("When listing products the proper function is called", async () => {
@@ -66,17 +72,17 @@ test("When listing products the proper function is called", async () => {
     return Promise.resolve(["1"]);
   });
   //The products are retrieved from the getProducts method of the API. 
-  const mockAPI = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
+  const getProducts = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
 
   render(<MemoryRouter><MainProducts refreshCartList={() => {
     //intentional for testing purposes
-   }} /> </MemoryRouter>);
+  }} /> </MemoryRouter>);
   //When we first render the component, it will make an API call to getProducts.
   expect(screen.getByText('Loading products!!')).toBeInTheDocument();
   //We neeed to wait for the loader to be removed!!!!
   await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
   //We make sure getProducts is called
-  await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1));
+  await waitFor(() => expect(getProducts).toHaveBeenCalledTimes(1));
 
   //We check that we can see both products info
   expect(screen.getByText('bmw')).toBeInTheDocument();
@@ -86,7 +92,7 @@ test("When listing products the proper function is called", async () => {
 
   expect(api.getProductImages).toHaveBeenCalledWith(productsList[0].id);
   expect(api.getProductImages).toHaveBeenCalledWith(productsList[1].id);
-  expect(mockAPI).toHaveBeenCalledWith("");
+  expect(getProducts).toHaveBeenCalledWith("");
 });
 
 
@@ -97,48 +103,76 @@ test("When listing products, use filter by color works as expected", async () =>
     return Promise.resolve(["1"]);
   });
   //The products are retrieved from the getProducts method of the API. 
-  const mockAPI = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
+  const getByColor = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
 
-  render(<MemoryRouter><MainProducts refreshCartList={() => { 
-    //intentional testing purpose
+  render(<MemoryRouter><MainProducts refreshCartList={() => {
+    //intentional testing purposes
   }} /> </MemoryRouter>);
 
   //We neeed to wait for the loader to be removed!!!!
   await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
   //We make sure getProducts is called
-  await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1));
+  await waitFor(() => expect(getByColor).toHaveBeenCalledTimes(1));
 
   //We check that we can see both products info
   expect(screen.getByText('bmw')).toBeInTheDocument();
   expect(screen.getByAltText('bmw')).toBeInTheDocument();
+  expect(screen.getByText('nissan')).toBeInTheDocument();
+  expect(screen.getByAltText('nissan')).toBeInTheDocument();
   let filter = screen.getByTestId("openFilterBtn");
   expect(filter).toBeInTheDocument();
   fireEvent.click(filter);
-  fireEvent.click(filter);
+
 
   await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument());
 
   expect(screen.getByText('Color')).toBeInTheDocument();
-  let colorChooser =  screen.getByTestId("colorPanel");
+  let colorChooser = screen.getByTestId("colorPanel").firstChild as HTMLElement;
   expect(colorChooser).toBeInTheDocument();
-  fireEvent.click(colorChooser);
- /* let yellowOpt = screen.getByTestId("yellow");
-  await waitFor(() =>  expect(screen.getByTestId("yellow")).toBeInTheDocument());
-  fireEvent.click(yellowOpt);
-  /*
+  fireEvent.mouseDown(colorChooser);
+
+  await waitFor(() => expect(screen.getByTestId("yellow")).toBeVisible());
   let yellowOpt = screen.getByTestId("yellow");
-  expect(yellowOpt).toBeInTheDocument();
   fireEvent.click(yellowOpt);
- *//*
-  expect(mockAPI).toHaveBeenCalledWith("&color[eq]=yellow");
-  
-   
-    expect(colorChooser).toBeInTheDocument();
-    fireEvent.click(colorChooser);
-    let yellowOpt = screen.getByTestId("yellow");
-    expect(yellowOpt).toBeInTheDocument();
-    fireEvent.click(yellowOpt);
-    //
-    expect(mockAPI).toHaveBeenCalledWith("&color[eq]=yellow");
-    */
-});        
+  expect(getByColor).toHaveBeenCalledWith("&color[eq]=yellow");
+  //we cannot expect to see the content changed to yellow cars as we're mocking the API call..
+});
+
+test("When listing products, use filter by brand works as expected", async () => {
+  //We need to mock this function as the ProductCard calls it in order to render the img of each product.
+  jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
+    return Promise.resolve(["1"]);
+  });
+  //The products are retrieved from the getProducts method of the API. 
+  const getByBrand = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
+
+  render(<MemoryRouter><MainProducts refreshCartList={() => { // intentional for testing
+  }} /> </MemoryRouter>);
+
+  //We neeed to wait for the loader to be removed!!!!
+  await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
+  //We make sure getProducts is called
+  await waitFor(() => expect(getByBrand).toHaveBeenCalledTimes(1));
+
+
+  let filter = screen.getByTestId("openFilterBtn");
+  expect(filter).toBeInTheDocument();
+  fireEvent.click(filter);
+
+
+  await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument());
+
+  expect(screen.getByText('Brand')).toBeInTheDocument();
+  let brandChooser = screen.getByTestId("brandPanel").firstChild as HTMLElement;
+  expect(brandChooser).toBeInTheDocument();
+  fireEvent.mouseDown(brandChooser);
+
+  await waitFor(() => expect(screen.getByTestId("brandOptions")).toBeVisible());
+  await waitFor(() => expect(screen.getByTestId("Toyota")).toBeVisible());
+  let yellowOpt = screen.getByTestId("Toyota");
+  fireEvent.click(yellowOpt);
+  //we cannot expect to see the content changed to Toyota cars as we're mocking the API call..
+  //thus, we can only test the parameters passed to the API
+  expect(getByBrand).toHaveBeenCalledWith("&brand[eq]=Toyota");
+
+});        
\ No newline at end of file