diff --git a/packages/edit-site/src/components/dataviews/field-actions.js b/packages/edit-site/src/components/dataviews/field-actions.js
new file mode 100644
index 0000000000000..490faa1f6a126
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/field-actions.js
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+
+function FieldActions( { item, actions } ) {
+	return (
+		<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
+			{ () => (
+				<MenuGroup>
+					{ actions.map( ( action ) => (
+						<MenuItem
+							key={ action.id }
+							onClick={ () => action.perform( item ) }
+							isDestructive={ action.isDesctructive }
+						>
+							{ action.label }
+						</MenuItem>
+					) ) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+export default FieldActions;
diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
index 47e80782255a4..1b27c0833c836 100644
--- a/packages/edit-site/src/components/dataviews/style.scss
+++ b/packages/edit-site/src/components/dataviews/style.scss
@@ -34,3 +34,13 @@
 	color: $gray-700;
 	text-wrap: nowrap;
 }
+
+.dataviews-view-grid__media {
+	width: 100%;
+	min-height: 200px;
+
+	> * {
+		max-width: 100%;
+		object-fit: cover;
+	}
+}
diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js
index 0b5f7b3cf6790..33bcfe87e4f35 100644
--- a/packages/edit-site/src/components/dataviews/text-filter.js
+++ b/packages/edit-site/src/components/dataviews/text-filter.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 
 /**
@@ -14,12 +14,16 @@ export default function TextFilter( { view, onChangeView } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
+	const onChangeViewRef = useRef( onChangeView );
 	useEffect( () => {
-		onChangeView( ( currentView ) => ( {
+		onChangeViewRef.current = onChangeView;
+	}, [ onChangeView ] );
+	useEffect( () => {
+		onChangeViewRef.current( ( currentView ) => ( {
 			...currentView,
 			search: debouncedSearch,
 		} ) );
-	}, [ debouncedSearch, onChangeView ] );
+	}, [ debouncedSearch ] );
 	const searchLabel = __( 'Filter list' );
 	return (
 		<SearchControl
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
index d06eebcb1f190..f115b9c002a37 100644
--- a/packages/edit-site/src/components/dataviews/view-grid.js
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -1,3 +1,63 @@
-export function ViewGrid() {
-	return 'Grid';
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	FlexBlock,
+	Placeholder,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FieldActions from './field-actions';
+
+export function ViewGrid( { data, fields, view, actions } ) {
+	const mediaField = fields.find(
+		( field ) => field.id === view.layout.mediaField
+	);
+	const visibleFields = fields.filter(
+		( field ) =>
+			! view.hiddenFields.includes( field.id ) &&
+			field.id !== view.layout.mediaField
+	);
+	return (
+		<Grid gap={ 8 } columns={ 2 } alignment="top">
+			{ data.map( ( item, index ) => {
+				return (
+					<VStack key={ index }>
+						<div className="dataviews-view-grid__media">
+							{ ( mediaField &&
+								mediaField.render( { item, view } ) ) || (
+								<Placeholder
+									withIllustration
+									style={ {
+										width: '100%',
+										minHeight: '200px',
+									} }
+								/>
+							) }
+						</div>
+
+						<HStack justify="space-between" alignment="top">
+							<FlexBlock>
+								<VStack>
+									{ visibleFields.map( ( field ) => (
+										<div key={ field.id }>
+											{ field.render
+												? field.render( { item, view } )
+												: field.accessorFn( item ) }
+										</div>
+									) ) }
+								</VStack>
+							</FlexBlock>
+							<FieldActions item={ item } actions={ actions } />
+						</HStack>
+					</VStack>
+				);
+			} ) }
+		</Grid>
+	);
 }
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index c2080863622a4..c8d4ee1efd063 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -21,16 +21,12 @@ import {
 	check,
 	arrowUp,
 	arrowDown,
-	moreVertical,
 } from '@wordpress/icons';
 import {
 	Button,
 	Icon,
 	privateApis as componentsPrivateApis,
 	VisuallyHidden,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 
@@ -38,6 +34,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import FieldActions from './field-actions';
 
 const {
 	DropdownMenuV2,
@@ -135,38 +132,24 @@ function ViewList( {
 	paginationInfo,
 } ) {
 	const columns = useMemo( () => {
-		const _columns = [ ...fields ];
+		const _columns = [
+			...fields.map( ( field ) => {
+				const column = { ...field };
+				delete column.render;
+				column.cell = ( props ) => {
+					return field.render
+						? field.render( { item: props.row.original, view } )
+						: field.accessorFn( props.row.original );
+				};
+				return column;
+			} ),
+		];
 		if ( actions?.length ) {
 			_columns.push( {
 				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
 				id: 'actions',
 				cell: ( props ) => {
-					return (
-						<DropdownMenu
-							icon={ moreVertical }
-							label={ __( 'Actions' ) }
-						>
-							{ () => (
-								<MenuGroup>
-									{ actions.map( ( action ) => (
-										<MenuItem
-											key={ action.id }
-											onClick={ () =>
-												action.perform(
-													props.row.original
-												)
-											}
-											isDestructive={
-												action.isDesctructive
-											}
-										>
-											{ action.label }
-										</MenuItem>
-									) ) }
-								</MenuGroup>
-							) }
-						</DropdownMenu>
-					);
+					return <FieldActions item={ props.row.original } />;
 				},
 				enableHiding: false,
 			} );
diff --git a/packages/edit-site/src/components/media/index.js b/packages/edit-site/src/components/media/index.js
index 7120d7c7f56ce..7df6c4f882842 100644
--- a/packages/edit-site/src/components/media/index.js
+++ b/packages/edit-site/src/components/media/index.js
@@ -3,14 +3,12 @@
  */
 import { useEntityRecord } from '@wordpress/core-data';
 
-function Media( { id, size, ...props } ) {
+function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
 	const { record: media } = useEntityRecord( 'root', 'media', id );
-	const sizesPerPriority = [ 'large', 'thumbnail' ];
-	const currentSize =
-		size ??
-		sizesPerPriority.find( ( s ) => !! media?.media_details?.sizes[ s ] );
+	const currentSize = size.find(
+		( s ) => !! media?.media_details?.sizes[ s ]
+	);
 	const mediaDetails = media?.media_details?.sizes[ currentSize ];
-
 	if ( ! mediaDetails ) {
 		return null;
 	}
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 4bdaca8cde2f6..eaf5d5ec24dad 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -8,7 +8,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useCallback } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 
 /**
@@ -22,6 +22,12 @@ import Media from '../media';
 
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
+const defaultConfigPerViewType = {
+	list: {},
+	grid: {
+		mediaField: 'featured-image',
+	},
+};
 
 export default function PagePages() {
 	const [ view, setView ] = useState( {
@@ -36,6 +42,7 @@ export default function PagePages() {
 		// All fields are visible by default, so it's
 		// better to keep track of the hidden ones.
 		hiddenFields: [ 'date', 'featured-image' ],
+		layout: {},
 	} );
 	// Request post statuses to get the proper labels.
 	const { records: statuses } = useEntityRecords( 'root', 'status' );
@@ -82,12 +89,16 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				accessorFn: ( page ) => page.featured_media,
-				cell: ( props ) =>
-					!! props.row.original.featured_media ? (
+				render: ( { item, view: currentView } ) =>
+					!! item.featured_media ? (
 						<Media
 							className="edit-site-page-pages__featured-image"
-							id={ props.row.original.featured_media }
-							size="thumbnail"
+							id={ item.featured_media }
+							size={
+								currentView.type === 'list'
+									? [ 'thumbnail', 'medium', 'large', 'full' ]
+									: [ 'large', 'full', 'medium', 'thumbnail' ]
+							}
 						/>
 					) : null,
 				enableSorting: false,
@@ -96,8 +107,7 @@ export default function PagePages() {
 				header: __( 'Title' ),
 				id: 'title',
 				accessorFn: ( page ) => page.title?.rendered || page.slug,
-				cell: ( props ) => {
-					const page = props.row.original;
+				render: ( { item: page } ) => {
 					return (
 						<VStack spacing={ 1 }>
 							<Heading as="h3" level={ 5 }>
@@ -108,8 +118,9 @@ export default function PagePages() {
 										canvas: 'edit',
 									} }
 								>
-									{ decodeEntities( props.getValue() ) ||
-										__( '(no title)' ) }
+									{ decodeEntities(
+										page.title?.rendered || page.slug
+									) || __( '(no title)' ) }
 								</Link>
 							</Heading>
 						</VStack>
@@ -123,8 +134,8 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
-				cell: ( props ) => {
-					const author = props.row.original._embedded?.author[ 0 ];
+				render: ( { item } ) => {
+					const author = item._embedded?.author[ 0 ];
 					return (
 						<a href={ `user-edit.php?user_id=${ author.id }` }>
 							{ author.name }
@@ -142,10 +153,10 @@ export default function PagePages() {
 			{
 				header: 'Date',
 				id: 'date',
-				cell: ( props ) => {
+				render: ( { item } ) => {
 					const formattedDate = dateI18n(
 						getSettings().formats.datetimeAbbreviated,
-						getDate( props.row.original.date )
+						getDate( item.date )
 					);
 					return <time>{ formattedDate }</time>;
 				},
@@ -157,6 +168,25 @@ export default function PagePages() {
 
 	const trashPostAction = useTrashPostAction();
 	const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
+	const onChangeView = useCallback(
+		( viewUpdater ) => {
+			let updatedView =
+				typeof viewUpdater === 'function'
+					? viewUpdater( view )
+					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
+			setView( updatedView );
+		},
+		[ view ]
+	);
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
@@ -168,7 +198,7 @@ export default function PagePages() {
 				data={ pages || EMPTY_ARRAY }
 				isLoading={ isLoadingPages }
 				view={ view }
-				onChangeView={ setView }
+				onChangeView={ onChangeView }
 			/>
 		</Page>
 	);
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index 82e124b3ac4fe..fde960ca1a72c 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -1,4 +1,3 @@
 .edit-site-page-pages__featured-image {
 	border-radius: $radius-block-ui;
-	max-height: 60px;
 }