diff --git a/public/IosevkaEtoile/Heavy.woff2 b/public/IosevkaEtoile/Heavy.woff2
new file mode 100644
index 0000000..0d051e0
Binary files /dev/null and b/public/IosevkaEtoile/Heavy.woff2 differ
diff --git a/public/blog.css b/public/blog.css
new file mode 100644
index 0000000..e69de29
diff --git a/public/global.css b/public/global.css
index 4652199..6e662e3 100644
--- a/public/global.css
+++ b/public/global.css
@@ -17,6 +17,15 @@
 	src: url('/Iosevka/Bold.woff2') format('woff2');
 }
 
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
+}
+
 :root {
     --c-bg: #101010;
     --c-on-bg: #dedede;
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index bfa7dfa..1bd5eb5 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -1,3 +1,8 @@
+---
+const { frontmatter } = Astro.props;
+---
+
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -5,7 +10,8 @@
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} />
         <link rel="stylesheet" href="/global.css" />
-        <title>Fernando Araoz - Blog</title>
+        <link rel="stylesheet" href="/blog.css" />
+        <title>Blog - Fernando Araoz</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
@@ -19,7 +25,32 @@
         />
         <script src="//unpkg.com/alpinejs" defer></script>
     </head>
-    <body>
-        <slot />
+    <body style="font-size: 20px;">
+        <div id="blog" class="container mx-auto max-w-[1000px]">
+            <div
+                class="font-etoile text-3xl text-center py-16 font-bold dark:bg-c-bg-2 text-c-on-bg my-4 rounded hover:underline hover:cursor-help"
+            >
+                Fernando Araoz: le ブログ
+            </div>
+
+            <div class="py-6">
+                {
+                    frontmatter?.title && (
+                        <h1 class="font-etoile text-center text-2xl py-2">
+                            {frontmatter.title}
+                        </h1>
+                    )
+                }
+                {
+                    frontmatter?.pubDate && (
+                        <p class="text-center text-sm">
+                            Published: {frontmatter.pubDate}
+                        </p>
+                    )
+                }
+            </div>
+
+            <slot />
+        </div>
     </body>
 </html>
diff --git a/src/pages/blog/first.md b/src/pages/blog/first.md
deleted file mode 100644
index 5a6f8de..0000000
--- a/src/pages/blog/first.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: ../../layouts/BlogLayout.astro
----
-# First
-
-The first page
-
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 091a98a..2463e0a 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -4,4 +4,18 @@ import BlogLayout from "../../layouts/BlogLayout.astro";
 
 <BlogLayout>
     <h1>Blog index, WIP</h1>
+
+    <p>Some day there will be a procedurally generated list of pages here!</p>
+
+    <p>Until then:</p>
+
+    <p>Posts:</p>
+
+    <ul>
+        <li>
+            <a class="underline" href="/blog/responsible-stack/">
+                The responsible stack
+            </a>
+        </li>
+    </ul>
 </BlogLayout>
diff --git a/src/pages/blog/responsible-stack.md b/src/pages/blog/responsible-stack.md
new file mode 100644
index 0000000..4d2405f
--- /dev/null
+++ b/src/pages/blog/responsible-stack.md
@@ -0,0 +1,10 @@
+---
+layout: ../../layouts/BlogLayout.astro
+title: The responsible tech stack
+description: tech stack
+pubDate: 2024/05/20
+tags: ["tech stack"]
+---
+
+The first page
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index aa99eaa..65712a7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,7 @@ import Languages from "../components/index/Languages.astro";
 import Learning from "../components/index/Learning.astro";
 import Tools from "../components/index/Tools.astro";
 ---
-
+<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 64b1fd4..224c46b 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -8,6 +8,9 @@ export default {
 				'c-on-bg': 'var(--c-on-bg)',
 				'c-bg-2': 'var(--c-bg-2)',
 			},
+            fontFamily: {
+                "etoile": ["'Iosevka Etoile Web'", "serif"],
+            }
 		},
 	},
 	plugins: [
