diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterList/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterList/index.js
new file mode 100644
index 0000000000..74de82b164
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterList/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Tag } from '@strapi/parts';
+import { Close } from '@strapi/icons';
+import { useQueryParams } from '@strapi/helper-plugin';
+
+const FilterList = () => {
+ const [{ query }, setQuery] = useQueryParams();
+
+ const handleClick = filter => {
+ const nextFilters = query.filters.$and.filter(f => {
+ const name = Object.keys(filter)[0];
+ const filterType = Object.keys(filter[name])[0];
+ const value = filter[name][filterType];
+
+ return f[name]?.[filterType] !== value;
+ });
+
+ setQuery({ filters: { $and: nextFilters }, page: 1 });
+ };
+
+ return (
+ query.filters?.$and.map((filter, i) => {
+ const name = Object.keys(filter)[0];
+ const filterType = Object.keys(filter[name])[0];
+ const value = filter[name][filterType];
+
+ return (
+ // eslint-disable-next-line react/no-array-index-key
+
handleClick(filter)}>
+ }>
+ {name} {filterType} {value}
+
+
+ );
+ }) || null
+ );
+};
+
+export default FilterList;
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/Inputs.js b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/Inputs.js
new file mode 100644
index 0000000000..3a436d328a
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/Inputs.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select, Field, Stack, FieldInput, Option } from '@strapi/parts';
+
+const Inputs = ({ onChange, type, value }) => {
+ if (type === 'boolean') {
+ return (
+
+ );
+ }
+
+ // TODO improve
+
+ return (
+
+
+ onChange(value)} value={value} size="S" />
+
+
+ );
+};
+
+Inputs.defaultProps = {
+ value: '',
+};
+
+Inputs.propTypes = {
+ onChange: PropTypes.func.isRequired,
+ type: PropTypes.string.isRequired,
+ value: PropTypes.any,
+};
+
+export default Inputs;
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/index.js
new file mode 100644
index 0000000000..19898a6b10
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/index.js
@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Button, Box, Popover, Stack, Select, Option, FocusTrap } from '@strapi/parts';
+import { AddIcon } from '@strapi/icons';
+import { useQueryParams } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import Inputs from './Inputs';
+import getFilterList from './utils/getFilterList';
+
+const FullWidthButton = styled(Button)`
+ width: 100%;
+`;
+
+const FilterPopover = ({ displayedFilters, isVisible, onToggle, source }) => {
+ const [{ query }, setQuery] = useQueryParams();
+ const { formatMessage } = useIntl();
+ const [modifiedData, setModifiedData] = useState({
+ name: displayedFilters[0].name,
+ filter: getFilterList(displayedFilters[0])[0].value,
+ value: '',
+ });
+
+ if (!isVisible) {
+ return null;
+ }
+
+ const handleChangeFilterField = value => {
+ const nextField = displayedFilters.find(f => f.name === value);
+ const {
+ fieldSchema: { type },
+ } = nextField;
+
+ setModifiedData({ name: value, filter: '$eq', value: type === 'boolean' ? 'true' : '' });
+ };
+
+ const handleSubmit = e => {
+ e.preventDefault();
+
+ const hasFilter =
+ query?.filters?.$and.find(filter => {
+ return (
+ filter[modifiedData.name] &&
+ filter[modifiedData.name]?.[modifiedData.filter] === modifiedData.value
+ );
+ }) !== undefined;
+
+ if (modifiedData.value && !hasFilter) {
+ const filters = [
+ ...(query?.filters?.$and || []),
+ { [modifiedData.name]: { [modifiedData.filter]: modifiedData.value } },
+ ];
+
+ setQuery({ filters: { $and: filters }, page: 1 });
+ }
+ onToggle();
+ };
+
+ const appliedFilter = displayedFilters.find(filter => filter.name === modifiedData.name);
+
+ return (
+
+
+
+
+
+ );
+};
+
+FilterPopover.propTypes = {
+ displayedFilters: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ metadatas: PropTypes.shape({ label: PropTypes.string }),
+ fieldSchema: PropTypes.shape({ type: PropTypes.string }),
+ })
+ ).isRequired,
+ isVisible: PropTypes.bool.isRequired,
+ onToggle: PropTypes.func.isRequired,
+ source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
+};
+
+export default FilterPopover;
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/utils/getFilterList.js b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/utils/getFilterList.js
new file mode 100644
index 0000000000..f31cf0fc5c
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPopover/utils/getFilterList.js
@@ -0,0 +1,25 @@
+/**
+ * Depending on the selected field find the possible filters to apply
+ * @param {Object} fieldSchema.type the type of the filter
+ * @returns {Object[]}
+ */
+const getFilterList = ({ fieldSchema: { type } }) => {
+ // TODO needs to be improved for the CM
+ switch (type) {
+ case 'email':
+ case 'string': {
+ return [
+ { label: 'is', value: '$eq' },
+ { label: 'is not', value: '$ne' },
+ { label: 'contains', value: '$contains' },
+ ];
+ }
+ default:
+ return [
+ { label: 'is', value: '$eq' },
+ { label: 'is not', value: '$ne' },
+ ];
+ }
+};
+
+export default getFilterList;
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/index.js
new file mode 100644
index 0000000000..ab3fd773b9
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/index.js
@@ -0,0 +1,54 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Button, Box } from '@strapi/parts';
+import { FilterIcon } from '@strapi/icons';
+import FilterList from './FilterList';
+import FilterPopover from './FilterPopover';
+
+const Filters = ({ displayedFilters }) => {
+ const [isVisible, setIsVisible] = useState(false);
+ const { formatMessage } = useIntl();
+ const buttonRef = useRef();
+
+ const handleToggle = () => {
+ setIsVisible(prev => !prev);
+ };
+
+ return (
+ <>
+
+ }
+ onClick={handleToggle}
+ size="S"
+ >
+ {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
+
+ {isVisible && (
+
+ )}
+
+
+
+ );
+};
+
+Filters.propTypes = {
+ displayedFilters: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ metadatas: PropTypes.shape({ label: PropTypes.string }),
+ fieldSchema: PropTypes.shape({ type: PropTypes.string }),
+ })
+ ).isRequired,
+};
+
+export default Filters;
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/PaginationFooter/PageSize.js b/packages/core/admin/admin/src/pages/Users/ListPage/PaginationFooter/PageSize.js
index 8f878178c2..40a309eb9c 100644
--- a/packages/core/admin/admin/src/pages/Users/ListPage/PaginationFooter/PageSize.js
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/PaginationFooter/PageSize.js
@@ -23,7 +23,7 @@ const PageSize = () => {
return (
-