diff --git a/web/style.css b/web/style.css
index 2ea440f..9b30a5a 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1409,6 +1409,12 @@ body {
   border-radius: 6px;
 }
 
+.activity-balance-history__bar--dense {
+  border: none;
+  background: none;
+  gap: 0;
+}
+
 .activity-balance-history__segment {
   padding: 0;
   align-items: center;
@@ -1421,6 +1427,13 @@ body {
   transform: none;
 }
 
+.activity-balance-history__segment--dense {
+  margin: 0;
+  border: none;
+  box-shadow: none;
+  outline: none;
+}
+
 .activity-balance-history__segment-label {
   font-size: 10px;
   font-weight: 600;
diff --git a/web/ui/visuals/ActivityBalanceHistory.js b/web/ui/visuals/ActivityBalanceHistory.js
index 7be2f85..ffbe78c 100644
--- a/web/ui/visuals/ActivityBalanceHistory.js
+++ b/web/ui/visuals/ActivityBalanceHistory.js
@@ -83,6 +83,9 @@ export class ActivityBalanceHistory {
         : this.entries.length - index;
       const bar = document.createElement('div');
       bar.className = 'activity-balance-history__bar';
+      if (isDenseBarcode) {
+        bar.classList.add('activity-balance-history__bar--dense');
+      }
       bar.setAttribute('role', 'list');
       bar.dataset.index = String(runNumber);
       bar.addEventListener('mouseleave', this.boundHideTooltip);
@@ -104,6 +107,9 @@ export class ActivityBalanceHistory {
       entry.segments.forEach((segment, segmentIndex) => {
         const element = document.createElement('div');
         element.className = 'activity-share__segment activity-balance-history__segment';
+        if (isDenseBarcode) {
+          element.classList.add('activity-balance-history__segment--dense');
+        }
         element.style.setProperty('--segment-color', segment.color || '#6366f1');
         element.style.setProperty('--segment-text-color', computeSegmentTextColor(segment.color));
         element.style.flexGrow = String(segment.minutes);