diff --git a/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js b/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js
index 1e6b7783999..aea517688a5 100644
--- a/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js
+++ b/plugins/woocommerce-admin/client/analytics/components/leaderboard/index.js
@@ -49,14 +49,15 @@ export class Leaderboard extends Component {
 	render() {
 		const { isRequesting, isError, totalRows, title } = this.props;
 		const rows = this.getFormattedRows();
+		const classes = 'woocommerce-leaderboard woocommerce-analytics__card';
 
 		if ( isError ) {
-			return <ReportError className="woocommerce-leaderboard" isError />;
+			return <ReportError className={ classes } isError />;
 		}
 
 		if ( ! isRequesting && rows.length === 0 ) {
 			return (
-				<Card title={ title } className="woocommerce-leaderboard woocommerce-analytics__card">
+				<Card title={ title } className={ classes }>
 					<EmptyTable>
 						{ __( 'No data recorded for the selected time period.', 'woocommerce-admin' ) }
 					</EmptyTable>
@@ -66,7 +67,7 @@ export class Leaderboard extends Component {
 
 		return (
 			<TableCard
-				className="woocommerce-leaderboard"
+				className={ classes }
 				headers={ this.getFormattedHeaders() }
 				isLoading={ isRequesting }
 				rows={ rows }
diff --git a/plugins/woocommerce-admin/client/analytics/report/style.scss b/plugins/woocommerce-admin/client/analytics/report/style.scss
index 86920d0a91b..47214cf566e 100644
--- a/plugins/woocommerce-admin/client/analytics/report/style.scss
+++ b/plugins/woocommerce-admin/client/analytics/report/style.scss
@@ -13,6 +13,9 @@
 	}
 }
 
+// @todo Once we switch to the Gutenberg `Card` component, we should probably
+// drop this class and override all cards within the wc-admin scope or make an
+// exportable card based on the Gutenberg component that houses wc-admin styles.
 .woocommerce-analytics__card {
 	border-radius: 0;
 	border: 1px solid $core-grey-light-700;