diff --git a/client/sites/components/sites-dataviews/sites-site-status.tsx b/client/sites/components/sites-dataviews/sites-site-status.tsx
index b667c40611482..2f91f3c8460f1 100644
--- a/client/sites/components/sites-dataviews/sites-site-status.tsx
+++ b/client/sites/components/sites-dataviews/sites-site-status.tsx
@@ -31,6 +31,17 @@ const DeletedStatus = styled.div`
 	}
 `;
 
+const MigrationPendingStatus = styled.span`
+	display: inline-block;
+	padding: 0px 10px;
+	font-size: 12px;
+	border-radius: 4px;
+	background-color: var( --color-warning-20 );
+	line-height: 20px;
+	font-weight: 500;
+	color: var( --color-warning-80 );
+`;
+
 interface SiteStatusProps {
 	site: SiteExcerptData;
 }
@@ -51,7 +62,7 @@ export const SiteStatus = ( { site }: SiteStatusProps ) => {
 	}
 
 	const statusElement = isPending ? (
-		<span className="sites-dataviews__migration-pending-status">{ translatedStatus }</span>
+		<MigrationPendingStatus>{ translatedStatus }</MigrationPendingStatus>
 	) : (
 		translatedStatus
 	);
diff --git a/client/sites/components/sites-dataviews/style.scss b/client/sites/components/sites-dataviews/style.scss
index 65586a0169756..fc6fa6ab502ef 100644
--- a/client/sites/components/sites-dataviews/style.scss
+++ b/client/sites/components/sites-dataviews/style.scss
@@ -97,15 +97,6 @@
 		gap: 6px;
 	}
 
-	.sites-dataviews__migration-pending-status {
-		display: inline-block;
-		padding: 0 10px;
-		font-size: rem(12px);
-		border-radius: 4px;
-		background-color: var(--color-warning-20);
-		line-height: 20px;
-		color: var(--color-warning-80);
-	}
 
 	.stats-sparkline {
 		padding-top: 0;
@@ -130,4 +121,4 @@
 			border-radius: 4px;
 		}
 	}
-}
\ No newline at end of file
+}