diff --git a/web/src/pages/photos/index.astro b/web/src/pages/photos/index.astro
index 60d1eca..4cca51d 100644
--- a/web/src/pages/photos/index.astro
+++ b/web/src/pages/photos/index.astro
@@ -3,6 +3,8 @@ import Base from "src/layout/Base.astro"
 import Carousel from "@components/photos/carousel"
 import { authPB } from 'src/utils/pocketbase'
 
+export const prerender = false
+
 const pb = await authPB()
 const photos = await pb.collection('photos').getFullList({
     sort: '-created'
diff --git a/web/src/pages/posts/[slug].astro b/web/src/pages/posts/[slug].astro
new file mode 100644
index 0000000..1502194
--- /dev/null
+++ b/web/src/pages/posts/[slug].astro
@@ -0,0 +1,5 @@
+---
+import Base from "@layout/Base";
+
+export const prerender = false
+---
\ No newline at end of file
diff --git a/web/src/pages/posts/index.astro b/web/src/pages/posts/index.astro
new file mode 100644
index 0000000..c5e5828
--- /dev/null
+++ b/web/src/pages/posts/index.astro
@@ -0,0 +1,58 @@
+---
+import Base from "src/layout/Base.astro";
+import { authPB } from "src/utils/pocketbase";
+import { getFormattedDate } from '@utils/date'
+
+export const prerender = false
+
+const pb = await authPB()
+
+const posts = await pb.collection('posts').getFullList({
+    sort: '-publishDate',
+    filter: 'published=true'
+})
+
+const tags = posts.flatMap(p => p.tags)
+const uniqueTags = tags.filter((v, i, a) => a.indexOf(v) === i)
+---
+
+<Base>
+    <div slot="sidebar" class="text-left">
+        A few thoughts I've had, whenever I feel like it as you can see!
+        
+        <p class="text-xl mt-4">Tags</p>
+        {
+            uniqueTags.length && (
+            <ul class="flex flex-wrap gap-2">
+                {uniqueTags.map(tag => (
+                    <li>
+                        <a
+                        href={`/posts/tag/${tag}/`}
+                        aria-label={`View all posts with the tag: ${tag}`}
+                        >
+                        #{tag}
+                    </a>
+                </li>
+                ))}
+            </ul>
+            )
+        }
+    </div>
+    
+    <div slot="content" class="py-12">
+        {
+            posts.map(p => (
+            <div class="mb-5 w-2/3">
+                <time datetime={p['publishDate']} class="min-w-[120px] text-gray-500">{getFormattedDate(p['publishDate'])}</time>
+                <div>
+                    <a href={`/posts/${p['slug']}/`} rel="prefetch">
+                        <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-xl border-12 border-white"/>
+                        {p['title']}
+                    </a>
+                </div>
+                <q class="line-clamp-3 block italic">{p['description']}</q>
+            </div>
+            ))
+        }
+    </div>
+</Base>
\ No newline at end of file
diff --git a/web/src/pages/posts/tag/[tag].astro b/web/src/pages/posts/tag/[tag].astro
new file mode 100644
index 0000000..874f123
--- /dev/null
+++ b/web/src/pages/posts/tag/[tag].astro
@@ -0,0 +1,4 @@
+---
+
+export const prerender = false
+---
\ No newline at end of file
diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
new file mode 100644
index 0000000..0caa6f2
--- /dev/null
+++ b/web/src/utils/date.ts
@@ -0,0 +1,11 @@
+
+export function getFormattedDate(date: string | number | Date) {
+	
+	const dateFormat = new Intl.DateTimeFormat("en-GB", {
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+	});
+	
+	return dateFormat.format(new Date(date));
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 70a04eb..6cfafac 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -6,8 +6,9 @@
     "baseUrl": ".",
     "paths": {
       "@components/*": ["src/components/*.astro"],
-			"@layouts/*": ["src/layouts/*.astro"],
+			"@layout/*": ["src/layout/*.astro"],
 			"@styles/*": ["src/styles/*.css"],
+      "@utils/*": ["src/utils/*.ts"]
     }
   }
 }