diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 02adeb1..57e6613 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,75 +1,75 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
-	import Navigation from './Navigation.svelte';
+  import Navigation from './Navigation.svelte';
   import GithubIcon from '../icons/Github.svelte';
 
-	let open: boolean = false;
+  let open: boolean = false;
 
-	function toggleMenu() {
-		open = !open;
-	}
+  function toggleMenu() {
+    open = !open;
+  }
 
   function close() {
     open = false;
   }
 
-	$: headerText = !open ? 'Menu' : 'Close';
+  $: headerText = !open ? 'Menu' : 'Close';
 </script>
 
 {#if open}
   <div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
     <h1>Navigation</h1>
 
-    <Navigation on:click={close} />
+    <Navigation on:click="{close}" />
 
     <ul class="bottom-content">
       <li>
-      	<a href="https://github.com/kevinmidboe/brewpi">
-	        <GithubIcon />
-	        <span class="meta">View on Github</span>
-	      </a>
+        <a href="https://github.com/kevinmidboe/brewpi">
+          <GithubIcon />
+          <span class="meta">View on Github</span>
+        </a>
       </li>
     </ul>
   </div>
 {/if}
 
 <header>
-	<div on:click={toggleMenu} class:open aria-label="Open menu" class="menu">
-		{#if !open}
-			<span class="page-header-buttons__open">
-				<span /> <span /> <span />
-			</span>
-		{:else}
-			<span class="page-header-buttons__close">
-        <span />
-				<span />
-			</span>
-		{/if}
+  <div on:click="{toggleMenu}" class:open="{open}" aria-label="Open menu" class="menu">
+    {#if !open}
+      <span class="page-header-buttons__open">
+        <span></span> <span></span> <span></span>
+      </span>
+    {:else}
+      <span class="page-header-buttons__close">
+        <span></span>
+        <span></span>
+      </span>
+    {/if}
 
-		<span class="page-header-text">{headerText}</span>
-	</div>
+    <span class="page-header-text">{headerText}</span>
+  </div>
 </header>
 
 <style lang="scss" module="scoped">
-	.slideout-menu {
-		position: fixed;
+  .slideout-menu {
+    position: fixed;
     display: flex;
     flex-direction: column;
-		height: 100vh;
+    height: 100vh;
     width: 100vw;
-		max-width: 550px;
-		right: 0;
-		top: 0;
-		z-index: 1;
+    max-width: 550px;
+    right: 0;
+    top: 0;
+    z-index: 10;
 
-		background-color: #fff3f6;
+    background-color: #fff3f6;
     color: black;
-		padding: calc(100px + 2rem) 2rem 1rem;
+    padding: calc(100px + 2rem) 2rem 1rem;
     border-top-left-radius: 4rem;
 
-		h1 {
-			padding-bottom: 4rem;
-		}
+    h1 {
+      padding-bottom: 4rem;
+    }
 
     @media screen and (max-width: 640px) {
       padding: 100px 2rem 2rem;
@@ -78,116 +78,117 @@
     .bottom-content {
       margin-top: auto;
 
-      li, li a {
-      	display: flex;
-      	align-items: center;
+      li,
+      li a {
+        display: flex;
+        align-items: center;
 
-      	.meta {
-      		margin-left: 1rem;
-      	}
+        .meta {
+          margin-left: 1rem;
+        }
       }
 
       li:not(:last-of-type) {
-      	margin-bottom: 1rem;
+        margin-bottom: 1rem;
       }
     }
-	}
+  }
 
-	header {
-		top: 0;
-		right: 0;
-		display: flex;
+  header {
+    top: 0;
+    right: 0;
+    display: flex;
     position: fixed;
     z-index: 10;
-		padding: 0 1rem;
-		justify-content: flex-end;
-		align-items: center;
-		width: 100%;
-		height: var(--header-height);
-		background-color: transparent;
-		pointer-events: none;
+    padding: 0 1rem;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    height: var(--header-height);
+    background-color: transparent;
+    pointer-events: none;
 
-		.menu {
-			display: flex;
-			place-items: center;
-			background-color: var(--green);
+    .menu {
+      display: flex;
+      place-items: center;
+      background-color: var(--green);
       color: #fff3f6;
-			padding: 14px 20px;
-			border-radius: 25px;
-			-webkit-transition: all 0.3s ease;
-			transition: all 0.3s ease;
-			cursor: pointer;
-			pointer-events: auto;
+      padding: 14px 20px;
+      border-radius: 25px;
+      -webkit-transition: all 0.3s ease;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      pointer-events: auto;
 
-			-webkit-user-select: none;
-			user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
 
-			&.open {
-				background-color: salmon;
-				color: black;
-			}
+      &.open {
+        background-color: salmon;
+        color: black;
+      }
 
-			&:hover {
-				transform: scale(1.04);
-			}
-		}
+      &:hover {
+        transform: scale(1.04);
+      }
+    }
 
-		.page-header-text {
-			padding-left: 11px;
-			display: inline-block;
-		}
+    .page-header-text {
+      padding-left: 11px;
+      display: inline-block;
+    }
 
-		.page-header-buttons__open {
-			position: relative;
-			display: inline-block;
-			width: 24px;
-			height: 24px;
+    .page-header-buttons__open {
+      position: relative;
+      display: inline-block;
+      width: 24px;
+      height: 24px;
 
-			span {
-				display: block;
-				width: 22px;
-				height: 2px;
-				background: currentColor;
-				position: absolute;
-				left: 1px;
+      span {
+        display: block;
+        width: 22px;
+        height: 2px;
+        background: currentColor;
+        position: absolute;
+        left: 1px;
 
-				&:first-child {
-					top: 4px;
-				}
+        &:first-child {
+          top: 4px;
+        }
 
-				&:nth-child(2) {
-					top: 11px;
-				}
+        &:nth-child(2) {
+          top: 11px;
+        }
 
-				&:nth-child(3) {
-					top: 18px;
-				}
-			}
-		}
+        &:nth-child(3) {
+          top: 18px;
+        }
+      }
+    }
 
-		.page-header-buttons__close {
-			position: relative;
+    .page-header-buttons__close {
+      position: relative;
       display: grid;
-			width: 24px;
-			height: 24px;
+      width: 24px;
+      height: 24px;
       place-items: center;
 
-			span {
-				display: block;
-				width: 22px;
-				height: 2px;
-				background: currentColor;
-				position: absolute;
-				left: 1px;
+      span {
+        display: block;
+        width: 22px;
+        height: 2px;
+        background: currentColor;
+        position: absolute;
+        left: 1px;
 
-				&:first-child {
-					transform: rotate(-45deg);
-				}
+        &:first-child {
+          transform: rotate(-45deg);
+        }
 
-				&:nth-child(2) {
+        &:nth-child(2) {
           transform: rotate(45deg);
-				}
-			}
-		}
-	}
+        }
+      }
+    }
+  }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f00b7cd..71e56d0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -17,14 +17,11 @@
   .page-content {
     display: flex;
     flex-direction: column;
-    width: 100%;
-    min-height: 100vh;
-    margin: 0 auto;
-    padding: 2.5em;
-    margin-top: var(--header-height);
+    min-height: calc(100vh - var(--header-height));
+    margin: var(--header-height) 2.5rem 0;
 
     @include mobile {
-      padding: 1em;
+      margin: var(--header-height) 1rem 0;
     }
   }
 </style>
diff --git a/src/routes/brews/+page.svelte b/src/routes/brews/+page.svelte
index 15fe004..1a546de 100644
--- a/src/routes/brews/+page.svelte
+++ b/src/routes/brews/+page.svelte
@@ -32,6 +32,7 @@
       line-height: 1.5;
 
       a {
+        font-size: 1.2rem;
         color: #19A786;
       }
     }
diff --git a/src/routes/brews/[date]/+page.svelte b/src/routes/brews/[date]/+page.svelte
index 9a653bc..ffdedbd 100644
--- a/src/routes/brews/[date]/+page.svelte
+++ b/src/routes/brews/[date]/+page.svelte
@@ -18,7 +18,7 @@
 
 <section class="card">
   <div class="desktop-only image-container" style="height: {height}px">
-    <img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
+    <img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
   </div>
 
   <div class="beer-container" bind:clientHeight="{height}">
@@ -34,28 +34,28 @@
       <tbody>
         <tr>
           <td><b>Brygget:</b></td>
-          <td>{ dateString }</td>
+          <td>{dateString}</td>
         </tr>
 
         <tr>
           <td><b>Laget av:</b></td>
-          <td>{ wizards }</td>
+          <td>{wizards}</td>
         </tr>
 
         <tr>
           <td><b>Kategori:</b></td>
-          <td>{ brew.beer.category }</td>
+          <td>{brew.beer.category}</td>
         </tr>
 
         <tr>
           <td><b>Alkoholprosent:</b></td>
-          <td>~ { brew.abv }%</td>
+          <td>~ {brew.abv}%</td>
         </tr>
       </tbody>
     </table>
 
     <div class="mobile-only image-container">
-      <img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
+      <img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
     </div>
 
     <h3>Historie</h3>
@@ -88,9 +88,27 @@
   section {
     @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
     font-family: 'Epilogue', sans-serif;
-    position: absolute;
-    top: 0;
-    left: 0;
+
+    padding: unset !important;
+    margin-bottom: 3rem;
+
+    @include mobile {
+      .beer-container {
+        border-radius: inherit;
+      }
+    }
+
+    @include tablet {
+      .beer-container {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+      }
+
+      .image-container {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+      }
+    }
   }
 
   .image-container {
@@ -120,7 +138,7 @@
   }
 
   .beer-container {
-    background-color: rgba(215, 224, 223, 0.6);
+    background-color: rgba(215, 224, 223, 0.8);
     padding: 2rem 1rem;
 
     @include tablet {