diff --git a/package.json b/package.json
index 26de909..e9b5b41 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@astrojs/tailwind": "^2.1.3",
+    "@tailwindcss/typography": "^0.5.9",
     "astro": "^1.9.0",
     "tailwindcss": "^3.0.24"
   }
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..6b15770
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,20 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body class="font-sans">
+    <slot />
+  </body>
+</html>
diff --git a/src/pages/album.astro b/src/pages/album.astro
new file mode 100644
index 0000000..d40171b
--- /dev/null
+++ b/src/pages/album.astro
@@ -0,0 +1,41 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Button from "../components/Button.astro";
+import Card from "../components/Card.astro";
+import Footer from "../components/Footer.astro";
+import Jumbotron from "../components/Jumbotron.astro";
+import Navbar from "../components/Navbar.astro";
+
+export const name = 'Album';
+---
+
+<BaseLayout title={name}>
+  <Navbar title="Album" />
+
+  <Jumbotron title="Album example">
+    <p class="text-base leading-relaxed text-gray-500 sm:text-lg">
+      Something short and leading about the collection below—its contents, the
+      creator, etc. Make it short and sweet, but not too short so folks don't
+      simply skip over it entirely.
+    </p>
+
+    <div
+      class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1"
+    >
+      <Button shape="rounded" type="primary" text="Main call to action" />
+      <Button shape="rounded" type="secondary" text="Secondary action" />
+    </div>
+  </Jumbotron>
+
+  <div class="bg-gray-100">
+    <div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
+      <div
+        class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8"
+      >
+        {[...Array(9).keys()].map((_) => <Card />)}
+      </div>
+    </div>
+  </div>
+
+  <Footer />
+</BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9c19a8d..c62948f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,50 +1,26 @@
 ---
-import Button from "../components/Button.astro";
-import Card from "../components/Card.astro";
-import Footer from "../components/Footer.astro";
-import Jumbotron from "../components/Jumbotron.astro";
-import Navbar from "../components/Navbar.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+
+const title = "Bootstrap examples with Tailwind CSS"
+
+const examples = [
+  { title: "Album", url: "/album" }
+]
 ---
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
-  </head>
-  <body class="font-sans">
-    <Navbar title="Album" />
+<BaseLayout title="Bootstrap with Tailwind">
+  <div class="max-w-xl mx-auto py-10 prose">
+    <h1 class="text-center">{title}</h1>
 
-    <Jumbotron title="Album example">
-      <p class="text-base leading-relaxed text-gray-500 sm:text-lg">
-        Something short and leading about the collection below—its contents, the
-        creator, etc. Make it short and sweet, but not too short so folks don't
-        simply skip over it entirely.
-      </p>
-
-      <div
-        class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1"
-      >
-        <Button shape="rounded" type="primary" text="Main call to action" />
-        <Button shape="rounded" type="secondary" text="Secondary action" />
-      </div>
-    </Jumbotron>
-
-    <div class="bg-gray-100">
-      <div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
-        <div
-          class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8"
-        >
-          {[...Array(9).keys()].map((_) => <Card />)}
-        </div>
-      </div>
-    </div>
-
-    <Footer />
-  </body>
-</html>
+    <ul>
+      {examples.map(example => (
+        <li>
+          <a href={example.url}>{example.title}</a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</BaseLayout>
 
 <style is:global>
   .markup p {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 2839ff2..9997a63 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -29,6 +29,8 @@ module.exports = {
     },
   },
   plugins: [
+    require('@tailwindcss/typography'),
+
     plugin(({ addVariant }) => {
       addVariant("hocus", ["&:hover", "&:focus"]);
     }),
diff --git a/yarn.lock b/yarn.lock
index 9452dbd..91e9bbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -453,6 +453,16 @@
   dependencies:
     tsm "^2.1.4"
 
+"@tailwindcss/typography@^0.5.9":
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
+  integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@types/acorn@^4.0.0":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
@@ -1874,6 +1884,21 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 log-symbols@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-5.1.0.tgz#a20e3b9a5f53fac6aeb8e2bb22c07cf2c8f16d93"
@@ -2701,6 +2726,14 @@ postcss-nested@6.0.0:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.10:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"