diff --git a/src/components/ConditionalFilter/FiltersArea.tsx b/src/components/ConditionalFilter/FiltersArea.tsx
new file mode 100644
index 00000000000..1088069ce1a
--- /dev/null
+++ b/src/components/ConditionalFilter/FiltersArea.tsx
@@ -0,0 +1,88 @@
+import {
+  _ExperimentalFilters,
+  Box,
+  FilterEvent,
+} from "@saleor/macaw-ui/next";
+import React from "react";
+
+import { useProductFilterAPIProvider } from "./API/ProductFilterAPIProvider";
+import { FilterContainer } from "./FilterElement";
+import { useFilterContainer } from "./useFilterContainer";
+import { useFilterLeftOperandsProvider } from "./useFilterLeftOperands";
+
+interface FiltersAreaProps {
+  filterValue: FilterContainer
+  onConfirm: (value: FilterContainer) => void
+}
+
+export const FiltersArea = ({ filterValue, onConfirm }: FiltersAreaProps) => {
+  const apiProvider = useProductFilterAPIProvider();
+  const leftOperandsProvider = useFilterLeftOperandsProvider();
+
+  const {
+    value,
+    addEmpty,
+    removeAt,
+    updateLeftOperator,
+    updateRightOperator,
+    updateCondition,
+    updateRightOptions,
+    updateLeftOptions,
+  } = useFilterContainer(filterValue, apiProvider, leftOperandsProvider);
+
+  const handleStateChange = async (event: FilterEvent["detail"]) => {
+    if (!event) return
+
+    if (event.type === "row.add") {
+      addEmpty();
+    }
+
+    if (event.type === "row.remove") {
+      removeAt(event.path);
+    }
+
+    if (event.type === "leftOperator.onChange") {
+      updateLeftOperator(event.path, event.value);
+    }
+
+    if (event.type === "condition.onChange") {
+      updateCondition(event.path.split(".")[0], event.value);
+    }
+
+    if (event.type === "rightOperator.onChange") {
+      updateRightOperator(event.path.split(".")[0], event.value);
+    }
+
+    if (event.type === "rightOperator.onFocus") {
+      updateRightOptions(event.path.split(".")[0], "");
+    }
+
+    if (event.type === "rightOperator.onInputValueChange") {
+      updateRightOptions(event.path.split(".")[0], event.value);
+    }
+
+    if (event.type === "leftOperator.onInputValueChange") {
+      updateLeftOptions(event.path.split(".")[0], event.value);
+    }
+  };
+
+  return (
+    <Box>
+      <_ExperimentalFilters
+        leftOptions={leftOperandsProvider.operands}
+        // @ts-expect-error
+        value={value}
+        onChange={handleStateChange}
+      >
+        <_ExperimentalFilters.Footer>
+          <_ExperimentalFilters.AddRowButton>
+            Add new row
+          </_ExperimentalFilters.AddRowButton>
+          <_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
+            Confirm
+          </_ExperimentalFilters.ConfirmButton>
+        </_ExperimentalFilters.Footer>
+      </_ExperimentalFilters>
+    </Box>
+  );
+};