diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js
index 2fa25326a5c9c9..ea20723dea3b0c 100644
--- a/packages/block-editor/src/components/block-pattern-setup/index.js
+++ b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -11,7 +11,7 @@ import {
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useResizeObserver } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	height,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -38,41 +39,52 @@ const SetupContent = ( {
 			[ activeSlide + 1, 'next-slide' ],
 		] );
 		return (
-			<div className={ containerClass }>
-				<ul className="carousel-container">
-					{ patterns.map( ( pattern, index ) => (
-						<BlockPatternSlide
-							className={ slideClass.get( index ) || '' }
-							key={ pattern.name }
-							pattern={ pattern }
-						/>
-					) ) }
-				</ul>
+			<div
+				className="block-editor-block-pattern-setup__carousel"
+				style={ { height } }
+			>
+				<div className={ containerClass }>
+					<ul className="carousel-container">
+						{ patterns.map( ( pattern, index ) => (
+							<BlockPatternSlide
+								className={ slideClass.get( index ) || '' }
+								key={ pattern.name }
+								pattern={ pattern }
+								minHeight={ height }
+							/>
+						) ) }
+					</ul>
+				</div>
 			</div>
 		);
 	}
 	return (
-		<Composite
-			{ ...composite }
-			role="listbox"
-			className={ containerClass }
-			aria-label={ __( 'Patterns list' ) }
+		<div
+			style={ { height } }
+			className="block-editor-block-pattern-setup__grid"
 		>
-			{ patterns.map( ( pattern ) => (
-				<BlockPattern
-					key={ pattern.name }
-					pattern={ pattern }
-					onSelect={ onBlockPatternSelect }
-					composite={ composite }
-				/>
-			) ) }
-		</Composite>
+			<Composite
+				{ ...composite }
+				role="listbox"
+				className={ containerClass }
+				aria-label={ __( 'Patterns list' ) }
+			>
+				{ patterns.map( ( pattern ) => (
+					<BlockPattern
+						key={ pattern.name }
+						pattern={ pattern }
+						onSelect={ onBlockPatternSelect }
+						composite={ composite }
+					/>
+				) ) }
+			</Composite>
+		</div>
 	);
 };
 
 function BlockPattern( { pattern, onSelect, composite } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
-	const { blocks, title, description, viewportWidth = 700 } = pattern;
+	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPattern,
 		`${ baseClassName }__item-description`
@@ -94,9 +106,6 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
-				<div className={ `${ baseClassName }__item-title` }>
-					{ title }
-				</div>
 			</CompositeItem>
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
@@ -107,7 +116,7 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 	);
 }
 
