diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js
index 715135a533fb4..5403d36703128 100644
--- a/packages/dataviews/src/add-filter.js
+++ b/packages/dataviews/src/add-filter.js
@@ -6,101 +6,299 @@ import {
 	Button,
 	Icon,
 } from '@wordpress/components';
-import { chevronRightSmall, plus } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { chevronRightSmall, funnel, check } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { Children, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
+import { LAYOUT_LIST, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
 
 const {
 	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownSubMenuV2: DropdownSubMenu,
 	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
 	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-export default function AddFilter( { fields, view, onChangeView } ) {
-	const filters = [];
-	fields.forEach( ( field ) => {
-		if ( ! field.type ) {
-			return;
-		}
-
-		switch ( field.type ) {
-			case ENUMERATION_TYPE:
-				filters.push( {
-					field: field.id,
-					name: field.header,
-					elements: field.elements || [],
-					isVisible: view.filters.some(
-						( f ) => f.field === field.id
-					),
-				} );
-		}
-	} );
+function WithSeparators( { children } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparator /> }
+				{ child }
+			</Fragment>
+		) );
+}
 
+export default function AddFilter( { filters, view, onChangeView } ) {
 	if ( filters.length === 0 ) {
 		return null;
 	}
 
+	const filterCount = view.filters.reduce( ( acc, filter ) => {
+		if ( filter.value !== undefined ) {
+			return acc + 1;
+		}
+		return acc;
+	}, 0 );
+
 	return (
 		<DropdownMenu
-			label={ __( 'Add filter' ) }
+			label={ __( 'Filters' ) }
 			trigger={
 				<Button
-					disabled={ filters.length === view.filters?.length }
 					__experimentalIsFocusable
+					label={ __( 'Filters' ) }
 					variant="tertiary"
 					size="compact"
+					icon={ funnel }
+					className="dataviews-filters-button"
 				>
-					<Icon icon={ plus } style={ { flexShrink: 0 } } />
-					{ __( 'Add filter' ) }
+					{ view.type === LAYOUT_LIST && filterCount > 0 ? (
+						<span className="dataviews-filters-count">
+							{ filterCount }
+						</span>
+					) : null }
 				</Button>
 			}
 		>
-			{ filters.map( ( filter ) => {
-				if ( filter.isVisible ) {
-					return null;
-				}
-
-				return (
-					<DropdownSubMenu
-						key={ filter.field }
-						trigger={
-							<DropdownSubMenuTrigger
-								suffix={ <Icon icon={ chevronRightSmall } /> }
+			<WithSeparators>
+				<DropdownMenuGroup>
+					{ filters.map( ( filter ) => {
+						const filterInView = view.filters.find(
+							( f ) => f.field === filter.field
+						);
+						const activeElement = filter.elements.find(
+							( element ) => element.value === filterInView?.value
+						);
+						const activeOperator =
+							filterInView?.operator || filter.operators[ 0 ];
+						return (
+							<DropdownSubMenu
+								key={ filter.field }
+								trigger={
+									<DropdownSubMenuTrigger
+										suffix={
+											<>
+												{ activeElement &&
+													activeOperator ===
+														OPERATOR_IN &&
+													__( 'Is' ) }
+												{ activeElement &&
+													activeOperator ===
+														OPERATOR_NOT_IN &&
+													__( 'Is not' ) }
+												{ activeElement && ' ' }
+												{ activeElement?.label }
+												<Icon
+													icon={ chevronRightSmall }
+												/>
+											</>
+										}
+									>
+										{ filter.name }
+									</DropdownSubMenuTrigger>
+								}
 							>
-								{ filter.name }
-							</DropdownSubMenuTrigger>
-						}
-					>
-						{ filter.elements.map( ( element ) => (
-							<DropdownMenuItem
-								key={ element.value }
-								onSelect={ () => {
-									onChangeView( ( currentView ) => ( {
-										...currentView,
-										page: 1,
-										filters: [
-											...currentView.filters,
-											{
-												field: filter.field,
-												operator: OPERATOR_IN,
-												value: element.value,
-											},
-										],
-									} ) );
-								} }
-							>
-								{ element.label }
-							</DropdownMenuItem>
-						) ) }
-					</DropdownSubMenu>
-				);
-			} ) }
+								<WithSeparators>
+									<DropdownMenuGroup>
+										{ filter.elements.map( ( element ) => (
+											<DropdownMenuItem
+												key={ element.value }
+												role="menuitemradio"
+												aria-checked={
+													activeElement?.value ===
+													element.value
+												}
+												prefix={
+													activeElement?.value ===
+														element.value && (
+														<Icon icon={ check } />
+													)
+												}
+												onSelect={ ( event ) => {
+													event.preventDefault();
+													onChangeView(
+														( currentView ) => ( {
+															...currentView,
+															page: 1,
+															filters: [
+																...currentView.filters.filter(
+																	( f ) =>
+																		f.field !==
+																		filter.field
+																),
+																{
+																	field: filter.field,
+																	operator:
+																		activeOperator,
+																	value:
+																		activeElement?.value ===
+																		element.value
+																			? undefined
+																			: element.value,
+																},
+															],
+														} )
+													);
+												} }
+											>
+												{ element.label }
+											</DropdownMenuItem>
+										) ) }
+									</DropdownMenuGroup>
+									{ filter.operators.length > 1 && (
+										<DropdownSubMenu
+											trigger={
+												<DropdownSubMenuTrigger
+													suffix={
+														<>
+															{ activeOperator ===
+																OPERATOR_IN &&
+																__( 'Is' ) }
+															{ activeOperator ===
+																OPERATOR_NOT_IN &&
+																__( 'Is not' ) }
+															<Icon
+																icon={
+																	chevronRightSmall
+																}
+															/>{ ' ' }
+														</>
+													}
+												>
+													{ __( 'Conditions' ) }
+												</DropdownSubMenuTrigger>
+											}
+										>
+											<DropdownMenuItem
+												key="in-filter"
+												role="menuitemradio"
+												aria-checked={
+													activeOperator ===
+													OPERATOR_IN
+												}
+												prefix={
+													activeOperator ===
+														OPERATOR_IN && (
+														<Icon icon={ check } />
+													)
+												}
+												onSelect={ ( event ) => {
+													event.preventDefault();
+													onChangeView(
+														( currentView ) => ( {
+															...currentView,
+															page: 1,
+															filters: [
+																...view.filters.filter(
+																	( f ) =>
+																		f.field !==
+																		filter.field
+																),
+																{
+																	field: filter.field,
+																	operator:
+																		OPERATOR_IN,
+																	value: filterInView?.value,
+																},
+															],
+														} )
+													);
+												} }
+											>
+												{ __( 'Is' ) }
+											</DropdownMenuItem>
+											<DropdownMenuItem
+												key="not-in-filter"
+												role="menuitemradio"
+												aria-checked={
+													activeOperator ===
+													OPERATOR_NOT_IN
+												}
+												prefix={
+													activeOperator ===
+														OPERATOR_NOT_IN && (
+														<Icon icon={ check } />
+													)
+												}
+												onSelect={ ( event ) => {
+													event.preventDefault();
+													onChangeView(
+														( currentView ) => ( {
+															...currentView,
+															page: 1,
+															filters: [
+																...view.filters.filter(
+																	( f ) =>
+																		f.field !==
+																		filter.field
+																),
+																{
+																	field: filter.field,
+																	operator:
+																		OPERATOR_NOT_IN,
+																	value: filterInView?.value,
+																},
+															],
+														} )
+													);
+												} }
+											>
+												{ __( 'Is not' ) }
+											</DropdownMenuItem>
+										</DropdownSubMenu>
+									) }
+									<DropdownMenuItem
+										key={ 'reset-filter-' + filter.name }
+										disabled={ ! activeElement }
+										onSelect={ ( event ) => {
+											event.preventDefault();
+											onChangeView( ( currentView ) => ( {
+												...currentView,
+												page: 1,
+												filters:
+													currentView.filters.filter(
+														( f ) =>
+															f.field !==
+															filter.field
+													),
+											} ) );
+										} }
+									>
+										{ sprintf(
+											/* translators: 1: Filter name. e.g.: "Reset Author". */
+											__( 'Reset %1$s' ),
+											filter.name.toLowerCase()
+										) }
+									</DropdownMenuItem>
+								</WithSeparators>
+							</DropdownSubMenu>
+						);
+					} ) }
+				</DropdownMenuGroup>
+				<DropdownMenuItem
+					disabled={
+						view.search === '' && view.filters?.length === 0
+					}
+					onSelect={ ( event ) => {
+						event.preventDefault();
+						onChangeView( ( currentView ) => ( {
+							...currentView,
+							page: 1,
+							filters: [],
+						} ) );
+					} }
+				>
+					{ __( 'Reset filters' ) }
+				</DropdownMenuItem>
+			</WithSeparators>
 		</DropdownMenu>
 	);
 }
diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js
index 3c30c6837103a..fc0f8848f6a93 100644
--- a/packages/dataviews/src/filter-summary.js
+++ b/packages/dataviews/src/filter-summary.js
@@ -13,7 +13,7 @@ import { Children, Fragment } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { OPERATOR_IN, OPERATOR_NOT_IN, LAYOUT_LIST } from './constants';
 import { unlock } from './lock-unlock';
 
 const {
@@ -73,6 +73,10 @@ function WithSeparators( { children } ) {
 }
 
 export default function FilterSummary( { filter, view, onChangeView } ) {
+	if ( view.type === LAYOUT_LIST ) {
+		return null;
+	}
+
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
 	const activeElement = filter.elements.find(
 		( element ) => element.value === filterInView?.value
diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.js
index e2d24e7a848ee..153372379cf8d 100644
--- a/packages/dataviews/src/filters.js
+++ b/packages/dataviews/src/filters.js
@@ -46,29 +46,31 @@ export default function Filters( { fields, view, onChangeView } ) {
 		}
 	} );
 
-	const filterComponents = filters.map( ( filter ) => {
-		if ( ! filter.isVisible ) {
-			return null;
-		}
-
-		return (
-			<FilterSummary
-				key={ filter.field + '.' + filter.operator }
-				filter={ filter }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		);
-	} );
-
-	filterComponents.push(
+	const addFilter = (
 		<AddFilter
 			key="add-filter"
-			fields={ fields }
+			filters={ filters }
 			view={ view }
 			onChangeView={ onChangeView }
 		/>
 	);
+	const filterComponents = [
+		addFilter,
+		...filters.map( ( filter ) => {
+			if ( ! filter.isVisible ) {
+				return null;
+			}
+
+			return (
+				<FilterSummary
+					key={ filter.field + '.' + filter.operator }
+					filter={ filter }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+			);
+		} ),
+	];
 
 	if ( filterComponents.length > 1 ) {
 		filterComponents.push(
diff --git a/packages/dataviews/src/reset-filters.js b/packages/dataviews/src/reset-filters.js
index d78c06624087a..503892b6e0737 100644
--- a/packages/dataviews/src/reset-filters.js
+++ b/packages/dataviews/src/reset-filters.js
@@ -4,7 +4,16 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { LAYOUT_LIST } from './constants';
+
 export default ( { view, onChangeView } ) => {
+	if ( view.type === LAYOUT_LIST ) {
+		return null;
+	}
+
 	return (
 		<Button
 			disabled={ view.search === '' && view.filters?.length === 0 }
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index e7e06e1acd27e..ccb565c0b5867 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -12,6 +12,32 @@
 
 .dataviews__filters-view-actions {
 	padding: $grid-unit-15 $grid-unit-40;
+	.components-search-control {
+		flex-grow: 1;
+		max-width: 240px;
+	}
+}
+
+.dataviews-filters-button {
+	position: relative;
+}
+
+.dataviews-filters-count {
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: $grid-unit-20;
+	color: var(--wp-components-color-accent-inverted, $white);
+	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	border-radius: $grid-unit-10;
+	min-width: $grid-unit-20;
+	padding: 0 $grid-unit-05;
+	transform: translateX(40%) translateY(-40%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 11px;
+	font-weight: 300;
 }
 
 .dataviews-pagination {
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 8e60397f6bdf8..72b8e4db49716 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -156,7 +156,8 @@
 	}
 }
 
-.edit-site-template-pages-list-view {
+.edit-site-template-pages-list-view,
+.edit-site-page-pages-list-view {
 	max-width: $nav-sidebar-width;
 }
 
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 861aa48fcd5cb..55eb450f7ac7e 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -320,7 +320,14 @@ export default function PagePages() {
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
 		<>
-			<Page title={ __( 'Pages' ) }>
+			<Page
+				className={
+					view.type === LAYOUT_LIST
+						? 'edit-site-page-pages-list-view'
+						: null
+				}
+				title={ __( 'Pages' ) }
+			>
 				<DataViews
 					paginationInfo={ paginationInfo }
 					fields={ fields }
diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index 34daeb6d40f09..c95668d00b845 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -54,16 +54,19 @@ test.describe( 'Templates', () => {
 		await page.keyboard.type( 'tag' );
 		const titles = page
 			.getByRole( 'region', { name: 'Template' } )
-			.getByRole( 'link' );
+			.getByRole( 'link', { includeHidden: true } );
 		await expect( titles ).toHaveCount( 1 );
 		await expect( titles.first() ).toHaveText( 'Tag Archives' );
 		await page.getByRole( 'button', { name: 'Reset filters' } ).click();
 		await expect( titles ).toHaveCount( 6 );
 
 		// Filter by author.
-		await page.getByRole( 'button', { name: 'Add filter' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Filters', exact: true } )
+			.click();
 		await page.getByRole( 'menuitem', { name: 'Author' } ).hover();
-		await page.getByRole( 'menuitem', { name: 'admin' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'admin' } ).click();
+		await page.keyboard.press( 'Escape' ); // close the menu.
 		await expect( titles ).toHaveCount( 1 );
 		await expect( titles.first() ).toHaveText( 'Date Archives' );
 
@@ -72,9 +75,12 @@ test.describe( 'Templates', () => {
 		await page.getByRole( 'searchbox', { name: 'Filter list' } ).click();
 		await page.keyboard.type( 'archives' );
 		await expect( titles ).toHaveCount( 3 );
-		await page.getByRole( 'button', { name: 'Add filter' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Filters', exact: true } )
+			.click();
 		await page.getByRole( 'menuitem', { name: 'Author' } ).hover();
-		await page.getByRole( 'menuitem', { name: 'Emptytheme' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'Emptytheme' } ).click();
+		await page.keyboard.press( 'Escape' ); // close the menu.
 		await expect( titles ).toHaveCount( 2 );
 	} );
 	test( 'Field visibility', async ( { admin, page } ) => {