diff --git a/frontend/blog-init.js b/frontend/blog-init.js
new file mode 100644
index 0000000..3c4e8c5
--- /dev/null
+++ b/frontend/blog-init.js
@@ -0,0 +1,17 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import { routes } from "@/routes.js";
+
+import Home from "@/home";
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  routes: routes
+});
+
+new Vue({
+  router,
+  components: { Home },
+  template: "<Home/>",
+}).$mount("#app");
diff --git a/frontend/components/PostPreview.vue b/frontend/components/PostPreview.vue
new file mode 100644
index 0000000..ec9cd77
--- /dev/null
+++ b/frontend/components/PostPreview.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h2>{{ post.title }}</h2>
+    <p><span>{{ post.date }}</span> by <span>{{ post.author }}</span></p>
+
+    <img v-if="post.thumbnail" :src="post.thumbnail" />
+
+    <div class="preview">
+      <p>{{ post.description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    post: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+h2 {
+  font-size: 2rem;
+}
+
+img {
+  width: 100%;
+}
+
+p, span {
+  font-family: monospace;
+}
+</style>
diff --git a/frontend/home.vue b/frontend/home.vue
new file mode 100644
index 0000000..215c2dd
--- /dev/null
+++ b/frontend/home.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <h1>Kevin's lab</h1>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: "Home"
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "styles/global.scss";
+
+body {
+  background-color: #f7f4ec;
+  color: #342519;
+}
+</style>
+
+<style lang="scss" scoped>
+.container {
+  margin: 2rem;
+}
+
+h1 {
+  font-size: 3rem;
+  text-transform: uppercase;
+}
+</style>
diff --git a/frontend/pages/LandingPage.vue b/frontend/pages/LandingPage.vue
new file mode 100644
index 0000000..6202528
--- /dev/null
+++ b/frontend/pages/LandingPage.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <post-preview v-for="post in posts" :post="post"></post-preview>
+  </div>
+</template>
+
+<script>
+import PostPreview from "@/components/PostPreview";
+
+export default {
+  components: { PostPreview },
+  data() {
+    return {
+      posts: [{
+        title: "Welcome to Kevin's lab!",
+        date: new Date(),
+        author: "Kevin",
+        description: "Welcome to the technical ramblings that go on in my brain. I will post information about my homelab, projects I undergo and tutorials as I find similar blogs on the internet very inspiring and informational; I can only hope that the same comes across here."
+      },
+      {
+        title: "Building (another) NAS.",
+        date: new Date(),
+        author: "Kevin",
+        thumbnail: "https://blog.monstermuffin.org/wp-content/uploads/2020/09/DSC05655-1024x683.jpg",
+        description: `Building Another NAS.
+A lot has changed in my life over the last 6 months or so, moving out of my flat and quitting my job to travel the world only to have 2020 suck all meaning out of every fibre of my being making me yearn for the eventuality of Earth being obliterated into inexistence, but until that time my storage as of late left much to be desired.
+
+I have been reminded, daily, by my Macbook that my last backup was almost 1 year ago and on top of this the storage I use at home is nearing it’s capacity as well as being degraded. I’ve been overlooking these things for quite some time but I have finally decided to remedy the situation.
+
+Join me on my newest endeavour to build a new NAS, or don’t of course.`
+      }]
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/variables.scss';
+
+section {
+  width: 90vw;
+  margin: 0 auto;
+}
+</style>
diff --git a/frontend/pages/PostPage.vue b/frontend/pages/PostPage.vue
new file mode 100644
index 0000000..29f27e6
--- /dev/null
+++ b/frontend/pages/PostPage.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <h2>{{ post.title }}</h2>
+
+    <article>
+      <p>{{ post.date }} by {{ post.author }}</p>
+
+      <img :src="post.thumbnail" />
+      <p v-html="post.description"></p>
+    </article>
+  </div>
+</template>
+
+<script>
+import { humanReadableDate } from "@/utils";
+
+export default {
+  data() {
+    return {
+      post: {
+        title: "Building (another) NAS.",
+        date: humanReadableDate(new Date()),
+        author: "Kevin",
+        thumbnail: "https://blog.monstermuffin.org/wp-content/uploads/2020/09/DSC05655-1024x683.jpg",
+        description: `<p>Building Another NAS.
+A lot has changed in my life over the last 6 months or so, moving out of my flat and quitting my job to travel the world only to have 2020 suck all meaning out of every fibre of my being making me yearn for the eventuality of Earth being obliterated into inexistence, but until that time my storage as of late left much to be desired.</p>
+
+<p>I have been reminded, daily, by my Macbook that my last backup was almost 1 year ago and on top of this the storage I use at home is nearing it’s capacity as well as being degraded. I’ve been overlooking these things for quite some time but I have finally decided to remedy the situation.</p>
+
+<p>Join me on my newest endeavour to build a new NAS, or don’t of course.</p>` 
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  font-size: 3rem;
+  text-align: center;
+  margin-top: 4rem;
+}
+
+article {
+  margin: 0 auto;
+  width: 80vw;
+
+  font-size: 1.2rem;
+}
+
+img {
+  width: 100%;
+}
+</style>
diff --git a/frontend/routes.js b/frontend/routes.js
new file mode 100644
index 0000000..40e44e2
--- /dev/null
+++ b/frontend/routes.js
@@ -0,0 +1,15 @@
+import LandingPage from '@/pages/LandingPage';
+import PostPage from '@/pages/PostPage';
+
+const routes = [
+  {
+    path: "/",
+    component: LandingPage 
+  },
+  {
+    path: "/post/:id",
+    component: PostPage
+  }
+]
+
+export { routes };
diff --git a/frontend/styles/global.scss b/frontend/styles/global.scss
new file mode 100644
index 0000000..cd48613
--- /dev/null
+++ b/frontend/styles/global.scss
@@ -0,0 +1,36 @@
+
+@font-face {
+  font-family: Moderat;
+  font-weight: normal;
+  font-style: normal;
+  src: url(/public/assets/fonts/Moderat-Regular.eot);
+  src: url(/public/assets/fonts/Moderat-Regular.eot?#iefix) format("embedded-opentype"), url(/public/assets/fonts/Moderat-Regular.woff2) format("woff2");
+}
+
+@font-face {
+  font-family: Moderat;
+  font-weight: 700;
+  font-style: normal;
+  src: url(/public/assets/fonts/Moderat-Bold.eot);
+  src: url(/public/assets/fonts/Moderat-Bold.eot?#iefix) format("embedded-opentype"),
+       url(/public/assets/fonts/Moderat-Bold.woff2) format("woff2"),
+       url(/public/assets/fonts/Moderat-Bold.woff) format("woff");
+}
+
+body {
+  font-family: Moderat, Helvetica Neue;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+input,
+textarea {
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+  font-size: 1.1rem;
+  border: 1px solid rgba(#333333, 0.3);
+}
diff --git a/frontend/styles/media-queries.scss b/frontend/styles/media-queries.scss
new file mode 100644
index 0000000..8108453
--- /dev/null
+++ b/frontend/styles/media-queries.scss
@@ -0,0 +1,28 @@
+$mobile-width: 768px;
+$tablet-max: 1200px;
+$desktop-max: 2004px;
+
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$tablet-max + 1px}) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media (min-width: #{$desktop-max + 1px}){
+    @content;
+  }
+}
\ No newline at end of file
diff --git a/frontend/styles/variables.scss b/frontend/styles/variables.scss
new file mode 100644
index 0000000..b5aabfc
--- /dev/null
+++ b/frontend/styles/variables.scss
@@ -0,0 +1,2 @@
+
+$color-primary: #6ec800;
\ No newline at end of file
diff --git a/frontend/templates/Index.html b/frontend/templates/Index.html
new file mode 100644
index 0000000..7ff8c5e
--- /dev/null
+++ b/frontend/templates/Index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kevin' lab</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content=""
+    />
+    <meta name="keywords" content="" />
+    <meta name="author" content="Kevin Midbøe" />
+
+    <meta
+      name="description"
+      content=""
+    />
+
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script src="/public/analytics.js" async></script>
+  </body>
+</html>
+
+<style>
+</style>
diff --git a/frontend/utils.js b/frontend/utils.js
new file mode 100644
index 0000000..f18ed42
--- /dev/null
+++ b/frontend/utils.js
@@ -0,0 +1,11 @@
+
+const humanReadableDate = (date) => {
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'long' });
+  const year = date.getFullYear();
+  return `${ day } ${ month }, ${ year }`;
+}
+
+export {
+  humanReadableDate
+}