diff --git a/apps/ui/src/components/site-overview-view/preview-sites-section.tsx b/apps/ui/src/components/site-overview-view/preview-sites-section.tsx
new file mode 100644
index 0000000000..14719d1d2a
--- /dev/null
+++ b/apps/ui/src/components/site-overview-view/preview-sites-section.tsx
@@ -0,0 +1,220 @@
+import { DAY_MS, DEMO_SITE_EXPIRATION_DAYS } from '@studio/common/constants';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { copy, external, Icon, moreVertical, plus, update } from '@wordpress/icons';
+import { IconButton, Tooltip } from '@wordpress/ui';
+import { clsx } from 'clsx';
+import { Fragment, useMemo } from 'react';
+import * as Menu from '@/components/menu';
+import { ensureProtocol, stripProtocol } from '@/components/site-dropdown/utils';
+import { useConnector } from '@/data/core';
+import { useAuthUser } from '@/data/queries/use-auth-user';
+import { usePublishPreviewSite } from '@/data/queries/use-preview-site';
+import { useSnapshots, useSnapshotUsage } from '@/data/queries/use-snapshots';
+import { useOffline } from '@/hooks/use-offline';
+import styles from './cards.module.css';
+import { CardEmptyState, CardRows, CardSection, RowDivider } from './overview-card';
+import { RowLink } from './row-link';
+import type { SiteDetails, Snapshot } from '@/data/core';
+
+const LIFETIME_MS = DEMO_SITE_EXPIRATION_DAYS * DAY_MS;
+
+export function PreviewSitesSection( { site }: { site: SiteDetails } ) {
+ const { data: authUser } = useAuthUser();
+ const isOffline = useOffline();
+ const { data: allSnapshots } = useSnapshots( authUser?.id );
+ const { data: usage } = useSnapshotUsage( authUser?.id );
+ const publishPreviewSite = usePublishPreviewSite();
+
+ const snapshots = useMemo(
+ () =>
+ ( allSnapshots ?? [] )
+ .filter( ( snapshot ) => snapshot.localSiteId === site.id )
+ .sort( ( a, b ) => b.date - a.date ),
+ [ allSnapshots, site.id ]
+ );
+
+ const publishAction = authUser ? (
+
+ { usage && usage.siteLimit > 0 ? (
+
+
+ { sprintf(
+ // translators: 1: previews in use, 2: total previews allowed.
+ __( '%1$d of %2$d' ),
+ usage.siteCount,
+ usage.siteLimit
+ ) }
+
+ }
+ />
+ }>
+ { sprintf(
+ // translators: 1: previews in use, 2: total previews allowed.
+ __( '%1$d of %2$d preview sites used on your account' ),
+ usage.siteCount,
+ usage.siteLimit
+ ) }
+
+
+ ) : null }
+ publishPreviewSite.mutate( { siteId: site.id } ) }
+ />
+
+ ) : null;
+
+ return (
+
+ { ! authUser ? (
+
+ { __( 'Sign in to publish a preview site and share your work.' ) }
+
+ ) : ! snapshots.length ? (
+
+ { sprintf(
+ // translators: %d: number of days a preview site stays online.
+ _n(
+ 'No preview site yet. Publishing one gives you a shareable link for %d day.',
+ 'No preview site yet. Publishing one gives you a shareable link for %d days.',
+ DEMO_SITE_EXPIRATION_DAYS
+ ),
+ DEMO_SITE_EXPIRATION_DAYS
+ ) }
+
+ ) : (
+
+ { snapshots.map( ( snapshot, index ) => (
+
+ { index > 0 && }
+
+
+ ) ) }
+
+ ) }
+
+ );
+}
+
+function PreviewRow( { site, snapshot }: { site: SiteDetails; snapshot: Snapshot } ) {
+ const connector = useConnector();
+ const isOffline = useOffline();
+ const publishPreviewSite = usePublishPreviewSite();
+ const life = describeLife( snapshot );
+ const url = ensureProtocol( snapshot.url );
+
+ const republish = () =>
+ publishPreviewSite.mutate( {
+ siteId: site.id,
+ existingHostname: life.expired ? undefined : stripProtocol( snapshot.url ),
+ } );
+
+ return (
+
+
+ { life.expired ? (
+
+ { stripProtocol( snapshot.url ) }
+
+ ) : (
+
+ ) }
+
+ { life.label }
+
+
+
+ { life.expired ? (
+
+ ) : (
+ void connector.openExternalUrl( url ) }
+ />
+ ) }
+
+
+ }
+ />
+
+ void connector.copyText( url ) }>
+
+
+
+ { __( 'Copy link' ) }
+
+ { ! life.expired && (
+
+
+
+
+ { __( 'Update preview' ) }
+
+ ) }
+
+
+
+
+ );
+}
+
+function describeLife( snapshot: Snapshot ): {
+ label: string;
+ endingSoon: boolean;
+ expired: boolean;
+} {
+ const remainingMs = snapshot.date + LIFETIME_MS - Date.now();
+ if ( remainingMs <= 0 ) {
+ return { label: __( 'Expired' ), endingSoon: false, expired: true };
+ }
+
+ const remainingDays = Math.ceil( remainingMs / DAY_MS );
+ return {
+ label: sprintf(
+ // translators: %d: number of days until a preview site expires.
+ _n( 'Expires in %d day', 'Expires in %d days', remainingDays ),
+ remainingDays
+ ),
+ endingSoon: remainingMs <= DAY_MS,
+ expired: false,
+ };
+}