-function BlockPatternSlide( { className, pattern } ) {
+function BlockPatternSlide( { className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
@@ -119,7 +128,10 @@ function BlockPatternSlide( { className, pattern } ) {
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<BlockPreview blocks={ blocks } __experimentalLive />
+			<BlockPreview
+				blocks={ blocks }
+				__experimentalMinHeight={ minHeight }
+			/>
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ description }
@@ -141,6 +153,10 @@ const BlockPatternSetup = ( {
 	const [ showBlank, setShowBlank ] = useState( false );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
+	const [
+		contentResizeListener,
+		{ height: contentHeight },
+	] = useResizeObserver();
 
 	if ( ! patterns?.length || showBlank ) {
 		return startBlankComponent;
@@ -152,35 +168,44 @@ const BlockPatternSetup = ( {
 	};
 	const onPatternSelectCallback =
 		onBlockPatternSelect || onBlockPatternSelectDefault;
+	const onStartBlank = startBlankComponent
+		? () => {
+				setShowBlank( true );
+		  }
+		: undefined;
 	return (
-		<div
-			className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
-		>
-			<SetupToolbar
-				viewMode={ viewMode }
-				setViewMode={ setViewMode }
-				activeSlide={ activeSlide }
-				totalSlides={ patterns.length }
-				handleNext={ () => {
-					setActiveSlide( ( active ) => active + 1 );
-				} }
-				handlePrevious={ () => {
-					setActiveSlide( ( active ) => active - 1 );
-				} }
-				onBlockPatternSelect={ () => {
-					onPatternSelectCallback( patterns[ activeSlide ].blocks );
-				} }
-				onStartBlank={ () => {
-					setShowBlank( true );
-				} }
-			/>
-			<SetupContent
-				viewMode={ viewMode }
-				activeSlide={ activeSlide }
-				patterns={ patterns }
-				onBlockPatternSelect={ onPatternSelectCallback }
-			/>
-		</div>
+		<>
+			{ contentResizeListener }
+			<div
+				className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
+			>
+				<SetupContent
+					viewMode={ viewMode }
+					activeSlide={ activeSlide }
+					patterns={ patterns }
+					onBlockPatternSelect={ onPatternSelectCallback }
+					height={ contentHeight - 2 * 60 }
+				/>
+				<SetupToolbar
+					viewMode={ viewMode }
+					setViewMode={ setViewMode }
+					activeSlide={ activeSlide }
+					totalSlides={ patterns.length }
+					handleNext={ () => {
+						setActiveSlide( ( active ) => active + 1 );
+					} }
+					handlePrevious={ () => {
+						setActiveSlide( ( active ) => active - 1 );
+					} }
+					onBlockPatternSelect={ () => {
+						onPatternSelectCallback(
+							patterns[ activeSlide ].blocks
+						);
+					} }
+					onStartBlank={ onStartBlank }
+				/>
+			</div>
+		</>
 	);
 };
 
diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index 44157626ca9725..5cba76bf99ee36 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -17,7 +17,9 @@ import { VIEWMODES } from './constants';
 
 const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
+		{ onStartBlank && (
+			<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
+		) }
 		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>
diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
index 17bcf3b8191d6e..f6842684644490 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -5,8 +5,6 @@
 	align-items: flex-start;
 	width: 100%;
 	border-radius: $radius-block-ui;
-	box-shadow: inset 0 0 0 $border-width $gray-900;
-	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 
 	// TODO change to check parent.
 	&.view-mode-grid {
@@ -15,37 +13,41 @@
 		}
 
 		.block-editor-block-pattern-setup__container {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			grid-gap: $grid-unit-20;
-			padding: $grid-unit-20;
-			max-height: 550px;
-			overflow: auto;
-			margin: 0 $border-width $border-width $border-width;
-			width: calc(100% - #{ $border-width * 2 });
-			background: $white;
+			column-gap: $grid-unit-30;
+			display: block;
+			width: 100%;
+			padding: $grid-unit-40;
+			column-count: 2;
+
+			@include break-huge() {
+				column-count: 3;
+			}
 
 			.block-editor-block-preview__container,
 			div[role="button"] {
 				cursor: pointer;
 			}
 
-			.block-editor-block-pattern-setup-list__item-title {
-				padding: $grid-unit-05;
-				font-size: $helptext-font-size;
-				text-align: center;
-			}
+			.block-editor-block-pattern-setup-list__list-item {
+				break-inside: avoid-column;
+				margin-bottom: $grid-unit-30;
+
+				.block-editor-block-preview__container {
+					min-height: 100px;
+					border-radius: $radius-block-ui;
+					border: $border-width solid $gray-300;
+				}
 
-			.block-editor-block-preview__container {
-				border-radius: $radius-block-ui;
-				border: $border-width solid $gray-300;
+				.block-editor-block-preview__content {
+					width: 100%;
+				}
 			}
 		}
 	}
 
 	.block-editor-block-pattern-setup__toolbar {
+		height: $header-height;
 		box-sizing: border-box;
-		position: relative;
 		padding: $grid-unit-20;
 		width: 100%;
 		text-align: left;
@@ -54,13 +56,12 @@
 		// Block UI appearance.
 		border-radius: $radius-block-ui $radius-block-ui 0 0;
 		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
+		border-top: 1px solid $gray-300;
+		align-self: flex-end;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;
@@ -93,13 +94,12 @@
 				box-sizing: border-box;
 			}
 			.pattern-slide {
-				opacity: 0;
 				position: absolute;
 				top: 0;
 				width: 100%;
 				margin: auto;
-				padding: $grid-unit-20;
-				transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
+				padding: 0;
+				transition: transform 0.5s, z-index 0.5s;
 				z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");
 
 				&.active-slide {
@@ -125,3 +125,9 @@
 		}
 	}
 }
+
+.block-editor-block-pattern-setup__carousel,
+.block-editor-block-pattern-setup__grid {
+	width: 100%;
+	overflow-y: auto;
+}
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index f480b83ce58e26..d2eca43010a7c0 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -19,7 +19,11 @@ let MemoizedBlockList;
 
 const MAX_HEIGHT = 2000;
 
-function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
+function AutoBlockPreview( {
+	viewportWidth,
+	__experimentalPadding,
+	__experimentalMinHeight,
+} ) {
 	const [
 		containerResizeListener,
 		{ width: containerWidth },
@@ -68,6 +72,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						contentHeight > MAX_HEIGHT
 							? MAX_HEIGHT * scale
 							: undefined,
+					minHeight: __experimentalMinHeight,
 				} }
 			>
 				<Iframe
@@ -98,6 +103,10 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						// This is a catch-all max-height for patterns.
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
+						minHeight:
+							scale < 1 && __experimentalMinHeight
+								? __experimentalMinHeight / scale
+								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index b43d8e9a74abd2..d27f6235a658c2 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -29,6 +29,7 @@ export function BlockPreview( {
 	viewportWidth = 1200,
 	__experimentalLive = false,
 	__experimentalOnClick,
+	__experimentalMinHeight,
 } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -51,6 +52,7 @@ export function BlockPreview( {
 				<AutoHeightBlockPreview
 					viewportWidth={ viewportWidth }
 					__experimentalPadding={ __experimentalPadding }
+					__experimentalMinHeight={ __experimentalMinHeight }
 				/>
 			) }
 		</BlockEditorProvider>
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index f31945a08f1d37..743efe42dacf23 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cloneBlock } from '@wordpress/blocks';
+import { store as blocksStore, cloneBlock } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
@@ -12,9 +12,15 @@ import {
 	useSetting,
 	store as blockEditorStore,
 	useInnerBlocksProps,
+	__experimentalGetMatchingVariation as getMatchingVariation,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
+import {
+	Button,
+	SelectControl,
+	Placeholder,
+	Modal,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -27,7 +33,11 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 import { getFirstQueryClientIdFromBlocks } from '../utils';
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
-export function QueryContent( { attributes, setAttributes } ) {
+export function QueryContent( {
+	attributes,
+	setAttributes,
+	openPatternSelectionModal,
+} ) {
 	const {
 		queryId,
 		query,
@@ -102,6 +112,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
+					openPatternSelectionModal={ openPatternSelectionModal }
 				/>
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
@@ -124,43 +135,131 @@ export function QueryContent( { attributes, setAttributes } ) {
 	);
 }
 
-function QueryPatternSetup( props ) {
-	const { clientId, name: blockName } = props;
+function QueryPatternSetup( {
+	attributes,
+	clientId,
+	name,
+	openPatternSelectionModal,
+	setAttributes,
+} ) {
+	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
-	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-	const onBlockPatternSelect = ( blocks ) => {
-		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
-			clonedBlocks
+
+	const { blockType, allVariations, hasPatterns } = useSelect(
+		( select ) => {
+			const { getBlockVariations, getBlockType } = select( blocksStore );
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				blockType: getBlockType( name ),
+				allVariations: getBlockVariations( name ),
+				hasPatterns: !! __experimentalGetPatternsByBlockTypes(
+					name,
+					rootClientId
+				).length,
+			};
+		},
+		[ name, clientId ]
+	);
+
+	const matchingVariation = getMatchingVariation( attributes, allVariations );
+	const icon = matchingVariation?.icon || blockType?.icon?.src;
+	const label = matchingVariation?.title || blockType?.title;
+	if ( isStartingBlank ) {
+		return (
+			<QueryPlaceholder
+				clientId={ clientId }
+				name={ name }
+				setAttributes={ setAttributes }
+				icon={ icon }
+				label={ label }
+			/>
 		);
-		replaceBlock( clientId, clonedBlocks );
-		if ( firstQueryClientId ) {
-			selectBlock( firstQueryClientId );
-		}
-	};
-	// `startBlankComponent` is what to render when clicking `Start blank`
-	// or if no matched patterns are found.
+	}
 	return (
 		<div { ...blockProps }>
-			<BlockPatternSetup
-				blockName={ blockName }
-				clientId={ clientId }
-				startBlankComponent={ <QueryPlaceholder { ...props } /> }
-				onBlockPatternSelect={ onBlockPatternSelect }
-			/>
+			<Placeholder
+				icon={ icon }
+				label={ label }
+				instructions={ __(
+					'Choose a pattern for the query loop or start blank.'
+				) }
+			>
+				{ !! hasPatterns && (
+					<Button
+						variant="primary"
+						onClick={ openPatternSelectionModal }
+					>
+						{ __( 'Choose' ) }
+					</Button>
+				) }
+
+				<Button
+					variant="secondary"
+					onClick={ () => {
+						setIsStartingBlank( true );
+					} }
+				>
+					{ __( 'Start blank' ) }
+				</Button>
+			</Placeholder>
 		</div>
 	);
 }
 
 const QueryEdit = ( props ) => {
-	const { clientId } = props;
+	const { clientId, name } = props;
+	const [
+		isPatternSelectionModalOpen,
+		setIsPatternSelectionModalOpen,
+	] = useState( false );
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const hasInnerBlocks = useSelect(
 		( select ) =>
 			!! select( blockEditorStore ).getBlocks( clientId ).length,
 		[ clientId ]
 	);
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
-	return <Component { ...props } />;
+	const onBlockPatternSelect = ( blocks ) => {
+		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
+		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
+			clonedBlocks
+		);
+		replaceBlock( clientId, clonedBlocks );
+		if ( firstQueryClientId ) {
+			selectBlock( firstQueryClientId );
+		}
+	};
+	return (
+		<>
+			<Component
+				{ ...props }
+				openPatternSelectionModal={ () =>
+					setIsPatternSelectionModalOpen( true )
+				}
+			/>
+			{ isPatternSelectionModalOpen && (
+				<Modal
+					className="block-editor-query-pattern__selection-modal"
+					title={ __( 'Choose a pattern' ) }
+					closeLabel={ __( 'Cancel' ) }
+					onRequestClose={ () =>
+						setIsPatternSelectionModalOpen( false )
+					}
+				>
+					<BlockPatternSetup
+						blockName={ name }
+						clientId={ clientId }
+						onBlockPatternSelect={ onBlockPatternSelect }
+					/>
+				</Modal>
+			) }
+		</>
+	);
 };
 
 export default QueryEdit;
diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js
index 51b31d59e11c6d..07151aff4823be 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useBlockProps,
 	__experimentalBlockVariationPicker,
-	__experimentalGetMatchingVariation as getMatchingVariation,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -13,13 +12,8 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 
-const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
-	const {
-		blockType,
-		defaultVariation,
-		scopeVariations,
-		allVariations,
-	} = useSelect(
+function QueryPlaceholder( { clientId, name, setAttributes, icon, label } ) {
+	const { defaultVariation, scopeVariations } = useSelect(
 		( select ) => {
 			const {
 				getBlockVariations,
@@ -31,16 +25,12 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
 				blockType: getBlockType( name ),
 				defaultVariation: getDefaultBlockVariation( name, 'block' ),
 				scopeVariations: getBlockVariations( name, 'block' ),
-				allVariations: getBlockVariations( name ),
 			};
 		},
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const blockProps = useBlockProps();
-	const matchingVariation = getMatchingVariation( attributes, allVariations );
-	const icon = matchingVariation?.icon || blockType?.icon?.src;
-	const label = matchingVariation?.title || blockType?.title;
 	return (
 		<div { ...blockProps }>
 			<__experimentalBlockVariationPicker
@@ -64,6 +54,6 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
 			/>
 		</div>
 	);
-};
+}
 
 export default QueryPlaceholder;
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index 92db79c7dad7b2..c9e02a5d2a3ace 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -16,6 +16,7 @@ export default function QueryToolbar( {
 	attributes: { query, displayLayout },
 	setQuery,
 	setDisplayLayout,
+	openPatternSelectionModal,
 } ) {
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
@@ -128,6 +129,11 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
+			<ToolbarGroup className="wp-block-template-part__block-control-group">
+				<ToolbarButton onClick={ openPatternSelectionModal }>
+					{ __( 'Replace' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
 			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index 27d4ce00c4939a..db83d903f9c1a0 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -5,3 +5,41 @@
 .wp-block-query__create-new-link {
 	padding: 0 $grid-unit-20 $grid-unit-20 56px;
 }
+
+.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: $grid-unit-10;
+
+	.block-editor-block-patterns-list__list-item {
+		margin-bottom: 0;
+		.block-editor-block-preview__container {
+			max-height: 250px;
+		}
+	}
+}
+
+.block-editor-query-pattern__selection-modal .components-modal__content {
+	overflow: hidden;
+	padding: 0;
+	&::before {
+		margin-bottom: 0;
+	}
+}
+
+.block-editor-query-pattern__selection-modal {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: $break-medium - $grid-unit-20 * 2;
+	}
+	@include break-large() {
+		height: 80%;
+		width: 80%;
+		max-height: none;
+	}
+}
diff --git a/packages/e2e-tests/specs/editor/blocks/query.test.js b/packages/e2e-tests/specs/editor/blocks/query.test.js
index 769abbf76bee37..e051783ec7ebc0 100644
--- a/packages/e2e-tests/specs/editor/blocks/query.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/query.test.js
@@ -33,9 +33,14 @@ describe( 'Query block', () => {
 	describe( 'Query block insertion', () => {
 		it( 'Carousel', async () => {
 			await insertBlock( 'Query' );
+			// Wait for the choose pattern button
+			const choosePatternButton = await page.waitForSelector(
+				'div[data-type="core/query"] button.is-primary'
+			);
+			await choosePatternButton.click();
 			// Wait for pattern blocks to be loaded.
 			await page.waitForSelector(
-				'.block-editor-block-pattern-setup__container .wp-block-post-title'
+				'.block-editor-block-pattern-setup__container iframe[title="Editor canvas"]'
 			);
 			/**
 			 * Ensure that carousel is working by checking slider css classes
@@ -70,6 +75,11 @@ describe( 'Query block', () => {
 		} );
 		it( 'Grid view', async () => {
 			await insertBlock( 'Query' );
+			// Wait for the choose pattern button
+			const choosePatternButton = await page.waitForSelector(
+				'div[data-type="core/query"] button.is-primary'
+			);
+			await choosePatternButton.click();
 			// Wait for patterns setup to be loaded.
 			await page.waitForSelector(
 				'.block-editor-block-pattern-setup__display-controls'
@@ -80,8 +90,8 @@ describe( 'Query block', () => {
 			);
 			await gridViewButton.click();
 			// Wait for patterns to be loaded and click the wanted pattern.
-			const gridPattern = await page.waitForXPath(
-				'//div[@class="block-editor-block-pattern-setup-list__item-title" and contains(text(), "Query Test 2")]'
+			const gridPattern = await page.waitForSelector(
+				'.block-editor-block-pattern-setup-list__list-item[aria-label="Query Test 2"]'
 			);
 			await gridPattern.click();
 			// Wait for pattern setup to go away.