diff --git a/vinvoor/src/overview/Overview.tsx b/vinvoor/src/overview/Overview.tsx
index dbe0b10..37f5d01 100644
--- a/vinvoor/src/overview/Overview.tsx
+++ b/vinvoor/src/overview/Overview.tsx
@@ -1,6 +1,6 @@
 import { Box, Paper, Switch, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import { createContext, useState } from "react";
+import { createContext, useEffect, useRef, useState } from "react";
 import { BrowserView } from "react-device-detect";
 import { Tooltip } from "react-tooltip";
 import { LoadingSkeleton } from "../components/LoadingSkeleton";
@@ -26,35 +26,64 @@ export const Overview = () => {
         setScans,
         convertScanJSON
     );
-    const [checked, setChecked] = useState<boolean>(false);
+    const [checked, setChecked] = useState<boolean>(true);
+    const daysRef = useRef<HTMLDivElement>(null);
+    const heatmapSwitchRef = useRef<HTMLDivElement>(null);
+    const [heatmapSwitchHeight, setHeatmapSwitchHeight] = useState<number>(0);
+    const [paperHeight, setPaperHeight] = useState<number>(0);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setChecked(event.target.checked);
     };
 
+    useEffect(() => {
+        if (daysRef.current) {
+            setPaperHeight(daysRef.current.clientHeight);
+        }
+
+        if (heatmapSwitchRef.current) {
+            setHeatmapSwitchHeight(heatmapSwitchRef.current.clientHeight);
+        }
+    });
+
     return (
         <LoadingSkeleton loading={loading}>
             <ScanContext.Provider value={{ scans }}>
                 <Grid
                     container
                     spacing={2}
-                    alignItems="center"
-                    justifyContent="space-around"
+                    alignItems="stretch"
+                    justifyContent="space-between"
                 >
-                    <Grid item xs={8} md={6}>
+                    <Grid item xs={8} md={4} lg={3}>
                         <CheckIn />
                     </Grid>
                     <Grid item xs={4}>
                         <Streak />
                     </Grid>
-                    <Grid item xs={12}>
-                        <Paper elevation={4} sx={{ padding: 2 }}>
+                    <Grid
+                        item
+                        xs={12}
+                        md={8}
+                        sx={{
+                            display: "flex",
+                        }}
+                    >
+                        <Paper
+                            elevation={4}
+                            sx={{
+                                padding: 1,
+                                width: "100%",
+                                height: paperHeight,
+                            }}
+                        >
                             <BrowserView>
                                 <Box
                                     sx={{
                                         display: "flex",
                                         justifyContent: "right",
                                     }}
+                                    ref={heatmapSwitchRef}
                                 >
                                     <Typography variant="h6">Months</Typography>
                                     <Switch
@@ -65,19 +94,26 @@ export const Overview = () => {
                                 </Box>
                             </BrowserView>
                             <Heatmap
-                                startDate={new Date("2024-01-01")}
+                                startDate={new Date("2024-04-01")}
                                 endDate={new Date("2024-12-31")}
                                 variant={
                                     checked
                                         ? HeatmapVariant.DAYS
                                         : HeatmapVariant.MONTHS
                                 }
+                                maxHeight={
+                                    paperHeight - heatmapSwitchHeight - 10
+                                }
                             />
                             <Tooltip id="heatmap" />
                         </Paper>
                     </Grid>
-                    <Grid item xs={12} md={4}>
-                        <Paper elevation={4}>
+                    <Grid item xs={12} md={4} sx={{ display: "flex" }}>
+                        <Paper
+                            elevation={4}
+                            sx={{ padding: 2, width: "100%" }}
+                            ref={daysRef}
+                        >
                             <Days />
                         </Paper>
                     </Grid>
@@ -86,3 +122,6 @@ export const Overview = () => {
         </LoadingSkeleton>
     );
 };
+
+// Current height of the heatmap is calculated using ref's and calculus
+// TODO: Change it as it us very very very very very very ugly ^^
diff --git a/vinvoor/src/overview/heatmap/Heatmap.tsx b/vinvoor/src/overview/heatmap/Heatmap.tsx
index b41a8bb..0189a5f 100644
--- a/vinvoor/src/overview/heatmap/Heatmap.tsx
+++ b/vinvoor/src/overview/heatmap/Heatmap.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@mui/material";
 import { FC, useContext } from "react";
 import { MILLISECONDS_IN_ONE_DAY, shiftDate } from "../../util/util";
 import { ScanContext } from "../Overview";
@@ -32,6 +33,7 @@ interface HeatmapProps {
     startDate: Date;
     endDate: Date;
     variant: HeatmapVariant;
+    maxHeight: number;
 }
 
 const getAllValues = (
@@ -64,7 +66,9 @@ const getAllValues = (
         );
     } else {
         return Array.from(
-            { length: getColumnCount(startDate, endDate, HeatmapVariant.DAYS) },
+            {
+                length: getColumnCount(startDate, endDate, HeatmapVariant.DAYS),
+            },
             (_, i) => {
                 const start = shiftDate(startDate, i * DAYS_IN_WEEK);
                 const count = Array.from({
@@ -83,17 +87,26 @@ const getAllValues = (
     }
 };
 
-const getWeeksInMonth = (values: HeatmapItem[]): { [key: number]: number } => {
+const getWeeksInMonth = (
+    values: HeatmapItem[],
+    startDate: Date
+): { [key: number]: number } => {
     const startYear = values[0].date.getFullYear();
     return values.reduce(
         (acc, value) => {
             const index =
                 (value.date.getFullYear() - startYear) * 12 +
-                value.date.getMonth();
+                value.date.getMonth() -
+                startDate.getMonth();
             acc[index] = (acc[index] || 0) + 1;
             return acc;
         },
-        { 0: getEmpty(values[0].date, HeatmapVariant.MONTHS) } as {
+        {
+            [startDate.getMonth()]: getEmpty(
+                values[0].date,
+                HeatmapVariant.MONTHS
+            ),
+        } as {
             [key: number]: number;
         }
     );
@@ -132,7 +145,12 @@ const getTooltipDataAttrsForMonths = (value: HeatmapItem) =>
         value.count !== 1 ? "s" : ""
     } on the week of ${dateTimeFormat.format(value.date)}`;
 
-export const Heatmap: FC<HeatmapProps> = ({ startDate, endDate, variant }) => {
+export const Heatmap: FC<HeatmapProps> = ({
+    startDate,
+    endDate,
+    variant,
+    maxHeight,
+}) => {
     const { scans } = useContext(ScanContext);
     const days = scans.map((scan) => scan.scanTime);
 
@@ -147,7 +165,10 @@ export const Heatmap: FC<HeatmapProps> = ({ startDate, endDate, variant }) => {
     )}`;
 
     const weeksInMonth =
-        variant === HeatmapVariant.MONTHS ? getWeeksInMonth(values) : {}; // Amount of weeks in each month
+        variant === HeatmapVariant.MONTHS
+            ? getWeeksInMonth(values, startDate)
+            : {}; // Amount of weeks in each month
+
     const columns = getColumnCount(startDate, endDate, variant); // Amount of columns of squares
     const emptyStart = getEmpty(startDate, variant); // Amount of empty squares at the start
     const emptyEnd = getEmpty(endDate, variant); // Amount of empty squares at the end
@@ -216,7 +237,7 @@ export const Heatmap: FC<HeatmapProps> = ({ startDate, endDate, variant }) => {
 
                 return (
                     <text key={column} x={x} y={y}>
-                        {MONTH_LABELS[column]}
+                        {MONTH_LABELS[startDate.getMonth() + column]}
                     </text>
                 );
             });
@@ -224,11 +245,13 @@ export const Heatmap: FC<HeatmapProps> = ({ startDate, endDate, variant }) => {
     };
 
     return (
-        <svg className="heatmap" viewBox={viewBox}>
-            <g transform={getTransformForMonthLabels()}>
-                {renderMonthLabels()}
-            </g>
-            <g transform={getTransformForAllWeeks()}>{renderColumns()}</g>
-        </svg>
+        <Box maxHeight={maxHeight} sx={{ display: "flex" }}>
+            <svg className="heatmap" viewBox={viewBox}>
+                <g transform={getTransformForMonthLabels()}>
+                    {renderMonthLabels()}
+                </g>
+                <g transform={getTransformForAllWeeks()}>{renderColumns()}</g>
+            </svg>
+        </Box>
     );
 };
diff --git a/vinvoor/src/overview/heatmap/heatmap.css b/vinvoor/src/overview/heatmap/heatmap.css
index 375039c..231fe10 100644
--- a/vinvoor/src/overview/heatmap/heatmap.css
+++ b/vinvoor/src/overview/heatmap/heatmap.css
@@ -4,8 +4,8 @@
 }
 
 .heatmap rect:hover {
-    stroke: #555;
     stroke-width: 1px;
+    stroke-opacity: 0;
 }
 
 /*
@@ -42,7 +42,7 @@
 .heatmap .color-5 {
     fill: #ba5f02;
     stroke-width: 1px;
-    stroke: #ba5f02;
+    stroke: #934b01;
 }
 
 /*
diff --git a/vinvoor/src/overview/heatmap/utils.ts b/vinvoor/src/overview/heatmap/utils.ts
index 388dc00..efe2d1a 100644
--- a/vinvoor/src/overview/heatmap/utils.ts
+++ b/vinvoor/src/overview/heatmap/utils.ts
@@ -96,6 +96,6 @@ export const getColumnCount = (
 // Local functions
 
 const GUTTERSIZE = 5;
-const MONTH_LABEL_GUTTER_SIZE = 4;
+const MONTH_LABEL_GUTTER_SIZE = 8;
 
 const getSquareSize = () => SQUARE_SIZE + GUTTERSIZE;
diff --git a/vinvoor/src/overview/streak/Streak.tsx b/vinvoor/src/overview/streak/Streak.tsx
index 26275c5..e2dffeb 100644
--- a/vinvoor/src/overview/streak/Streak.tsx
+++ b/vinvoor/src/overview/streak/Streak.tsx
@@ -19,10 +19,6 @@ const isWeekendBetween = (date1: Date, date2: Date) => {
 };
 
 const isStreakDay = (date1: Date, date2: Date) => {
-    console.log(date1, date2);
-    console.log(shiftDate(date2, 1));
-    console.log(isTheSameDay(date1, shiftDate(date2, 1)));
-
     if (isTheSameDay(date1, shiftDate(date2, 1))) return true;
 
     if (date1.getDay() === 5 && [1, 6, 7].includes(date2.getDay()))