diff --git a/.gitignore b/.gitignore
index ff91d5a..339bcb9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 .direnv/
 build/
 static/tw.css
+*.ttf
+!.gitignore
diff --git a/flake.lock b/flake.lock
index dbf8ab1..79a81b7 100644
--- a/flake.lock
+++ b/flake.lock
@@ -1,5 +1,21 @@
 {
   "nodes": {
+    "ia-fonts-src": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1686932517,
+        "narHash": "sha256-2T165nFfCzO65/PIHauJA//S+zug5nUwPcg8NUEydfc=",
+        "owner": "iaolo",
+        "repo": "iA-Fonts",
+        "rev": "f32c04c3058a75d7ce28919ce70fe8800817491b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "iaolo",
+        "repo": "iA-Fonts",
+        "type": "github"
+      }
+    },
     "nixpkgs": {
       "locked": {
         "lastModified": 1740673841,
@@ -32,6 +48,7 @@
     },
     "root": {
       "inputs": {
+        "ia-fonts-src": "ia-fonts-src",
         "nixpkgs": "nixpkgs",
         "vite": "vite"
       }
diff --git a/flake.nix b/flake.nix
index 60ecf5c..a4a34af 100644
--- a/flake.nix
+++ b/flake.nix
@@ -1,14 +1,20 @@
 {
   description = "site";
 
-  inputs.nixpkgs.url = "github:nixos/nixpkgs";
-  inputs.vite.url = "github:icyphox/go-vite";
+  inputs = {
+      nixpkgs.url = "github:nixos/nixpkgs";
+      vite.url = "github:icyphox/go-vite";
+      ia-fonts-src = {
+          url = "github:iaolo/iA-Fonts";
+          flake = false;
+      };
+  };
 
   outputs =
     { self
     , nixpkgs
     , vite
-    ,
+    , ia-fonts-src
     }:
     let
       supportedSystems = [
@@ -35,6 +41,10 @@
               pkgs.entr
               pkgs.tailwindcss
             ];
+            shellHook = ''
+                cp -f ${ia-fonts-src}/"iA Writer Quattro"/Static/*.ttf static/fonts/
+                cp -f ${ia-fonts-src}/"iA Writer Mono"/Static/*.ttf static/fonts/
+            '';
           };
         }
       );
diff --git a/input.css b/input.css
index 1956eee..bb30f55 100644
--- a/input.css
+++ b/input.css
@@ -100,7 +100,7 @@
         @apply text-2xl;
         @apply font-sans;
         @apply text-black;
-        @apply py-4;
+        @apply font-bold;
     }
 
     ::selection {
diff --git a/static/fonts/.gitignore b/static/fonts/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/tailwind.config.js b/tailwind.config.js
index fd733cd..55df648 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,23 +1,29 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./appview/pages/templates/**/*.html"],
-  theme: {
-    container: {
-      padding: "2rem",
-      center: true,
-      screens: {
-        sm: "540px",
-        md: "650px",
-        lg: "900px",
-        xl: "1100px",
-        "2xl": "1300x",
-      },
-    },
-    extend: {
-      fontFamily: {
-        sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"],
-        mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
-      },
-    },
-  },
+	content: ["./templates/**/*.html"],
+	theme: {
+		container: {
+			padding: "2rem",
+			center: true,
+			screens: {
+				sm: "540px",
+				md: "640px",
+				lg: "768px",
+				xl: "900px",
+				"2xl": "1024px"
+			},
+		},
+		extend: {
+			fontFamily: {
+				sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"],
+				mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
+			},
+			maxWidth: {
+				'prose': '65ch',
+			},
+		},
+	},
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 };
diff --git a/templates/index.html b/templates/index.html
index 9f925eb..4e1388b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,8 +7,8 @@
   <title>
     {{ .Meta.title }}
   </title>
-  <body>
-    <main>
+  <body class="bg-slate-100">
+    <main class="container mx-auto px-1 pt-4  min-h-screen flex flex-col">
       <div class="sidenav">
         {{ template "partials/nav.html" }}
       </div>
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index 89c3154..647e26c 100644
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@@ -1,6 +1,4 @@
-<hr>
-
-<div class="footer">
+<div class="footer px-6">
   <p class="muted">
   Follow via <a href="/blog/feed.xml">RSS</a> and
   <a href="https://bsky.app/profile/tangled.sh">Bluesky</a>.
diff --git a/templates/partials/head.html b/templates/partials/head.html
index a4a2bd4..9a2707f 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/style.css" type="text/css" />
+<link rel="stylesheet" href="/static/tw.css" type="text/css" />
 <meta name="viewport" content="initial-scale=1,width" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta charset="UTF-8" />
diff --git a/templates/text.html b/templates/text.html
index 696da73..93e4d1c 100644
--- a/templates/text.html
+++ b/templates/text.html
@@ -7,32 +7,36 @@
   <title>
     {{ index .Meta "title" }}
   </title>
-  <body>
-    <main>
-      <div class="sidenav">
-        {{ template "partials/nav.html" }}
-      </div>
-      <article align="left">
-        <section class="post-date">
-        {{ $dateStr := index .Meta "date" }}
-        {{ $date := parsedate $dateStr }}
-        {{ $date.Format "02 Jan, 2006" }}
-        </section>
+  <body class="bg-slate-100">
+    <div class="prose mx-auto px-1 pt-4 min-h-screen flex flex-col">
+      <main>
+        <div class="sidenav px-6">
+          {{ template "partials/nav.html" }}
+        </div>
 
+        <header>
+          <p class="post-date px-6 mb-0 text-sm">
+            {{ $dateStr := index .Meta "date" }}
+            {{ $date := parsedate $dateStr }}
+            {{ $date.Format "02 Jan, 2006" }}
+          </p>
 
-        {{ if eq .Meta.draft "true" }}
-        <h1 class="title">{{ index .Meta "title" }} <span class="draft">[draft]</span></h1>
-        {{ else }}
-        <h1 class="title">{{ index .Meta "title" }}</h1>
-        {{ end }}
-        <h2 class="subtitle">{{ index .Meta "subtitle" }}</h2>
-        {{ .Body }}
+          {{ if eq .Meta.draft "true" }}
+            <h1 class="title px-6 mb-0">{{ index .Meta "title" }} <span class="draft">[draft]</span></h1>
+          {{ else }}
+            <h1 class="title px-6 mb-0">{{ index .Meta "title" }}</h1>
+          {{ end }}
+          <p class="italic px-6 mt-1 mb-0 text-lg">{{ index .Meta "subtitle" }}</p>
+        </header>
 
-      </article>
-    </main>
-    <footer>
-      {{ template "partials/footer.html" }}
-    </footer>
+        <article class="mt-5 bg-white px-6 py-2 rounded drop-shadow-sm">
+          {{ .Body }}
+        </article>
+      </main>
+      <footer>
+        {{ template "partials/footer.html" }}
+      </footer>
+    </div>
   </body>
 
 </html>