diff --git a/.changeset/tough-frogs-remember.md b/.changeset/tough-frogs-remember.md
new file mode 100644
index 000000000..2a69d1a09
--- /dev/null
+++ b/.changeset/tough-frogs-remember.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: add clear function and bumps UI to support ranges
diff --git a/package-lock.json b/package-lock.json
index 6a5f9b2be..7991f91a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "0.8.0-pre.107",
+        "@saleor/macaw-ui": "0.8.0-pre.109",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -8260,9 +8260,9 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.107",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.107.tgz",
-      "integrity": "sha512-Z7xA1TM4KXjRJvz6gx6cKhw/pCB7q5BT+yYAAdGDKbfvMFRjh3mXilH8NOF3kkYwEe+3ykeLvijCyp1Bm7UH9w==",
+      "version": "0.8.0-pre.109",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.109.tgz",
+      "integrity": "sha512-lTIe2ha18IBQk+Fy8boo1USi0Z6ISPT2jOqBd2dAP+PkPwM5quAR8hfEICuOUmac8qzjZBCQ/uv2FLbue9rquA==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
@@ -41546,9 +41546,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.107",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.107.tgz",
-      "integrity": "sha512-Z7xA1TM4KXjRJvz6gx6cKhw/pCB7q5BT+yYAAdGDKbfvMFRjh3mXilH8NOF3kkYwEe+3ykeLvijCyp1Bm7UH9w==",
+      "version": "0.8.0-pre.109",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.109.tgz",
+      "integrity": "sha512-lTIe2ha18IBQk+Fy8boo1USi0Z6ISPT2jOqBd2dAP+PkPwM5quAR8hfEICuOUmac8qzjZBCQ/uv2FLbue9rquA==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
diff --git a/package.json b/package.json
index f8d9017bf..e48810132 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.107",
+    "@saleor/macaw-ui": "0.8.0-pre.109",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
diff --git a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx b/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
index a83d18619..97c514398 100644
--- a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
+++ b/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
@@ -2,41 +2,45 @@ import { ConditionalFilters } from "@dashboard/components/ConditionalFilter";
 import { Box, Button, CloseIcon, Popover, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 
-export const ExpressionFilters = () => (
-  <Popover>
-    <Popover.Trigger>
-      <Button>Show filters</Button>
-    </Popover.Trigger>
-    <Popover.Content align="start">
-      <Box
-        __minHeight="250px"
-        __minWidth="636px"
-        display="grid"
-        __gridTemplateRows="auto 1fr"
-      >
+export const ExpressionFilters = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={open => setOpen(open)}>
+      <Popover.Trigger>
+        <Button>Show filters</Button>
+      </Popover.Trigger>
+      <Popover.Content align="start">
         <Box
-          paddingTop={3}
-          paddingX={3}
-          paddingBottom={1.5}
-          display="flex"
-          gap={1}
-          alignItems="center"
-          justifyContent="space-between"
-          backgroundColor="surfaceNeutralPlain"
-          borderTopLeftRadius={2}
-          borderTopRightRadius={2}
+          __minHeight="250px"
+          __minWidth="636px"
+          display="grid"
+          __gridTemplateRows="auto 1fr"
         >
-          <Text variant="body" size="medium">
-            Conditions
-          </Text>
-          <Box display="flex" alignItems="center" gap={2}>
-            <Popover.Close>
-              <Button variant="tertiary" icon={<CloseIcon />} />
-            </Popover.Close>
+          <Box
+            paddingTop={3}
+            paddingX={3}
+            paddingBottom={1.5}
+            display="flex"
+            gap={1}
+            alignItems="center"
+            justifyContent="space-between"
+            backgroundColor="surfaceNeutralPlain"
+            borderTopLeftRadius={2}
+            borderTopRightRadius={2}
+          >
+            <Text variant="body" size="medium">
+              Conditions
+            </Text>
+            <Box display="flex" alignItems="center" gap={2}>
+              <Popover.Close>
+                <Button variant="tertiary" icon={<CloseIcon />} />
+              </Popover.Close>
+            </Box>
           </Box>
+          <ConditionalFilters onClose={() => setOpen(false)} />
         </Box>
-        <ConditionalFilters />
-      </Box>
-    </Popover.Content>
-  </Popover>
-);
+      </Popover.Content>
+    </Popover>
+  );
+};
diff --git a/src/components/ConditionalFilter/ConditionalFilters.tsx b/src/components/ConditionalFilter/ConditionalFilters.tsx
index 3014c753c..3fac08836 100644
--- a/src/components/ConditionalFilter/ConditionalFilters.tsx
+++ b/src/components/ConditionalFilter/ConditionalFilters.tsx
@@ -6,11 +6,20 @@ import { FilterContainer } from "./FilterElement";
 import { FiltersArea } from "./FiltersArea";
 import { LoadingFiltersArea } from "./LoadingFiltersArea";
 
