diff --git a/assets/css/app.css b/assets/css/app.css
index b623a0c..bef2604 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -395,7 +395,7 @@ button {
 }
 
 .calendar-heatmap {
-    min-height: 16rem;
+    min-height: 0;
     overflow-x: auto;
 }
 
@@ -403,7 +403,7 @@ button {
     display: flex;
     justify-content: flex-end;
     gap: 0.45rem;
-    margin-top: 1rem;
+    margin-top: 0.55rem;
     color: var(--muted);
     font-size: 0.82rem;
 }
@@ -442,11 +442,15 @@ button {
 
 .calendar-svg,
 .line-chart svg {
-    width: 100%;
     height: auto;
     display: block;
 }
 
+.calendar-svg {
+    width: auto;
+    max-width: 100%;
+}
+
 .calendar-tooltip {
     fill: var(--muted);
     font-size: 11px;
diff --git a/assets/js/app.js b/assets/js/app.js
index 18b4df1..e96f0e4 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -397,9 +397,19 @@
         const start = new Date(end);
         start.setDate(end.getDate() - 364);
 
+        const gridStart = new Date(start);
+        const startWeekday = gridStart.getDay();
+        const startOffset = startWeekday === 0 ? 6 : startWeekday - 1;
+        gridStart.setDate(gridStart.getDate() - startOffset);
+
+        const gridEnd = new Date(end);
+        const endWeekday = gridEnd.getDay();
+        const endOffset = endWeekday === 0 ? 0 : 7 - endWeekday;
+        gridEnd.setDate(gridEnd.getDate() + endOffset);
+
         const days = [];
-        const cursor = new Date(start);
-        while (cursor <= end) {
+        const cursor = new Date(gridStart);
+        while (cursor <= gridEnd) {
             const iso = toLocalIso(cursor);
             const entry = map.get(iso) || null;
             days.push({
@@ -413,12 +423,13 @@
         }
 
         const totalWeeks = Math.floor((days.length - 1) / 7) + 1;
-        const height = 148;
         const cellSize = 12;
         const cellGap = 5;
         const xOffset = 34;
-        const yOffset = 24;
-        const width = xOffset + ((totalWeeks - 1) * (cellSize + cellGap)) + cellSize + 28;
+        const yOffset = 22;
+        const gridHeight = (7 * cellSize) + (6 * cellGap);
+        const height = yOffset + gridHeight + 8;
+        const width = xOffset + ((totalWeeks - 1) * (cellSize + cellGap)) + cellSize + 12;
         const monthLabels = [];
         let lastMonth = -1;
 
@@ -429,7 +440,7 @@
             const y = yOffset + (row * (cellSize + cellGap));
             const fill = calendarColor(item.entry);
 
-            if (item.day <= 7 && item.month !== lastMonth) {
+            if (item.day <= 7 && item.month !== lastMonth && item.entry !== null) {
                 monthLabels.push({
                     x,
                     label: new Intl.DateTimeFormat("de-DE", { month: "short" }).format(new Date(`${item.date}T12:00:00`)),
@@ -454,7 +465,7 @@
         }).join("");
 
         container.innerHTML = `
-            <svg class="calendar-svg" viewBox="0 0 ${width} ${height}" role="img" aria-label="Kalender">
+            <svg class="calendar-svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="Kalender">
                 ${monthLabels.map(item => `<text class="calendar-tooltip" x="${item.x}" y="14">${item.label}</text>`).join("")}
                 <text class="calendar-tooltip" x="0" y="34">Mo</text>
                 <text class="calendar-tooltip" x="0" y="68">Mi</text>