diff --git a/frontend/src/components/Calendar/WorkloadHeatmap.jsx b/frontend/src/components/Calendar/WorkloadHeatmap.jsx
index bf1ae8a..1f6be5d 100644
--- a/frontend/src/components/Calendar/WorkloadHeatmap.jsx
+++ b/frontend/src/components/Calendar/WorkloadHeatmap.jsx
@@ -81,8 +81,8 @@ export default function WorkloadHeatmap() {
 
   return (
     <div className="flex flex-col h-full bg-surface overflow-auto">
-      {/* Header */}
-      <div className="flex items-center justify-between px-8 pt-6 pb-4">
+      {/* Header — pl-24 clears the fixed 64px navbar button at left-4 */}
+      <div className="flex items-center justify-between pl-24 pr-8 pt-6 pb-4">
         <div>
           <h2 className="text-gold font-bold text-lg tracking-wide">Workload Heatmap</h2>
           <p className="text-text-muted text-xs mt-0.5">20 weeks of deliverable density by status</p>
@@ -105,8 +105,8 @@ export default function WorkloadHeatmap() {
             </div>
 
             {/* Heatmap for this status */}
-            <div className="bg-surface-elevated/40 border border-surface-border rounded-xl p-3 flex-1 min-h-[160px]">
-              <div className="flex gap-2 overflow-x-auto pb-1">
+            <div className="bg-surface-elevated/40 border border-surface-border rounded-xl p-3 flex-1 min-h-[160px] flex items-center justify-center">
+              <div className="flex gap-2 overflow-x-auto pb-1 justify-center">
                 {/* Day labels */}
                 <div className="flex flex-col flex-shrink-0 pt-6" style={{ gap: GAP }}>
                   {DAY_INIT.map((d, i) => (