diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 5162091f91d428..cf7079631b9f36 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -154,20 +154,20 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							} }
 						>
 							{ decodeEntities( siteTitle ) }
+							{ canvasMode === 'view' && (
+								<Button
+									href={ homeUrl }
+									target="_blank"
+									label={ __( 'View site' ) }
+									aria-label={ __(
+										'View site (opens in a new tab)'
+									) }
+									icon={ external }
+									className="edit-site-site-hub__site-view-link"
+								/>
+							) }
 						</motion.div>
 					</AnimatePresence>
-					{ canvasMode === 'view' && (
-						<Button
-							href={ homeUrl }
-							target="_blank"
-							label={ __( 'View site' ) }
-							aria-label={ __(
-								'View site (opens in a new tab)'
-							) }
-							icon={ external }
-							className="edit-site-site-hub__site-view-link"
-						/>
-					) }
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index cc2254a6231ee3..f7bf764d8342fb 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -7,27 +7,6 @@
 	.edit-site-site-hub__container {
 		gap: 0;
 	}
-
-	.edit-site-site-hub__site-view-link {
-		flex-grow: 0;
-		@include break-mobile() {
-			opacity: 0;
-			transition: opacity 0.2s ease-in-out;
-		}
-		&:focus {
-			outline: none;
-			box-shadow: none;
-			opacity: 1;
-		}
-		svg {
-			fill: $white;
-		}
-	}
-	&:hover {
-		.edit-site-site-hub__site-view-link {
-			opacity: 1;
-		}
-	}
 }
 
 .edit-site-site-hub__post-type {
@@ -53,8 +32,35 @@
 }
 
 .edit-site-site-hub__site-title {
+	display: flex;
+	align-items: center;
 	margin-left: $grid-unit-05;
+	gap: $grid-unit-05;
 	flex-grow: 1;
+
+	&:hover {
+		.edit-site-site-hub__site-view-link {
+			opacity: 1;
+		}
+	}
+}
+
+.edit-site-site-hub__site-view-link {
+	flex-grow: 0;
+	@include break-mobile() {
+		opacity: 0;
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: none;
+		opacity: 1;
+	}
+
+	svg {
+		fill: $white;
+	}
 }
 
 .edit-site-site-hub_toggle-command-center {