diff --git a/packages/page-staking/src/Payouts/Stash.tsx b/packages/page-staking/src/Payouts/Stash.tsx
index d40e0c3667..7f0e7191f0 100644
--- a/packages/page-staking/src/Payouts/Stash.tsx
+++ b/packages/page-staking/src/Payouts/Stash.tsx
@@ -25,7 +25,7 @@ interface Props {
 }
 
 interface EraInfo {
-  eraStr: string;
+  eraStr: React.ReactNode;
   oldestEra?: BN;
 }
 
diff --git a/packages/page-staking/src/Payouts/Validator.tsx b/packages/page-staking/src/Payouts/Validator.tsx
index 59ef2eea2b..8deb071929 100644
--- a/packages/page-staking/src/Payouts/Validator.tsx
+++ b/packages/page-staking/src/Payouts/Validator.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 interface State {
-  eraStr: string;
+  eraStr: React.ReactNode;
   nominators: Record<string, BN>;
   numNominators: number;
   oldestEra?: BN;
diff --git a/packages/page-staking/src/Payouts/index.tsx b/packages/page-staking/src/Payouts/index.tsx
index 28b2b8c598..0405e268a2 100644
--- a/packages/page-staking/src/Payouts/index.tsx
+++ b/packages/page-staking/src/Payouts/index.tsx
@@ -187,5 +187,9 @@ export default React.memo(styled(Payouts)`
   .payout-eras {
     padding-left: 0.25rem;
     vertical-align: middle;
+
+    span {
+      white-space: nowrap;
+    }
   }
 `);
diff --git a/packages/page-staking/src/Payouts/util.ts b/packages/page-staking/src/Payouts/util.tsx
similarity index 75%
rename from packages/page-staking/src/Payouts/util.ts
rename to packages/page-staking/src/Payouts/util.tsx
index 1e4dc1e669..14aba9c2b9 100644
--- a/packages/page-staking/src/Payouts/util.ts
+++ b/packages/page-staking/src/Payouts/util.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import React from 'react';
 import BN from 'bn.js';
 import { formatNumber } from '@polkadot/util';
 
@@ -9,12 +10,12 @@ function isSingle (entry: BN | [BN, BN]): entry is BN {
   return !Array.isArray(entry);
 }
 
-export function createErasString (eras: BN[]): string {
+export function createErasString (eras: BN[]): React.ReactNode {
   if (!eras.length) {
     return '';
   }
 
-  return eras
+  const parts = eras
     .reduce((result: (BN | [BN, BN])[], era): (BN | [BN, BN])[] => {
       if (result.length === 0) {
         return [era];
@@ -38,10 +39,20 @@ export function createErasString (eras: BN[]): string {
 
       return result;
     }, [])
-    .map((entry): string =>
+    .map((entry) =>
       isSingle(entry)
         ? formatNumber(entry)
         : `${formatNumber(entry[0])}-${formatNumber(entry[1])}`
-    )
-    .join(', ');
+    );
+
+  return (
+    <>
+      {parts.map((section, index) => (
+        <React.Fragment key={section}>
+          {index !== 0 && ', '}
+          <span>{section}</span>
+        </React.Fragment>
+      ))}
+    </>
+  );
 }