diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..223cce8
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+    "tailwindCSS.emmetCompletions": true,
+    "files.associations": {
+        "*.css": "tailwindcss"
+    },
+    "editor.quickSuggestions": {
+        "strings": "on"
+    }
+}
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 43bbccc..e149802 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index f532e1f..85509c6 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@sveltejs/adapter-static": "^3.0.2",
     "@sveltejs/kit": "^2.5.20",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tailwindcss/typography": "^0.5.14",
     "@types/eslint": "^8.56.11",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.8.0",
@@ -39,5 +40,8 @@
   "dependencies": {
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0"
-  }
+  },
+  "trustedDependencies": [
+    "svelte-preprocess"
+  ]
 }
diff --git a/src/app.postcss b/src/app.css
similarity index 100%
rename from src/app.postcss
rename to src/app.css
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9430dc7..3b28e37 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
-<script>
-    import "../app.postcss";
+<script lang="ts">
+    import "../app.css";
 </script>
   
 <slot />
\ No newline at end of file
diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte
index ffdbd90..6c75d27 100644
--- a/src/routes/posts/+page.svelte
+++ b/src/routes/posts/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PostData } from './+page.js';
+	import type { PostData } from './+page.ts';
 
 	export let data;
 
diff --git a/src/routes/posts/_layout.svelte b/src/routes/posts/_layout.svelte
new file mode 100644
index 0000000..481e9dc
--- /dev/null
+++ b/src/routes/posts/_layout.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import "../../app.css";
+
+    export let title;
+    export let author;
+    export let date;
+</script>
+
+<div class="prose lg:prose-lg">
+    <h1 class="font-mono">{ title }</h1>
+    <ul>on: { date }</ul>
+    <ul>by: { author }</ul>
+    <slot/>
+</div>
\ No newline at end of file
diff --git a/src/routes/posts/hello-world/+page.md b/src/routes/posts/hello-world/+page.md
index ef2720a..750787b 100644
--- a/src/routes/posts/hello-world/+page.md
+++ b/src/routes/posts/hello-world/+page.md
@@ -2,6 +2,7 @@
 title: Hello World
 author: Jeff
 date: 2022-05-27
+layout: blogpost
 excerpt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget massa sit amet arcu varius lacinia nec quis lacus.
 ---
 
diff --git a/svelte.config.js b/svelte.config.js
index e0a20fb..a54df21 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -18,7 +18,10 @@ const config = {
 				rehypeAutolinkHeadings,
 			],
 			smartypants: { dashes: 'oldschool' },
-			layout: './src/routes/+layout.svelte',
+			layout: {
+				_: './src/routes/+layout.svelte',
+				blogpost: './src/routes/posts/_layout.svelte',
+			},
 		}),
 	],
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 13207cc..02b24d6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ['./src/**/*.{html,js,svelte,ts,md}'],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography')
+  ],
 }