diff --git a/src/components/WorkInProgress.astro b/src/components/WorkInProgress.astro
new file mode 100644
index 0000000..f280bb2
--- /dev/null
+++ b/src/components/WorkInProgress.astro
@@ -0,0 +1,46 @@
+---
+import "../styles/global.css"
+import Layout from "../layouts/Layout.astro"
+import NavigationCard from '../components/NavigationCard.astro';
+import { ArrowLeft, Construction } from 'lucide-astro';
+
+const navItems = [
+  {
+    href: "/",
+    icon: ArrowLeft,
+    heading: "Home",
+    content: "Go back"
+  },
+];
+---
+
+<Layout>
+  <section class="max-w-4xl mb-20 sm:mb-28">
+    <div class="flex items-center gap-4 mb-6">
+      <Construction class="w-12 h-12 sm:w-16 sm:h-16 text-neutral-600 dark:text-neutral-400" />
+      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] text-neutral-900 dark:text-neutral-100">
+        Work in Progress
+      </h2>
+    </div>
+    <p class="text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-2xl mb-6">
+      This page is currently under construction. I'm working hard to bring you something amazing, but it's not quite ready yet.
+    </p>
+    <p class="text-base sm:text-lg text-neutral-500 dark:text-neutral-500 leading-relaxed max-w-2xl">
+      Check back soon for updates, or feel free to explore other parts of the site while you wait.
+    </p>
+  </section>
+
+  <section class="mb-20 sm:mb-28" aria-labelledby="navigation-heading">
+    <h2 id="navigation-heading" class="sr-only">Site navigation</h2>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+      {navItems.map(item => (
+        <NavigationCard
+          href={item.href}
+          icon={item.icon}
+          heading={item.heading}
+          content={item.content}
+        />
+      ))}
+    </div>
+  </section>
+</Layout>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 3a1db09..76f0b37 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -16,7 +16,7 @@ const navItems = [
 <Layout>
   <section class="max-w-4xl mb-20 sm:mb-28">
     <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] mb-6 text-neutral-900 dark:text-neutral-100">
-      Seems like you tried to find something that doesn't exist yet.
+      404. Seems like you tried to find something that doesn't exist yet.
     </h2>
     <p class="text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-2xl">
       I don't like to remove anything from here, but it can happen from time to time. Or maybe you mistyped something. In any case, my apologies. Feel free to go back to the very beginning if you want.
diff --git a/src/pages/library/[...slug].astro b/src/pages/library/[...slug].astro
new file mode 100644
index 0000000..d21ee27
--- /dev/null
+++ b/src/pages/library/[...slug].astro
@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection, render } from 'astro:content';
+import PostLayout from '../../layouts/PostLayout.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('workshop');
+	return posts.map((post) => ({
+		params: { slug: post.id },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<'workshop'>;
+
+const post = Astro.props;
+const { Content } = await render(post);
+---
+
+<PostLayout {...post.data}>
+	<Content />
+</PostLayout>
diff --git a/src/pages/library/index.astro b/src/pages/library/index.astro
new file mode 100644
index 0000000..7496d8e
--- /dev/null
+++ b/src/pages/library/index.astro
@@ -0,0 +1,39 @@
+<!-- ---
+import "../../styles/global.css"
+import Layout from "../../layouts/Layout.astro"
+import { getCollection } from 'astro:content';
+
+const posts = (await getCollection('workshop')).sort(
+	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<Layout>
+  <section class="max-w-3xl mb-10 sm:mb-14">
+    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
+    <p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
+      I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...    </p>
+  </section>
+
+  <ul class="space-y-4">
+    {posts.map((post) => (
+      <li class="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-md transition-shadow">
+        <a href={`/workshop/${post.id}/`} class="block">
+          <h4 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+            {post.data.title}
+          </h4>
+          {post.data.pubDate && (
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
+              {new Date(post.data.pubDate).toLocaleDateString()}
+            </p>
+          )}
+        </a>
+      </li>
+    ))}
+  </ul>
+</Layout> -->
+---
+import WorkInProgress from "../../components/WorkInProgress.astro"
+---
+
+<WorkInProgress />
diff --git a/src/pages/notes/[...slug].astro b/src/pages/notes/[...slug].astro
new file mode 100644
index 0000000..d21ee27
--- /dev/null
+++ b/src/pages/notes/[...slug].astro
@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection, render } from 'astro:content';
+import PostLayout from '../../layouts/PostLayout.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('workshop');
+	return posts.map((post) => ({
+		params: { slug: post.id },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<'workshop'>;
+
+const post = Astro.props;
+const { Content } = await render(post);
+---
+
+<PostLayout {...post.data}>
+	<Content />
+</PostLayout>
diff --git a/src/pages/notes/index.astro b/src/pages/notes/index.astro
new file mode 100644
index 0000000..7496d8e
--- /dev/null
+++ b/src/pages/notes/index.astro
@@ -0,0 +1,39 @@
+<!-- ---
+import "../../styles/global.css"
+import Layout from "../../layouts/Layout.astro"
+import { getCollection } from 'astro:content';
+
+const posts = (await getCollection('workshop')).sort(
+	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<Layout>
+  <section class="max-w-3xl mb-10 sm:mb-14">
+    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
+    <p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
+      I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...    </p>
+  </section>
+
+  <ul class="space-y-4">
+    {posts.map((post) => (
+      <li class="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-md transition-shadow">
+        <a href={`/workshop/${post.id}/`} class="block">
+          <h4 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+            {post.data.title}
+          </h4>
+          {post.data.pubDate && (
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
+              {new Date(post.data.pubDate).toLocaleDateString()}
+            </p>
+          )}
+        </a>
+      </li>
+    ))}
+  </ul>
+</Layout> -->
+---
+import WorkInProgress from "../../components/WorkInProgress.astro"
+---
+
+<WorkInProgress />
diff --git a/src/pages/workshop/index.astro b/src/pages/workshop/index.astro
index eda8bc3..7496d8e 100644
--- a/src/pages/workshop/index.astro
+++ b/src/pages/workshop/index.astro
@@ -1,4 +1,4 @@
----
+<!-- ---
 import "../../styles/global.css"
 import Layout from "../../layouts/Layout.astro"
 import { getCollection } from 'astro:content';
@@ -31,4 +31,9 @@ const posts = (await getCollection('workshop')).sort(
       </li>
     ))}
   </ul>
-</Layout>
+</Layout> -->
+---
+import WorkInProgress from "../../components/WorkInProgress.astro"
+---
+
+<WorkInProgress />