-export const ConditionalFilters: FC = () => {
-  const { valueProvider } = useConditionalFilterContext();
+export const ConditionalFilters: FC<{ onClose: () => void }> = ({
+  onClose,
+}) => {
+  const { valueProvider, containerState } = useConditionalFilterContext();
 
   const handleConfirm = (value: FilterContainer) => {
     valueProvider.persist(value);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    valueProvider.clear();
+    containerState.clear();
+    onClose();
   };
 
   return valueProvider.loading ? (
@@ -22,7 +31,7 @@ export const ConditionalFilters: FC = () => {
       borderBottomLeftRadius={2}
       borderBottomRightRadius={2}
     >
-      <FiltersArea onConfirm={handleConfirm} />
+      <FiltersArea onConfirm={handleConfirm} onCancel={handleCancel} />
     </Box>
   );
 };
diff --git a/src/components/ConditionalFilter/FilterValueProvider.ts b/src/components/ConditionalFilter/FilterValueProvider.ts
index 078c41ead..a1c11a464 100644
--- a/src/components/ConditionalFilter/FilterValueProvider.ts
+++ b/src/components/ConditionalFilter/FilterValueProvider.ts
@@ -4,4 +4,5 @@ export interface FilterValueProvider {
   value: FilterContainer;
   loading: boolean;
   persist: (newValue: FilterContainer) => void;
+  clear: () => void;
 }
diff --git a/src/components/ConditionalFilter/FiltersArea.tsx b/src/components/ConditionalFilter/FiltersArea.tsx
index cfae55049..97ae72988 100644
--- a/src/components/ConditionalFilter/FiltersArea.tsx
+++ b/src/components/ConditionalFilter/FiltersArea.tsx
@@ -1,5 +1,5 @@
 import { _ExperimentalFilters, Box, FilterEvent } from "@saleor/macaw-ui/next";
-import React from "react";
+import React, { FC } from "react";
 
 import { useConditionalFilterContext } from "./context";
 import { FilterContainer } from "./FilterElement";
@@ -8,9 +8,10 @@ import { useFilterContainer } from "./useFilterContainer";
 
 interface FiltersAreaProps {
   onConfirm: (value: FilterContainer) => void;
+  onCancel?: () => void;
 }
 
-export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
+export const FiltersArea: FC<FiltersAreaProps> = ({ onConfirm, onCancel }) => {
   const { apiProvider, leftOperandsProvider } = useConditionalFilterContext();
 
   const {
@@ -72,7 +73,7 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
           + Add row
         </_ExperimentalFilters.AddRowButton>
         <Box display="flex" gap={3}>
-          <_ExperimentalFilters.ClearButton>
+          <_ExperimentalFilters.ClearButton onClick={onCancel}>
             Clear
           </_ExperimentalFilters.ClearButton>
           <_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
diff --git a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts
index d26f36fbc..17b8fa56c 100644
--- a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts
+++ b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts
@@ -54,9 +54,17 @@ export const useUrlValueProvider = (
     setValue(filterValue);
   };
 
+  const clear = () => {
+    router.history.replace({
+      pathname: router.location.pathname,
+    });
+    setValue([]);
+  };
+
   return {
     value,
     loading,
     persist,
+    clear,
   };
 };
diff --git a/src/components/ConditionalFilter/useContainerState.ts b/src/components/ConditionalFilter/useContainerState.ts
index 0c1af7356..2e5cbb217 100644
--- a/src/components/ConditionalFilter/useContainerState.ts
+++ b/src/components/ConditionalFilter/useContainerState.ts
@@ -6,48 +6,51 @@ import { FilterValueProvider } from "./FilterValueProvider";
 type StateCallback = (el: FilterElement) => void;
 type Element = FilterContainer[number];
 
-
-const isFilterElement = (el: unknown): el is FilterElement => typeof el !== "string" && !Array.isArray(el)
+const isFilterElement = (el: unknown): el is FilterElement =>
+  typeof el !== "string" && !Array.isArray(el);
 
 const removeConstraint = (container: FilterContainer) => {
-  return container.map((el) => {
-    if (!isFilterElement(el)) return el
+  return container.map(el => {
+    if (!isFilterElement(el)) return el;
 
     if (!el.constraint?.existIn(container)) {
-      el.clearConstraint()
+      el.clearConstraint();
     }
 
-    return el
-  })
-}
+    return el;
+  });
+};
 
-const calculateIndexesToRemove = (container: FilterContainer, position: number) => {
-  const next = position + 1
-  const previous = position - 1
-  const indexTuple = [position]
+const calculateIndexesToRemove = (
+  container: FilterContainer,
+  position: number,
+) => {
+  const next = position + 1;
+  const previous = position - 1;
+  const indexTuple = [position];
 
   if (typeof container[next] === "string") {
-    indexTuple.push(next)
+    indexTuple.push(next);
 
-    return indexTuple
+    return indexTuple;
   }
 
   if (typeof container[previous] === "string") {
-    indexTuple.push(previous)
+    indexTuple.push(previous);
   }
 
-  return indexTuple
-}
-
+  return indexTuple;
+};
 
 const removeElement = (container: FilterContainer, position: number) => {
-  const indexTuple = calculateIndexesToRemove(container, position)
+  const indexTuple = calculateIndexesToRemove(container, position);
 
-  const newContainer = container
-    .filter((_, elIndex) => !indexTuple.includes(elIndex))
+  const newContainer = container.filter(
+    (_, elIndex) => !indexTuple.includes(elIndex),
+  );
 
-  return removeConstraint(newContainer)
-}
+  return removeConstraint(newContainer);
+};
 
 export const useContainerState = (valueProvider: FilterValueProvider) => {
   const [value, setValue] = useState<FilterContainer>([]);
@@ -81,13 +84,15 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
   };
 
   const updateBySlug = (slug: string, cb: StateCallback) => {
-    setValue(v => v.map((el) => {
-      if (isFilterElement(el) && el.value.value === slug) {
-        cb(el)
-      }
+    setValue(v =>
+      v.map(el => {
+        if (isFilterElement(el) && el.value.value === slug) {
+          cb(el);
+        }
 
-      return el
-    }))
+        return el;
+      }),
+    );
   };
 
   const removeAt = (position: string) => {
@@ -109,13 +114,17 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
   };
 
   const exist = (slug: string) => {
-    return value.some((entry) =>
-      isFilterElement(entry) && entry.value.value === slug
-    )
-  }
+    return value.some(
+      entry => isFilterElement(entry) && entry.value.value === slug,
+    );
+  };
 
   const createEmpty = () => {
-    create(FilterElement.createEmpty())
+    create(FilterElement.createEmpty());
+  };
+
+  const clear = () => {
+    setValue([]);
   };
 
   return {
@@ -126,5 +135,6 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
     updateAt,
     removeAt,
     value,
+    clear,
   };
 };