diff --git a/components/pages/realtime/RealtimeHeader.js b/components/pages/realtime/RealtimeHeader.js
index 5a7e1c3f..a5543be4 100644
--- a/components/pages/realtime/RealtimeHeader.js
+++ b/components/pages/realtime/RealtimeHeader.js
@@ -9,14 +9,26 @@ export default function RealtimeHeader({ data = {} }) {
   return (
     <div className={styles.header}>
       <div className={styles.metrics}>
-        <MetricCard label={formatMessage(labels.views)} value={pageviews?.length} hideComparison />
         <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.views)}
+          value={pageviews?.length}
+          hideComparison
+        />
+        <MetricCard
+          className={styles.card}
           label={formatMessage(labels.visitors)}
           value={visitors?.length}
           hideComparison
         />
-        <MetricCard label={formatMessage(labels.events)} value={events?.length} hideComparison />
         <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.events)}
+          value={events?.length}
+          hideComparison
+        />
+        <MetricCard
+          className={styles.card}
           label={formatMessage(labels.countries)}
           value={countries?.length}
           hideComparison
diff --git a/components/pages/realtime/RealtimeHeader.module.css b/components/pages/realtime/RealtimeHeader.module.css
index a326e631..f87d86e8 100644
--- a/components/pages/realtime/RealtimeHeader.module.css
+++ b/components/pages/realtime/RealtimeHeader.module.css
@@ -7,4 +7,15 @@
 
 .metrics {
   display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  justify-self: flex-start;
+}
+
+@media only screen and (max-width: 992px) {
+  .card {
+    flex-basis: calc(50% - 20px);
+  }
 }