diff --git a/package-lock.json b/package-lock.json
index 6e7dad6..636544d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "blog.jonasjones.dev",
       "version": "0.1.0",
       "dependencies": {
+        "marked": "^12.0.2",
         "svelte-kit": "^1.2.0",
         "svelte-spa-router": "^4.0.0"
       },
@@ -1775,6 +1776,18 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/marked": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
diff --git a/package.json b/package.json
index a85faee..cd06e81 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "vite": "^5.2.12"
   },
   "dependencies": {
+    "marked": "^12.0.2",
     "svelte-kit": "^1.2.0",
     "svelte-spa-router": "^4.0.0"
   }
diff --git a/src/routes.ts b/src/routes.ts
index fcac36a..6dd29e4 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,9 +1,19 @@
 import Home from './routes/Home.svelte';
-import Post from './routes/Post.svelte';
+import Loading from './routes/Loading.svelte';
 import NotFound from './routes/NotFound.svelte';
+import wrap from 'svelte-spa-router/wrap'
 
 export default {
     '/': Home,
-    '/post/:year/:month/:day/:title': Post,
+    '/post/:year/:month/:day/:title': wrap({
+        // Note that this is a function that returns the import
+        asyncComponent: () => import('./routes/Post.svelte'),
+        // Show the loading component while the component is being downloaded
+        loadingComponent: Loading,
+        // Pass values for the `params` prop of the loading component
+        loadingParams: {
+            message: 'Loading the Name route…'
+        }
+    }),
     '*': NotFound
 };
diff --git a/src/routes/Loading.svelte b/src/routes/Loading.svelte
new file mode 100644
index 0000000..1e6ee61
--- /dev/null
+++ b/src/routes/Loading.svelte
@@ -0,0 +1,9 @@
+<h2>Loading…</h2>
+
+<p>We're loading the route!</p>
+<p>Here's your message: {params && params.message}</p>
+
+<script>
+// Prop exported that will be filled by the router
+export let params
+</script>
\ No newline at end of file
diff --git a/src/routes/Post.svelte b/src/routes/Post.svelte
index 08e852c..4a084e9 100644
--- a/src/routes/Post.svelte
+++ b/src/routes/Post.svelte
@@ -1,28 +1,75 @@
 <script lang="ts">
+    import { onMount } from "svelte";
+    import { marked } from 'marked';
+
     export let params: {year?: string, month?: string, day?: string, title?: string} = {};
 
+    let posts: { id: any; }[] = [];
+    let post: {id: String, date: String, title: String, author: String, description: String} = {};
+
     if (params.year && params.month && params.day && params.title) {
-        const date = new Date(`${params.year}-${params.month}-${params.day}`);
-        if (isNaN(date.getTime())) {
-            // the date is invalid
-            // navigate to the 404 page
-            // this is the same as returning { status: 404 } from load()
-            location.href = '/404';
-        }
+        const searchdate = new Date(`${params.year}-${params.month}-${params.day}`);
     } else {
         // the URL is missing some parameters
         // navigate to the 404 page
         location.href = '/#/404';
     }
+
+    onMount(async () => {
+    try {
+      const response = await fetch('https://cdn.jonasjones.dev/blog/index.json');
+
+      posts = await response.json();
+
+      post = await findPostByDate(posts, params);
+
+      if (await post === undefined) {
+        location.href = '/#/404'
+      }
+
+      const content = await fetch(`https://cdn.jonasjones.dev/blog/posts/${params.year}/${params.month}/${params.day}/${params.title}.md`)
+
+      if (await content.ok) {
+        let markdowncontent = await content.text();
+        markdowncontent = await marked.parse(markdowncontent);
+        document.getElementById('markdowncontent').innerHTML = await markdowncontent;
+      }
+
+    } catch (error) {
+      console.error('Error fetching posts:', error);
+    }
+  });
+
+  function findPostByDate(posts: any[], params: { year: any; month: any; day: any; title: any; }) {
+    return posts.find(post => {
+        // Create a Date object from the post's date string
+        const postDate = new Date(post.date);
+
+        // Extract the year, month, and day from the Date object
+        const postYear = postDate.getFullYear();
+        const postMonth = postDate.getMonth() + 1; // Months are zero-based
+        const postDay = postDate.getDate();
+
+        // Compare the extracted year, month, and day with params, and the title
+        return (
+            postYear === parseInt(params.year) &&
+            postMonth === parseInt(params.month) &&
+            postDay === parseInt(params.day) &&
+            post.id === params.title
+        );
+    });
+}
+
 </script>
 
-<h1>Lorem ipsum</h1>
-<p>Tip: try changing the number in the URL's fragment, e.g. <code>#/lorem/4</code></p>
-{#each Array(repeat) as _}
-    <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed consequatur dicta, explicabo delectus, cupiditate, rem illo repellat aperiam saepe id minus ipsa. Illum libero consectetur fuga neque officia, adipisci commodi.Porro eius harum sed architecto maxime, molestiae cum ad dignissimos eum, nihil eligendi? Non quo, modi officia doloribus distinctio pariatur sed? Veniam facere beatae ipsam reprehenderit suscipit! Sequi, distinctio debitis.
-    </p>
-{/each}
+<p>{params.year}, {params.month}, {params.day}, {params.title}</p>
+
+<div class="post">
+    <h1>{post.title}</h1>
+    <h3>{post.description}</h3>
+    <div id="markdowncontent"></div>
+</div>
+
 
 <style>
 	h1 {