diff --git a/rollup.config.js b/rollup.config.js
index d147185..949b52a 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -38,6 +38,7 @@ export default {
         dedupe,
       }),
       commonjs(),
+      svg(),
 
       legacy &&
         babel({
@@ -67,7 +68,6 @@ export default {
         terser({
           module: true,
         }),
-      svg(),
     ],
 
     onwarn,
@@ -89,6 +89,7 @@ export default {
         dedupe,
       }),
       commonjs(),
+      svg(),
     ],
     external: Object.keys(pkg.dependencies).concat(
       require('module').builtinModules ||
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 827b1e8..28e4bc4 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,9 +1,12 @@
 <script>
+  import { format } from 'date-fns'
   import twitterLogo from '../svg/iconfinder_Twitter_4070150.svg'
   import githubLogo from '../svg/iconfinder_github_2561442.svg'
   import twitchLogo from '../svg/iconfinder_twitch_306173.svg'
   import instagramLogo from '../svg/iconfinder_38-instagram_1161953.svg'
   import emailIcon from '../svg/iconfinder_mail_5474819.svg'
+
+  export let latestPosts
 </script>
 
 <style>
@@ -21,6 +24,18 @@
     color: #eae9be;
     font-size: 0.8em;
     padding: 0.4em;
+    box-shadow: 1px 3px #959595;
+  }
+
+  .lists {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .lists > section {
+    margin-bottom: 1em;
   }
 
   .no-wrap {
@@ -32,17 +47,18 @@
     color: #eae9be;
   }
 
-  .socials {
-    /* display: flex;
-    align-items: center; */
-  }
-
-  .social-links {
+  .lists ul {
     list-style: none;
     padding: 0;
     margin: 0;
-    /* display: inline-flex; */
-    /* align-items: center; */
+  }
+
+  .lists li {
+    margin-left: 0.5em;
+  }
+
+  .lists li li {
+    font-size: 0.8em;
   }
 
   .social-links a span {
@@ -50,11 +66,6 @@
     padding: 0 0.4em;
   }
 
-  .social-links li {
-    /* display: inline-block; */
-    margin-left: 0.5em;
-  }
-
   .email :global(svg path) {
     fill: #eae9be;
   }
@@ -89,6 +100,7 @@
   .social-links a {
     display: flex;
     align-items: center;
+    justify-content: center;
   }
 
   .bottom-line {
@@ -97,51 +109,112 @@
     margin-top: 1em;
   }
 
-  @media only screen and (min-width: 700px) {
-    .social-links a span {
-      display: inline;
+  .date {
+    font-size: 0.7em;
+  }
+
+  @media only screen and (min-width: 900px) {
+    .lists {
+      flex-direction: row;
+      text-align: start;
+      max-width: 900px;
+      margin: auto;
+    }
+
+    .social-links a {
+      justify-content: start;
+    }
+
+    .bottom-line {
+      max-width: 900px;
+      margin: auto;
     }
   }
 </style>
 
 <footer class="site-footer">
-  <div class="no-wrap socials">
-    <h3>Contact</h3>
-    <ul class="social-links">
-
-      <li class="email">
-        <a href="mailto: michalvankosk@gmail.com" title="E-mail address">
-          {@html emailIcon}
-          <span>michalvankosk@gmail.com</span>
-        </a>
-      </li>
-      <li class="twitter">
-        <a href="https://twitter.com/michalvankodev" title="Twitter profile">
-          {@html twitterLogo}
-          <span>Twitter</span>
-        </a>
-      </li>
-      <li class="github">
-        <a href="https://github.com/michalvankodev" title="Github profile">
-          {@html githubLogo}
-          <span>Github</span>
-        </a>
-      </li>
-      <li class="twitch">
-        <a href="https://twitch.tv/michalvankodev" title="Twitch profile">
-          {@html twitchLogo}
-          <span>Twitch</span>
-        </a>
-      </li>
-      <li class="instagram">
-        <a
-          href="https://www.instagram.com/michalvankodev/"
-          title="Instagram profile">
-          {@html instagramLogo}
-          <span>Instagram</span>
-        </a>
-      </li>
-    </ul>
+  <div class="lists">
+    <section class="site-map">
+      <ul>
+        <li>
+          <a href="/">Introduction</a>
+        </li>
+        <li>
+          <a href="/portfolio">Portfolio</a>
+          <ul>
+            <li>
+              <a href="/portfolio#personal-information">About</a>
+            </li>
+            <li>
+              <a href="/portfolio#skills">Skills</a>
+            </li>
+            <li>
+              <a href="/portfolio#work-history">Work History</a>
+            </li>
+            <li>
+              <a href="/portfolio#projects">Projects</a>
+            </li>
+            <li>
+              <a href="/portfolio#education">Education</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+    <section class="latest-posts">
+      <h3>
+        <a href="/blog">Latest posts</a>
+      </h3>
+      <ul>
+        {#each latestPosts as post}
+          <li>
+            <a rel="prefetch" href="/blog/{post.slug}">
+              <span>{post.title}</span>
+              <span class="date">
+                - {format(new Date(post.date), 'do MMM, yyyy')}
+              </span>
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </section>
+    <section class="socials">
+      <h3>Contact</h3>
+      <ul class="social-links">
+        <li class="email">
+          <a href="mailto: michalvankosk@gmail.com" title="E-mail address">
+            {@html emailIcon}
+            <span>michalvankosk@gmail.com</span>
+          </a>
+        </li>
+        <li class="twitter">
+          <a href="https://twitter.com/michalvankodev" title="Twitter profile">
+            {@html twitterLogo}
+            <span>Twitter</span>
+          </a>
+        </li>
+        <li class="github">
+          <a href="https://github.com/michalvankodev" title="Github profile">
+            {@html githubLogo}
+            <span>Github</span>
+          </a>
+        </li>
+        <li class="twitch">
+          <a href="https://twitch.tv/michalvankodev" title="Twitch profile">
+            {@html twitchLogo}
+            <span>Twitch</span>
+          </a>
+        </li>
+        <li class="instagram">
+          <a
+            href="https://www.instagram.com/michalvankodev/"
+            title="Instagram profile">
+            {@html instagramLogo}
+            <span>Instagram</span>
+          </a>
+        </li>
+      </ul>
+    </section>
   </div>
   <footer class="bottom-line">
     <span class="no-wrap">Created by @michalvankodev</span>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 94dcd29..0254448 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,7 +1,20 @@
+<script context="module">
+  import { take } from 'ramda'
+
+  export function preload({ params, query }) {
+    return this.fetch(`blog.json`)
+      .then(r => r.json())
+      .then(posts => {
+        return { latestPosts: take(5, posts) }
+      })
+  }
+</script>
+
 <script>
   import Nav from '../components/Nav.svelte'
   import Footer from '../components/Footer.svelte'
   export let segment
+  export let latestPosts
 </script>
 
 <style>
@@ -24,5 +37,5 @@
   <main>
     <slot />
   </main>
-  <Footer />
+  <Footer {latestPosts} />
 </div>