diff --git a/client/my-sites/stats/stats-email-top-row/style.scss b/client/my-sites/stats/stats-email-top-row/style.scss
index 8b6c2506afc01..6db144ca227e5 100644
--- a/client/my-sites/stats/stats-email-top-row/style.scss
+++ b/client/my-sites/stats/stats-email-top-row/style.scss
@@ -9,6 +9,12 @@ $vertical-margin: 32px;
color: var(--studio-gray-100);
font-size: $font-body-small;
margin-bottom: $vertical-margin;
+ .is-sending-email .highlight-card-count-value {
+ font-size: $font-body-small;
+ font-style: italic;
+ font-family: $sans;
+ padding-top: 10px;
+ }
}
.stats__email-detail {
diff --git a/client/my-sites/stats/stats-email-top-row/top-card.jsx b/client/my-sites/stats/stats-email-top-row/top-card.jsx
index 36a8c4a377be5..72b4b75248821 100644
--- a/client/my-sites/stats/stats-email-top-row/top-card.jsx
+++ b/client/my-sites/stats/stats-email-top-row/top-card.jsx
@@ -1,4 +1,5 @@
import { Card, ShortenedNumber, Spinner } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
/* This is a very stripped down version of HighlightCard
* HighlightCard doesn't support non-numeric values
@@ -29,13 +30,17 @@ const TopCardValue = ( { value, isLoading } ) => {
);
};
-const TopCard = ( { heading, icon, value, isLoading } ) => {
+const TopCard = ( { heading, icon, value, isLoading, emailIsSending = false } ) => {
+ const translate = useTranslate();
return (
{ icon }
{ heading }
-