diff --git a/package-lock.json b/package-lock.json
index ba90e7cd5fb084..ef3827101d91cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67171,7 +67171,8 @@
 				"@wordpress/element": "file:../../packages/element",
 				"@wordpress/i18n": "file:../../packages/i18n",
 				"@wordpress/icons": "file:../../packages/icons",
-				"@wordpress/ui": "file:../../packages/ui"
+				"@wordpress/ui": "file:../../packages/ui",
+				"@wordpress/url": "file:../../packages/url"
 			}
 		},
 		"widgets/welcome": {
diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json
index 96f3cc8cba40c3..f6fa4c012f879e 100644
--- a/tools/eslint/suppressions.json
+++ b/tools/eslint/suppressions.json
@@ -1875,5 +1875,10 @@
 		"@wordpress/use-recommended-components": {
 			"count": 1
 		}
+	},
+	"widgets/site-preview/render.tsx": {
+		"@wordpress/use-recommended-components": {
+			"count": 1
+		}
 	}
 }
diff --git a/widgets/site-preview/package.json b/widgets/site-preview/package.json
index c71524c62091e0..90338322d763fb 100644
--- a/widgets/site-preview/package.json
+++ b/widgets/site-preview/package.json
@@ -9,6 +9,7 @@
 		"@wordpress/element": "file:../../packages/element",
 		"@wordpress/i18n": "file:../../packages/i18n",
 		"@wordpress/icons": "file:../../packages/icons",
-		"@wordpress/ui": "file:../../packages/ui"
+		"@wordpress/ui": "file:../../packages/ui",
+		"@wordpress/url": "file:../../packages/url"
 	}
 }
