diff --git a/src/app/api/heatmap/route.ts b/src/app/api/heatmap/route.ts
index e1f0643..14189bc 100644
--- a/src/app/api/heatmap/route.ts
+++ b/src/app/api/heatmap/route.ts
@@ -1,19 +1,5 @@
-import { NextResponse } from "next/server";
-
 export async function GET() {
-  try {
-    const res = await fetch("https://git.dvorakmortonxd.dev/api/v1/users/dvorakmortonxd/heatmap", {
-      next: { revalidate: 3600 }, // Cache for 1 hour
-    });
-
-    if (!res.ok) {
-      return NextResponse.json({ error: "Failed to fetch heatmap" }, { status: res.status });
-    }
-
+    const res = await fetch("https://git.dvorakmortonxd.dev/api/v1/users/dvorakmortonxd/heatmap");
     const data = await res.json();
-    return NextResponse.json(data);
-  } catch (err) {
-    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
-  }
-}
-
+    return Response.json(data);
+}
\ No newline at end of file
diff --git a/src/app/components/ContributionHeatmap.tsx b/src/app/components/ContributionHeatmap.tsx
index 44fc49a..d944ddb 100644
--- a/src/app/components/ContributionHeatmap.tsx
+++ b/src/app/components/ContributionHeatmap.tsx
@@ -109,11 +109,11 @@ export default function ContributionHeatmap() {
       </div>
       <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "4px", fontSize: "0.75rem", color: "var(--gray)" }}>
         <span>Less</span>
-        <div className="heatmap-cell" data-level="0"></div>
-        <div className="heatmap-cell" data-level="1"></div>
-        <div className="heatmap-cell" data-level="2"></div>
-        <div className="heatmap-cell" data-level="3"></div>
-        <div className="heatmap-cell" data-level="4"></div>
+        <div className="heatmap-legend-cell" data-level="0"></div>
+        <div className="heatmap-legend-cell" data-level="1"></div>
+        <div className="heatmap-legend-cell" data-level="2"></div>
+        <div className="heatmap-legend-cell" data-level="3"></div>
+        <div className="heatmap-legend-cell" data-level="4"></div>
         <span>More</span>
       </div>
     </div>
diff --git a/src/app/page.css b/src/app/page.css
index 3b51da5..f528354 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -1009,24 +1009,24 @@ body {
    ============================================ */
 .heatmap-container {
   display: flex;
-  overflow-x: auto;
-  gap: 4px;
-  justify-content: space-between;
   width: 100%;
-  scrollbar-width: thin;
+  overflow-x: auto;
+  gap: 2px;
+  scrollbar-width: none;
   scrollbar-color: var(--gray) transparent;
 }
 
 .heatmap-week {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  flex: 1;
+  gap: 2px;
 }
 
 .heatmap-cell {
-  width: 12px;
-  height: 12px;
-  border-radius: 0; /* squares not rounded */
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 2px;
   background-color: var(--bg-hard);
   transition: transform 0.1s ease;
 }
@@ -1042,5 +1042,16 @@ body {
 .heatmap-cell[data-level="3"] { background-color: rgba(184, 187, 38, 0.8); }
 .heatmap-cell[data-level="4"] { background-color: rgba(184, 187, 38, 1); }
 
+.heatmap-legend-cell {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  background-color: var(--bg-hard);
+  flex-shrink: 0;
+}
 
+.heatmap-legend-cell[data-level="1"] { background-color: rgba(184, 187, 38, 0.4); }
+.heatmap-legend-cell[data-level="2"] { background-color: rgba(184, 187, 38, 0.6); }
+.heatmap-legend-cell[data-level="3"] { background-color: rgba(184, 187, 38, 0.8); }
+.heatmap-legend-cell[data-level="4"] { background-color: rgba(184, 187, 38, 1); }