diff --git a/components/metrics/ActiveUsers.js b/components/metrics/ActiveUsers.js
index e79b977d..64051946 100644
--- a/components/metrics/ActiveUsers.js
+++ b/components/metrics/ActiveUsers.js
@@ -29,7 +29,7 @@ export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   }
 
   return (
-    <StatusLight variant="success">
+    <StatusLight className={styles.container} variant="success">
       <div className={styles.text}>{formatMessage(messages.activeUsers, { x: count })}</div>
     </StatusLight>
   );
diff --git a/components/metrics/ActiveUsers.module.css b/components/metrics/ActiveUsers.module.css
index cc231d16..1d87fcd8 100644
--- a/components/metrics/ActiveUsers.module.css
+++ b/components/metrics/ActiveUsers.module.css
@@ -1,10 +1,14 @@
 .container {
   display: flex;
   align-items: center;
+  margin-left: 20px;
 }
 
 .text {
   display: flex;
+  white-space: nowrap;
+  font-size: var(--font-size-md);
+  font-weight: 400;
 }
 
 .value {