diff --git a/widgets/site-preview/render.tsx b/widgets/site-preview/render.tsx
index e65b56d3b69f37..f7692d5444a7d4 100644
--- a/widgets/site-preview/render.tsx
+++ b/widgets/site-preview/render.tsx
@@ -5,26 +5,65 @@ import { useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
+import { wordpress } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
 import { Spinner } from '@wordpress/components';
-
-// Dashboard is still experimental.
-// eslint-disable-next-line @wordpress/use-recommended-components
-import { Button, Stack } from '@wordpress/ui';
+import { Button, Icon, Stack, Text } from '@wordpress/ui';
 import styles from './style.module.css';
 
+function PreviewUrlBar( {
+	siteUrl,
+	siteIconUrl,
+}: {
+	siteUrl: string;
+	siteIconUrl?: string;
+} ) {
+	return (
+		<div className={ styles.urlBar }>
+			<Stack
+				direction="row"
+				align="center"
+				gap="xs"
+				className={ styles.urlField }
+			>
+				{ siteIconUrl ? (
+					<img
+						className={ styles.urlFavicon }
+						src={ siteIconUrl }
+						alt=""
+					/>
+				) : (
+					<Icon
+						className={ styles.urlIcon }
+						icon={ wordpress }
+						size={ 12 }
+					/>
+				) }
+				<Text className={ styles.urlText }>{ siteUrl }</Text>
+			</Stack>
+		</div>
+	);
+}
+
 export default function SitePreview() {
 	const [ isIframeLoading, setIsIframeLoading ] = useState( true );
 	const [ isVisitLoading, setIsVisitLoading ] = useState( false );
 	const [ isEditLoading, setIsEditLoading ] = useState( false );
-	const siteUrl = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecord< { url: string } >(
-				'root',
-				'site',
-				undefined
-			)?.url,
-		[]
-	);
+	const { siteUrl, siteIconUrl } = useSelect( ( select ) => {
+		const site = select( coreStore ).getEntityRecord< { url: string } >(
+			'root',
+			'site',
+			undefined
+		);
+		const base = select( coreStore ).getEntityRecord< {
+			site_icon_url?: string;
+		} >( 'root', '__unstableBase', undefined );
+
+		return {
+			siteUrl: site?.url,
+			siteIconUrl: base?.site_icon_url,
+		};
+	}, [] );
 
 	const isBlockTheme = useSelect(
 		( select ) =>
@@ -40,11 +79,14 @@ export default function SitePreview() {
 		return null;
 	}
 
-	const src = `${ siteUrl }/?hide_banners=true&preview_overlay=true&preview=true`;
+	const src = addQueryArgs( siteUrl, {
+		wp_site_preview: 1,
+	} );
 	const editUrl = isBlockTheme ? 'site-editor.php' : 'customize.php';
 
 	return (
-		<div className={ styles.container }>
+		<Stack direction="column" className={ styles.container }>
+			<PreviewUrlBar siteUrl={ siteUrl } siteIconUrl={ siteIconUrl } />
 			<div className={ styles.previewWrap }>
 				{ isIframeLoading && (
 					<Stack
@@ -66,39 +108,39 @@ export default function SitePreview() {
 					// @ts-expect-error — `inert` is not yet in React's HTMLAttributes
 					inert="true"
 				></iframe>
-				<Stack
-					direction="row"
-					align="center"
-					justify="center"
-					gap="sm"
-					className={ styles.overlay }
-				>
-					<Button
-						className={ styles.overlayButton }
-						variant="solid"
-						tone="neutral"
-						loading={ isVisitLoading }
-						onClick={ () => {
-							setIsVisitLoading( true );
-							window.location.href = siteUrl;
-						} }
-					>
-						{ __( 'Visit' ) }
-					</Button>
-					<Button
-						className={ styles.overlayButton }
-						variant="solid"
-						tone="brand"
-						loading={ isEditLoading }
-						onClick={ () => {
-							setIsEditLoading( true );
-							window.location.href = editUrl;
-						} }
+				{ ! isIframeLoading && (
+					<Stack
+						direction="row"
+						align="center"
+						justify="center"
+						gap="sm"
+						className={ styles.overlay }
 					>
-						{ __( 'Edit site' ) }
-					</Button>
-				</Stack>
+						<Button
+							variant="solid"
+							tone="neutral"
+							loading={ isVisitLoading }
+							onClick={ () => {
+								setIsVisitLoading( true );
+								window.location.href = siteUrl;
+							} }
+						>
+							{ __( 'Visit' ) }
+						</Button>
+						<Button
+							variant="solid"
+							tone="brand"
+							loading={ isEditLoading }
+							onClick={ () => {
+								setIsEditLoading( true );
+								window.location.href = editUrl;
+							} }
+						>
+							{ __( 'Edit site' ) }
+						</Button>
+					</Stack>
+				) }
 			</div>
-		</div>
+		</Stack>
 	);
 }
diff --git a/widgets/site-preview/style.module.css b/widgets/site-preview/style.module.css
index 8d7795d57cd4e6..80f4f436797e0e 100644
--- a/widgets/site-preview/style.module.css
+++ b/widgets/site-preview/style.module.css
@@ -13,9 +13,48 @@
 	overflow: hidden;
 }
 
+.urlBar {
+	flex-shrink: 0;
+	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
+	background: var(--wpds-color-bg-surface-neutral-weak);
+	border-block-end: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+}
+
+.urlField {
+	min-width: 0;
+	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+	border-radius: var(--wpds-border-radius-lg);
+	background: var(--wpds-color-bg-surface-neutral);
+}
+
+.urlFavicon {
+	flex-shrink: 0;
+	width: var(--wpds-typography-font-size-xs);
+	height: var(--wpds-typography-font-size-xs);
+	object-fit: contain;
+}
+
+.urlIcon {
+	flex-shrink: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.urlText {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	font-size: var(--wpds-typography-font-size-xs);
+	line-height: var(--wpds-typography-line-height-xs);
+	color: var(--wpds-color-fg-content-neutral);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .previewWrap {
 	position: relative;
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 }
 
 .loading {
@@ -30,7 +69,7 @@
 	inset-inline-start: 50%;
 	width: 250%;
 	min-height: 375%;
-	transform: translate(-50%, -13px) scale(0.4);
+	transform: translate(-50%, 0) scale(0.4);
 	transform-origin: center top;
 }
 
@@ -42,28 +81,13 @@
 	backdrop-filter: blur(1px);
 }
 
-.overlayButton {
-	box-shadow: var(--wpds-elevation-xs);
-}
-
 .previewWrap:hover .overlay,
 .previewWrap:focus-within .overlay {
 	opacity: 1;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-	.previewWrap:hover .overlay,
-	.previewWrap:focus-within .overlay {
-		animation: fadeIn var(--wpds-motion-duration-md) var(--wpds-motion-easing-subtle) both;
-	}
-}
-
-@keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
+@media not (prefers-reduced-motion) {
+	.overlay {
+		transition: opacity var(--wpds-motion-duration-lg) var(--wpds-motion-easing-expressive);
 	}
 }