diff --git a/src/App.tsx b/src/App.tsx
index 102093e..d915e63 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -165,14 +165,27 @@ export default function App() {
             </div>
           </dl>
           <ul className="bucket-list" aria-label={`${selectedPeriod.metricLabel} 활동 유형별 분포`}>
-            {selectedPeriod.buckets.map((bucket) => (
-              <li key={bucket.label}>
-                <span className="bucket-swatch" style={{ backgroundColor: bucket.color }} aria-hidden="true" />
-                <span className="bucket-label">{bucket.displayLabel}</span>
-                <strong>{bucket.count}</strong>
-                <small>{Math.round((bucket.count / totalActivityCount) * 100)}%</small>
-              </li>
-            ))}
+            {selectedPeriod.buckets.map((bucket) => {
+              const share = Math.round((bucket.count / totalActivityCount) * 100)
+
+              return (
+                <li key={bucket.label}>
+                  <span className="bucket-swatch" style={{ backgroundColor: bucket.color }} aria-hidden="true" />
+                  <span className="bucket-label">{bucket.displayLabel}</span>
+                  <strong>{bucket.count}</strong>
+                  <small>{share}%</small>
+                  <span className="bucket-share" aria-hidden="true">
+                    <span
+                      style={{
+                        width: `${share}%`,
+                        color: bucket.color,
+                        backgroundColor: bucket.color,
+                      }}
+                    />
+                  </span>
+                </li>
+              )
+            })}
           </ul>
         </div>
         <div className="galaxy" aria-label={`${selectedPeriod.metricLabel} GitHub 활동 3D 지도`}>
diff --git a/src/index.css b/src/index.css
index c533f50..3e713e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -157,10 +157,11 @@ h1 {
 .bucket-list li {
   display: grid;
   grid-template-columns: 10px minmax(0, 1fr) auto auto;
+  grid-template-rows: auto 5px;
   gap: 8px;
   align-items: center;
-  min-height: 42px;
-  padding: 10px 12px;
+  min-height: 54px;
+  padding: 10px 12px 12px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-frame);
   background: rgb(255 255 255 / 68%);
@@ -192,6 +193,23 @@ h1 {
   font-variant-numeric: tabular-nums;
 }
 
+.bucket-share {
+  grid-column: 2 / -1;
+  width: 100%;
+  height: 5px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: rgb(17 70 105 / 8%);
+}
+
+.bucket-share span {
+  display: block;
+  height: 100%;
+  min-width: 5px;
+  border-radius: inherit;
+  box-shadow: 0 0 10px currentColor;
+}
+
 .orbit-label {
   display: block;
   min-width: max-content;