diff --git a/web/src/components/UsageHeatMap.tsx b/web/src/components/UsageHeatMap.tsx
index 7f773ebd6..de77055f9 100644
--- a/web/src/components/UsageHeatMap.tsx
+++ b/web/src/components/UsageHeatMap.tsx
@@ -64,6 +64,11 @@ const UsageHeatMap = () => {
     tempDiv.style.top = bounding.top - 2 + "px";
     tempDiv.innerHTML = `${item.count} memos on <span className="date-text">${new Date(item.timestamp as number).toDateString()}</span>`;
     document.body.appendChild(tempDiv);
+
+    if (tempDiv.offsetLeft - tempDiv.clientWidth / 2 < 0) {
+      tempDiv.style.left = bounding.left + tempDiv.clientWidth * 0.4 + "px";
+      tempDiv.className += " offset-left";
+    }
   }, []);
 
   const handleUsageStatItemMouseLeave = useCallback(() => {
diff --git a/web/src/less/usage-heat-map.less b/web/src/less/usage-heat-map.less
index 795bbe91a..03c2118be 100644
--- a/web/src/less/usage-heat-map.less
+++ b/web/src/less/usage-heat-map.less
@@ -54,6 +54,12 @@
     @apply text-gray-300;
   }
 
+  &.offset-left {
+    &::before {
+      left: calc(10% - 5px);
+    }
+  }
+
   &::before {
     content: "";
     position: absolute;