diff --git a/client/dashboard/components/empty-state/index.stories.tsx b/client/dashboard/components/empty-state/index.stories.tsx
index 9f656edcffd2..b74cc5434828 100644
--- a/client/dashboard/components/empty-state/index.stories.tsx
+++ b/client/dashboard/components/empty-state/index.stories.tsx
@@ -189,6 +189,26 @@ export const WithoutContentWrapper: Story = {
 	},
 };
 
+export const CompactWrapper: Story = {
+	render: ( args ) => (
+		<EmptyState.Wrapper isCompact>
+			<EmptyState { ...args } />
+		</EmptyState.Wrapper>
+	),
+	args: {
+		children: (
+			<>
+				<EmptyState.Header>
+					<EmptyState.Title>Site blocked</EmptyState.Title>
+					<EmptyState.Description>
+						This site has been blocked and is no longer accessible.
+					</EmptyState.Description>
+				</EmptyState.Header>
+			</>
+		),
+	},
+};
+
 export const WithContainerAndCallout: Story = {
 	render: ( args ) => (
 		<EmptyState.Wrapper>
diff --git a/client/dashboard/components/empty-state/index.tsx b/client/dashboard/components/empty-state/index.tsx
index b3cb67ca3499..fae79c361352 100644
--- a/client/dashboard/components/empty-state/index.tsx
+++ b/client/dashboard/components/empty-state/index.tsx
@@ -1,5 +1,6 @@
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
+import clsx from 'clsx';
 import { useLayoutEffect, useRef, type ReactNode } from 'react';
 import { ActionList } from '../action-list';
 import { Card, CardBody } from '../card';
@@ -18,9 +19,11 @@ function EmptyState( { children }: { children?: ReactNode } ) {
 
 function EmptyStateWrapper( {
 	isBorderless = false,
+	isCompact = false,
 	children,
 }: {
 	isBorderless?: boolean;
+	isCompact?: boolean;
 	children: ReactNode;
 } ) {
 	const cardRef = useRef< HTMLElement >( null );
@@ -29,15 +32,19 @@ function EmptyStateWrapper( {
 	// This keeps the visual layout stable between view transitions. It's fine if
 	// the wrapper expands beyond this initial calculation after layout changes.
 	useLayoutEffect( () => {
-		if ( ! cardRef.current ) {
+		if ( isCompact || ! cardRef.current ) {
 			return;
 		}
 		const rect = cardRef.current.getBoundingClientRect();
 		cardRef.current.style.setProperty( '--dashboard-empty-state-offset', `${ rect.top }px` );
-	}, [] );
+	}, [ isCompact ] );
+
+	const className = clsx( 'dashboard-empty-state__wrapper', {
+		'is-compact': isCompact,
+	} );
 
 	return (
-		<Card ref={ cardRef } className="dashboard-empty-state__wrapper" isBorderless={ isBorderless }>
+		<Card ref={ cardRef } className={ className } isBorderless={ isBorderless }>
 			<CardBody>
 				<VStack spacing={ 8 } alignment="center" className="dashboard-empty-state__wrapper-content">
 					{ children }
diff --git a/client/dashboard/components/empty-state/style.scss b/client/dashboard/components/empty-state/style.scss
index d6eaf9523f98..20873d4d50f4 100644
--- a/client/dashboard/components/empty-state/style.scss
+++ b/client/dashboard/components/empty-state/style.scss
@@ -18,6 +18,17 @@
 	}
 }
 
+.dashboard-empty-state__wrapper.is-compact {
+	min-height: 0;
+	justify-content: flex-start;
+}
+
+.dashboard-empty-state__wrapper.is-compact .dashboard-empty-state__wrapper-content {
+	@include break-medium {
+		padding-block: 0;
+	}
+}
+
 .dashboard-empty-state__wrapper-content {
 	@include break-medium {
 		padding-block: $grid-unit-40;
diff --git a/client/dashboard/me/blocked-sites/index.tsx b/client/dashboard/me/blocked-sites/index.tsx
index f8ddf9d0d6aa..4b8bec58005a 100644
--- a/client/dashboard/me/blocked-sites/index.tsx
+++ b/client/dashboard/me/blocked-sites/index.tsx
@@ -11,6 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Breadcrumbs from '../../app/breadcrumbs';
 import { DataViewsCard } from '../../components/dataviews';
+import EmptyState from '../../components/empty-state';
 import InlineSupportLink from '../../components/inline-support-link';
 import { PageHeader } from '../../components/page-header';
 import PageLayout from '../../components/page-layout';
@@ -150,7 +151,13 @@ export default function BlockedSites() {
 			}
 		>
 			{ ! isLoading && sites.length === 0 ? (
-				<p>{ __( "You haven't blocked any sites yet." ) }</p>
+				<EmptyState.Wrapper isCompact>
+					<EmptyState>
+						<EmptyState.Description>
+							{ __( "You haven't blocked any sites yet." ) }
+						</EmptyState.Description>
+					</EmptyState>
+				</EmptyState.Wrapper>
 			) : (
 				<DataViewsCard ref={ ref }>
 					<DataViews< BlockedSite >