diff --git a/src/components/ActivityHeatmap.tsx b/src/components/ActivityHeatmap.tsx
index 973d0aa..93f93dc 100644
--- a/src/components/ActivityHeatmap.tsx
+++ b/src/components/ActivityHeatmap.tsx
@@ -1,3 +1,5 @@
+import HeatmapLegend from "./HeatmapLegend";
+
 type Props = {
   /** heatmap[dayOfWeek 0-6][hour 0-23] event counts */
   heatmap: number[][];
@@ -91,22 +93,7 @@ export default function ActivityHeatmap({ heatmap, totalEvents }: Props) {
         ))}
       </svg>
 
-      <div className="mt-2 flex items-center justify-end gap-1 text-xs text-muted">
-        <span>Less</span>
-        {[0, 1, 2, 3, 4].map((level) => (
-          <div
-            key={level}
-            className="h-3 w-3 rounded-sm"
-            style={{
-              backgroundColor:
-                level === 0
-                  ? "rgba(var(--card-border-rgb), 0.4)"
-                  : `rgba(var(--accent-rgb), ${0.2 + level * 0.2})`,
-            }}
-          />
-        ))}
-        <span>More</span>
-      </div>
+      <HeatmapLegend />
     </div>
   );
 }
diff --git a/src/components/ContributionGraph.tsx b/src/components/ContributionGraph.tsx
index 4c775de..c42abc8 100644
--- a/src/components/ContributionGraph.tsx
+++ b/src/components/ContributionGraph.tsx
@@ -1,3 +1,4 @@
+import HeatmapLegend from "./HeatmapLegend";
 import type { ContributionData } from "@/lib/types";
 
 type Props = {
@@ -126,22 +127,7 @@ export default function ContributionGraph({ contributions }: Props) {
         )}
       </svg>
 
-      <div className="mt-2 flex items-center justify-end gap-1 text-xs text-muted">
-        <span>Less</span>
-        {[0, 1, 2, 3, 4].map((level) => (
-          <div
-            key={level}
-            className="h-3 w-3 rounded-sm"
-            style={{
-              backgroundColor:
-                level === 0
-                  ? "rgba(var(--card-border-rgb), 0.4)"
-                  : `rgba(var(--accent-rgb), ${0.2 + level * 0.2})`,
-            }}
-          />
-        ))}
-        <span>More</span>
-      </div>
+      <HeatmapLegend />
     </div>
   );
 }
diff --git a/src/components/HeatmapLegend.tsx b/src/components/HeatmapLegend.tsx
new file mode 100644
index 0000000..d6dae51
--- /dev/null
+++ b/src/components/HeatmapLegend.tsx
@@ -0,0 +1,20 @@
+export default function HeatmapLegend() {
+  return (
+    <div className="mt-2 flex items-center justify-end gap-1 text-xs text-muted">
+      <span>Less</span>
+      {[0, 1, 2, 3, 4].map((level) => (
+        <div
+          key={level}
+          className="h-3 w-3 rounded-sm"
+          style={{
+            backgroundColor:
+              level === 0
+                ? "rgba(var(--card-border-rgb), 0.4)"
+                : `rgba(var(--accent-rgb), ${0.2 + level * 0.2})`,
+          }}
+        />
+      ))}
+      <span>More</span>
+    </div>
+  );
+}